티스토리 목차 서식 만들기 쉽게 넣는 방법 총정리

---

티스토리 목차 서식 만들기 쉽게 넣는 방법 총정리

---

안녕하세요? 인플루언서 초록괴물입니다. 구글 검색에 노출되려면 알고리즘이 좋아하는 방향으로 글을 작성해야 하는데요. 목차를 추가하여 본문의 방향을 알려주면 도움이 된다고 합니다. 그래서 바로 추가해봤는데요. 목차를 추가하면 장,단점이 있다고 생각합니다.

목차

1. 목차 만들기

2. HTML 편집

예시로 만들었는데 해당 항목을 누르면 이동됩니다. 스킨편집에서 CSS, 파일업로드 등 다양한 방법을 시도해봤지만 적용되지 않았던 분들을 위해 스킨편집 없이 할 수 있는 방법을 알려드리겠습니다.

 

1. 목차 만들기

스킨편집 필요없는 서식 목차 만들기

목차를 넣을 때 스킨편집에서 CSS, 파일업로드 등 귀찮은 일이 많죠. 막상 적용을 했는데 기본 스킨이 아니라서 적용 실패한 분들이 많으실겁니다. 이 방법은 별도 스킨편집이 필요없는 방법입니다. 바로 티스토리에서 제공하는 인용 도구를 사용해서 만들기 때문이죠.

목차를 생성하고 소제목까지 넣으면 이동했을 때 훨씬 깔끔하고 전문적인 느낌을 줍니다.

 

글쓰기 - 인용

티스토리에서 인용 도구를 보신 적이 있으실겁니다. 정렬 옆에 도구를 누르면 인용을 추가할 수 있는데요. 모바일 앱에서도 추가할 수 있지만 HTML 편집을 할 수 없어서 PC로 작성하셔야 합니다.

자동으로 티스토리 목차가 추가되면 좋겠지만 북클립 등의 기본 스킨을 사용하지 않아 추가되지 않았습니다.

아직 이동 경로를 적용하지 않은 상태입니다. 우선 인용 박스 안에 목차를 작성해 주세요. 숫자를 붙이면 구글 알고리즘에 도움이 됩니다.

그리고 본문을 작성하시면 되는데요. 목차를 누르면 이동할 문구도 작성해주시면 됩니다. 보통 같은 문구로 작성하는데 이번에 적용할 티스토리 목차 만들기는 문구가 달라도 이동됩니다.

 

2. HTML 편집

 

기본모드 - HTML

이제 기본모드에서 HTML 모드로 들어가시면 됩니다. 처음 편집하시는 분이라도 잘 따라하면 쉽게 수정하실 수 있습니다.

HTML로 들어오면 머릿속이 복잡해지는데요. 여기서 목차와 이동할 문구만 보시면 됩니다.

노란색 박스 위치에 해당 태그를 넣으시면 됩니다. 해당 태그는 이동하기 전 태그입니다. 목차 부분에 넣어주시면 되는데 c1, c2 등 뒤에 숫자를 추가할 수 있습니다. 목차 수에 따라 넣어주시면 됩니다. 만약 목차 항목이 6개라면 c1부터 c6까지 넣어주시면 됩니다.

<p><a href="#c1">1. 첫번째 타이틀</a></p>
<p><a href="#c2">2. 두번째 타이틀</a></p>

이제 이동할 곳에 id 태그를 넣어주시면 됩니다. 아까 목차에 넣었던 태그는 이동하기 전 태그였다면 이번에는 이동 태그입니다. 이 2개의 태그가 만나면서 해당 지점으로 이동되는 원리입니다.

문구를 썼던 곳 앞에 붙여넣으시면 됩니다. 해당 목차 항목에 맞게 숫자도 바꿔주셔야 합니다.

<p id="c1"> 1. 첫번째 타이틀
<p id="c2"> 2. 두번째 타이틀

티스토리 목차 서식 만들기 정말 쉽죠? 이제 별도 스킨편집을 하지 않고 목차를 만들 수 있게 되었습니다. 모바일에서는 넣을 수 없고 자동으로 추가되는 태그가 아니라서 아쉽지만 CSS 등이 적용되지 않은 분들이라면 쉽게 넣을 수 있어서 만족하실겁니다!

목차 부분
<p><a href="#c1">1.첫번째 타이틀</a></p>

해당 항목 부분
<p id="c1">

처음에 목차를 추가하면 구글 알고리즘에 도움이 되고 보기 좋았는데 애드센스 등의 광고를 지나쳐서 고민 끝에 넣지 않기로 했습니다. 목차 없이 소제목에 숫자를 표시하면 구글 알고리즘에 도움이 되더라고요. 실제로 많은 게시글이 구글에 노출되고 있습니다.

티스토리 목차 장,단점까지 알아봤는데요! 서식에 저장해서 넣으니까 편하더라고요. 물론 id 이동 태그는 직접 편집해서 넣어주셔야 합니다.

 

 

 

3. 티스토리 추천 콘텐츠

 

 

티스토리 애드센스 승인 기준 & 후기

 

애드센스 단가 높은 키워드 순위 TOP 25