승인에 유리한 티스토리 목차 설정법(SEO, 사용자 경험)

목   차

• SEO에 유리한 목차 구조 만들기
• 방문자 편의와 체류시간 높이기
• 목차가 꼭 필요한 글은 어떤 글일까?
• 티스토리 목차 설정 방법
• 초보자가 자주하는 목차 실수와 주의사항

블로그 SEO와 목차 설정의 중요성을 표현한 이미지입니다.

 

티스토리 블로그에 목차를 넣는 것은 애드센스 승인에 도움이 되는 SEO 전략이자, 방문자 편의를 높이는 사용자 경험 개선 방법입니다. 특히 클릭하면 자연스럽게 해당 위치로 이동하는 부드러운 효과까지 함께 적용하면 블로그 완성도가 한층 높아집니다. 초보자도 따라 할 수 있도록 하나하나 자세히 설명드릴게요.

SEO에 유리한 목차 구조 만들기

블로그 목차는 단지 보기 좋게 만드는 것이 아니라, 검색엔진이 글의 구조를 더 잘 이해하도록 도와주는 도구입니다.
예를 들어, 구글이나 네이버 같은 검색엔진은 블로그 글을 읽을 때 ‘이 글이 어떤 내용을 담고 있나’를 파악합니다. 그런데 목차가 정리돼 있으면, 검색 로봇이 글 내용을 더 정확하게 분석하고, 검색 결과에 ‘하위 항목’이 노출될 가능성도 올라갑니다.

또한 목차와 제목이 논리적으로 연결되면, 검색 결과에서 사용자가 내용을 미리 보게 되는 확장 스니펫(하위 링크)으로 보일 수 있어 클릭률이 더 올라갑니다.

요약하자면, 목차는

• 구글이 글을 더 잘 이해하도록 돕고
• 더 많은 검색 유입을 만들고
• 애드센스 승인 기준 중 하나인 ‘논리적인 글 구성’ 도 충족시켜 줍니다.

특히 티스토리 블로그처럼 구조화 기능이 제한적인 플랫폼에서는, 직접 목차를 활용해 논리 흐름을 명확히 보여주는 것만으로도 경쟁력이 될 수 있습니다.

방문자 편의와 체류시간 높이기

많은 블로거가 글을 처음부터 끝까지 읽어주길 바라지만, 대부분의 방문자는 필요한 부분만 빠르게 보고 싶어 합니다.
이때 목차가 있으면, 한눈에 글의 전체 내용을 파악하고 원하는 항목을 빠르게 클릭해 이동할 수 있습니다.

특히 스마트폰처럼 화면이 좁은 기기에서는, 긴 글을 끝까지 스크롤하는 것이 불편할 수 있는데요, 목차는 방문자의 시간을 절약해 주는 친절한 길잡이가 됩니다.

그리고 목차 항목을 클릭했을 때, 바로 ‘뚝’ 이동하는 것이 아니라 부드럽게 자연스럽게 스르륵 이동된다면 더욱 편리하고 전문적인 느낌까지 줄 수 있습니다.

이처럼 목차는 방문자의 이탈률을 낮추고, 체류시간을 늘리며, 블로그 신뢰도를 높여주는 핵심 요소입니다.

하지만 중요한 점이 하나 있습니다.
모든 글에 목차를 무조건 넣는 것이 능사는 아닙니다.

• 글이 짧고 단일 주제를 다룰 때는 오히려 흐름을 끊을 수 있고,
• 소제목이 1~2개 이하인 경우에는 목차가 과하게 느껴질 수 있습니다.

목차가 꼭 필요한 글은 어떤 글일까?

📌 목차는 글의 길이, 구성, 정보량에 따라 선택적으로 활용하는 것이 좋습니다.
아래와 같은 경우에는 목차를 반드시 적용하는 것이 권장됩니다:

✅ 다음과 같은 글에서는 목차가 효과적입니다:

• 1,500자 이상의 장문 포스팅
  예: “해외여행 준비 가이드”, “블로그 수익화 방법 총정리”
• 소제목이 3개 이상 있는 글
  예: “티스토리 수익모델 3단계”, “프리랜서 세금 처리법 안내”
• 제품 비교·가이드·순서형 글
  예: “갤럭시 시리즈 비교”, “애드센스 가입부터 승인까지 순서”
• 키워드 중심 검색 유도형 콘텐츠
  예: “서치콘솔 설정법”, “카카오뷰 채널 만들기 방법”

이런 유형의 글은 정보가 많아 구조화가 필요하고, 목차를 통해 방문자가 원하는 정보를 빠르게 찾을 수 있어 체류시간과 신뢰도를 동시에 끌어올릴 수 있습니다.

티스토리 목차 설정하는 방법 (부드러운 이동 포함)

이제 실제로 티스토리 블로그에 목차를 설정하는 방법을 차근차근 설명드릴게요.

1단계: 소제목에 ID 붙이기 (앵커 태그 만들기)

글의 각 소제목에 id를 붙이면, 그 id를 기반으로 목차에서 해당 위치로 이동할 수 있게 됩니다. 이걸 앵커(anchor) 태그라고 부릅니다.
예시는 다음과 같습니다:

