SEO를 위한 자동 목차 사용법! (블로그 스팟 글 템플릿 (구글 블로거), 티스토리 서식)


요즘 들어 블로그 시장에도 구글, 네이버 등 주요 포털들이 점점 SEO를 강화하는 추세입니다. 따라서 자동목차(목차 링크) 정도는 티스토리 서식, 구글 블로거 글 템플릿 등을 이용해서 사용하는 것이 효율적입니다. 전체적인 SEO 목차 사용법과 함께 블로그 이야기를 해보겠습니다. 

티스토리를 포기하고 모든 걸 제로베이스로 두고 블로그 스팟 템플릿, 테마(구글 블로그 스킨), HTML 편집부터 CSS까지 하려다보니 느껴지는게 왜 블로그스팟에는 눈에 띌 만한 파워블로거가 없는지 이해가 갑니다. 재밌는 것은 막상 만들어놓고 나면 굉장히 효율성이 높은데도 불구하고 프로그래머 출신들은 티스토리를 두고 블로그스팟을 키워야 할 이유가 지금까지는 없다보니 제대로 된 메뉴얼이 없는 것이 현실입니다. 

덕분에 하나하나 만들어야 되니 신경써야 될 게 한 두개가 아닙니다. 물론 지금 이 글을 보고 지금 스타일이 마음에 드시는 분은 그대로 사용하시면 됩니다. 이번에는 블로그 스팟 SEO를 위한 자동 목차를 최대한 가볍게 만들어 보겠습니다. 

아래에 보시는 것이 자동목차입니다. 자동목차란 무엇이냐? 한 마디로 말하면 링크된 소제목을 클릭하면 자동으로 해당 위치에 보내주는 역할을 하는 것입니다. 블로거 입장에서 광고를 그냥 뛰어넘는 목차가 그리 반가운 것은 아니지만 SEO에 좀 더 유리하게 평가한다는 말이 있으니 일단 당분간 사용을 해보도록 하겠습니다. 애드센스 승인에도 영향이 있을수 있으니 하는게 좋을듯 싶습니다. 

왜 따로 박스를 안 만들었을까 궁금하실 수도 있는데 굳이 넣는게 더 이쁜 것인지는 아직 잘 모르겠습니다. 냉정하게 말해서 SEO 때문에 만들긴 하지만 사용안 하는게 블로거 입장에서는 체류적인 면에서 훨씬 이득 아닌가 싶습니다. 아래 목차가 제목 H2로 만들어진 것으로 만약 H3로 맞추실 분이라면 아래 코드에서 H2를 전부 H3로 바꾸시기만 하면 됩니다. 


블로그 스팟 NOW!

블로그스팟 목차 사진입니다
블로그스팟 목차

목차 구경은 잠깐만 하시고 일단 잠시 블로그스팟 이야기를 하도록 하겠습니다. 기본적으로 이 포스팅은 저희 멤버들을 위한 메뉴얼이고 다른 분들도 블로그스팟이 어떨까 궁금하실테니 급하신 분이라면 목차를 클릭하시고 아닌 분이시라면 천천히 읽으시길 바랍니다. 

아마도 이 포스팅 작성 직후에 보는 분이라면 허접한 블로그스팟 테마 상태에 많이 실망하셨을 거라고 봅니다. 왜 무료 스킨이나 테마들이 많은데도 불구하고 그대로 냅두고 있는 것인가하면 속도 때문입니다. 최상의 속도와 SEO 모든 것을 만족시켜야하다보니 기본 스킨상태에서 HTML 언어를 좀 더 익히면서 서서히 바꾸고 있는 상황이라 솔직히 허접합니다. 

그리고 블로그스팟 테마(BLOGSPOT THEME) 경우는 절대적이지 않은 것이 검색의 80% 이상은 어차피 모바일에서 일어납니다. 현재 나와있는 스킨들 대부분이 모바일 보다는 피씨 위주라 모바일 쪽에서는 바꿔봐야 큰 의미가 없는 상황입니다. 현재 스킨은 콘템포 바탕이고 아래는 제작중인 엠포리오 바탕의 구글블로그 스킨 테마입니다. 


블로그스팟 테마 사진입니다
블로그스팟 테마

적용은 XML 업로드만 하면 되는데 아직 애드센스 광고도 달리기 전이고 서두를 필요는 없어보여서 천천히 진행할까 합니다. 엠포리오 스킨이 전체적으로 괜찮아 보이는데 뜻밖에도 이전 글, 다음 글 이 세팅에 문제가 있어서 일단 지켜보고 있는 중입니다. 한 번 만들면 쭉 써야하는 것이고 제가 배포하는데로 쓰게 될 테니 완성도가 올라갈때까지 좀 더 기다려주시기 바랍니다. 

