티스토리 목차 간편하게 만들기(포스팅 시간 절약 방법)

티스토리 목차 간편하게 만들기 알아볼게요. 고수들의 블로그에 가보면 목차가 간단하게 만들어져 있는 것을 볼 수 있어요. 링크를 원하면 인텍스, 북마크 기능처럼 클릭한 위치로 페이지가 움직이는 것이죠.

티스토리에서 제공하는 기능으로 간단하게 목차만들기 알아볼게요.

목차
01 목차 간편하게 만들기
02 스크립트로 한 방에 목차만들기
03 목차만들면 SEO가 개선됨
04 마무리

목차 간편하게 만들기

티스토리 목차 간편하게 만들기, id 태그를 사용해서 만듭니다. 태그에 id라는 속성을 넣어주면 북마크가 되는데 태그로 그 북마크로 연결을 하면 됩니다.

하지만 문제는 이게 손이 많이 간다는 건데요, 제가 해보니 5분정도 걸리는 것 같더라고요. 이걸 간편하게 하는 방법 알려드릴게요.

먼저 h태그에 id속성을 넣어줍니다. 북마크 기능을 넣어주는 것입니다. 쉽게 말하면 좌표를 찍어주는 것이죠.

일단 내가 적고 싶은 H2 이름을 적어줍니다. 여기서는 간편하게 목차1~목차3으로 지정해줄게요. 그리고 서식을 만들어야하니까 따라 하실 분은 목차1~목차3으로 적어주시는 것이 좋습니다.

작업 전	작업 후
<h2> 목차1 </h2> <h2> 목차2 </h2> <h2> 목차3 </h2>	<h2 id="LIST1"> 목차1 </h2> <h2 id="LIST2"> 목차2 </h2> <h2 id="LIST3"> 목차3 </h2>

① '기본모드'에서 목차1, 목차2, 목차3에 h태그를 걸어줍니다. <h2>의 단축키는 'Shift + Alt + 2' 입니다.

② html모드로 이동해서 h태그에 id="LIST1" 이 부분을 추가해줍니다. 북마크를 해놓는 것이에요.

이제 좌표찍기, 북마크를 했으니 북마크로 이동하는 목차와 링크를 걸어줘야해요.

① 포스팅 상단에 원하는 위치에 목차를 만들어 줍니다. 저는 박스를 만들어서 목차를 만들어줬어요

Index
- 목차1
- 목차2
- 목차3

② 이렇게 목차를 만들고는 다시 html로 이동합니다.

<a herf=""> 이 태그는 하이퍼링크를 만드는 태그에요. 보통은 URL주소를 입력하지만 북마크를 해놓은 곳으로 이동하려면 "#LIST" 처럼 내가 id태그로 이름 붙여준 id의 앞에 # 을 붙여주면 내가 만들어 놓은 북마크로 이동합니다.

③ html에서 목차1을 a태그로 감싸줍니다. <a> 태그로 시작했으면 </a>로 닫아주시는 것 꼭 잊지마시고요. 따옴표도 잊지마시고요. 일종의 코딩인데 이런 부분은 매우 민감합니다. 컴퓨터는 대충 못알아먹어요.

작업 전	작업 후
목차1 목차2 목차3	<a href="#LIST1"> 목차1 </a> <a href="#LIST2"> 목차2 </a> <a href="#LIST3"> 목차3 </a>

이걸 매번 하려면 시간이 꽤나 걸립니다. 하지만 티스토리에서 제공하는 '서식'기능을 사용하면 자동화할 수 있어요. 미리 만들어놓고 공장에서 찍어내듯이 포스팅을 할 수 있습니다.

작성을 완료한 포스팅의 html로 이동하셔서 코드 전체를 복사합니다. 그리고 티스토리 관리-서식관리-서식작성으로 갑니다. 마지막으로 전체를 복사한 코드를 붙여넣기 해서 서식을 저장합니다.

티스토리 에디터 상단의 ... 점3개를 눌러주시고 서식을 눌러주시면 방금 만들어 둔 서식을 불러올 수 있어요. 이 포스팅을 보고 만드신 서식을 불러오기 하면 H2 태그에 북마크/인덱스를 설정할 수 있습니다.

무엇보다 좋은 점은 스크립트보다 속도가 빨라요.

자바 스크립트를 이용해서 한 방에 목차를 만들 수 있는 방법도 있습니다. 사실 저는 '애드센스 스쿨'이라는 카페에서 스크립트를 얻어서 사용하고 있었어요. 하지만 이 스크립트에는 <h2>, <h3>, <h4>까지 다 나와서 보기가 불편했거든요.

접은글을 열어보시면 스크립트를 저장해놨습니다. 정말 편하긴 한데 페이지속도도 느려지고 추천하진 않아요. 저는 제가 만든 서식으로 다 바꾸려고요.

</script>

<h2> 태그만 이용해서 심플한 목차를 만들고 싶어서 조금 불편하긴 하더라도 제가 알려드린 방법을 이용하시면 깔끔하고 구글SEO에 맞는 목차를 만들 수 있을거에요.

이 스크립트를 사용하면 이런 느낌으로 나옵니다. H2, H3 구분도 잘 안되고 H4가 들어가면 목차가 아니라 그냥 글 내용이 되어버립니다. 스크립트가 작동하는 시간 때문에 페이지 속도도 느려지고요.

지금까지 티스토리 목차만들기 방법에 대해 알아보았습니다. 스크립트를 사용하면 간편하긴 하지만 속도가 느려지는 단점이 있어요. 물론 코딩을 잘하시거나 더 좋은 스크립트가 있으신 분은 걱정이 없으시겠습니다.

사실 수익이 안날 것 같은 포스팅이지만 열심히 작성한 이유는 저도 이 방법을 찾으려고 엄청나게 검색했고 도저히 찾지를 못했었거든요. 작지만 도움이 되었으면 좋겠습니다. 디지털 노마드 분들 화이팅입니다.