본문 바로가기

HTML 편집 없어도 티스토리 스킨 변경 쉽게 하는 방법

gracenmose 2021. 8. 19.

티스토리 스킨 이야기를 하다보니 생각난게 있어서 이번 글에서는 HTML 편집을 하나도 하지 않고 스킨을 마음놓고 바꿀 수 있는 방법을 설명해 봅니다. 나름 쉽게 적는다고 노력하고 있는데, 어려우신 분은 공부를 조금 더 하신 후 다시 이 글을 보시면 이해가 더 쉬워지실 겁니다.

 

티스토리 스킨 변경이 두려운 이유?

티스토리의 장점은 스킨의 HTML을 자유롭게 변경해서 나만의 사이트 디자인을 할 수 있다는 점입니다. 하지만 그런 것을 할 줄 모르는 사람에겐 너무 어렵게 느껴지기도 하겠죠. 티스토리에선 모두 커스텀을 하라고 권장하진 않습니다. 또한 기본 제공되는 스킨 모습 그대로 써도 사용하는데 아무 문제 없기도 합니다.

 

스킨 변경이 두려운 이유는 <스킨편집 - HTML 편집> 메뉴로 이동해서 무언가 해 줘야 한다고 설명되는 것들이 많아서죠. 구글 서치콘솔 등록, 구글 애널리틱스 등록은 물론이고 애드센스 승인 받기 위한 코드 등록하기 위해서는 해당 메뉴에 들어가서 외계어처럼 보여지는 코드에서 위치를 찾아 넣어야 하니까요.

 

카카오에서 티스토리에 신경을 많이 써주는 것 같지는 않지만, 그래도 기본적인 툴은 아주 잘 만들어 놨습니다. 다만, 구글도 그렇고 카카오도 그렇고 그 기능에 대한 설명이 친절하지 않아서 좀 알고 봐야 이해가 쉽다는 것이죠. 

 

티스토리에서 충분히 좋은 툴을 다 만들어 뒀습니다. 티스토리 기본 제공 스킨들 역시 아무 설정을 건드리지 않아도 충분히 사용하기 좋게 만들어져 있죠. 

 

그럼, HTML 편집 없이 어떻게 스킨 변경하는지 설명하도록 하겠습니다.

 

 

스킨 변경 전 준비사항

플러그인에서 설정해 두어야 할 것

스킨 변경을 위해 HTML 코드 복사하라는 글들이 아주 많죠. 그때 복사해 두라는 코드는 구글 서치콘솔, 네이버 서치어드바이저, 구글 애널리틱스, 애드센스 코드입니다. 하지만, 아래 준비사항만 제대로 해 두면 그걸 해 둘 필요가 없습니다. 

 

먼저 해 두어야 할 것은 플러그인 설정을 올바르게 하는 것입니다. 관리자 - 플러그인으로 가서 아래 3개를 제대로 설정해 두어야 합니다.

제대로 해 놓아야 할 플로그인 3개

 

  • 구글 서치콘솔 : 서치콘솔에서 사용할 구글 계정 연결만으로 설정이 끝남 
  • 구글 애널리틱스 : 애널리틱스 세팅을 하면 나오는 추척 ID만 해당 플러그인 설정에서 넣으면 됨
    애널리틱스
  • 메타 태그 등록 : 해당 플러그인 설명이 '스킨 변경없이' 메타 태그 등록할 수 있다는 것임. 네이버 서치어드바이저 등록할 때 사이트 소유건 확인을 위한 코드를 아래와 같은 식으로 입력해 둠
    메타 태그 등록

 

음. 어렵나요? 스킨 변경을 쉽게 하고 싶으신 분은 어려워도 일단 위 3개는 올바로 설정해야 합니다. 새 블로그를 한다면 처음부터 HTML 편집 들어가지 말고 플러그인만으로 서치콘솔, 애널리틱스, 네이버 메타 태그 설정해 두면 좋습니다. 

 

지금 블로그에 저 플러그인으로 해 둔게 아니면 HTML 편집으로 하셨을테니, 번거롭지만 그곳에서 저 플러그인에 넣어야 할 코드는 직접 가져와서 작업 한 번 해 줘야 합니다.

 

