검색을 하다 보면 목차를 넣어 놓은 글을 볼 때가 가끔 있다. 그게 멋있어 보여 나도 넣었다가 아무래도 좀 웃기는 것 같아 삭제했었다. 무슨 논문도 아니고 리포트도 아닌데, 이건 아니지 않나.
근데, 시간이 지나고 나서 보니까 목차가 있는 글이 읽기에 편했다. 내가 원하는 정보를 목차에서 찾아 클릭을 하면, 빠르게 그 항목으로 이동해 그 부분만 읽을 수 있기 때문이다.
이런 사용자라면 체류 시간 측면에서는 손해긴 해도, 좋은 사용자 경험(UX, User Experience)을 제공한 것은 맞다. 그래서 목차는 약간 계륵 같은 존재다. 늘 그렇듯 목차도 플러그인 없이 넣는 방법을 설명한다.
목차 생성 자동 코드 넣기
functions.php 코드
아래 코드를 자신의 functions.php에 붙여넣기 하면 이 문서의 상단에 보이는 목차가 생성된다.
/* ===== 7. 자동 목차(TOC) 생성 (h2, h3 계층형) ===== */
add_filter('the_content', function($content) {
if (!is_singular('post') || is_admin()) return $content;
preg_match_all('/<(h2|h3)[^>]*>(.*?)<\/\1>/is', $content, $matches, PREG_SET_ORDER);
if (empty($matches)) return $content;
$toc = '<div class="simple-toc">';
$toc .= '<span class="toc-title">목차</span>';
$toc .= '<ul class="toc-list">';
$h2_count = 0;
$h3_count = 0;
foreach ($matches as $i => $match) {
$tag = $match[1];
$full_tag = $match[0];
$title_text = $match[2];
$id = 'toc-anchor-' . $i;
$clean_title = strip_tags($title_text);
if ($tag === 'h2') {
$h2_count++;
$h3_count = 0;
$display_number = $h2_count . ".";
$item_class = 'toc-item-h2';
} else {
$h3_count++;
$display_number = $h2_count . "." . $h3_count;
$item_class = 'toc-item-h3';
}
// 본문 태그에 ID 삽입
$new_h = str_replace('<' . $tag, '<' . $tag . ' id="' . $id . '"', $full_tag);
$content = preg_replace('/' . preg_quote($full_tag, '/') . '/', $new_h, $content, 1);
// 목차 항목 생성
$toc .= "<li class='{$item_class}'><a href='#$id'><span class='toc-num'>$display_number</span> $clean_title</a></li>";
}
$toc .= '</ul></div>';
if (preg_match('/<(h2|h3)[^>]*>/i', $content, $first_match, PREG_OFFSET_CAPTURE)) {
$pos = $first_match[0][1];
$content = substr_replace($content, $toc, $pos, 0);
}
return $content;
});목차 작동 원리
위 코드는 본문에서 h2태그와 h3 태그 만 목차로 뽑아 올린다. 게시 글에 h4 태그도 가끔 쓰긴 했는데 h4까지 넣으면 너무 복잡해질 것 같아 뺐다.
- 카운터 작동:
$h2_count는h2를 만날 때마다 올라가고,$h3_count는h2가 새로 나타날 때마다 0으로 초기화된다. - 번호 형식:
h2→ 1. , 2. , 3.h3→ 1.1, 1.2, 2.1 (앞의 숫자는 현재 부모h2번호를 따라감)
추가 CSS 코드
코드의 유지 보수와 가독성을 위해 PHP 로직(functions.php에 입력))과 CSS 디자인은 분리하는 것이 좋다.
아래 코드를 모양> 테마 편집기> 추가 CSS에 넣어주면 된다. 아래 코드를 자신의 블로그의 전체적인 디자인에 맞게 수정하면 된다. 물론 그냥 써도 된다.
.simple-toc {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 20px;
}
.toc-title {
display: block;
font-size: 1rem;
font-weight: bold;
color: #333;
}
.toc-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.toc-item-h2 {
margin-top: 5px;
font-size: 0.95rem;
}
.toc-item-h2 a {
text-decoration: none;
color: #333;
}
.toc-item-h3 {
margin-left: 10px;
font-size: 0.95rem;
}
.toc-item-h3 a {
text-decoration: none;
color: #666;
}
.toc-list li a:hover {
text-decoration: underline;
color: #000;
}목차와 SEO의 관계
목차(TOC)는 글 전체의 ‘개요(Outline)’ 역할을 한다. 사람 뿐만 아니라 검색엔진에게도 내 글의 구조를 빠르게 파악하게 하여 특정 키워드(Topic Coverage) 링크를 연결하여 특정 주제의 권위(Topic Authority)로 이어지게 할 수 있다.
구조가 잘 짜여진 글은 검색 결과 최상단에 추천 스니펫(Featured Snippets)으로 노출될 확률이 높아진다. 내 글이 추천 스니펫이나 AI답변에서 링크로 인용되어 있는 걸 우연히 봤을 때 신기했다. 아니 이누무시키들이 말도 없이.
목차를 썼다고 진짜로 더 높아지려나?
댓글