본문 바로가기
카테고리 없음

티스토리 목차 링크 연결 방법 초보도 가능

by 해피 라운지 2024. 10. 1.

 

티스토리 블로그 작성 시 목차를 본문과 링크 연결하는 방법을 알아보겠습니다. 초보도 쉽게 할 수 있는 간단한 방법입니다. 아래 내용대로 따라 하시면 쉽게 적용하실 수 있을 겁니다. 처음에만 복잡해 보이지 한 번 해보시면 바로 적용 가능하시니 실천해 보시길 추천드립니다.

 

티스토리-목차-링크

 

 

<목차>

  1. 티스토리 목차는 필수
  2. 목차에 링크 삽입 방법
  3. 본문에 링크 연결 방법
  4. 티스토리 수익 창출 팁

 

1. 티스토리 목차는 필수

 

티스토리 블로그 포스팅에 목차 링크는 필요할까요? 왜 목차 링크를 본문과 연결해야 할까요? 두 가치 측면에서 살펴보겠습니다.

 

1) SEO적 측면

첫 번째 이유는 SEO를 위해서입니다. 목차를 생성하면 구글 크롤러는 내 글을 빠르고 정확하게 이해하기 쉬워집니다. 때문에 검색엔진 입장에서는 포스팅의 목차가 있다면 더 높은 SEO점수를 부여해 주게 되겠지요. 그럼 우리의 블로그와 포스팅이 검색 상단에 노출될 가능성도 높아집니다.

 

2) 방문자 편의

두 번째 이유는 방문자의 편의를 위해서입니다. 내 블로그 포스팅을 검색하여 방문한 분들이 원하는 본문과 정보를 알기 쉽고 빠르게 살펴보도록 지원하는 것이 바로 목차입니다. 이렇게 검색자의 편의와 의도를 살펴 글쓰기를 하는 것이 구글, 네이버 등의 검색 포털이 원하는 방향이기도 하고요.

 

2. 목차에 링크 삽입 방법

 

그럼 본격적으로 티스토리 포스팅을 통한 목차 링크를 본문과 연결하는 방법을 살펴보겠습니다. 초보 블로거를 위한 내용인 만큼 쉽게 진행해 볼게요. 우선, 목차를 생성하고 목차에 링크를 삽입하는 것이 첫 번째입니다.

저는 아래와 같이 만들어볼게요. 빨간 테두리처럼 목차 1,2,3을 만들어 링크를 건 후 아래의 본문으로 연결하도록 진행해 보겠습니다. 

목차 링크 예제

목차 링크 예제

 

첫 번째로 목차에 링크를 걸어주겠습니다. 제 경우 아래 빨간 줄처럼 '1. 개요' 부분을 드래그 선택 후 회색 동그라미의 링크를 활성화해 줍니다. 'URL'부분에 list.1이라고 적어주세요. 여기서 '.'이 들어가 줘야 합니다. 티스토리 특성상 그렇게 해야 해요. 그리고 새창으로 열기를 해제하고 확인 선택해 주세요.

링크 설정 바법

다음으로 html모드로 이동해 줍니다. 위 작업을 진행하셨다면 아래와 같은 화면이 나올 텐데요. 아래 이미지의 빨간 줄 부분을 변경해 줄 겁니다.

html모드 수정

 

 

"http://list.1" 부분을 "#list1"으로 변경해 줍니다. 여기서 아까 써놓았던 '.'은 다시 빼주도록 합시다.

목차 수정 코드

 

위에서 보시면 코드 <li><li>는 리스트를 의미하며, <a></a>는 링크를 걸어주었다는 것을 의미합니다. 때문에 위 이미지와 같이 코드가 <li><a>~</a></li> 형태가 나온다면 맞게 진행한 것입니다. 다음으로 목차에 설정한 링크를 본문으로 연결하는 방법을 알아보겠습니다.

3. 본문에 링크 연결 방법

 

티스토리 목차 링크를 본문에 연결하는 방법을 알아보고 계십니다. 초보도 쉽게 가능하겠지요? 이번에는 목차를 클릭하면 제목으로 이동하도록 연결하는 작업을 이어서 해보겠습니다.

 

아래 이미지의 초록줄이 방금까지 진행했던 목차의 코드 설정 방법이었고요. 이 목차 코드를 파란 줄로 이동하도록 설정해 보겠습니다. 저는 본문의 '1. 개요' h2 코드 위치로 이동하도록 지정해 보겠습니다. 

본문 코드 수정

 

 

<h2 date-ke..로 시작하는 부분에서 <h2 뒤에 id="list1"이라고 넣어주시면 됩니다. 

본문 코드 변경

 

 

이렇게 하면 목차의 '1. 개요'를 클릭하면 본문의 연결된 링크로 연결되도록 모든 설정을 마친 겁니다.

마찬가지로 다른 목차도 'list.2', 'list.3' 등 숫자를 이어나가며 코드를 등록하시어 링크 지정하시면 됩니다. 모든 작업을 마치신 후 발행해 주시면 됩니다. 발행하면 아래와 같이 목차를 선택하면 링크 설정한 본문으로 연결되게 됩니다. 어떠신가요? 초보도 쉽게 설정할 만큼 쉬운 설정 방법이지요? 꼭 진행하셔서 높은 SEO 점수와 상위 노출을 얻으셨으면 합니다.

목차수정 완료

4. 티스토리 수익 창출 팁

 

오늘은 티스토리 블로그 포스팅을 위해 목차 링크 연결을 통한 본문 바로가기 방법을 알아보았습니다. 이렇게 티스토리 블로그 운영을 위한 한 가지 방법과 html설정을 배워보았는데요. 추가적으로 티스토리 수익 창출을 높이는 여러 방법이 있습니다. 아래의 바로가기 링크는 더 높은 수익을 위한 다양한 방법을 정리해 놓은 자료이니 관심 분야를 선택하여 확인해 보시기 바랍니다.

 

티스토리 블로그 글쓰기 네이버 상위노출 키워드분석 방법 총정리

네이버-상위노출-키워드-분석법

애드센스 CPC 단가 높이기 수익 극대화 방법

애드센스-CPC-수익-극대화-방법

SEO 최적화 글쓰기 확인 및 검사 방법

SEO-최적화-글쓰기,-검사-방법

티스토리 블로그 무료 SEO 검사 방법 : 상위 노출의 마법

티스토리-무료-SEO-검사-방법

티스토리 메타 디스크립션 올바른 작성 방법

티스토리-메타-디스크립션

애드센스 광고 의도 기반 형식 설정 방법

애드센스-광고-의도설정-바로가기


 

그럼, 이번 포스팅이 도움이 되셨길 바랍니다. 다음에도 더욱 도움 되는 포스팅으로 찾아뵙겠습니다.