블로그 자동 생성 목차의 SEO 문제와 해결 방안,검색 노출 막는 목차 구조

블로그 목차, 사용자 접근성은 좋은데 SEO는 괜찮을까?

블로그 콘텐츠의 품질과 접근성을 높이기 위한 여러 도구 중 하나가 바로 '목차(Table of Contents)'입니다. 특히 글이 길고 구조적인 경우, 목차는 독자가 내용을 빠르게 파악하고 원하는 부분으로 이동하는 데 큰 도움이 되며 콘텐츠를 논리적으로 운영할 수 있습니다. 하지만 자동으로 생성되는 목차 기능이 널리 사용되면서, SEO 측면에서 의도치 않은 문제를 일으키는 사례도 발생하고 있습니다.

목차 기능의 양날의 검: SEO 최적화와 CLS 리스크 관리

이번 글에서는 자동 목차의 장점과 함께, 그로 인해 발생할 수 있는 SEO상의 문제점, 그리고 그 해결책까지 자세히 살펴보겠습니다.

목차 기능의 장점: 사용자 접근성 향상

블로그 글에 목차를 포함하면 다음과 같은 이점이 있습니다.

• 글의 구조를 한눈에 파악할 수 있음: 긴 글이라도 주요 내용을 빠르게 확인하고 이동할 수 있습니다.
• 탐색성 강화: 사용자가 원하는 정보를 쉽게 찾을 수 있어, 이탈률을 낮추는 데 기여합니다.
• 접근성 개선: 시각적인 내비게이션 역할을 하며, 웹 접근성 측면에서도 긍정적인 효과를 줍니다.

이러한 이유로 많은 블로거들이 글 상단에 목차를 배치하고 있으며, 이는 매우 일반적인 전략입니다.

자동 목차의 한계와 SEO 문제

문제는 자동 생성되는 목차기능에 있습니다.
운영자가 수동으로 작성한 목차는 내부 링크 구조를 명확히 드러내면서 검색 엔진에 긍정적인 신호를 주는 요소로 평가됩니다.
그러나 자동 생성 목차는 브라우저 렌더링 이후 자바스크립트를 통해 동적으로 생성되는 경우가 많아, 콘텐츠의 시각적 안정성을 해치는 CLS(Cumulative Layout Shift) 문제를 유발할 수 있습니다.

또한, 구글은 2023년 말 이후 자동 생성된 링크나 목차를 스팸성 요소로 판단하는 경향을 보이며, 관련 알고리즘을 강화한 바 있습니다.

이 때문에 저 역시 자동 목차 기능을 한동안 중단했던 경험이 있습니다.

자동화 생성 목차의 문제점: CLS와 SEO 이슈

최근 몇 년 사이, 티스토리, 워드프레스, Notion 기반 블로그 등에서는 목차가 자동으로 생성되거나 자바스크립트를 통해 렌더링되는 방식이 널리 사용되고 있습니다. 그러나 이러한 클라이언트 사이드 기반의 자동 목차는 다음과 같은 문제를 유발할 수 있습니다.

1. CLS 문제 (Cumulative Layout Shift)

자동 생성 목차는 콘텐츠가 완전히 렌더링된 후, 자바스크립트를 통해 뒤늦게 삽입되는 경우가 많습니다. 이로 인해 페이지의 레이아웃이 갑작스럽게 밀리거나 흔들리는 CLS(Cumulative Layout Shift) 현상이 발생하게 됩니다.
이는 웹 핵심 지표(Core Web Vitals) 중 하나로, 사용자 경험을 저해하고 SEO 평가에 부정적인 영향을 미칠 수 있습니다.

2. 구글 스팸 처리 강화 이슈

2024년 12월, 구글은 코어 알고리즘 업데이트를 통해 자동화된 내부 링크 구조에 대한 평가 기준을 강화했습니다. 주요 내용은 다음과 같습니다:

• 콘텐츠 품질이 낮은 자동화된 링크 생성 패턴을 스팸으로 분류
• 내부 링크 최적화가 아닌, 의도적인 검색 순위 조작 시도로 인식될 경우 패널티 부여 가능

즉, 자동화된 목차가 동일한 포맷의 링크를 반복적으로 나열하고, 설명 없이 제목만 삽입된 형태라면, 구글 검색엔진에서 스팸 링크 집합으로 인식될 가능성이 높아졌습니다.

