반응형
티스토리 블로그를 운영하다 보면 글의 길이가 길어질수록 독자들이 원하는 정보를 찾기 어려워집니다. 이때 본문 목차 기능을 추가하면 독자들이 더 편리하게 글을 탐색할 수 있고, 동시에 검색엔진 최적화(SEO)에도 유리합니다.
이 글에서는 초보자도 쉽게 따라 할 수 있는 티스토리 블로그 자동 목차 설정 방법과, 특정 글에만 목차를 표시할 수 있는 수동 목차 설정 방법을 최신 HTML 코드와 함께 정리해 드리겠습니다.
목차
- 본문 목차 기능이 중요한 이유
- 티스토리 블로그 자동 목차 설정 방법
- HTML 코드 삽입 방법
- 작동 원리와 사용법
- 표시 오류 해결 방법
- 티스토리 블로그 수동 목차 설정 방법
- HTML 서식 저장 방법
- 사용 방법 및 오류 시 참고사항
- 자동 목차 vs 수동 목차, 무엇이 더 좋을까?
- 마무리 및 SEO 팁
1. 본문 목차 기능이 중요한 이유
- 긴 글을 단락별로 구분해 가독성이 향상됩니다.
- 사용자가 원하는 정보를 빠르게 찾을 수 있어 이탈률 감소 및 체류시간 증가 효과가 있습니다.
- Googlebot(구글 크롤러)이 글의 구조를 더 잘 이해해 검색 상위 노출에 유리합니다.
- 위키백과, 나무위키 등 대형 정보 사이트에서 항상 사용하는 기능이기도 합니다.
2. 티스토리 블로그 자동 목차 설정 방법
2-1. HTML 코드 삽입 방법
- 티스토리 관리자 페이지 → 꾸미기 → 스킨 편집 → HTML 편집 진입
- </body> 태그 바로 위에 자동 목차 HTML 코드를 붙여넣기
- 저장 후 적용
👉 글쓰기 에디터에서 제목1(H2), 제목2(H3), 제목3(H4) 태그를 사용하면 발행 시 자동으로 목차가 생성됩니다.
👉 [목차여기] 명령어를 입력하면 원하는 위치에 목차를 삽입할 수 있습니다.
2-2. 작동 원리
- 글 작성 시 제목 태그(H태그)를 기준으로 목차를 자동 생성
- 블로그 모든 글에 공통 적용
- 글 발행 후 자동으로 목차 박스가 표시됨
2-3. 오류 해결 방법
- 제목 태그가 없는 경우 목차 박스가 공란으로 표시됩니다.
- [목차여기] 오타 발생 시 자동으로 본문 상단에 표시됩니다.
- 모바일 웹에서도 표시되지만, 티스토리 앱에서는 작동하지 않음
3. 티스토리 블로그 수동 목차 설정 방법
자동 목차 대신, 특정 글에만 목차를 넣고 싶을 때는 수동 목차 설정을 활용하면 됩니다.
3-1. HTML 서식 저장 방법
- 티스토리 관리자 페이지 → 설정 → 콘텐츠 → 서식 관리
- 새로운 서식 작성 → HTML 모드 선택
- 목차 스크립트 코드 붙여넣기 → 저장
3-2. 사용 방법
- 글쓰기 에디터 상단 메뉴 → 서식 → 저장한 목차 불러오기
- 원하는 글의 제목을 제목1, 제목2, 제목3 태그로 지정
- 글 발행 시 해당 위치에 목차 자동 생성
3-3. 주의사항
- 여러 개의 스크립트를 삽입해도 가장 위에 있는 것만 작동
- 스크립트를 삭제하면 해당 글에서는 목차가 표시되지 않음
4. 자동 목차 vs 수동 목차, 무엇이 더 좋을까?
| 구분 | 자동목차 | 수동목차 |
| 적용 범위 | 블로그 전체 글 | 원하는 글만 선택 적용 |
| 편리성 | 한 번만 설정하면 자동 생성 | 필요할 때마다 적용 |
| 권장 대상 | 정보성·가이드성 글 위주 블로거 | 일기·사진 등 자유글 위주 블로거 |
| SEO 효과 | 높음 (구조화된 글 제공) | 중간 수준 |
결론:
- 정보 제공 블로그 → 자동 목차 추천
- 개인 일상 블로그 → 수동 목차 추천
5. 마무리 및 SEO 팁
티스토리 블로그에 본문 목차를 설정하면 독자 편의성과 SEO 두 가지 효과를 모두 누릴 수 있습니다.
- 자동 목차: 구조적인 블로그 운영에 적합
- 수동 목차: 선택적 적용에 적합
👉 본문 목차는 단순한 편의 기능이 아니라, 검색엔진 최적화(SEO)와 상위 노출을 위한 핵심 요소라는 점을 꼭 기억하세요.
반응형