SEO 글쓰기 팁 : 목차 TOC(Table of contents)

SEO 글쓰기 팁에 목차기능을 넣은건 h1~h6 태그의 중요성을 설명하고자 작성합니다.

 

문서는 깔끔하고 정리된 순서로 작성되어야 합니다.

제목을 정하고 소제목으로 내용을 정리하면 매우 깔끔하게 글이 완성될 수 있습니다.

 

아래의 목차는 a태그 설명에 포함되어있는 목차입니다.

https://hi098123-skin.tistory.com/19

 

왜 목차를 추천하는가?

아까 말했듯 h1~h6 제목태그 활용을 위해서입니다.

기계가 읽어 들이는 방식이 그대로 표현되면서도 사람이 읽기 편해지기 때문에 목차기능을 추천합니다.

 

목차기능을 적용하면 이점이 많이 있습니다.

 

1. 사용자가 읽기 쉽다

   = 사용자가 보기 편하고 좋은글 = 검색엔진의 최종 목표

2. 검색엔진도 읽기 쉽다

   = 높은 순위에 오르기 좋다.

3. 작성시 신경을 쓴다

   = 보통은 신경을 잘 안쓰게 되지만 좋은글을 위해 신경쓰기 좋다.

 

적용방법은 자세히 다루지 않습니다.

이 페이지에 적용된 목차는 직접 만든방식으로 작동되며 쉬운 방법은 라이브러리를 이용하는 방법입니다.

구글에 "toc.js"를 검색해서 자세히 알아보시길 바랍니다.

 

 

직접만든 방식

저는 JQuery 사용을 안하려고 직접만들었는데 대략적인 방식은 이렇습니다.

document.querySelectorAll('#contents h1,#contents h2,#contents h3,#contents h4')

1. querySelectorAll로 콘텐츠내 제목태그를 가져옵니다.
2. 순서대로 배치하고 부모 자식 관계를 만들어준후 ul태그를 이용해 목차를 표현하고
3. 제목태그에 각각 id를 부여했습니다.