잠깐 구글 블로거 (BLOGGER) 이야기를 잠깐하면 블로그스팟으로 트래픽을 만드는게 그리 쉽지는 않습니다. 현재 여러가지 방법으로 일단 트래픽을 확보하려고 하고 있지만 애드센스 승인하면서 트래픽을 확보하는 미션은 솔직히 쉽지 않네요. 

기존에 네이버 블로그, 티스토리 블로그 비교해도 그보다 훨씬 더 섬세한 포스팅이라야 통할 정도입니다. 이제는 조금씩 감을 잡고는 있지만 아직 애드센스 승인 전이고 애드센스 승인 이후에 본격적으로 포스팅을 해봐야 블로그스팟 지수를 올리는게 가능할 듯 싶네요. 물론 이 채널은 테스트용이라서 애드센스 승인되면 좋고 아니면 그냥 삭제할 채널이라 트래픽은 거의 1~2 자리 숫자가 다입니다만 3~4자리 숫자까지는 그렇게 티스토리 비교하면 힘들겠지만 그렇게 어렵지만은 않으니 너무 겁내지 않으셔도 된다는게 제 생각입니다. 

애초에 트래픽 올릴 걱정할 정도면 블로그스팟을 시작하지도 않았을겁니다. 문제는 5자리 숫자 이상의 트래픽인데 이 부분은 솔직히 긴가민가입니다. 블로그스팟 파워블로거를 추적해봐도 눈에 띄질 않으니 모든 것이 사실상 개척해야 되는 상황이라 데이터 수집에 최소 2~3개월을 걸릴 듯 싶습니다. 물론 애드센스 승인 포함입니다. 혹시나 이글을 보시는 초보 유저라면 이것은 확실하게 말할 수 있습니다. 

'세상에 불가능은 없다!' 

블로그스팟 글 템플릿이란?

티스토리 서식 사진입니다
티스토리 서식

티스토리에는 서식이라는 것이 있고 블로그 스팟에는 글 템플릿이 있습니다. 둘의 사용법이 약간 다른데 티스토리 서식은 서식으로 저장을 한 다음 불러서 쓰시면 됩니다. 아니면 아예 텍스트 문서를 만들어두고 HTML 로 들어가서 붙여넣기 하셔도 됩니다. 

티스토리가 블로그스팟 보다 글쓰기에서 좋은 점은 다양한 서식을 놓고 원하는 것중에서 선택해서 쓸 수 있습니다. 또 오타 등 자동수정 기능이 있다는 점도 블로그스팟에 비해서 훨씬 좋은 부분입니다. 

블로그스팟 글 템플릿 사진입니다
블로그스팟 글 템플릿

하지만 블로그 스팟은 글 템플릿을 통해서 목차를 불러올 수 있는데 다양한 스타일의 목차를 저장해두고 불러쓸 수 있는 반면에 블로그스팟 경우는 글 템플릿을 저장할 경우 자동으로 글쓰기 할 때마다 실행됩니다. 

서식, 글 템플릿 같은 것은 작은 차이지만 작업의 효율성을 위해서 나만의 루틴을 만드시는 것이 좋습니다. 자주 쓰는 서식 같은 경우는 내가 가장 쉽게 쓸 수 있는 방식으로 불러서 쓰시길 바랍니다. 

자동 목차 SEO 코드 

일단 현재 이 포스팅에 사용된 SEO 목차 코드입니다. 일단 목차코드와 간단한 HTML 코드를 설명하고 난 다음 자세한 사용법을 설명하겠습니다. 총 목차는 일단 10개로 만들어져 있으며 사용할 때 삭제해서 쓰시면 됩니다. 코드는 아래에서 텍스트 문서로 다운 받으시면 됩니다. 맨 위 두 칸과 목차 끝 1칸은 일부러 칸을 띄워 둔 이유는 광고가 들어올 공간 때문입니다. 개인 취향에 따라 편집하셔도 관계는 없습니다. 

자동 목차 HTML 코드

<br />
<br />
<ul>
-목차-
<li><a href="#첫번째 목차">첫번째 목차</a></li>
<li><a href="#두번째 목차" data-type="internal" data-id="#두번째 목차">두번째 목차</a></li>
<li><a href="#세번째 목차" data-type="internal" data-id="#세번째 목차">세번째 목차</a></li>
<li><a href="#4번째 목차" data-type="internal" data-id="#4번째 목차">4번째 목차</a></li>
<li><a href="#5번째 목차" data-type="internal" data-id="#5번째 목차">5번째 목차</a></li>
<li><a href="#6번째 목차" data-type="internal" data-id="#6번째 목차">6번째 목차</a></li>
<li><a href="#7번째 목차" data-type="internal" data-id="#7번째 목차">7번째 목차</a></li>
<li><a href="#8번째 목차" data-type="internal" data-id="#8번째 목차">8번째 목차</a></li>
<li><a href="#9번째 목차" data-type="internal" data-id="#9번째 목차">9번째 목차</a></li>
<li><a href="#10번째 목차" data-type="internal" data-id="#10번째 목차">10번째 목차</a></li>
</ul>
<br />
<h2 id="첫번째 목차">첫번째 목차</h2>
<h2 id="두번째 목차">두번째 목차</h2>
<h2 id="세번째 목차">세번째 목차</h2>
<h2 id="4번째 목차">4번째 목차</h2>
<h2 id="5번째 목차">5번째 목차</h2>
<h2 id="6번째 목차">6번째 목차</h2>
<h2 id="7번째 목차">7번째 목차</h2>
<h2 id="8번째 목차">8번째 목차</h2>
<h2 id="9번째 목차">9번째 목차</h2>
<h2 id="10번째 목차">10번째 목차</h2>

