본문 바로가기

티스토리 자동 목차 만드는 방법

별점 (4.5 / 5 ) | 참여 (100 )
Sknowhow 2024. 5. 14.

티스토리 자동 목차를 사용하면 길고 복잡한 게시글의 구조를 명확하게 보여주고, 사용자가 원하는 내용을 빠르게 찾도록 도와줍니다. 또한, SEO에도 긍정적인 영향을 미쳐 검색 결과에서 상위 노출될 가능성을 높일수 있습니다.

목차 사용의 효과

티스토리에서 목차를 사용하면 다음과 같은 효과를 얻을 수 있습니다.

독자 편의성 향상 : 길고 복잡한 게시글에서 원하는 내용을 빠르게 찾을 수 있도록 도와줍니다.

SEO 개선 : 검색 엔진이 게시글의 구조를 파악하는 데 도움이 되어 검색 결과에서 상위 노출될 가능성이 높아집니다.

페이지 머무는 시간 증가 : 사용자가 원하는 내용을 쉽게 찾을 수 있으므로 페이지 머무는 시간이 증가합니다.

전환율 향상 : 사용자가 원하는 정보를 쉽게 찾을 수 있으므로 전환율이 높아집니다.

티스토리 목차 예시

다음은 티스토리 목차의 예시입니다.

## 목차 

 [1. 서론](#1)

   [1.1 배경](#1.1)

   [1.2 목적](#1.2)

 [2. 본론](#2)

   [2.1 주장](#2.1)

   [2.2 근거](#2.2)

   [2.3 반론](#2.3)

 [3. 결론](#3)

위 예시에서 목차를 사용하면 방문자는 게시글의 구조를 한눈에 파악하고, 원하는 내용을 쉽게 찾을 수 있습니다. 또한, 각 제목에 해당하는 앵커 링크가 제공되어 있어 클릭하면 해당 위치로 바로 이동할 수 있습니다.

티스토리 자동목차 만드는 방법

자동 목차 만드는 방법은 간단합니다. 스크립트 코드 하나로 바로 적용 가능합니다. 쉽게 적용 가능하니 차근차근 따라해보세요!

1. 티스토리 블로그 스킨 편집

티스토리 관리 페이지에서 [꾸미기]-[스킨 편집]-[html 편집]으로 이동합니다.

2. html 메뉴에서 제일 하단으로 이동합니다.

html 코드가 있는 창에서 찾기 : [Ctrl]+[F]를 눌러 </body> 찾으세요!

3. 소스코드 붙여넣은 후 적용

</body> 위에 추가할 스크립트를 붙여 넣고 적용 합니다.

<script>
const _0x5eef=['classList','92935nhtnYq','setAttribute','push','innerHTML','getElementById','toLowerCase','tt_adsense_top','another_category','style','//p[contains(text(),\x27[紐⑹감]\x27)]','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','textCont��0a\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>

티스토리 자동목차 적용 화면

티스토리 자동목차 적용화면

지금까지 티스토리에서 목차를 적용해 보았습니다. 구글 SEO 와 검색 엔진에서 해당 게시글의 상단 노출에 유리하기 때문에 꼭 설치해보는걸 추천드립니다.