티스토리 블로그 본문 자동 목차 설정 방법(2025년 초간단 3분)

티스토리 블로그를 운영하며 검색엔진 상위 노출을 꿈꾸는 블로거라면, 본문 자동 목차는 필수 기능입니다.

긴 글을 체계적으로 정리하고, 방문자의 체류 시간을 늘리며, 구글, 네이버, 다음 검색엔진 최적화(SEO)에 기여하는 이 기능은 블로그의 품질을 한층 높여줍니다. 저는 수익형 애드센스 블로그 전문가로서, 지난 5년간 티스토리 블로그를 운영하며 검색엔진 상위 노출을 위해 수많은 시행착오를 겪었습니다. 처음 블로그를 시작했을 때, 복잡한 HTML/CSS 편집에 좌절했던 기억이 생생합니다. 하지만 이제는 초보자도 쉽게 따라 할 수 있는 가장 간단하고 최신화된 자동 목차 설정 방법을 발견했고, 이를 여러분과 공유하고자 합니다. SEO 최적화와 방문자 경험을 동시에 잡는 방법을 알려드립니다. 오늘은 티스토리 블로그 본문 자동 목차 설정 방법(2025년 초간단 3분)을 알려드릴테니 주목 하세욧!

티스토리 블로그 본문 자동 목차 설정 방법(2025년 초간단 3분)

 

---

목차의 중요성과 SEO 효과

목차(Table of Contents)는 블로그 게시물의 구조를 체계적으로 정리해 방문자가 원하는 정보를 빠르게 찾도록 돕는 도구입니다. 특히 구글, 네이버, 다음 같은 검색엔진은 구조화된 콘텐츠를 선호합니다. 구글봇이나 네이버 웹마스터 도구는 H태그(H1, H2, H3 등)를 기반으로 콘텐츠의 계층 구조를 파악하며, 이는 검색엔진 상위 노출에 직접적인 영향을 미칩니다.

목차의 주요 이점은 다음과 같습니다:

• SEO 최적화: H태그를 활용한 구조화로 검색엔진이 콘텐츠를 더 잘 이해하고 높은 점수를 부여.
• 사용자 경험(UX) 향상: 방문자가 필요한 정보를 빠르게 찾아 이탈률 감소, 체류 시간 증가.
• 구독자 증가: 깔끔한 콘텐츠 구조는 방문자의 신뢰를 얻어 구독 전환율을 높임.

이 가이드는 티스토리 블로그 본문 자동 목차 설정 방법을 초보자도 쉽게 따라 할 수 있도록 단계별로 설명하며, 수익형 블로그 운영에 최적화된 팁을 제공합니다.

---

1. 블로그 본문 자동 목차 설정 방법

티스토리 블로그 본문 자동 목차는 한 번의 설정으로 모든 게시물에 자동으로 목차를 생성하는 강력한 기능입니다. 복잡한 코딩 지식 없이도 단 몇 분 만에 설정 가능하며, 기존 및 신규 게시물 모두에 적용됩니다. 아래에서 단계별로 설명하겠습니다.

1-1. 블로그 스킨에 자동 목차 HTML 코드 삽입 방법

티스토리 블로그 스킨에 자동 목차를 구현하려면 HTML 코드를 삽입해야 합니다. 아래 코드는 최신화된 버전으로, 오류 없이 깔끔하게 작동합니다.

삽입할 HTML 코드

아래 코드를 복사하여 티스토리 스킨에 추가하세요. (코드 복사: Windows는 Ctrl+C, macOS는 ⌘+C)

