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

썸네일

 

 

 안녕하세요. 돈 버는 지식을 이야기하는 유레카입니다.

오늘은 목차를 통해 내부 링크를 만드는 방법을 공부해보도록 하겠습니다.

매우 간단하지만, 독자들이 긴 글을 읽을 때 목차의 한 부분으로 이동할 수 있어 원하는 부분을 쉽게 볼 수 있고 이탈률을 줄일 수 있는 효과를 얻을 수 있을 것이라 생각됩니다.

 

 

 

 목차를 사용해야 하는 이유?

 

먼저 글을 쓸 때 목차를 사용해야 하는 이유에 대해서 알아 보겠습니다.

목차는 글의 설계도입니다. 독자들은 목차를 읽음으로써 글의 어떤 부분에서 어떤 내용을 확인할 수 있을지 미리 가늠해볼 수 있습니다.

 또한 불필요한 시간을 줄일 수 있습니다. 목차를 보고 필요한 부분으로 넘어가 원하는 내용을 확인하면 되기 때문입니다. 

 게다가 글의 처음에 목차가 있으면 글이 정돈된 느낌을 주고, 전문적으로 느껴집니다.

 이러한 이유로 실제로 구글 검색엔진 최적화 관점에서도 글에 목차가 있으면 지수 향상에 도움이 됩니다.

 

 오늘 공부하고자 하는 목차는 일반적인 목차가 아닌 목차의 소제목을 클릭했을 때 원하는 위치로 자동 링크할 수 있는 방법입니다.

 아래에서 만드는 방법에 대해 상세하게 알아보겠습니다.

 

 

 

 목차 내부 링크 만드는 방법

 

① 목차의 내용과 위치 선정하기

 가장 먼저 할 일은 글의 목차 위치를 정하고 목차의 내용을 선정해야 합니다.

 내부 링크를 만들 때는 html 모드에서 작성이 필요하므로, 기본 모드에서 목차의 위치를 정하고 내용을 작성해야 합니다.

 더불어 목차를 선택했을 때 링크로 도착할 위치도 미리 표시를 해두는 것이 html 모드에서 코드 작성 시 편리합니다.

 

 

② html 코드 편집

 목차의 내용과 링크가 도착할 위치를 표시했다면 기본 모드 → html 모드로 변경합니다.

그리고 목차가 들어갈 부분에 아래 코드를 추가합니다.

<b> 목차 </b>
<a href="#01"> 1. 내용 </a><br>
<a href="#02"> 2. 내용 </a><br>
<a href="#03"> 3. 내용 </a><br>
<a href="#04"> 4. 내용 </a><br>

위에 부분 작성이 완료되었다면 이체 출발점은 완성된 셈입니다.

 

이번에는 내부 링크의 도착점에 추가될 코드를 알아보겠습니다.

<br><p id="01"><br></p>
<br><p id="02"><br></p>
<br><p id="03"><br></p>
<br><p id="04"><br></p>

목차의 번호대로 이동을 원하는 지점에 각 도착점 코드를 추가합니다.

완성된 html 코드의 예시는 아래와 같습니다.

 

목차 내부링크 html코드 예시
<html 코드 예시>

html 코드 작성이 완료되고 기본 모드로 돌아가면 목차가 생성된 것을 알 수 있습니다. 하지만, 편집 상태에서 목차를 클릭했을 때 원하는 위치로 이동하는지는 확인하지 못합니다.

 따라서 목차가 링크로 잘 이동하는지 확인을 하기 위해서는 글을 예약으로 설정해서 포스팅합니다.

 예약으로 등록된 글은 아직 서버에 정식으로 등록된 글이 아니므로, 수정 및 삭제해도 블로그에 악영향을 미치지 않습니다.

 예약으로 글을 등록한 후 확인을 해보면 아래처럼 잘 등록이 된 것을 확인할 수 있고 각 내용을 클릭하면 우리가 지정한 위치로 잘 이동되는 것을 확인할 수 있습니다.

 

목차 내부링크 최종 예시
<목차 최종본 예시>

 


 

 지금까지 티스토리 목차 내부 링크 만드는 방법에 대해서 알아보았습니다.

 정말 간단한 방법이지만, 목차로써 구글 SEO 지수에도 긍정적인 영향을 미치고, 특히 포스팅의 길이가 길 때 위의 방법을 사용하면 독자들이 읽고 싶은 부분으로 빠르게 이동할 수 있어 효율적입니다.

 어떻게 보면 귀찮지만, 구글 SEO 지수 향상을 위해 또는 독자들을 위해 한 번 써보는 건 어떨까요?

 

 오늘도 긴 글 끝까지 읽어주셔서 감사드리고, 다음에 새로운 주제로 찾아뵙겠습니다.

 

 

참고하면 좋은 포스팅들.

[블로그 공부] - [일상] 구글 Alt 태그의 의미와 적용 방법 (feat. 티스토리)

[블로그 공부] - On-page SEO : 온페이지 SEO의 의미와 적용방법

 

 

 

 

 

 

 

  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유