블로그스팟 자동 목차(TOC) 생성법: 긴 글도 끝까지 읽게 만드는 마법의 코드

 

블로그스팟 자동 목차(TOC) 만들기: 긴 글 가독성을 높이는 필살기

글이 길어질수록 독자는 지치기 마련입니다. 이때 자동 목차가 있다면 독자는 원하는 구간으로 즉시 이동할 수 있고, 구글은 여러분의 글을 아주 잘 구조화된 고품질 콘텐츠로 인식합니다. 한 번만 세팅하면 소제목을 쓸 때마다 자동으로 목차가 생성되는 코드를 소개합니다.

1. 자동 목차 구현을 위한 자바스크립트 코드

먼저 블로그가 소제목(H2, H3)을 스스로 인식할 수 있도록 두뇌를 달아주는 작업입니다.

• 관리자 메뉴 [테마] -> [HTML 편집]으로 이동합니다.
  
  
  
  
  
• </body> 태그 바로 위에 아래 코드를 복사해서 붙여넣으세요.

<script>
function createTOC() {
    var toc = document.getElementById("toc");
    var content = document.querySelector(".post-body");
    var headings = content.querySelectorAll("h2, h3");
    if (headings.length === 0) return;

    var tocList = "<div class='toc-title'>목차</div><ul>";
    headings.forEach(function(heading, index) {
        var id = "toc-" + index;
        heading.setAttribute("id", id);
        var level = heading.tagName.toLowerCase() === "h2" ? "toc-h2" : "toc-h3";
        tocList += "<li class='" + level + "'><a href='#" + id + "'>" + heading.innerText + "</a></li>";
    });
    tocList += "</ul>";
    toc.innerHTML = tocList;
}
window.onload = createTOC;
</script>

2. 목차 디자인을 위한 CSS 설정

목차가 본문과 잘 어우러지도록 박스 디자인을 입혀줍니다. [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]에 넣으세요.

#toc {
    background-color: #f9f9f9;
    border: 1px solid #e2e2e2;
    padding: 20px;
    margin-bottom: 30px;
    display: inline-block;
    min-width: 250px;
    border-radius: 8px;
}
.toc-title { font-weight: bold; font-size: 18px; margin-bottom: 10px; color: #333; }
#toc ul { list-style: none; padding: 0; margin: 0; }
.toc-h2 { margin-left: 0; font-weight: 500; margin-top: 5px; }
.toc-h3 { margin-left: 20px; font-size: 0.9em; color: #666; margin-top: 3px; }
#toc a { text-decoration: none; color: #007bff; }
#toc a:hover { text-decoration: underline; }

3. 포스팅 본문에 목차 표시하기

이제 글을 쓸 때 목차가 나타나길 원하는 위치(보통 첫 번째 소제목 바로 위)에 아래 한 줄만 적어주면 됩니다.

[본문 삽입용 코드]

<div id="toc"></div>

💡 목차 활용 시 SEO 꿀팁

• H태그 순서 준수: H2 없이 H3만 쓰거나 순서를 건너뛰지 마세요. 논리적인 구조가 깨지면 자동 목차 코드도 혼란을 겪을 수 있습니다.
• 키워드 포함: 목차에 나타나는 소제목들에 핵심 키워드를 적절히 섞으세요. 구글 검색 결과에서 내 글의 목차가 링크 형태로 노출될 확률이 매우 높아집니다.
• 앵커 링크: 목차를 클릭했을 때 해당 위치로 '점프'하는 기능은 체류 시간을 높이는 데 큰 도움을 줍니다.

이제 수동으로 링크를 걸지 마세요. 자동 목차 하나로 여러분의 블로그를 훨씬 전문적인 웹 매거진처럼 변화시킬 수 있습니다!