<!-- 자동 목차 코드 시작 -->
<script>
const _0x5eef=['classList','92935nhtnYq','setAttribute','push','innerHTML','getElementById','toLowerCase','tt_adsense_top','another_category','style','//p[contains(text(),\'[목차여기]\')]','1954669aacfHB','div','appendChild','toc-ym','title','forEach','DOMContentLoaded','call','addEventListener','length','insertBefore','firstElementChild','log','27309qNoTHN','62SuwPRc','parentNode','querySelector','revenue_unit_wrap','tagName','23736mMyuUa','singleNodeValue','trim','17723tUfPMr','textContent','1STKGDu','getAttribute','contains','nextSibling','791846eKKEom','createElement','outerText','FIRST_ORDERED_NODE_TYPE','querySelectorAll','72wJWnLP','hasAttribute','669103LLOFBD','toc'];function _0x330c(_0x5d40d0,_0x4afdad){_0x5d40d0=_0x5d40d0-0xec;let _0x5eef71=_0x5eef[_0x5d40d0];return _0x5eef71;}const _0x2078d2=_0x330c;(function(_0xbea334,_0x392453){const _0x2c3076=_0x330c;while(!![]){try{const _0x5a087d=-parseInt(_0x2c3076(0x117))+parseInt(_0x2c3076(0xf7))+parseInt(_0x2c3076(0xfa))+-parseInt(_0x2c3076(0x11a))*-parseInt(_0x2c3076(0xf5))+parseInt(_0x2c3076(0x112))*parseInt(_0x2c3076(0x111))+parseInt(_0x2c3076(0xec))*-parseInt(_0x2c3076(0xf0))+-parseInt(_0x2c3076(0x104));if(_0x5a087d===_0x392453)break;else _0xbea334['push'](_0xbea334['shift']());}catch(_0x47ff63){_0xbea334['push'](_0xbea334['shift']());}}}(_0x5eef,0xea9e9),document[_0x2078d2(0x10c)](_0x2078d2(0x10a),function(){const _0x7eb51e=_0x2078d2;try{const _0x591681=document[_0x7eb51e(0x114)]('.contents_style'),_0x1762f9=document[_0x7eb51e(0xfe)](_0x7eb51e(0x107));if(_0x591681&&!_0x1762f9)htmlTableOfContents();else return![];}catch(_0x250abc){console[_0x7eb51e(0x110)]('');}}));function htmlTableOfContents(_0x4f1c99){const _0x388803=_0x2078d2;var _0x4f1c99=_0x4f1c99||document;const _0x44fb35=document[_0x388803(0xf1)]('div');_0x44fb35[_0x388803(0xfb)]('id',_0x388803(0x107));const _0x2117e2=document['querySelector']('.contents_style');var _0x35e549=_0x388803(0x103),_0x552a33=document['evaluate'](_0x35e549,document,null,XPathResult[_0x388803(0xf3)],null)[_0x388803(0x118)];let _0x407aa0;_0x552a33?(_0x407aa0=_0x552a33,_0x407aa0[_0x388803(0x11b)]='',_0x407aa0[_0x388803(0x106)](_0x44fb35)):(_0x407aa0=_0x2117e2[_0x388803(0x10f)],_0x407aa0['classList'][_0x388803(0xee)](_0x388803(0x100))||_0x407aa0[_0x388803(0xf9)]['contains'](_0x388803(0x115))?_0x2117e2['insertBefore'](_0x44fb35,_0x407aa0[_0x388803(0xef)]):_0x407aa0[_0x388803(0x113)][_0x388803(0x10e)](_0x44fb35,_0x407aa0));const _0x3e06b5=document['getElementById'](_0x388803(0x107)),_0x5ee2f2=[]['slice'][_0x388803(0x10b)](_0x2117e2[_0x388803(0xf4)]('h1,\x20h2,\x20h3,\x20h4,\x20h5,\x20h6')),_0x454032=[];for(i=0x0;i<_0x5ee2f2[_0x388803(0x10d)];i++){if(_0x5ee2f2[i][_0x388803(0xf2)][_0x388803(0x119)]()==='')continue;else{if(_0x5ee2f2[i][_0x388803(0xf9)][_0x388803(0xee)](_0x388803(0x108)))continue;else{if(_0x5ee2f2[i][_0x388803(0x113)]['classList'][_0x388803(0xee)](_0x388803(0x101)))continue;else _0x454032[_0x388803(0xfc)](_0x5ee2f2[i]);}}}_0x454032[_0x388803(0x109)](function(_0x5d97e0,_0x2112a5){const _0x4b3465=_0x388803;var _0x94aa2e=_0x4b3465(0xf8)+_0x2112a5;if(_0x5d97e0[_0x4b3465(0xf6)]('id'))_0x94aa2e=_0x5d97e0[_0x4b3465(0xed)]('id');else _0x5d97e0[_0x4b3465(0xfb)]('id',_0x94aa2e);var _0x34278b=_0x4f1c99[_0x4b3465(0xf1)]('a');_0x34278b[_0x4b3465(0xfb)]('href','#'+_0x94aa2e),_0x34278b['textContent']='•\x20'+_0x5d97e0[_0x4b3465(0x11b)];var _0x118edf=_0x4f1c99[_0x4b3465(0xf1)](_0x4b3465(0x105));_0x118edf[_0x4b3465(0xfb)]('class',_0x5d97e0[_0x4b3465(0x116)][_0x4b3465(0xff)]()),_0x118edf[_0x4b3465(0x106)](_0x34278b),_0x3e06b5[_0x4b3465(0x106)](_0x118edf);});const _0xd72dc='\x0a\x20\x20\x20\x20#toc-ym\x20div.h1\x20{\x20margin-left:\x200em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h2\x20{\x20margin-left:\x200.5em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h3\x20{\x20margin-left:\x201em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h4\x20{\x20margin-left:\x201.5em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h5\x20{\x20margin-left:\x202em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h6\x20{\x20margin-left:\x202.5em\x20}\x0a\x20\x20\x20\x20\x0a\x20\x20\x20\x20#toc-ym\x20{\x0a\x20\x20\x20\x20\x20\x20margin:\x2030px\x200px\x2030px\x200px;\x0a\x20\x20\x20\x20\x20\x20padding:\x2020px\x2020px\x2010px\x2015px;\x0a\x20\x20\x20\x20\x20\x20border:\x201px\x20solid\x20#dadada;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#ffffff;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym::before\x20{\x0a\x20\x20\x20\x20\x20\x20content:\x20\x22목\x20\x20차\x22;\x0a\x20\x20\x20\x20\x20\x20display:\x20block;\x0a\x20\x20\x20\x20\x20\x20width:\x20120px;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20rgb(255,\x20255,\x20255);\x0a\x20\x20\x20\x20\x20\x20text-align:\x20center;\x0a\x20\x20\x20\x20\x20\x20font-size:\x2018px;\x0a\x20\x20\x20\x20\x20\x20font-weight:\x20bold;\x0a\x20\x20\x20\x20\x20\x20margin:\x20-40px\x20auto\x200px;\x0a\x20\x20\x20\x20\x20\x20padding:\x205px\x200px;\x0a\x20\x20\x20\x20\x20\x20border-width:\x201px;\x0a\x20\x20\x20\x20\x20\x20border-style:\x20solid;\x0a\x20\x20\x20\x20\x20\x20border-color:\x20rgb(218,\x20218,\x20218);\x0a\x20\x20\x20\x20\x20\x20border-image:\x20initial;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div{\x0a\x20\x20\x20\x20\x20\x20margin:\x205px\x200px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div:first-child{\x0a\x20\x20\x20\x20\x20\x20margin-top:\x2015px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div:last-child{\x0a\x20\x20\x20\x20\x20\x20margin-bottom:\x2015px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div\x20a\x20{\x0a\x20\x20\x20\x20\x20\x20text-decoration:\x20none;\x0a\x20\x20\x20\x20\x20\x20color:\x20#337ab7;\x0a\x20\x20\x20\x20\x20\x20transition:\x20all\x20ease\x200.2s;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div\x20a:hover\x20{\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20color:\x20#333333;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#ecc7ff;\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20/*\x0a\x20\x20\x20\x20.contents_style\x20h3{\x0a\x20\x20\x20\x20\x20\x20margin-bottom:7px;\x0a\x20\x20\x20\x20\x20\x20padding:\x2010px\x2015px;\x0a\x20\x20\x20\x20\x20\x20border-left:\x205px\x20solid\x20#757575;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#e5e5e5;\x0a\x20\x20\x20\x20\x20\x20font-weight:\x20500;\x0a\x20\x20\x20\x20\x20\x20color:\x20#000000\x20!important;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20*/\x0a\x20\x20\x20\x20',_0x3ed036=document[_0x388803(0xf1)](_0x388803(0x102));_0x3ed036[_0x388803(0xfd)]=_0xd72dc,_0x2117e2[_0x388803(0x10e)](_0x3ed036,_0x407aa0);}
</script>
<!-- 자동 목차 코드 종료 -->

