티스토리 목차 만들기 : 서식에 목차 HTML 등록해서 사용하는 방법!

티스토리 목차 만들기 : 서식 HTML 등록

 

티스토리 블로그를 운영하다 보면 글의 가독성을 높이기 위해 목차 넣는 방법을 고민하게 됩니다.

사실 목차를 추가하는 방법은 다양합니다. 개인적으로는 그중에서도 HTML로 목차를 티스토리 서식에 저장해 놓고 필요할 때 불러와 사용하는 방식이 효율적인 것 같습니다.

 

블로그 주제와 포스팅 스타일에 따라 개인마다 원하는 방법이 달라질 수 있습니다. 또 많이 사용되는 다른 방법으로는 CSS편집에 목차를 자동으로 만들어주는 코드를 넣으면 포스팅할 때마다 목차를 쉽게 구성하는 방법도 있긴 하지만, 대부분 CSS 편집이나 HTML 수정을 동반하다 보면 블로그 초보자 입장에서는 오히려 더 어렵게 느껴질 수 있습니다. 잘못해서 오류가 나면 어쩌지 싶은 부담감도 생길 수 있고요.

 

게다가 포스팅 주제에 맞게 다양한 디자인으로 목차를 구성하고 싶은 분들이라면, 매번 스킨을 수정하는 방식보다는 직접 포스팅할 때 선택할 수 있는 간단한 HTML 목차 + 서식 기능이 훨씬 더 유용하게 느껴집니다.

 

 

 

그래서 오늘은 초보자도 쉽게 따라 할 수 있는

 

👉 "HTML 목차 서식 저장하는 법" 을 소개해드릴게요!

 

서식에 저장만 해두면 포스팅 할때 바로 불러와서 사용할 수 있는 목차 만드는 방법입니다!

 

 

 

📌 목차

• 1. 티스토리 블로그에 목차가 필요한 이유
• 2. HTML 목차 코드
• 3. 티스토리 서식에 저장하는 방법
• 4. 네이버 SEO 최적화 : 목차를 활용하는 방법
• 5. 🎯 마무리

 

 

1. 티스토리 블로그에 목차가 필요한 이유

✔ 가독성 향상 - 방문자가 원하는 정보를 쉽게 찾을 수 있습니다.

✔ SEO 최적화 - 네이버 검색에서 사이트 링크 (점프 링크)로 반영될 가능성이 높습니다.

✔ 체류 시간 증가 - 목차 덕분에 방문자가 글을 끝까지 읽을 확률이 올라갑니다.

 

---

2.  HTML 목차 코드 (복사해서 사용하세요!)

아래 파일을 열어서 복사 후 서식에 저장하면 글 작성 시 바로 불러와서 사용할 수 있습니다.

 

 

서식목차1.txt

0.00MB

 

 

---

3.  티스토리 서식에 저장하는 방법

한 번만 설정하면, 다음부터 클릭 한 번으로 목차 삽입!

 

✅ 서식 추가 방법

 

1️⃣ 티스토리 관리자 페이지 접속

2️⃣ [서식 관리] 버튼 클릭

서식HTML목차등록

 

 

 

3️⃣ 서식관리 → 서식쓰기 버튼 클릭

서식HTML목차등록

 

 

 

 

 

 

4️⃣ 서식 → HTML 모드로 변환 → 제목에 원하는 제목 작성 → 파일 안에 있는 코드를 내용에 붙여넣기

서식HTML목차등록

 

 

6️⃣ 그대로 저장! 하면 끝

서식HTML목차등록

 

 

 

7️⃣ 티스토리 글쓰기로 들어가기 → 서식 → 목차 불러오기

서식HTML목차등록

 

서식HTML목차등록

 

 

8️⃣ 편집해서 사용할 때는 제목 앞부분은 똑같이 해주셔야 점프링크가 제대로 연결이 됩니다.

 

목차 목록 앞은  "#원인"을 이름으로 적었다면

본문에 있는 제목 앞에도 <h2 id ="원인">  → (본문에서는 # 빠짐)

서식HTML목차등록

 

 

👉 이제 글 작성 시 "서식"버튼을 눌러서 자동으로 목차를 추가할 수 있어요!

여러 가지 디자인을 서식에 미리 등록해 놓으면 포스팅할 때마다 쉽게 불러서 사용할 수 있습니다. 

 

---

 

4. 네이버 SEO 최적화 : 목차를 활용하는 방법

 

1)  목차 리스트 h2, h3 (+h4) 태그 활용

• 검색엔진은 제목 태그 H2, H3 (+H4)를 분석해서 중요한 내용을 파악합니다.
• 위에서 만든 목차에 맞춰 본문 제목도 H2 태그로 작성하면 SEO 점수를 높일 수 있습니다.

2)  목차 : 키워드 포함

• 목차에는 검색될 가능성이 높은 키워드를 포함하세요.
• 예시 : "티스토리 목차 만들기", "HTML 목차 등록", "SEO 최적화 블로그 목차"

3)  내부 링크 활용 (점프링크)

• 글 내부에서 목차와 연결된 부분을 강조하면 네이버 검색 반영이 더 잘됩니다.
• 긴 글일수록 목차의 효과가 커집니다.

---

 

🎯 마무리

✅ 티스토리 목차 자동 만들기 - HTML 코드로 쉽게 추가

✅ 티스토리 서식 활용 - 한 번 저장해 두면 클릭 한 번으로 삽입 가능

✅ 네이버 SEO 최적화 - H2 태그 & 키워드 활용