H 태그 위계 설계

정의

H 태그 위계 설계는 H1-H6 헤더를 의미적 순서로 배치해 페이지 구조를 명확히 하고 LLM의 청크 추출과 접근성을 향상시키는 작업이다.

TL;DR

H 태그(H1-H6)는 시각적 크기가 아닌 의미적 위계를 나타내는 HTML 시맨틱 요소다. H1은 페이지당 1개, H2는 메인 섹션, H3는 서브 섹션으로 순서를 건너뛰지 않는다. AEO 시대에는 LLM이 H 태그를 청크 경계로 인식하므로, 자연어 질문형 헤더가 AI 인용 가능성을 높인다.

이 가이드로 해결되는 문제

"헤더를 그냥 디자인(큰 글씨)으로만 쓰고 있는데, SEO/AEO에서 뭐가 중요한지 모르겠다"는 상황에 답한다. H 태그를 의미 없이 크기 조절 도구로 사용하면 SEO 기회를 놓치고, AEO에서 LLM 인용 가능성을 낮추며, 접근성도 해친다.

H 태그의 4가지 역할

1. 시맨틱 구조 (Semantic HTML)

HTML 표준에서 H 태그는 문서의 의미적 섹션 경계를 나타낸다. 브라우저와 검색 엔진 모두 이 구조를 기반으로 페이지를 해석한다. 시각적 크기는 CSS로 별도 제어하는 것이 올바른 구조다.

2. SEO 시그널

H1과 H2는 온페이지 SEO의 중요 시그널이다. Google은 H 태그를 페이지 주제와 섹션 내용을 파악하는 데 사용한다. H1에 핵심 키워드가 포함되어 있으면 페이지 주제 매칭 신호를 강화한다.

Google의 John Mueller는 H1이 여러 개라도 직접 페널티는 없다고 언급했지만, H1 하나로 주제 명확성을 유지하는 것이 표준 권장 사항이다.

3. AEO/LLM 청크 추출

LLM 기반 답변 엔진은 RAG(검색증강생성) 구조로 페이지를 청크 단위로 처리한다 (자세히는 [RAG 작동 원리] 참조). H 태그는 이 청크 분할의 경계 신호로 활용된다.

• H2 헤더 = 독립적인 답변 블록의 입구 역할 (자세히는 [답변 블록 만들기] 참조)
• 헤더 바로 아래 첫 문장을 BLUF로 작성하면, 그 청크가 AI 인용 후보가 됨
• 자연어 질문형 헤더는 LLM 질의와 의미적으로 직접 매칭됨

4. 접근성 (Accessibility)

스크린 리더 사용자는 H 태그 위계를 통해 페이지 구조를 파악하고 원하는 섹션으로 빠르게 이동한다. 위계가 무너지면 스크린 리더 사용자의 탐색 경험이 크게 저하된다. WCAG 2.1 접근성 기준에서도 올바른 헤딩 구조를 요구한다.

H 태그 위계 6가지 규칙

1. H1은 페이지당 1개

한 페이지에 H1은 반드시 하나만 사용한다. H1은 해당 페이지의 최상위 주제를 나타내며, 보통 타이틀 태그와 거의 동일하게 작성한다 (자세히는 [타이틀 태그] 참조). H1이 여러 개면 Google과 LLM이 페이지 주제를 명확히 식별하기 어렵다.

2. 위계 순서 건너뜀 금지

올바른 순서: H1 → H2 → H3 → H4
잘못된 순서: H1 → H3 (H2 건너뜀)

H2 다음에 H4를 사용하거나, H1 다음 바로 H4를 사용하는 것은 HTML 표준 위반이다. 스크린 리더와 검색엔진 모두에 잘못된 구조 신호를 보낸다.

3. H2 = 메인 섹션 (3-7개 권장)

H2는 페이지의 주요 섹션을 나눈다. 한 페이지에 H2가 너무 많으면 주제가 분산되고, 너무 적으면 구조화가 부족하다. 3-7개가 일반적으로 적정하다.

4. H3 = 서브 섹션