<h2 id="seo">SEO에 유리한 목차 구조 만들기</h2>
<h2 id="ux">방문자 편의와 체류시간 높이기</h2>
<h2 id="toc">티스토리 목차 설정하는 방법</h2>

2단계: 목차 HTML 작성하기

글 상단에 아래와 같은 형태로 목차를 작성하세요.

<ul>
<li><a href="#seo">SEO에 유리한 목차 구조 만들기</a></li>
<li><a href="#ux">방문자 편의와 체류시간 높이기</a></li>
<li><a href="#toc">티스토리 목차 설정하는 방법</a></li>
</ul>

이렇게 하면 목차를 클릭했을 때, 해당 소제목 위치로 이동합니다.

3단계: 부드럽게 이동되도록 스타일 설정하기 (style 태그)

이제 중요한 포인트!
위 목차는 기본적으로 ‘뚝’ 하고 바로 이동합니다. 이걸 더 자연스럽고 부드럽게 바꾸기 위해 CSS 스타일 코드를 추가합니다.

style 태그는 블로그 글에 디자인이나 움직임 효과를 주는 HTML 태그입니다.
아래 코드를 글 맨 아래나 목차 위에 추가해 보세요:

<style>
html {
scroll-behavior: smooth;
}
</style>

이렇게 하면 목차 항목을 클릭했을 때, 스크롤이 스르륵 부드럽게 내려가는 효과가 적용됩니다.
이것만으로도 블로그의 완성도가 한 단계 올라가죠!

4단계: 목차를 박스로 감싸고 가운데 정렬하는 방법

목차는 단순한 리스트보다 디자인적으로 구분된 박스 형태로 만들면 훨씬 깔끔하고 전문적인 인상을 줍니다.
또한, 가운데 정렬까지 적용하면 블로그 본문에서 눈에 잘 띄어 사용자 시선을 효과적으로 끌 수 있습니다.

아래는 초보자도 쉽게 사용할 수 있는 목차 박스 HTML 예시입니다:

※ 현재 이 글에 적용된 목차 예시입니다.
<!-- "목차" 텍스트만 가운데 정렬 -->
<div style="text-align: center; font-weight: bold; font-size: 16px; margin-bottom: 10px;"> <h2 data-ke-size="size26">목&nbsp; &nbsp;차</h2>
</div>
<!-- 목차 박스 전체 -->
<div style="border: 1px solid #ccc; padding: 15px; background-color: #f9f9f9; border-radius: 6px;"> <ul style="margin: 0; padding-left: 20px;" data-ke-list-type="disc">

🔎 참고 팁

• 목차는 글의 핵심 구성 요소이므로 <h2>로 설정하는 것이 좋습니다.
• 배경색은 #f9f9f9 외에도 원하는 색상으로 자유 변경 가능
• 이 박스는 티스토리 에디터의 HTML 모드에서 붙여 넣으면 바로 적용됩니다.
• 목차 태그를 tip.txt 같은 파일명으로 메모장에 저장하여 필요할 때마다 나만의 템플릿으로 사용하세요.
• 미리 보기에서는 목차 작동이 안 보일 수 있으니 비공개로 발행 후 확인하세요

초보자가 자주 하는 목차 실수와 주의사항

초보 블로거가 자주 하는 실수들도 함께 짚고 넘어가면 좋습니다:

❌ h1 태그를 목차로 사용하는 실수
→ h1은 페이지 제목을 위한 태그입니다. 글 제목 외에는 사용하지 말고, h2부터 목차 구성에 사용하세요.

❌ id 값 중복
→ 목차에서 이동할 대상이 되는 id는 페이지 안에서 고유해야 합니다. 중복되면 링크가 정상 작동하지 않습니다.

❌ 항목 수가 지나치게 많음
→ 10개 이상 소제목이 있는 경우, 목차 자체가 너무 길어져 오히려 가독성을 해칠 수 있습니다. 이럴 땐 요약 목차 또는 접는 목차 방식을 고려하세요.

❌ 목차와 본문 내용 불일치
→ 목차에서 클릭한 항목과 실제 본문 내용이 다르면 방문자는 혼란을 느낍니다. 제목, 순서, 용어를 일치시키는 것이 중요합니다.

✅ 정리하면:

• h2~h3 구조로 정리하고
• id는 중복 없이 간결하게
• 항목 수는 5~7개 내외 유지가 이상적입니다.

티스토리 블로그에 목차를 설정하면 글의 구조가 명확해지고, 방문자의 체류시간도 길어집니다. 특히 부드러운 스크롤 이동 효과까지 함께 넣는다면, 블로그의 전문성과 신뢰도가 더욱 높아지며 애드센스 승인에도 긍정적인 영향을 줍니다.

단, 모든 글에 무조건 목차를 넣기보다는, 글의 길이와 소제목 개수에 따라 적절히 사용하는 것이 더 효과적입니다.
오늘부터 하나씩 직접 적용해 보며 나만의 글 구성 노하우를 쌓아보세요!

📌 참고로, 소제목이 너무 많을 경우에는 ‘요약 목차’나 ‘접는 목차’ 같은 다양한 구성 방식도 활용할 수 있는데요,
이 부분은 추후 포스팅에서 더 자세히 알려드릴 예정이니 기대해 주세요!