코드 삽입 단계

1. 티스토리 관리자 페이지 접속: 티스토리 관리자 페이지에 로그인합니다.
2. 스킨 편집 이동: 좌측 메뉴에서 꾸미기 > 스킨 편집을 클릭합니다.
3. HTML 편집: 우측 상단의 HTML 편집 버튼을 클릭합니다. 경고 팝업이 나타나면 확인을 누릅니다.
4. 태그 찾기: HTML 편집창에서 Ctrl+F(macOS는 ⌘+F)를 눌러 </body>를 검색합니다. 이는 보통 HTML 코드의 최하단에 위치합니다.
5. 코드 붙여넣기: </body> 바로 위에 커서를 두고 Ctrl+V(macOS는 ⌘+V)로 복사한 코드를 붙여넣습니다.
6. 적용 및 저장: 우측 상단의 적용 버튼을 클릭해 저장합니다.

 

1-2. 자동 목차 기능 작동 원리

자동 목차는 H태그(Headline 태그)를 기반으로 동작합니다. H태그는 HTML에서 제목을 정의하는 태그로, H1부터 H6까지 중요도에 따라 나뉩니다. 티스토리 에디터에서는 제목1(H2), 제목2(H3), **제목3(H4)**를 지원합니다.

• H태그의 역할: H태그는 콘텐츠의 계층 구조를 정의해 검색엔진 상위 노출에 기여합니다. 구글봇은 H태그를 통해 글의 주제와 구조를 파악하며, 이는 SEO 점수를 높이는 데 중요합니다.
• 티스토리에서의 H태그: 티스토리에서는 게시물 제목이 기본적으로 H1으로 설정되므로, 본문에서는 H2부터 사용합니다. 예를 들어:
  • 제목1 → H2
  • 제목2 → H3
  • 제목3 → H4