H3는 H2 섹션의 하위 항목을 분류할 때 사용한다. H3 없이 H2만으로 충분하다면 굳이 H3를 추가할 필요 없다.

5. H4-H6 = 특수한 경우만

H4 이하는 복잡한 기술 문서, 법률 문서, 학술 콘텐츠에서 필요한 경우 사용한다. 일반 블로그나 마케팅 콘텐츠에서 H4 이하는 거의 사용하지 않는 것이 좋다.

6. 헤더에 자연스러운 키워드 포함

헤더는 해당 섹션의 핵심 질문 또는 개념을 반영해야 한다. 자연스럽게 키워드가 포함되도록 작성하되, 키워드 스터핑은 금물이다. 자연어 질문형 헤더("H1 태그가 SEO에 미치는 영향은?")가 LLM 매칭에 효과적인 경우도 많다.

H 태그와 답변 블록의 관계

H 태그를 질문으로, 헤더 바로 아래 첫 문장을 BLUF 답변으로 구성하면 LLM 청크 추출에 최적화된 구조가 된다.

좋은 구조 예시:

## H2: 내부 링크가 SEO에 미치는 영향은?

내부 링크는 크롤 가이드, 토픽 권위 전달, 사용자 탐색, 콘텐츠 위계 명시의 4가지 역할을 한다.

(이후 상세 설명)

나쁜 구조 예시:

## H2: 내부 링크

내부 링크에 대해 알아보기 전에, 먼저 링크가 무엇인지 이해해야 합니다. 링크는 하이퍼텍스트의
기본 구성 요소로서...

(핵심 답변이 한참 뒤에 등장)

첫 번째 구조에서 H2와 첫 문장이 함께 하나의 자기완결적 청크를 구성하여 AI가 그대로 인용할 수 있다.

H 태그 위계 설계 5단계

1단계: 페이지 핵심 질문 정의

이 페이지가 답하는 단 하나의 주요 질문을 명확히 한다. 이것이 H1의 내용이 된다.

2단계: H1 작성

H1은 타이틀 태그와 거의 동일하게 작성하되, 브랜드명은 보통 타이틀에만 추가한다 (자세히는 [타이틀 태그] 참조). H1은 페이지 주제를 가장 명확하게 표현하는 문장이다.

3단계: H2로 메인 섹션 분리

페이지 내용을 3-7개의 주요 섹션으로 나누고 각각의 H2를 작성한다. H2 목록만 읽어도 페이지 전체 구조가 파악되어야 한다.

4단계: H3로 서브 분리

H2 아래 세부 항목이 필요한 경우 H3를 사용한다. H3는 H2 섹션의 하위 분류다.

5단계: 목차로 읽기 검증

H 태그만 추출해 목차를 만들었을 때 페이지 내용이 논리적으로 전달되는지 확인한다. 목차가 어색하면 H 태그 구조를 수정한다.

H 태그의 흔한 실수 4가지

1. 시각 디자인 우선 (H 태그 크기 목적 사용)

CSS 스타일링 대신 H 태그로 글자 크기를 조절하는 것은 잘못된 사용이다. H1을 여러 개 사용하거나, H3로 크기를 키운 다음 H2를 사용하는 구조가 대표적인 실수다.

2. 키워드 스터핑

헤더에 동일 키워드를 과도하게 반복하는 것은 Google 가이드라인 위반이며 오히려 역효과다.

3. 빈 H 태그 또는 스페이서 용도 사용

시각적 공백을 만들기 위해 내용 없는 <h2></h2>를 삽입하거나, 빈 H 태그를 레이아웃 도구로 사용하는 것은 구조적 오류다.

4. 너무 깊은 위계

H4, H5, H6를 일반 콘텐츠에 과도하게 사용하면 구조가 복잡해지고 가독성이 떨어진다. 대부분의 콘텐츠는 H1-H3으로 충분하다.

AEO 시대의 H 태그 변화

자연어 질문형 헤더 강화

