▤ 목차
블로그 운영에서 검색엔진 최적화(SEO)와 사용자 경험(UX)을 고려할 때, 목차는 중요한 요소입니다.
목차는 글의 구조를 명확히 보여주고, 독자들이 원하는 정보를 빠르게 찾을 수 있도록 도와줍니다.
이번 가이드에서는 티스토리 블로그에 목차를 추가하는 방법을 쉽고 간단히 설명합니다.
티스토리 블로그에 목차 넣는 법 - SEO와 사용자 경험 향상을 위한 필수 설정
티스토리 목차 추가의 필요성
목차는 단순히 블로그 가독성을 높이는 도구가 아닙니다.
검색엔진이 글의 구조를 분석하는 데도 큰 도움을 줍니다.
특히, 길이가 긴 글일수록 목차를 제공하면 독자들이 더 오랜 시간 페이지에 머물 가능성이 높아집니다.
티스토리에서 목차를 구현하기 위해 HTML 및 CSS 코드 수정이 필요합니다.
하지만 걱정하지 마세요!
아래에서 단계별로 상세히 설명하겠습니다.
| 가제트 AI 로 퀄리티 높은 블로그 글 생성, 추천인 코드 9JRYSZV + 꿀팁 |
| 애드센스와 티스토리로 시작하는 부업의 세계 - 아백 강의 특가로 보는 법 |
| 티스토리 블로그에서 유튜브 동영상을 자동 재생하는 법, 활용 팁 |
1단계: 목차 스타일을 위한 파일등록 및 HTML, CSS 추가
티스토리 관리자 페이지에서 다음 단계를 따라 CSS를 수정합니다.
1. 스킨 편집으로 이동
2. 파일 관리자 진입
- 파일관리자 탭으로 이동합니다.
- 탭 하단에 있는 추가 버튼 클릭 후 아래 jquery.toc.min.js 파일을 추가합니다.
3. HTML 화면으로 진입
- 상단의 HTML 편집 누르고 아래 코드를 </head> 위에 붙여 넣습니다.
<!-- 목차 시작 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차 종료 -->
4. CSS 편집 화면으로 진입
- 상단의 HTML 편집을 누르고, CSS 탭으로 이동합니다.
- CSS 코드의 맨 하단에 아래 파일을 받아 안에 있는 코드를 복사해 붙여넣습니다.
위 코드는 목차의 글꼴, 크기, 색상 및 스타일을 설정합니다.
5. 변경 사항 저장
2단계: 목차 서식 추가를 위한 HTML 코드 생성
CSS 스타일 설정이 완료되면, 이제 목차의 기능을 추가하기 위한 HTML 코드를 설정합니다.
1. 콘텐츠 서식 관리로 이동
2. 새로운 서식 생성
이 코드는 글의 소제목(h2, h3, h4)을 자동으로 감지해 목차를 생성합니다.
3. 서식 저장
- 생성한 서식을 저장합니다.
3단계: 목차 서식 적용하기
1. 글쓰기 화면에서 서식 불러오기
2. 소제목과 목차 확인
- 작성한 글의 소제목이 목차에 올바르게 반영되었는지 확인합니다.
- 목차는 소제목 구조를 기반으로 하므로 h2, h3, h4 태그를 올바르게 사용해야 합니다.
참고: 코드 활용 방법
위에서 제공한 CSS 및 HTML 코드는 별도의 TXT 파일로 관리할 수 있습니다.
필요할 때마다 복사해서 사용할 수 있으니 코드를 따로 저장해 두는 것을 추천합니다.
마치며
목차는 블로그의 가독성을 높이고 SEO 최적화를 강화하는 데 필수적인 요소입니다.
위 가이드를 따라 티스토리 블로그에 목차를 추가하면, 독자와 검색엔진 모두에게 긍정적인 영향을 줄 수 있습니다.
코드가 어렵게 느껴질 수 있지만, 한 번 설정해 두면 지속적으로 사용할 수 있으니 지금 바로 적용해 보세요.
▼ 함께 보면 좋은 글 ▼
| 챗GPT 사용법 (블로그 글 1분만에 작성하는 방법, 프롬프트 제공) |
| 무조건 블로그 방문하게 만드는 제목 후킹 전략 29가지 |
| Chat GPT | 챗GPT시대 글쓰기 "글쓰기의 미래, 챗 GPT와 함께" |
