[티스토리 HTML] 티스토리 본문 목차(TOC) 만들기

목차는 'Table of Contents'의 약자로, 목차를 생성하여 콘텐츠를 작성하여 구글 seo에 도움이 됩니다.

 

자바 스크립트를 활용한 자동 생성도 가능하고, 원하는 곳에 수동으로도 넣을 수 있어요. 요즘은 'jquery.toc'를 활용한 목차 자동생성을 하는 추세입니다. 일일이 수동 목차를 만드는 게 매우 귀찮은 일이라서 한 번만 설정해두면 아주 간편하거든요.

 

하지만 저 같은 경우에는 아직 수동 목차를 만들어 글을 쓰고 있어요. 모든 게시물에 목차를 넣지도 않는데다가 제가 귀찮은 작업도 좋아하는 편이거든요. 이상하죠 :-) 추후에 스킨 변경 시 더 번거로움이 생길 수도 있고 무엇보다 절대 어렵지 않은 작업이라서요.

 

 

 

 

 

티스토리 목차 만들기 예시

먼저 목차가 만들어진 결과물부터 봐볼까요?

아래 블핑 목차 1-4를 클릭하여 해당 위치로 본문이 이동하는 것을 확인해보세요.

 

- 목차 -
1. 블랙핑크 제니
2. 블랙핑크 리사
3. 블랙핑크 로제
4. 블랙핑크 지수

 

1. 블랙핑크 제니

 

 

 

2. 블랙핑크 리사

 

 

 

3. 블랙핑크 로제

 

 

 

4. 블랙핑크 지수

 

 

 

 

 

티스토리 목차 만들기 태그

딱 2가지 태그만 기억하면 됩니다.

<a href="#"> 와 <id="">

목차
<a href="#a">블랙핑크 제니</a>
<a href="#b">블랙핑크 리사</a>
<a href="#c">블랙핑크 로제</a>
<a href="#b">블랙핑크 지수</a>

	<h3 id="a">블랙핑크 제니
    	내용
        
	<h3 id="b">블랙핑크 리사
    	내용
        
	<h3 id="c">블랙핑크 로제
    	내용

	<h3 id="d">블랙핑크 지수
    	내용

- 쉬운 이해를 위해 딱 필요한 부분만 작성했습니다. -

 

• '블랙핑크 제니'의 목차를 보면 <a href="#a"> 와 <id="a">가 확인되죠. "#영문자"와 "영문자"의 일치가 본문에서의 약속 신호입니다.
• a-d 알파벳 이름이나 순서는 상관없습니다. 본인만 알 수 있는 영문자로 표기해 일치만 시켜주면 됩니다.
• <a> 태그에서는 '#' 문자를 영문자 앞에 태그로 표기해 주시고, id 입력 시에는 빼주세요.
• 목차는 어디든 넣을 수 있습니다. <h> 제목 태그에 소제목을 썼다면 해당 태그 안에, <font> 태그면 그 안에 넣으시면 됩니다.

 

 

 

 

 

티스토리 목차의 필요성

처음 위에서 말했듯이 목차(Table of Contents)의 생성이 구글 seo에 도움이 되는데요. 구글은 소제목을 잘 쓰고 목차까지 넣은 글들을 좋아합니다. 검색에도 잘 잡히고 방문자까지 잡아두는 데에 아주 유용하거든요.

 

방문자가 늘어나고 애드센스 수익이 높아지는 글쓰기 별거 없습니다. 목차 하나만 생성해도 달라지거든요. 내용이 많거나 소제목이 많은 글을 볼 땐 목차로 정리된게 보기 편하듯이요. 물론 그 안의 세부 내용까지 파고들자면 어려운 일이겠지만 목차 정도 만드는 건 어렵지 않잖아요? 

 

오늘은 전체 내용이 길지도 않고, 예시 목차 때문에 따로 목차를 만들진 않았습니다 :-)