티스토리 목차 만드는 방법, 목차를 생성하는 방법으로 티스토리 html 편집에서 코드를 직접 작성하는 방법과 자바스크립트를 이용해 동적으로 생성하는 방법 그리고 브라우저 확장 프로그램 활용한 방법으로 나뉩니다.
목차
티스토리 목차 만드는 방법 3가지
티스토리에서 목차를 만드는 방법은 크게 세 가지로 나눌 수 있습니다:
- 직접 목차 작성
- 자바스크립트를 이용한 동적 목차 생성
- 브라우저 확장 프로그램 사용
각 방법의 장단점을 비교하여 SEO 관점에서 어떤 선택이 적합할지 알아보겠습니다.
1. 직접 목차 작성 (정적 목차)
포스팅 작성 시, HTML 태그(<a>, <h1>~<h6>)와 id 속성을 사용해 목차를 수동으로 만드는 방식입니다.
장점
- SEO에 유리:
- 검색 엔진이 HTML 구조를 쉽게 파악해 목차 링크와 내용을 효과적으로 색인화합니다.
- 앵커 링크(
#활용)는 내부 링크로, 검색 엔진 랭킹에 긍정적인 영향을 줄 수 있습니다. - 호환성 뛰어남: 브라우저 환경과 관계없이 정상 작동하며, 자바스크립트가 비활성화된 환경에서도 사용할 수 있습니다.
- 디자인 및 콘텐츠 제어 용이: 목차의 위치, 스타일 등을 자유롭게 수정할 수 있습니다.
단점
- 코딩 지식 : HTML 및 CSS에 대한 기본 지식이 필요합니다.
- 유지 보수가 번거로움: 글 내용 변경 시 목차를 수동으로 업데이트해야 하며, 긴 글일수록 작업량이 많아집니다.
- 자동화 부재: 제목 추가/수정 시 매번 HTML 코드를 직접 수정해야 합니다.
2. 자바스크립트를 이용한 동적 목차 생성
자바스크립트 코드를 사용해 페이지 로딩 시점에 목차를 자동으로 생성하는 방식입니다. 현재 티스토리 목차 만드는 방법으로 가장 많이 사용되고 있습니다.
장점
- 자동 업데이트: 글 내용을 수정해도 목차가 자동으로 갱신되어 유지 보수가 편리합니다.
단점
- 자바스크립트 의존성: 자바스크립트가 비활성화된 브라우저에서는 목차가 작동하지 않습니다.
- SEO에 불리할 가능성:
- 일부 검색 엔진은 자바스크립트로 생성된 내용을 제대로 색인하지 못할 수 있습니다.
- 다만, 구글의 자바스크립트 렌더링 기능이 개선되며 이 문제는 점차 해결되고 있습니다.
- 구현 복잡성: 자바스크립트 지식이 필요하며, HTML 기반 방법에 비해 설정 과정이 까다롭습니다.
- 페이지 로딩 속도 저하: 과도한 자바스크립트는 사이트 로딩 속도에 부정적인 영향을 줄 수 있습니다.
3. 브라우저 확장 프로그램 이용 (정적 목차)
브라우저 확장 프로그램 티스토리 목차 생성기(TTG)을 사용해 목차 작성을 자동화하는 방법입니다.
장점
- 작성 편의성: 클릭 한 번으로 정적 목차를 자동 생성하여 작업 시간을 단축합니다.
- SEO에 최적화:
- HTML 구조를 기반으로 생성된 목차로 검색 엔진이 쉽게 인식합니다.
- 자바스크립트 의존이 없어 로딩 속도에도 영향을 주지 않습니다.
- 디자인 유연성: 확장 프로그램에 따라 목차 스타일을 자유롭게 변경 가능합니다.
단점
- 확장 프로그램 필요: 브라우저에 확장 프로그램을 설치해야 합니다. 확장 프로그램이 업데이트 되지 않거나 종료 되면 더 이상 사용할 수 없습니다.
SEO 관점에서의 최적 방법
- SEO 우선시:
- 정적 목차 방식(직접 작성 또는 브라우저 확장 프로그램 사용)이 더 유리합니다.
- 검색 엔진이 HTML 구조를 쉽게 파악하고 크롤링 속도가 빠릅니다.
- 자주 업데이트:
- 콘텐츠 변경이 잦은 경우, 자바스크립트를 활용한 동적 목차 또는 브라우저 확장 프로그램 방식이 유지보수 효율성을 제공합니다.
- 단, 자바스크립트를 활용한 동적 생성은 페이지 로딩 속도를 최소화하도록 최적화(코드 최소화 및 지연 로딩)해야 합니다.
여기까지 티스토리 목차 만드는 방법에 대하 알아보았습니다. 블로그의 특성과 운영 목표에 맞게 최적의 방식을 선택하세요!