3. 불필요한 콘텐츠 증가와 콘텐츠 접근성 저하

목차는 정보 탐색에 유용한 내비게이션 도구이지만, 무조건 글의 상단에 배치될 경우 오히려 메인 콘텐츠의 접근을 방해할 수 있습니다. 특히 자동 생성 목차가 길고 과도하게 상세한 경우, 사용자는 핵심 콘텐츠에 도달하기까지 더 많은 스크롤과 시간이 소요되며, 이로 인해 이탈률 증가나 사용자 불편으로 이어질 수 있습니다.

그렇다면 목차를 포기해야 할까?

목차가 사용자에게 유익한 도구인 것은 분명합니다. 하지만 SEO와 사용자 경험(UX)을 모두 고려한다면, 다음과 같은 전략적 활용법이 필요합니다.

대안 1: 사이드바 팝업 목차

사용자에게 선택군을 주자!

콘텐츠 상단에 고정된 형태가 아닌, 사이드바 팝업형 목차 UI로 전환하는 방식입니다. 자동 생성 목차의 CLS 문제와 SEO 패널티 우려를 줄이기 위한 실용적인 방법 중 하나는 사이드바 팝업형 목차 UI를 사용하는 방식입니다. 이 방법은 목차를 글 상단에 고정하여 CLS(Cumulative Layout Shift)를 유발하는 방식이 아니라, 사용자가 클릭할 때만 목차를 보여주는 구조로 UX와 SEO를 모두 고려한 형태입니다.

• 콘텐츠 로딩이 완료된 후 팝업 버튼 클릭 시에만 목차가 표시되도록 처리
• 초기 CLS 문제를 방지하고, 콘텐츠 흐름을 방해하지 않음
• 구글 크롤러가 목차 내부의 자동 링크를 크롤링하지 않도록 <div style="display:none">, aria-hidden="true", 또는 robots noindex 속성 등을 조합하여 처리 가능

목차 토글 버튼

본문 영역 바깥, 사이드바나 상단 근처가 가장 일반적이며, 다음 중 한 곳에 넣으면 좋습니다:

<!-- 목차 토글 버튼 -->
<div id="toc-toggle">목차</div>

<!-- 목차 영역 -->
<div id="toc-popup">
  <div id="toc">
    <ul></ul>
  </div>
</div>

자바스크립트 코드 설치 위치

일반적으로 </body> 태그 바로 위에 넣습니다. 이렇게 하면 페이지가 다 로드된 뒤에 실행되므로 안정적입니다.

<script>
document.addEventListener("DOMContentLoaded", () => {
  const tocList = document.querySelector("#toc ul");
  const popup = document.getElementById("toc-popup");
  const toggle = document.getElementById("toc-toggle");
  const headings = document.querySelectorAll(".tt_article_useless_p_margin.contents_style h2, .tt_article_useless_p_margin.contents_style h3, .tt_article_useless_p_margin.contents_style h4");

  if (!headings.length) {
    popup.remove();
    return;
  }

  headings.forEach((heading, i) => {
    if (!heading.id) heading.id = "heading-" + i;
    const li = document.createElement("li");
    if (heading.tagName === "H2") li.classList.add("h2-item");
    else if (heading.tagName === "H3") li.classList.add("h3-item");
    else if (heading.tagName === "H4") li.classList.add("h4-item");
    const a = document.createElement("a");
    a.href = "#" + heading.id;
    a.textContent = heading.textContent;
    li.appendChild(a);
    tocList.appendChild(li);
  });

  let userToggled = false;

  function updateDisplay() {
    if (!userToggled) {
      popup.style.display = window.innerWidth >= 1500 ? "block" : "none";
    }
  }

  updateDisplay();

  toggle.addEventListener("click", () => {
    popup.style.display = popup.style.display === "block" ? "none" : "block";
    userToggled = true;
  });

  window.addEventListener("resize", updateDisplay);
});
</script>

이 목차는 초기에는 숨겨져 있으며, 데스크톱 화면에서만 자동 표시되도록 구성되어 있습니다.
모바일 사용자나 작은 화면에서는 사용자가 버튼을 눌러야만 보이며, 구글 크롤러에 노출되지 않도록 CSS나 속성을 추가할 수도 있습니다.
또한 robots 메타태그로 목차를 포함한 특정 블록의 인덱싱을 제한하려면 <meta name="robots" content="noindex"> 또는 <div style="display:none"> 안에 배치하는 방식도 가능합니다.