자동 목차 코드는 본문 내 H태그를 자동으로 인식해 목차를 생성하며, [목차여기] 명령어를 통해 원하는 위치에 목차를 표시할 수 있습니다.

1-3. 자동 목차 기능 사용 방법

자동 목차를 사용하려면 글쓰기 에디터에서 H태그를 지정하고, 원하는 위치에 [목차여기]를 입력하면 됩니다.

사용 예시

가정: '고양이 키우기'라는 주제로 글을 작성하며, 소주제는 '고양이 품종', '고양이 먹이', '고양이 건강 관리'로 구성.

1. H태그 지정:
   • 티스토리 에디터에서 각 소주제(예: '고양이 품종')를 드래그해 선택합니다.
   • 에디터 상단 메뉴바에서 제목1, 제목2, 제목3 중 하나를 선택해 H태그를 지정합니다.
2. 목차 위치 지정:
   • 본문에서 목차를 표시할 위치에 [목차여기]를 정확히 입력합니다. (띄어쓰기나 오타 주의)
   • 입력하지 않으면 목차는 기본적으로 본문 최상단에 표시됩니다.
3. 글 발행: 글을 발행하면 H태그가 자동으로 목차로 변환되어 표시됩니다.

티스토리 에디터에서 H태그 지정 및 [목차여기] 입력 과정

결과 확인

• 에디터에서는 목차가 보이지 않으며, 미리보기 또는 글 발행 후에 확인 가능.
• 목차는 클릭 시 해당 섹션으로 이동하는 하이퍼링크 형태로 표시.

1-4. 자동 목차 사용 시 주의사항 및 오류 해결

아래는 자동 목차 사용 시 자주 발생하는 문제와 해결 방법을 정리한 표입니다.

목차가 표시되지 않음	[목차여기] 오타 또는 H태그 미지정	[목차여기]를 정확히 입력하고, H태그(제목1, 제목2 등)를 지정하세요.
목차가 본문 최상단에만 표시됨	[목차여기] 미입력	원하는 위치에 [목차여기]를 입력하세요.
모바일에서 목차 미표시	모바일웹 자동 연결 설정	설정 > 꾸미기 > 모바일에서 티스토리 모바일웹 자동 연결을 '사용하지 않음'으로 변경.
빈 목차 박스 표시	H태그 미지정	본문에 제목1, 제목2 등을 지정하세요.

 

추가 팁:

• [목차여기] 위에 링크를 삽입하면 목차가 표시되지 않을 수 있으니, 링크는 [목차여기] 아래에 배치하세요.
• 모바일 앱에서는 목차가 작동하지 않지만, 대부분의 방문자는 모바일 웹(사파리, 크롬)을 사용하므로 큰 문제는 없습니다.

1-5. 특정 글에만 목차 표시하기

모든 게시물에 목차가 자동 생성되는 것이 부담스럽다면, [목차여기] 명령어를 활용해 특정 글에만 목차를 표시할 수 있습니다.

• 방법: 목차를 원하는 글에만 [목차여기]를 입력하세요. 이 명령어가 없는 글은 목차가 생성되지 않습니다.
• 활용 팁: 정보성 글이나 긴 콘텐츠에만 [목차여기]를 추가해 목차를 표시하고, 짧은 글에는 생략하세요.

---

2. 블로그 본문 수동 목차 설정 방법

자동 목차가 모든 글에 적용되는 점이 불편하다면, 수동 목차를 설정할 수 있습니다. 이는 특정 글에만 직접 HTML 코드를 삽입해 목차를 만드는 방식입니다.

