티스토리 블로그 목차 생성 방법 과 이유

안녕하세요 알쓸지 입니다. 

티스토리 블로그를 보다 보면 목차를 만들어서 사용하는 분들이 많이 있습니다. 

목차를 생성하는 이유를 알려드리겠습니다. 

 

<목차>

1. 목차 생성 이유

     1) SEO

     2) 글의 흐름 파악에 도움

     3) 다음 상위 노출

2. 목차 생성 방법

     1) 목차 만들기

     2) 목차 태그

     3) HTML 수정

   

 

728x90

1. 목차 생성 이유

1) SEO

구글 SEO에 따르면 목차 생성은 구글 상위 노출에 도움이 된다고 합니다. 

우리에게 중요한 포인트는 바로 상위 노출 가능성에 도움이 되는 부분입니다. 

SEO에 직접적인 영향을 주는 건 아니기 때문에 글을 쓰는 작성자의 선택 사항으로 볼 수 있습니다. 

목차를 생성하게 되면 글을 읽는 방문자에게 글의 흐름을 한 번에 파악할 수 있게 제공해 체류시간을 올릴 수 있고 HTML을 활용하기 때문에 구글 봇에게 목차의 위치를 정확하게 알려줘 페이지를 좀 더 쉽게 이해할 수 있도록 도움을 줄 수 있습니다. 

 

 

2) 글의 흐름 파악에 도움

목차 생성은 짧은 글보다는 내용이 긴 정보성 글에서 많은 장점을 가지고 있습니다. 

특히 많은 텍스트가 있는 글에서 내가 원하는 정보의 위치를 서두에 알 수 있다는 점은 페이지 이탈률을 크게 감소시키고 체류 시간을 늘리는데 도움이 됩니다. 

천자 미만의 짧은 글에서는 큰 효과가 없기 때문에 목차 생성이 오히려 어색함을 줄 수 있으니 생략하는 것을 권합니다. 

 

3) 다음 상위 노출

티스토리는 다음 사이트 내에서 기본 검색됩니다. 

다음에서는 기본적으로 사진이 많고 검색 키워드가 반복되어 들어갈 때 상위 노출 되는 경향이 매우 강하게 나타난다고 합니다. 

이처럼 특정 키워드를 반속 할 수 있는 방법이 목차 생성입니다. 해당 키워드를 목차에 자연스럽게 넣어 반복할 수 있기 때문에 다음 상위 노출에 도움이 됩니다. 

 

2. 목차 생성 방법

1) 목차 만들기

목차를 만들고 글을 쓰면 좋겠지만 사실 계획대로 되지 않는 것이 글쓰기입니다. 

우선 글을 작성하고 나서 제목에 맞춰 목차를 작성합니다. 

티스토리-목차

 

2) 목차 태그

목차는 HTML의 <h1> ~ <h4> 태그를 기준으로 리스트업해 목록을 만든다.

티스토리 글쓰기 화면은 "제목" 기능을 지원한다. 제목은 "제목 1"부터 "제목 3"까지 사용할 수 있습니다. 

HTML 코드 <h2> ~ <h4>로 변환됩니다. 

티스토리-제목

 

반응형

3) HTML 수정

HTML에서 링크 이동은 <a> 태그와 href 속성을 이용합니다. 

href 속성값에 #id 이름(속성 값)을 입력하면 클릭 시 'id 이름'이 있는 태그 쪽으로 이동을 합니다. 

'id 이름'은 HTML 문서에서 유일하게 하나만 있어야 합니다. 

티스토리 블로그 글쓰기는 HTML 모드를 지원하기 때문에 위의 <a> 태그와 href 속성을 이용해 티스토리 블로그 글에 목차를 만들 수 있습니다. 글머리에 목차를 목록을 만들고 목차가 이동할 곳을 찾아 id와 id값을 입력하면 됩니다. 

매 글마다 해줘야 해서 번거롭기는 합니다. 

HTML에서 아래 표시한 것처럼 수정하시면 됩니다. 

 

티스토리-html수정

나머지 내용들도 모두 같은 방식으로

목차 쪽에는 <a href="#a1">  ~   </a>  

                   <a href=<#a2"> ~ </a>

이런 식으로 목차 목록들 앞에 a1, a2, a3 등으로 숫자를 늘려가면서 붙여주면 됩니다. 

다른 번호로 작성하셔도 상관없습니다. 

다만 이동할 제목 앞에 id 랑 같게만 설정하시면 됩니다. 

이동할 목록 앞에는 id="a1"과 같이 목차에 맞춰서 입력해 주시면 됩니다. 

티스토리-html

 

오늘은 티스토리 블로그에서 목차를 만드는 방법을 알려드렸습니다. 

다들 목차를 이용해서 구독자들이 좀 더 편하게 글을 읽을 수 있게 하셨으면 좋겠습니다.