목차 CSS

#toc-toggle {
    margin-top: 20px;
    background-color: #1f0101;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: background-color 0.3s;
    text-align: center;
}

#toc-toggle:hover {
    background-color: #444;
}

#toc-popup::before {
    content: "목차";
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    padding: 10px;
}

#toc-popup {
    position: fixed;
    top: 300px;
    right: 10px;
    width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    background-color: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    z-index: 1000;
    display: none;
    padding: 15px;
    font-family: 'SF Mono', 'Consolas', monospace;
    border: 1px solid #eaeaea63;
}

#toc {
    position: relative;
}

#toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#toc ul ul {
    padding-left: 20px;
    margin-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.15);
}

#toc li {
    position: relative;
    margin-bottom: 4px;
    line-height: 1.4;
}

#toc li a {
    text-decoration: none;
    color: #eaeaeac7;
    font-size: 0.9rem;
    display: block;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
    white-space: normal;
}

#toc li.h2-item > a {
    color: #f0f0f0;
    font-weight: 500;
    padding-left: 24px;
}

#toc li.h2-item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

#toc li.h3-item > a {
    padding-left: 44px;
    font-size: 0.88rem;
}

#toc li.h3-item > a:before {
    content: "├─";
    position: absolute;
    left: 24px;
    color: rgba(255,255,255,0.4);
}

#toc li.h4-item > a {
    padding-left: 64px;
    font-size: 0.85rem;
    color: #b0b0b0;
}

#toc li.h4-item > a:before {
    content: "└─";
    position: absolute;
    left: 44px;
    color: rgba(255,255,255,0.3);
}

#toc li:last-child > a:before {
    content: "└─";
}

#toc li a:hover {
    background: rgba(100, 100, 255, 0.1);
    color: #fff;
}

#toc li a.active {
    color: #8073df;
    font-weight: 500;
    background: rgb(148 54 111 / 10%);
}

#toc-popup li a.active::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d0a702;
}

#toc-popup::-webkit-scrollbar {
    width: 6px;
}

#toc-popup::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.4);
    border-radius: 3px;
}

대안 2: 사이드 렌더링 또는 정적 목차

자바스크립트로 동적으로 목차를 삽입하는 대신, 처음부터 HTML 문서 내에 목차를 직접 포함하는 방식이 가장 SEO 친화적입니다. 이를 정적 목차 혹은 서버사이드 렌더링 방식의 목차 삽입이라고 합니다. 가능하다면 자바스크립트를 통한 렌더링 대신, HTML에 직접 목차를 삽입하는 방식이 더 바람직합니다. 다음과 같은 이점이 있습니다:

• 페이지 로딩 시 이미 DOM에 목차가 존재하여 CLS 없음
• 구글이 목차의 링크를 콘텐츠 일부로 인식하므로 오히려 내부 링크 최적화에 도움

단점

• 수동으로 관리해야 하기 때문에 자동화가 어렵고, 매번 목차를 직접 작성하거나 템플릿화해야 함
• 티스토리와 같은 CMS에서는 편집의 자유도가 제한되어 HTML 직접 수정이 어려울 수 있음

티스토리 블로그처럼 HTML 구조 편집이 제한된 플랫폼에서는 어려울 수 있지만, 워드프레스나 자체 구축 블로그라면 이 방식을 적극 추천합니다.

자동화 목차는 '접근성'과 'SEO' 사이에서 균형

자동화 목차는 분명 사용성을 높이는 좋은 도구입니다. 그러나 무분별한 적용은 SEO 성과를 해치고, 구글의 알고리즘에 의해 불이익을 받을 수 있습니다. 목차 기능을 유지하면서도 SEO 친화적으로 구성하려면 다음 사항을 지켜야 합니다:

• 목차는 가능하면 초기 로딩에서 DOM에 포함되도록 처리
• 자동 생성된 목차는 사이드바 팝업 형태 또는 비노출 영역으로 처리
• 목차 내부 링크는 콘텐츠와 관련된 키워드 기반 구조로 구성되어야 함