2-1. 수동 목차 HTML 서식 저장 방법

수동 목차는 티스토리 에디터의 HTML 모드에서 직접 코드를 입력합니다. 아래는 간단한 수동 목차 HTML 예시입니다.

<div id="toc-ym" style="margin: 30px 0; padding: 20px; border: 1px solid #dadada; background-color: #ffffff;">
  <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 15px;">목차</div>
  <div><a href="#section1">• 섹션 1</a></div>
  <div><a href="#section2">• 섹션 2</a></div>
  <div><a href="#section3">• 섹션 3</a></div>
</div>

1. 서식 저장: 위 코드를 메모장이나 텍스트 편집기에 저장해 재사용 가능.
2. 삽입 위치: 티스토리 에디터에서 HTML 모드로 전환 후 원하는 위치에 붙여넣기.
3. 섹션 ID 지정: 본문의 각 섹션에 <h2 id="section1">섹션 1</h2>처럼 ID를 추가.

2-2. 수동 목차 기능 작동 방법

• H태그와 ID 연결: 각 섹션의 제목에 고유한 ID를 부여하고, 목차의 <a> 태그에 해당 ID를 링크.
• 스타일링: CSS를 추가해 목차의 디자인을 커스터마이징 가능.

2-3. 수동 목차 사용 시 주의사항

• 시간 소요: 매 글마다 HTML 코드를 입력해야 하므로 시간이 오래 걸림.
• 오류 가능성: ID나 링크가 잘못되면 목차가 작동하지 않음.
• 권장사항: 긴 글에만 사용하고, 짧은 글에는 자동 목차 활용.

---

3. 자동 목차 vs 수동 목차: 무엇이 더 좋을까?

기준 자동 목차 수동 목차

설정 난이도	쉬움 (한 번 설정으로 모든 글 적용)	어려움 (매 글마다 HTML 입력)
유연성	모든 글에 자동 적용, [목차여기]로 위치 조정 가능	특정 글에만 적용 가능
시간 효율성	매우 높음	낮음
SEO 효과	H태그 자동 인식으로 최적화 우수	수동 입력으로 오류 가능성 있음
추천 대상	초보자, 정보성 블로그	고급 사용자, 특정 글 커스터마이징 필요 시

 

 

결론

수익형 애드센스 블로그를 운영하며 검색엔진 상위 노출을 목표로 한다면, 자동 목차가 시간 효율성과 SEO 효과 면에서 훨씬 유리합니다. 수동 목차는 특정 디자인이나 구조를 원하는 고급 사용자에게 적합합니다.

---

FAQ: 티스토리 본문 자동 목차 설정 관련 자주 묻는 질문

Q1. 자동 목차가 표시되지 않아요. 어떻게 해야 하나요?

A: [목차여기] 오타를 확인하고, 본문에 H태그(제목1, 제목2 등)를 지정했는지 확인하세요. 또한, HTML 코드가 정확히 </body> 위에 삽입되었는지 점검하세요.

Q2. 모바일에서 목차가 안 보입니다. 해결 방법은?

A: 설정 > 꾸미기 > 모바일웹 자동 연결을 '사용하지 않음'으로 설정하세요. 티스토리 모바일 앱에서는 목차가 지원되지 않습니다.

Q3. 특정 글에만 목차를 표시하고 싶어요.

A: [목차여기]를 원하는 글에만 입력하세요. 이 명령어가 없으면 목차가 생성되지 않습니다.

Q4. H태그와 SEO의 관계는 무엇인가요?

A: H태그는 콘텐츠의 구조를 정의해 구글, 네이버, 다음 검색엔진이 글을 더 쉽게 이해하도록 돕습니다. 이는 검색엔진 상위 노출에 긍정적인 영향을 미칩니다.

Q5. 자동 목차와 애드센스 광고가 충돌하나요?

A: 위 코드에는 애드센스 광고와의 충돌 방지 로직이 포함되어 있습니다. 문제가 발생하면 댓글로 문의주세요.

 

티스토리 애드센스 승인 티스토리 최적화 세팅 방법(9일 소요)

 

수익형 블로그 무료 이미지 생성 사이트 활용법(이미지FX)

티스토리 조회수 낮아도 애드센스 수익 높이는 비결?

애드센스 수익의 진실: 매출과 순이익 사이에 숨겨진 비밀

수익형 블로그 주제선정 꿀팁 대방출