티스토리 블로그에 목차 자동 생성하는 방법 (SEO + UX 개선)

✅ 왜 블로그 글에 목차가 필요한가?

• ✔ 글 길이가 길수록 독자의 이탈률 증가
• ✔ 목차는 콘텐츠 구조를 정리하고, 빠른 탐색을 가능하게 함
• ✔ Google SEO 기준에서도 **구조화 콘텐츠**가 가산점 대상

📌 목차 구성의 실질적 효과

• ✅ 체류시간 증가 → 광고 노출 기회 ↑
• ✅ 검색 노출 시 Rich Snippet(구조화 목록)으로 표현 가능
• ✅ 독자의 재방문율 상승 → 블로그 신뢰도 향상

🛠 목차 자동 생성 기본 구조 (HTML + JS)

① 목차 표시 위치 코드

<div id="toc-wrapper">
  <h3>📚 목차</h3>
  <ul id="toc"></ul>
</div>

② 자동 생성 스크립트

<script>
document.addEventListener("DOMContentLoaded", function () {
  const headers = document.querySelectorAll("h2, h3");
  const toc = document.getElementById("toc");

  headers.forEach((header, index) => {
    const id = "section-" + index;
    header.setAttribute("id", id);
    const li = document.createElement("li");
    const a = document.createElement("a");
    a.setAttribute("href", "#" + id);
    a.textContent = header.textContent;
    li.appendChild(a);
    toc.appendChild(li);
  });
});
</script>

📌 적용 위치:

• ✔ </body> 닫기 태그 바로 위
• ✔ 글 본문 중 상단에 목차 HTML 삽입

🎨 목차 스타일 꾸미기 (선택 사항)

<style>
#toc-wrapper {
  background: #f9f9f9;
  padding: 10px 15px;
  border-left: 4px solid #00aaff;
  margin-bottom: 20px;
}
#toc-wrapper h3 {
  font-size: 1.1em;
  margin-bottom: 8px;
}
#toc li {
  list-style: square;
  margin-left: 15px;
  font-size: 0.95em;
}
</style>

📈 SEO & UX 측면에서의 효과 요약

항목	SEO 측면	사용자 측면
구조화	검색 엔진이 콘텐츠 주제 명확히 파악	독자가 필요한 정보에 빠르게 접근
체류시간	높은 페이지 체류 = 신호 개선	읽을만한 글로 인식 → 이탈률 감소
광고 수익	노출 회수 증가	더 많은 영역에서 광고 접촉

⚠ 목차 생성 시 주의할 점

• ❌ <h1> 태그는 글 제목 1회만 사용
• ✔ <h2>, <h3>를 소제목 구조로 통일
• ✔ 너무 짧은 글엔 목차 생략해도 OK

🏁 마무리: 목차 하나로 SEO + 사용자 경험 동시 개선

목차는 단순한 '디자인 요소'가 아니라 검색 노출을 유도하고, 광고 수익을 높이는 구조적 장치입니다.

글이 1,500자 이상이라면 반드시 목차를 추가하세요. 읽는 사람도, 검색 엔진도 만족하는 콘텐츠가 됩니다. 🚀