티스토리는 서식에 넣고 불러서 쓰시거나 아니면 지금 문구를 HTML에 복붙하신 다음 지우고 다시 글쓰기로 쓰시면 됩니다. 문제는 블로그 스팟인데 블로그스팟은 그냥 지우시면 링크가 사라져 버리는 아래 사용법을 따로 참고하시기 바랍니다. 목차 파일은 아래 구글 드라이브에 링크되어 있습니다. 


블로그스팟 목차 코드 사용법 

블로그스팟 글 템플릿 실행 사진입니다
블로그스팟 글 템플릿 실행

문제는 블로그스팟 유저는 글 템플릿에 저장해 놓으면 글쓰기를 하면 자동으로 위처럼 불러집니다. 티스토리는 그냥 쓰면 되는데 문제는 링크가 걸린 첫번째 목차 부분을 지우고 다시 써야 되는데 블로그스팟은 링크를 일일이 설정해야 하는 단점이 있어서 그냥 지우면 안 됩니다. 


블로그스팟 글 템플릿 수정 사진입니다
블로그스팟 글 템플릿 수정

구글 블로거 링크는 네이버 블로그, 티스토리 블로그와는 달리 링크 설정을 통해서 일일이 연결을 해 주어야 합니다. 그리고 링크가 걸고 나서 표시할 텍스트를 직접 써주는 수고로움이 필요합니다. 순서는 아래와 같습니다. 동영상을 먼저 보신 다음 하시면 조금 더 편하실 겁니다. 



1. 블로그스팟 접속 후 글쓰기를 하면 자동으로 목차가 불려옵니다.
2. 파란색(링크 색상 설정은 스킨마다 다름)으로 뜬 링크된 텍스트를 우클릭 한후 표시할 텍스트를 내가 원하는 것으로 바꾸면 됩니다. 제목은 지웠다가 다시 써도 자동으로 H2가 되도록 설정되어 있습니다.
3. 이제 구글 블로거 글 템플릿을 HTML 태그를 제외하고 원하는대로 바꿔서 자유롭게 쓰시면 됩니다. 

어려운 것은 아니지만 링크마다 일일이 설정해야 한다는 부분이 좀 어색할 뿐입니다. 여기서 한 가지 더 알아두셔야 할 것은 구글 블로거 업로드 시스템은 파일도 직접 업로드가 아니라 구글 드라이브(https://drive.google.com/drive/) 공유 기능을 통해서 링크 복사를 한 다음 링크로 연결해야 한다는 점입니다. 

블로그스팟 시스템 자체가 그냥 보면 굉장히 어려워 보이지만 알면 알수록 점점 편한 것이 큰 특징입니다. 스킨 테마도 그냥 무료 사이트에서 다운받아서 업로드만 해도 충분히 사용가능하고 애드센스, 구글 서치콘솔, 애널리틱스 연결도 거의 원클릭 수준으로 편합니다. 그 외 유튜브, 구글 드라이브 등 말 그대로 구글 생태계 전체가 연결되어 있는게 큰 특징입니다. 

블로그스팟 문제점이라면 네이버 뷰 노출이 바로 가장 큰 미션인데 이 부분 솔직히 아직은 자신할 수 없는 상황입니다. 아직 블로그스팟 자체가 파워유저들이 없다보니 폐쇄적인 네이버 서치어드바이저와는 비친화적일 수 밖에 없지 않나 싶네요. 하지만 불가능은 아니다라고 말해드릴 수는 있습니다. 

이 채널이 애드센스 승인과 함께 계속 남아있을지 모르겠지만 이 포스팅을 보시는 블로거 분들이라면 워드프레스, 티스토리, 네이버, 구글 블로그 어디든지 차이는 있지만 불가능한 것은 아니니 원하시는 결과를 꼭 얻으시길 응원합니다.  
내 사진

냥냥깜냥 작성

댓글 없음

아래의 댓글 입력을 클릭한 후 익명으로 댓글을 달아 주셔도 됩니다. 글 내용에 관한 질문도 환영합니다. 모든 댓글은 관리자의 승인을 받아야 보여집니다. 댓글을 달고 기다려 주세요.