SEO와 사용자 경험을 동시에 잡는 콘텐츠 구조화 전략
✅ 왜 목차가 필요한가?
- ✔ 글이 길어질수록 독자의 **이탈률이 증가**합니다.
- ✔ 목차는 사용자가 원하는 정보를 빠르게 찾도록 도와줍니다.
- ✔ Google SEO 기준에서 구조화된 콘텐츠는 평가 점수 ↑
특히 애드센스 수익형 블로그에서는 글의 체류시간, 탐색 편의성, 내부 클릭률 모두 중요한 요소이기 때문에 목차 삽입은 필수입니다.
📌 방법 1. 수동 목차 삽입 (HTML 앵커)
아래와 같은 형식으로 목차 → 본문 소제목 연결이 가능합니다.
✅ ① 목차 영역 코드
<div id="toc">
<h3>목차</h3>
<ul>
<li><a href="#section1">1. 티스토리 목차 필요성</a></li>
<li><a href="#section2">2. 수동 목차 코드 작성법</a></li>
<li><a href="#section3">3. 자동 목차 플러그인 대안</a></li>
<li><a href="#section4">4. 목차 삽입 시 주의사항</a></li>
</ul>
</div>
✅ ② 본문 제목에 앵커 ID 추가
<h2 id="section1">1. 티스토리 목차 필요성</h2>
<h2 id="section2">2. 수동 목차 코드 작성법</h2>
<h2 id="section3">3. 자동 목차 플러그인 대안</h2>
<h2 id="section4">4. 목차 삽입 시 주의사항</h2>
✅ ③ 결과 화면
목차에서 원하는 소제목을 클릭하면 해당 섹션으로 스크롤 이동합니다.
📌 방법 2. 자동 목차 생성 JS 코드 활용
HTML 코드 삽입이 익숙하다면 아래 스크립트 방식도 가능합니다.
✅ 자동 목차 생성 스크립트 예시
<script>
document.addEventListener("DOMContentLoaded", function () {
const headers = document.querySelectorAll("h2");
const toc = document.getElementById("toc-ul");
headers.forEach((header, index) => {
const id = "section-" + index;
header.id = id;
const li = document.createElement("li");
const a = document.createElement("a");
a.href = "#" + id;
a.innerText = header.innerText;
li.appendChild(a);
toc.appendChild(li);
});
});
</script>
<div id="toc">
<h3>목차</h3>
<ul id="toc-ul"></ul>
</div>
위 코드를 `` 영역에 삽입하면 자동으로 `
` 태그를 탐색하여 목차를 만들어줍니다.
📈 목차가 SEO와 수익에 미치는 영향
- ✔ 체류시간 증가 → 광고 노출 기회 증가
- ✔ 페이지 스크롤 증가 → 사용자 행동지표 개선
- ✔ 구조화된 콘텐츠로 검색 노출 가능성 상승
⚠ 목차 사용 시 주의사항
- ❌ 너무 많은 항목은 오히려 혼란 (3~7개 적정)
- ✔ 콘텐츠 내용과 정확히 일치하는 소제목으로 구성
- ✔ 제목은 숫자 + 키워드 형태가 가장 효과적
🏁 마무리: 목차는 블로그의 내비게이션이다
사용자는 정보에 빨리 도달하길 원하고, 검색엔진은 체계적인 글을 선호합니다.
목차를 넣는 순간, 블로그는 '일기'가 아닌 '정보 콘텐츠'가 됩니다.
오늘부터 블로그에 목차 삽입을 기본 구조로 만들고, 더 나은 검색 노출과 수익을 경험해보세요. 🚀