본문 바로가기
Work & Life

티스토리 목차 내부 링크 만드는 법

by 담담하게, 당당하게 2024. 10. 12.

티스토리 글을 다시 시작하면서, 구글, 네이버 등 SEO 관섬에서 인식하는 좋은 글이란 무엇인가 고민하기 시작했습니다. 그들이 생각하는 좋은 글이어야 잘 노출이되고, 잘 알려질 것 같아서요

 

SEO 관점에서는 블로그 게시물을 인식하는 콘텐츠 랭크라는 개념이 있고, 오늘은 그 핵심인 좋은 렝크를 받을 수 있는 목차 내부 링크 만드는 법에 대해 공유해보겠습니다

콘텐츠 랭크라는 개념을 인지하시고 꾸준히 Study하는 것이 중요합니다

 

 

목차

목차 내부 링크를 왜 만들어야 돼?

코딩이 어렵다구요?, 아래 내용 그냥 복붙해서 쓰세요

서식에 저장해서 사용하시면 쓰기 쉽습니다

서식에서 목차 제목만 바꿔서 쓰시면 됩니다

 

 

목차 내부 링크를 왜 만들어야 돼?

구글 콘텐츠 랭크를 올리기 위해서는 어려가지 작업을 할 필요가 있습니다. 예를 들어 구글에서는 사진을 많이 첨부하거나, 목차를 만들거나, 작성한 글의 링크가 이곳 저곳에서 많이 회자된다거나 한다면 "좋은 글"이라 인식하는 거죠

  • 사진을 많이 넣는다
  • 목차를 만들고 링크를 걸어둔다
  • 내가 작성한 글의 링크가 신뢰될 수 있는 외부 페이지에서 많이 회자 된다
  • ....

 

목차의 경우 플랫폼에서는 잘 구성된 글(Well-organized contents)로 인식하기 때문에 목차를 구성하는 것이 중요하고, 특히 플랫폼이 코딩 관점에서 이해할 수 있도록 목차를 누르면 해당 위치로 이동되는 목차 내부 링크를 활용하시는 것이 좋다고 합니다

목차를 눌렀을때 해당 위치로 이동되는 내부링크가 설정된 목차를 작성하는 것이 필요합니다

 

 

코딩이 어렵다구요?, 아래 내용 그냥 복붙해서 쓰세요

목차 예시 | 위 그림처럼 아래 공유 드리는 코딩의 모습은, 목차가 있고, 눌렀을때 해당 위치로 이동하도록 코딩이 되어 있는 목차입니다. 서식의 경우 원하시는 색깔, 글씨체, 크기로 편하게 커스텀해서 활용하시면 되겠습니다

위 목차에서 파란색 링크를 누르면, 밑에 검은색 큰 글씨로 이동하는 구조입니다

 

목차 HTML 코드 | 아래 내용을 복붙해서 쓰시면 되겠습니다 (아래 text 파일 다운로드)

<p data-ke-size="size16">목차</p>
<p data-ke-size="size16"><a href="#no0">대제목</a></p>
<p data-ke-size="size16"><a href="#no1">중제목1</a></p>
<p data-ke-size="size16"><a href="#no2">중제목2</a></p>
<p data-ke-size="size16"><a href="#no3">중제목3</a></p>
<p data-ke-size="size16">&nbsp;</p>
<h2 id="no0" data-ke-size="size26"><b>대제목</b></h2>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<h3 id="no1" data-ke-size="size23"><b>중제목 1</b></h3>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<h3 id="no2" data-ke-size="size23"><b>중제목 2</b></h3>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<h3 id="no3" data-ke-size="size23"><b>중제목 3</b></h3>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>

목차 HTML 코드.txt
0.00MB

 

 

 

서식에 저장해서 사용하시면 쓰기 쉽습니다

Step 1 | 관리페이지에서 "서식 관리"를 클릭해서 들어갑니다

서식관리 누르시고 서식 만들기 하시면 됩니다

 

Step 2 | 관리페이지에서 "서식 관리"를 클릭해서 들어갑니다

오른쪽 기본모드라고 되어 있는거 누르시면 HTML 선택이 가능합니다

 

Step 3 | HTML 페이지에서 다운받으신 코드를 복사 붙여넣기 해주시면 됩니다

그냥 Ctrl C + V만 해주시면 Template 셋팅은 끝입니다

 

 

서식에서 목차 제목만 바꿔서 쓰시면 됩니다

이제 실제로 사용하실 때는 본문에 썼던 글과, HTML코드 상 인식할 수 있는 목차 제목만 수정하시면 편하게 쓰실 수 있으십니다

 

Step 1 | HTML 코드에 작성하실 목차 제목과 본문에서 제목을 통일시켜줍니다

그냥 회색영역에 글을 쓰시면 됩니다

 

 

Step 2 | 기본모드로 전환하셔서 글이 잘 바뀌었는지 확인하시면 됩니다 (참고로 글을 발행하신 후 눌러보셔야 이동하는지 확인할 수 있습니다)

Step 1처럼 바꾸면 이와 같이 목차 제목이 바뀌어 있습니다