전통적인 SEO는 헤더에 키워드를 명사형으로 포함했다 ("내부 링크"). AEO 시대에는 자연어 질문형 헤더가 LLM의 자연어 쿼리와 직접 매칭되므로 더 효과적인 경우가 많다 ("내부 링크는 SEO에 어떤 영향을 주나요?").

People Also Ask 활용

Google Search Console과 검색 결과의 "관련 질문(People Also Ask)" 항목을 참고해 H2/H3를 작성하면 AI 답변 엔진의 주요 질의와 일치하는 구조를 만들 수 있다.

CEP를 H2로 변환

CEP(Category Entry Point)를 H2 헤더로 직접 표현하면, 그 상황에서 정보를 검색하는 사용자의 자연어 쿼리와 매칭된다 (자세히는 [CEP가 AEO 시대에 더 중요한 이유] 참조). 프롬프트 키워드 분석 결과를 H2 작성에 활용하면 더 효과적이다 (자세히는 [프롬프트 키워드] 참조).

검증 도구

• Chrome 확장 SEO META in 1 CLICK: H 태그 목록 한 눈에 확인
• Browser DevTools: 개발자 도구 Elements 탭에서 H 태그 구조 직접 확인
• WAVE 접근성 도구: https://wave.webaim.org — H 태그 접근성 오류 자동 감지
• Screaming Frog SEO Spider: H1 누락, 중복 H1, H 태그 구조 대량 감사

한국 시장 적용

네이버 블로그의 H 태그

네이버 블로그는 편집기에서 "제목", "소제목" 등의 서식을 선택하면 자동으로 H 태그가 생성된다. 사용자가 HTML을 직접 제어하기 어렵기 때문에, H 태그 최적화보다 콘텐츠 품질과 채널 신뢰도(C-Rank)가 더 중요하다 (자세히는 [네이버 SEO 작동 원리] 참조).

자체 사이트

워드프레스, Cafe24, 아임웹 등 자체 사이트에서는 H 태그를 완전히 제어할 수 있다. 워드프레스의 경우 블록 편집기에서 각 단락의 헤딩 레벨을 직접 선택한다.

한국어 질문형 헤더

한국어 질문형 헤더는 "~인가요?", "~까요?", "~방법은?", "~이유는?" 같은 어미를 활용한다. 이 패턴은 한국어 AI 검색 쿼리와 자연스럽게 매칭된다.

자주 묻는 질문

Q. H1이 두 개면 Google이 페널티를 주나요? A. 직접 페널티는 없다. Google의 John Mueller는 "H1이 여러 개여도 괜찮다"고 언급했다. 그러나 HTML 표준에서 H1은 문서 최상위 주제를 나타내는 단일 요소이므로, 주제 명확성을 위해 1개 유지를 권장한다.

Q. H2에 키워드를 꼭 넣어야 하나요? A. 자연스럽게 들어가는 것을 권장하지만, 억지로 넣을 필요 없다. 자연어 질문형 헤더가 LLM 매칭에 더 효과적인 경우도 있으므로, 키워드보다 섹션 내용을 정확히 표현하는 것이 우선이다.

Q. 블로그 포스트에서 H1은 블로그 제목인가요, 글 제목인가요? A. CMS에 따라 다르다. 워드프레스는 글 제목이 자동으로 H1이 된다. 블로그 사이트명(헤더의 로고/브랜드명)은 H1이 아닌 다른 요소(<a>, <p> 등)로 처리하는 것이 올바른 구조다.

Q. CSS로 H2 크기를 작게 만들고 H1을 여러 개 쓰면 어떻게 되나요? A. SEO와 접근성 모두에 좋지 않다. 시각적 크기는 CSS로 제어하고, H 태그는 의미적 위계에 맞게 사용하는 것이 원칙이다.

관련 출처

• W3C. HTML specification: heading elements. https://www.w3.org/TR/html52/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
• Google Search Central. Headings and page titles. https://developers.google.com/search/docs/appearance/title-link
• WebAIM. Semantic structure. https://webaim.org/techniques/semanticstructure/
• WCAG 2.1 Success Criterion 2.4.6: Headings and Labels. https://www.w3.org/TR/WCAG21/#headings-and-labels