티스토리 블로그 목차 클릭 시 해당 목차로 이동하게 만드는 방법

오늘은 티스토리 블로그에서 목차를 만드는 방법에 대해 알아보겠습니다. 저도 원래 목차를 쓰지는 않지만 목차를 사용하면 구글에서 신뢰가 가는 글로 판단하여 검색엔진최적화에 도움이 된다는 글을 봤습니다. 목차를 적고 그 목차를 클릭하면 해당 글로 이동하는 원리를 이용하는 방법입니다. <a> 태그를 이용해서 간단하게 목차를 만들 수 있으니 참고해보시길 바랍니다.

 

목차 예시

저는 위와 같은 목차를 만들어보겠습니다. 목차를 적고 밑에 목차이동하기를 클릭하면 여기로 이동하기로 이동하고 목차2이동하기를 누르면 밑에 있는 여기로 이동하기로 이동하는 방법을 알아보도록 하겠습니다.

 

<a> 태그 사용하기

제가 사용하려는 방법은 <a> 태그를 이용하는 방법 입니다. a태그는 하이퍼링크를 만들어서 그 해당 링크로 이동하는 방법입니다. 원래는 외부 주소로 이동할 때 제가 많이 사용했었는데 목차를 만들때는 내부 문서에서도 이동이 가능합니다. 예를들어 아래 링크를 클릭하면 네이버 페이지로 이동하게 됩니다.

네이버 이동하기 

네이버

이 방법을 이용해서 목차를 클릭하면 해당 목차로 이동하는 방법을 알아보겠습니다.

 

내부 문서에서 이동하기

먼저 평소처럼 글을 작성 합니다. 

목차를 쓰시고 밑에 이동하고 싶은 목차 2개를 작성해줍니다.

 

<예시>

목차

목차 이동하기

목차2 이동하기

 

저는 이런식으로 쓰고 해당 글을 입력하면 아래 소제목으로 이동하도록 써보겠습니다. 글을 작성 하신 후 기본모드 -> HTML 을 눌러줍니다.

 

그리고 나서 목차 이동하기 쪽 사이에 <a href="#a1"> </a> 를 작성해주고 목차2 이동하기 앞뒤로 <a href="#a2" </a> 를 작성해줍니다. #a1 대신에 자신이 넣어주고 싶은 문구를 넣어주셔도 됩니다. 그리고 나서 이동하려는 위치로 가셔서 id 태그를 넣어주셔야 합니다. <h2는 소제목으로 자신이 넣고 싶은것을 넣어주시면 되는데 h2나 h3 h4 등 소제목으로 사용하시는 것을 넣어주시면 됩니다. 그리고 나서 위에 클릭하는 것과 같은 문자를 넣어줍니다. 위에서 #a1을 클릭하면 a1로 이동하고 #a2를 클릭하면 a2로 이동하는 방식입니다. 중요한 것은 클릭해서 이동하려는 문자열이 동일해야된다는 것입니다. 이렇게 하고 목차 이동하기를 누르시면 스크롤이 아래로 이동하는 것을 확인해보실 수 있습니다.

 

마무리

이상 티스토리 블로그 목차 만드는 방법에 대해 알아봤습니다. 글을 잘 쓰는 것이 중요하지만 seo에 도움이 되는 방식을 생각하면서 글을 쓰는 것이 상위노출하는데 좋은 방식이라는 것을 생각하시고 사용해보시길 바랍니다.

 

관련글 더보기

블로그 방문자 증가를 위한 줌 검생등록 방법

블로그 방문자 증가를 위한 줌 검생등록 방법