티스토리 목차 TOC 필요한 이유와 넣는 방법

[ 목차 ]

 

티스토리 목차 TOC가 필요한 이유?

TOC란 Table Of Contents로 구글은 사용자가 검색했을 시, 티스토리 블로그에서 최대한 보기 좋고 유입되었을때의 최적의 경험을 하는 글들을 좋아합니다. 그래서 목차를 넣어두면 가독성에 편의를 주며 더 좋은 글이라 판단하여 상위 노출을 노려 볼 수 있기 때문에 넣어두는 것이 좋습니다.

위키백과의 목차 예시

 

 

어떻게 넣어야 할까?

일일히 손으로 HTML 태그를 건드리면서 넣을 수도 있지만, 서식으로 만들어 반자동 시스템으로 넣어줄 수 있습니다. 여기서 필요한 기술로는 제가 드리는 파일의 붙여넣기 뿐입니다 :) 편하게 따라오세요. 먼저 아래 파일을 다운로드 합니다.

 

자동목차TOC.zip

0.00MB

 

 

반응형

 

그리고는 블로그 설정에서 아래 이미지 처럼 진행하시면 됩니다. 번호 순서대로 다운로드 된 파일을 스킨에 업로드 하시면 됩니다. 간단하죠?

파일 등록

 

그리고는 서식 관리로 들어가서 새로운 서식을 HTML 모드로 등록해줍니다. 등록 시, HTML은 아래 코드와 같습니다. 여기서 중요한건 마크다운 없이 그냥 작성 시, 제목1이 해당하는 태그가 H2입니다. 그래서 H2로 목차가 생성되도록 바꿔줬습니다.

<div class="txc-textbox">
<script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/4423544/skin/images/jquery.toc.js"></script>
<div style="color: #333; background: #fafafa; line-height: 1.6; padding: 14px 18px 18px; text-align: left;"><span style="font-size: 1.2rem;" data-ke-size="size26"><b>[ 목차 ]</b></span>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#3669CF' } ) }); </script>
</div>
</div>
<h2 data-ke-size="size26">&nbsp;</h2>

 

해당 코드를 작성 후 다시 기본 모드로 변경하면 아래와 같이 됩니다.

목차 TOC 기본모드

 

이렇게 하면 끝입니다. 이제 글을 쓸때 서식을 넣고 H2 제목만 걸어주면 알아서 목차로 생성됩니다.

 

 

티스토리 목차 TOC 최종 결과물

반자동 목자 최종 이미지 예시

 

더욱 더 좋은 가독성과 정보 전달을 위해 여러분들도 꼭 목차를 넣어 블로그 글을 작성해보세요 :)