구글이 글의 맥락을 100% 파악하게 만드는 헤더 태그 (H1~H4) 계층 규칙

[완벽한 헤더 태그 시맨틱 트리 구조]

  <h1> [문서 대주제: 2026 테크니컬 SEO 가이드] (페이지당 오직 1개!)
   │
   ├─► <h2> [1장. 크롤링 최적화 메커니즘]
   │    ├─► <h3> 1-1. 구글봇 크롤 예산의 정의
   │    └─► <h3> 1-2. 301 리다이렉트 체인 해결법
   │
   ├─► <h2> [2장. 코어 웹 바이탈 엔지니어링]
   │    ├─► <h3> 2-1. 모바일 INP 200ms 단축 전략
   │    └─► <h3> 2-2. LCP 리소스 우선순위 프리로드
   │
   └─► <h2> [3장. JSON-LD 스키마 마크업 구축]

<!-- 완벽한 시맨틱 헤더 계층 구조 및 직답 캡슐 예시 -->
<article>
  <!-- H1: 페이지 전체의 단 하나의 대주제 (메인 키워드 포함) -->
  <h1>2026 구글 E-E-A-T 완벽 가이드: 인간 신뢰도 증명법</h1>

  <!-- H2: 주요 챕터 (검색 의도를 담은 1차 질문형 소제목) -->
  <section>
    <h2 id="chapter-1">1. E-E-A-T의 4대 핵심 축과 랭킹 반영 원리</h2>

    <!-- 직답 캡슐: 피처드 스니펫 추출 타겟 단락 -->
    <p class="summary-capsule">
      구글 E-E-A-T는 경험(Experience), 전문성(Expertise), 권위도(Authoritativeness), 신뢰성(Trustworthiness)의 4대 지표로 콘텐츠의 신뢰 가치를 평가하는 품질 가이드라인입니다.
    </p>

    <!-- H3: 챕터 내부의 구체적 2차 세부 논점 -->
    <h3 id="section-1-1">1-1. Experience(직접 경험)가 최우선 요소로 부상한 배경</h3>
    <p>실제 제품을 직접 사용해 본 1인칭 후기와 실측 데이터가 필수적입니다...</p>

    <h3 id="section-1-2">1-2. Authoritativeness(권위도)를 입증하는 공인 프로필</h3>
    <p>저자의 링크드인 및 학술 논문 레퍼런스를 연결합니다...</p>
  </section>
</article>

[현업 4대 헤더 태그 실수와 교정 가이드]

1. 로고 이미지에 <h1>을 박아놓은 실수
   - 문제: 모든 하위 페이지의 H1이 "회사 로고"로 통일되어 개별 글의 고유 주제가 증발함.
   - 해결: 로고는 <div> 또는 <span>으로 감싸고, 본문 타이틀에만 고유 <h1> 부여.

2. 시각적 디자인을 위해 H태그를 쓰는 행위
   - 문제: "글자가 커 보여야 하니까 <h2>로 써야지" -> 시맨틱 계층 파괴!
   - 해결: 크기 조절은 CSS class(.text-xl, .font-bold)로 처리하고, H태그는 의미론적으로만 사용.

3. 사이드바와 푸터에 <h3> 태그 남발
   - 문제: "최근 글", "인기 태그", "회사 정보"가 본문과 대등한 <h3>로 인식되어 주제 희석.
   - 해결: 네비게이션과 푸터는 <nav>, <aside>, <p> 태그로 마크업.

4. H태그 없이 3,000자 통짜 글 작성
   - 문제: 구글봇이 글의 논점 단락을 구분하지 못해 긴 글 전체를 저품질 판정.
   - 해결: 500자 단위마다 명확한 H2/H3 소제목으로 단락 분할.

// 본문 H2, H3 태그를 자동 수집하여 목차(TOC)를 생성하는 경량 자바스크립트
document.addEventListener('DOMContentLoaded', () => {
  const headers = document.querySelectorAll('article h2, article h3');
  const tocContainer = document.getElementById('table-of-contents');
  if (!tocContainer || headers.length === 0) return;

  const tocList = document.createElement('ul');
  headers.forEach((header, index) => {
    // 헤더에 ID가 없으면 자동 부여
    if (!header.id) {
      header.id = `heading-section-${index + 1}`;
    }

    const listItem = document.createElement('li');
    listItem.className = header.tagName.toLowerCase() === 'h3' ? 'toc-sub-item' : 'toc-main-item';

    const link = document.createElement('a');
    link.href = `#${header.id}`;
    link.textContent = header.textContent.replace(/^H[23]\s*\d*\.?\s*/, ''); // H2/H3 접두사 정돈

    listItem.appendChild(link);
    tocList.appendChild(listItem);
  });

  tocContainer.appendChild(tocList);
});