구글 SEO 최적화를 위한 목차 생성하기 (실제사례有)

지난 포스팅에서 글쓰기 소재를 발굴하고, 타 게시물을 분석하여, SEO에 최적화된 글쓰기를 하는 방법을 소개하였다. 그 결과물로 '부여여행'을 소개하는 게시물을 작성하였다. (부여 가볼만한 곳 베스트 10, 놀며, 쉬며, 먹으며)

처음에는 목차가 없었는데, 그러다보니 스크롤을 끝까지 내려야만 모든 여행지를 확인 가능하다는 불편함이 생겼다. 목차가 있다면 서두에서 개괄적인 내용을 볼 수 있다는 장점이 있었다. 그래서 바로 목차를 넣어 포스팅을 보완했다. 이번 포스팅에서는 구글 SEO 관점에서 목차 생성의 장점을 소개하고, 티스토리 블로그에서 목차를 생성하는 방법을 소개하고자 한다.

목차
1. 목차 생성의 장점
2. html에서 목차 생성하기

1. 목차 생성의 장점

목차를 생성할 경우, 포스팅의 가독성이 높아지는 한편 구글 봇도 해당 페이지를 잘 이해하게 된다는 장점이 있다. 목차 생성의 구체적인 장점은 아래와 같다.

독자로 하여금 글의 전개를 예상할 수 있다
내부링크를 활용해 원하는 내용으로 바로 이동시킬 수 있다
구글 Robot이 해당 페이지를 더 잘 이해하게 된다
구글 검색결과에 목차가 사이드링크로 노출될 수 있다

이전 포스팅에서도 언급했듯이, 구글은 독자 중심으로 컨텐츠를 추천하기 때문에 잘 읽히는 글을 선호한다. 그래서 가독성이란 것이 SEO의 정량적인 수치는 아니지만, 근본적으로 독자가 글을 읽을 확률을 높여주어 포스팅에 체류하는 시간을 길게해준다는 장점이 있다.

게다가 목차는 html에서는 태그를 사용하므로 일반 본문과는 구분이 된다. 이는 '여기가 목차에요'라고 팻말을 세워두는 셈이고, 구글 봇으로 하여금 페이지를 더 잘 이해하도록 만든다. 이를 활용하여 구글 검색결과에 목차가 링크로 노출이 되게끔 설정을 할 수 있다

2. html에서 목차 생성하기

목차를 생성하는 방법에는 html 모드를 이용하여 직접 코드를 작성하는 방법과 플러그인을 사용하여 목차를 삽입하는 방법이 있다. 플러그인을 사용하는 방법은 별도로 소개하고, 여기서는 직접 코드를 활용하는 방법을 소개한다.

a(anchor) 태그 설명

목차를 생성할 때는 a태그를 사용한다. a는 archor(닻)의 약어로 앵커 태그라고 불린다. a태그는 문서를 연결할 때 사용하는 태그로 뒤에 href, title, target 등의 속성과 함께 쓰인다. 그 중에서도 href와 함께 쓰여 연결할 주소를 나타낸다

<a href = "(연결할 주소)"> (링크를 삽입할 텍스트) </a>

티스토리에서 a 태그 활용하기

티스토리에서는 서식 기능을 활용하여 목차를 삽입하면 편리하다. 서식관리는 관리페이지에서 [콘텐츠] - [서식관리]를 통해 설정할 수 있다.

서식은 상단부에 입력할 목차 태그와 연결될 위치에 삽입할 도착 태그 총 2가지를 작성해야 한다. 목차 태그에서는 #1, #2, #3 등으로 위치를 만든 뒤에 도착태그에서 id="1", id="2", id="3" 등으로 대응시켜 링크를 삽입한다. 구체적인 코드 블럭은 아래와 같다.

1) 목차 태그

<p><b>목차</b><br> 
  <a href="#1">1. 목차 내용</a><br> 
  <a href="#2">2. 목차 내용</a><br>
  <a href="#3">3. 목차 내용</a><br>
  <a href="#4">4. 목차 내용</a></p>
<p></p>

2) 도착 태그