본문 바로가기
C,C++,자바등

상위 노출에 도움되는 티스토리에 목차만들기

by 척척팍사 2023. 7. 11.
반응형

티스토리 글을 쓸 때 단락과 내용이 많다면 목차를 만들어 원하는 정보를 쉽게 볼 수 있는 역할을 도와줄 수 있는 게 목차이다.

또한 상위노출에 도움이 된다고 하니 알아두면 좋을 것 같아요.

 

1. 티스토리로 목차 만들기 위해선 우선 글을 씁니다. 소제목과 내용을 잘 분리하면 목차 만드는데 쉽습니다. 

 

 

척척팍사
척척팍사

2. 위 그림은 목차만 만들어놓고 바로가기 설정은 안 해놓은 상태입니다. 그냥 글인 거죠. 여기서 그림에 오른쪽 상단 3번째 기본모드, 마크다운 밑에 있는 HTML을 눌러줍니다.

 

척척팍사

3. 우리가 목차로 나누었던 부분을 드래그했어요. 그럼 저 위치에 먼저 각각 소제목으로 바로 갈 수 있는 기능을 넣어줘야 해요.

<p><a href="#a1"> 태아 때 보험가입하는 이유 </a></p>를 입력해 줍니다.

척척팍사
척척팍사

 여기서 "#a1" , "#a2" , "#a3"로 준비하려는 목차가 3가지니까 각각 소제목별로 번호를 지정해 줍니다.

그다음은 목차별로 번호를 지정했으니 해당 목차를 누르면 원하는 장소로 바로 갈 수 있게끔 해야겠죠?

 

 

 

척척팍사
척척팍사

4. <p><a href="#a1"> 태아 때 보험가입하는 이유 </a></p>를 원하는 위치 안에 태그 <p id="a1">을 넣어줍니다. 그리고 해당 끝내 </p>를 입력해 줍니다.

그럼 목차가 3가지니까 원하는 위치에 a1, a2, a3를 넣어줍니다.  그리고 저장을 하고 발행을 하게 되면 아래와 같이 마우스 커서의 모양이 바로가기할 때처럼 손모양으로 바뀌게 되어 원하는 위치로 이동하게 됩니다.

척척팍사
척척팍사

정리해 보면

나의 목차로 쓸 곳을 HTML에서 <a href="#a1"> 태아 때&nbsp;보험을&nbsp;가입하는&nbsp;이유 </a></p> 이렇게 해주고.

바로가기해야 할 곳에
<p id="a1" data-ke-size="size16"> 태아 때&nbsp;보험을&nbsp;가입하는&nbsp;이유 </p>
또는
<data-ke-size="size16"><p><a href="#a1"> 태아 때&nbsp;보험을&nbsp;가입하는&nbsp;이유 </p>
해주면 목차가 완성됩니다.
반응형