hi098123 Tistory Tip

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를 부여했습니다.

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 한 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.

링크 공유는 가능합니다. 만약, 본문 공유 시 링크 공유를 해주세요

댓글 0개