블로그 목차, 사용자 접근성은 좋은데 SEO는 괜찮을까? (CLS 리스크 관리)

블로그 목차(Table of Contents)는 사용자 접근성을 높이지만, 자동 생성 시 CLS(Cumulative Layout Shift) 문제와 구글의 자동 링크 스팸 처리 위험을 안고 있습니다. 이 글은 자동 목차의 SEO 문제점을 분석하고, SEO 최적화와 Core Web Vitals 지표를 모두 만족시키는 사이드바 팝업 목차 구현 전략과 코드를 제시합니다.

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

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

이번 글에서는 자동 목차의 장점과 함께, 그로 인해 발생할 수 있는 SEO상의 문제점, 그리고 그 해결책까지 자세히 살펴보겠습니다. Core Web Vitals(코어 웹 바이탈)에 목차 기능을 안전하고 효율적으로 사용하는 방법이 중요합니다.

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

블로그 글에 목차를 포함하면 다음과 같은 이점이 있습니다. 이는 사용자 경험(UX)에 직접적으로 기여하는 요소입니다.

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

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

자동 목차의 한계와 SEO 문제점 심층 분석

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

또한, 구글은 2023년 말 이후 자동 생성된 링크나 목차를 스팸성 요소로 판단하는 경향을 보이며, 관련 알고리즘을 강화한 바 있습니다. 이 때문에 저 역시 자동 목차 기능을 한동안 중단했던 경험이 있습니다.

1. CLS 문제 (Cumulative Layout Shift)와 Core Web Vitals

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

2. 구글 스팸 처리 강화 이슈와 자동 링크 인식

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

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

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

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

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

그렇다면 목차를 포기해야 할까? (SEO와 UX 균형 전략)

목차가 사용자에게 유익한 도구인 것은 분명합니다. 하지만 SEO와 사용자 경험(UX)을 모두 고려한다면, 다음과 같은 전략적 활용법이 필요합니다. 핵심은 필요할 때만 목차를 보여주고, 레이아웃에 영향을 주지 않는 것입니다.

대안 1: 사이드바 팝업 목차 구현 (CLS 방지 전략)

사용자에게 선택권을 부여하고 CLS 문제를 최소화하자!

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

콘텐츠 로딩이 완료된 후 팝업 버튼 클릭 시에만 목차가 표시되도록 처리하여 초기 CLS 문제를 방지하고, 콘텐츠 흐름을 방해하지 않습니다.
구글 크롤러가 목차 내부의 자동 링크를 크롤링하지 않도록 div style="display:none", aria-hidden="true", 또는 robots noindex 속성 등을 조합하여 처리하여 스팸성 링크로 인식될 위험을 낮춥니다.
데스크톱 환경에서는 사이드바에 고정 노출하여 탐색 편의성을 유지할 수 있습니다.

HTML 구조 예시 (목차 토글 버튼과 팝업 영역)

!-- 목차 토글 버튼 -- 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 || !toggle) {

 if(popup) popup.remove();

 if(toggle) toggle.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() {

 // 1500px 이상 데스크톱 환경에서는 자동으로 목차를 표시 (팝업 형태 유지)

 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나 HTML 속성을 조합하여 사용합니다.

대안 2: 서버사이드 렌더링 또는 정적 목차 (가장 안전한 SEO 방식)

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

페이지 로딩 시 이미 DOM에 목차가 존재하여 CLS 발생 위험이 전혀 없음
구글이 목차의 링크를 콘텐츠 일부로 인식하므로 오히려 내부 링크 최적화에 도움을 주어 PageRank 흐름을 개선할 수 있음

단점은 수동으로 관리해야 하므로 자동화가 어렵다는 점입니다. 티스토리 블로그처럼 HTML 구조 편집이 제한된 플랫폼에서는 어려울 수 있지만, 워드프레스나 자체 구축 블로그라면 이 방식을 적극 추천합니다.

자동화 목차는 ‘접근성’과 ‘SEO’ 사이에서 균형 잡기

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

목차는 가능하면 초기 로딩에서 DOM에 포함되도록 처리하여 CLS를 피합니다.
자바스크립트로 자동 생성된 목차는 사이드바 팝업 형태 또는 초기 비노출 영역으로 처리하여 메인 콘텐츠를 밀어내지 않게 합니다.
목차 내부 링크는 콘텐츠와 관련된 키워드 기반 구조로 구성되어야 하며, 구글에 스팸으로 인식되지 않도록 주의해야 합니다.