티스토리 블로그에 목차 넣는 가장 쉬운 방법

글을 쓰기 전에 5분만 투자하세요! 블로그 가독성이 확 올라갑니다.

티스토리블로그-목차넣는법-썸네일

📚 본문 목차
1. 왜 목차가 필요한가요?
2. 글에 목차 넣는 5단계
3. HTML 모드에서 작업하기
4. 마무리 요약

 

왜 목차가 필요한가요?

목차는 블로그 글을 읽는 사람들이 원하는 정보만 바로 찾을 수 있게 도와주는 기능입니다.
특히 긴 글일수록 목차는 정말 중요한 역할을 해요.
검색엔진(SEO)에도 긍정적인 영향을 주기 때문에 조회수에도 도움이 됩니다.

 

글에 목차 넣는 5단계

① 글 안에 목차 위치를 정하세요

글을 쓰기 전에, 목차를 어디에 넣을지 먼저 정하세요.
보통은 글의 맨 위가 가장 좋습니다.

 

② 각 섹션에 id 지정하기

본문의 제목마다 id를 넣어주세요. 이게 목차 링크의 목적지가 됩니다.

 

<h3 id="part1">1. 블로그 제목 정하기</h3>
<h3 id="part2">2. 글쓰기 구성 계획</h3>
<h3 id="part3">3. 이미지 배치 요령</h3>
<h3 id="part4">4. SEO 기본 세팅</h3>
<h3 id="part5">5. 발행 후 확인사항</h3>

 

③ 목차 본문 코드 입력하기

이제 글 위에 아래처럼 클릭 가능한 목차를 입력해 주세요.

 

<div style="background-color: #ffe6eb; padding: 12px; border-radius: 8px;">
  <strong>📚 본문 목차</strong><br>
  <a href="#part1">1. 블로그 제목 정하기</a><br>
  <a href="#part2">2. 글쓰기 구성 계획</a><br>
  <a href="#part3">3. 이미지 배치 요령</a><br>
  <a href="#part4">4. SEO 기본 세팅</a><br>
  <a href="#part5">5. 발행 후 확인사항</a>
</div>

 

HTML 모드에서 작업하기

• 글쓰기 화면 상단의 "HTML" 버튼 클릭
• 위 목차 코드를 붙여넣기
• 다시 "기본" 모드로 돌아와 작성하면 OK

주의: 코드 수정 시에는 항상 "HTML 모드"에서 작업하세요!

 

이미지 예시

이해를 돕기 위한 목차 구성 예시 이미지도 함께 참고하세요:

티스토리 목차 만들기-이해 돕기 위한 이미지

 

마무리 요약

• 목차는 독자의 편의를 위한 필수 기능
• id와 a href="#id" 조합으로 손쉽게 가능
• 글 상단에 넣는 것이 좋음.