헤딩 구조 분석기

헤딩 개수만 세면 무엇을 놓치나요?

대부분의 점검 도구는 "H1 이 몇 개, H2 가 몇 개"만 셉니다. 그런데 실제 문제는 개수가 아니라 순서에서 생깁니다. 다음 구조를 보세요.

<h2>전체 메뉴</h2>        ← 내비게이션 제목
<h3>왜 필요한가요?</h3>
<h1>AEO 검사기 소개</h1>   ← 진짜 주제가 세 번째
<h2>사용 방법</h2>

H1 1개, H2 2개, H3 1개. 개수만 보면 아무 문제가 없습니다. 하지만 이 문서를 헤딩만 읽어 파악하려는 쪽에서는 "전체 메뉴"가 문서의 첫 주제로 보이고, "왜 필요한가요?"는 그 메뉴의 하위 항목처럼 보입니다. 정작 페이지 주제인 H1 은 두 개의 잘못된 신호 뒤에 묻힙니다.

이 분석기는 아웃라인을 계층으로 그려 이런 문제를 눈에 보이게 만듭니다. 레벨을 건너뛴 줄은 빨간 표시가 붙고, 질문형 헤딩은 파란 표시가 붙습니다.

판정 기준과 근거

두 접근성 규칙 모두 WCAG 필수 조건이 아니라 Deque 의 Best Practice 등급입니다. Google 역시 "헤딩 순서는 검색 관점에서 무관하다"고 밝힌 바 있습니다. 그럼에도 이 항목을 보는 이유는 순위 때문이 아니라 인용 가능성 때문입니다. 계층이 복원되지 않는 문서는 AI 가 일부만 잘라 인용할 때 맥락을 잃기 쉽습니다.

헤딩을 고칠 때의 원칙

• 장식용 제목은 헤딩이 아니다 - 내비게이션·사이드바·푸터의 제목은 p 나 span 에 CSS 로 크기를 주세요.
• 크기 때문에 레벨을 고르지 않는다 - 글자가 작아야 해서 H4 를 쓰는 것은 거꾸로입니다. 레벨은 계층으로 정하고 크기는 CSS 로 맞춥니다.
• 헤딩만 읽어도 목차가 되게 - 아웃라인만 훑었을 때 글의 흐름이 파악되면 잘 쓴 것입니다.
• 질문형을 섞는다 - 모든 헤딩을 질문으로 만들 필요는 없지만, 사용자가 실제로 묻는 문장 몇 개는 그대로 헤딩에 담아 두세요.
• 빈 헤딩을 두지 않는다 - 레이아웃 용도로 남겨 둔 빈 헤딩 태그는 아웃라인을 망칩니다.

자주 묻는 질문

H1 이 2개 이상이면 감점인가요?

아닙니다. 검사 모델 v4.2에서 이 규칙을 폐기했습니다. 확인해 보니 "H1 은 하나여야 한다"는 기준은 검색 최적화 업계의 관행일 뿐, 접근성 규격이나 Google 문서 어디에도 근거가 없었습니다. 접근성 검사 규격(axe page-has-heading-one)은 레벨 1 헤딩이 하나라도 있으면 통과이고 상한을 두지 않으며, Google 도 "페이지에 이상적인 헤딩 개수라는 것은 없다"고 안내합니다. 이 도구도 H1 이 있기만 하면 만점으로 처리합니다.

레벨을 건너뛰면 왜 문제인가요?

H1 다음에 H3 가 오면, 그 H3 가 어느 상위 섹션에 속한 내용인지 복원할 수 없기 때문입니다. 스크린리더 사용자는 헤딩 목록만으로 문서를 훑는데 계층이 깨지면 길을 잃고, AI 도 어떤 문단이 어떤 주제의 하위인지 판단하지 못합니다. 접근성 검사 규격 axe heading-order 가 "헤딩 레벨은 한 단계씩만 올라가야 한다"고 정한 이유입니다. 반대로 H3 다음 H2 처럼 레벨이 올라가는 것은 상위 섹션으로 복귀하는 정상 구조라 위반이 아닙니다.

첫 헤딩이 H1 이어야 하는 근거가 있나요?

있습니다. axe page-has-heading-one 규칙 문서가 "본문은 h1 으로 시작하며 그보다 앞에 다른 헤딩이 없어야 한다"고 권고합니다. H1 이 문서 중간에 있으면 스크린리더 사용자가 주제를 찾는 데 더 많은 부분을 읽어야 하기 때문입니다. 다만 axe 의 자동 검사는 h1 의 존재 여부만 보므로, 위치까지 확인하는 이 판정은 규격보다 한 단계 엄격합니다. 그 구분을 감추지 않고 밝혀 둡니다.

질문형 헤딩은 왜 세나요?

사용자가 AI 에게 던지는 말이 대부분 질문이기 때문입니다. "전세 계약 갱신 어떻게 하나요"라는 질문에 답할 때, 같은 문장이 헤딩으로 달린 섹션은 답변 후보로 뽑히기 쉽습니다. 판정은 H2·H3 만 대상으로 하며, 물음표나 "무엇·어떻게·왜·방법·차이·이란" 같은 표현이 있으면 질문형으로 봅니다. 검사기 본체와 같은 규칙입니다.

HTML 을 어떻게 가져오나요?

브라우저에서 해당 페이지를 열고 Ctrl+U(맥은 Option+Command+U)를 누르면 원본 소스가 보입니다. 전체 선택 후 복사해 붙여넣으면 됩니다. 자바스크립트로 그려지는 헤딩은 원본 소스에 없을 수 있는데, 그 상태가 바로 AI 크롤러가 처음 받는 화면이라 오히려 실제 상황에 가깝습니다.