3개의 플러그인에 올바른 정보를 다 입력해 두면, 스킨을 하루에 열번 바꿔도 위 서비스를 위한 메타태그는 HTML에 저절로 반영이 됩니다.

 

애드센스 코드는?

애드센스 코드가 핵심인 분들도 많죠? <head> ~ </head> 사이에 아무곳이나 복사해 붙여 넣기만 해도 되는데도 두려운 바로 그것..

 

하지만 티스토리에서 해 주는 기능이 그렇게 신뢰가 안 가나요? 애드센스 수익 보시는 분들은 광고 위치 선택을 위해서 <관리자 - 수익 - 애드센스 관리>에서 애드센스 계정 연동해 두셨지요?

 

애드센스 연동 계정

여기서 연동 버튼을 눌러 계정은 연결해 주기만 하면, 애드센스 광고를 띄우기 위해서 넣으라고 하는 코드는 알아서 자동으로 올바른 위치에 들어갑니다. 

 

HTML로 넣으면 한 번 더 들어가는 것 밖에 되지 않습니다. 연동만 하면 끝입니다. HTML 편집 전혀 필요 없어요. 그런데 애드센스 페이지에서 하라니까 다 하는거죠. 

 

(이건 아는 사람에게만 보이는 이야기. 아쉬운 점은 애드센스에서 최근 공지한 새로운 애드센스 코드, 즉 crossorigin 이라는거 들어간 코드가 아닌 과거 코드 형태로 들어간 것이라는 것이네요. 생각난 김에 카카오에 건의해야겠군요)

 

준비를 마치면? 스킨 변경은 언제든 쉽게

위에서 설명한 준비를 마치면, 이제 스킨은 바꾸고 싶을 때 그냥 바꾸면 됩니다. 스킨 변경 메뉴 들어가서 바꾸려는 스킨 선택해서 적용 누르면 끝.

 

애드센스 연동하신 분, 스킨 바꾼 후 바로 블로그 확인해 보면 본문 상단 광고 잘 뜨는거 보실 수 있습니다. 서치콘솔 플러그인 해 두신 분, 여전히 크롤링 잘 되는거 보실 수 있습니다.

 

네이버? 유입이 생겨야 확인이 될텐데 일단 사이트 오너 인증 메타 태그는 잘 들어가 있습니다. 애널리틱스도 들어가보면 유입 분석 잘 되고 있는 것 확인 가능할 겁니다.

 

티스토리에서 저리 잘 만들어 놓은 플러그인만 잘 활용해도 스킨 변경의 어려움은 제로가 됩니다. 

 

오늘 설명한 설정들을 해 두면 초보자가 HTML 편집으로 들어가서 할 것은 2개 남습니다. 하나는 블로그가 어느정도 성장하면 애드센스에서 나타나는 '일치하는 콘텐츠' 코드 넣기, 다른 하나는 SNS 공유 버튼 넣은 'Addthis' 기능. 둘 다 필수는 아니니 크게 신경쓸 것은 없습니다.

 

위 설정은 신규 블로그 세팅할 때 처음부터 저렇게 해 두면 훨씬 간편하니 블로그 초반 세팅에 참조하시기 바랍니다.

 


 

구글 애드센스 일치하는 콘텐츠 넣기 - 검색 키워드를 챙겨야 하는 이유

최근 키워드의 중요성 및 검색 유입을 챙겨야 하는 것을 포스팅 해 왔었습니다. * 참조글: 티스토리 구글 검색 안 될 때, 구글 서치 콘솔 확인 필수 * 참조글: 키워드 선정에 좋은 사이트 썸트렌드

gracenmose.tistory.com

 

블로그에 SNS 공유버튼 추가하는 방법 ft. Addthis

블로그의 유입을 조금이라도 더 늘릴 수 있는 방법 중 하나는 내 블로그의 콘텐츠를 누군가 SNS로 공유를 해서 들어오는 외부 유입이 있습니다. 티스토리의 플러그인에서도 지원하는 기능이 있

gracenmose.tistory.com

그리드형(광고전용)

댓글