제목 구조(H1~H6) 설계

제목 태그란 무엇인가

제목 태그(H1~H6)란 문서의 내용을 상위·하위 관계로 나누어 표시하는 HTML 구조 요소입니다. 글자를 크고 굵게 만드는 장식이 아니라, “여기서부터 새로운 절이 시작되고 이 절은 앞 절의 하위다”라는 관계를 기계가 읽을 수 있게 적어 두는 표시입니다. 숫자가 작을수록 상위이며, H1이 문서 전체의 주제, H2가 큰 절, H3이 그 아래 항목입니다.

잘못 쓰면 생기는 일

제목 계층이 무너지면 사람이 아니라 기계가 먼저 손해를 봅니다. 화면 낭독기(스크린 리더)를 쓰는 사용자는 제목 목록으로 페이지를 훑고 원하는 절로 건너뜁니다. 제목이 없거나 순서가 뒤죽박죽이면 이 이동 수단이 사라져 문서를 처음부터 끝까지 읽어야 합니다.

검색엔진과 AI 검색 쪽도 마찬가지입니다. 제목은 어느 문단이 어느 질문에 대한 답인지 묶어 주는 경계 역할을 합니다. 경계가 없으면 긴 텍스트 덩어리 하나만 남고, 특정 질문에 대응하는 부분을 골라내기 어려운 구조가 됩니다. 애드브랜치 검사기는 heading-order로 단계 건너뛰기를, empty-heading으로 내용 없는 제목 태그를 확인하고, GEO 항목 E01(소제목 밀도), E02(제목 단계 순서), B01(title과 H1의 주제어 일치), B09(질문형 제목 뒤 답변 문단)로 구조를 평가합니다.

기본 원칙

• 문서 주제는 H1로, 큰 절은 H2로, 그 하위는 H3으로 씁니다.
• 단계를 건너뛰지 않습니다. H2 다음에 곧바로 H4가 오면 계층에 구멍이 생깁니다.
• 제목 안에는 그 절의 내용을 짐작할 수 있는 말을 넣습니다. “소개”, “내용” 같은 말은 정보가 없습니다.
• 제목 태그를 여백이나 글자 크기 조절 용도로 쓰지 않습니다.

<main>
  <h1>사내 경비 정산 규정</h1>

  <h2>정산 대상 비용</h2>
  <p>교통비, 숙박비, 식비가 정산 대상입니다.</p>

  <h3>교통비</h3>
  <p>대중교통 실비를 정산합니다. 택시는 사전 승인이 필요합니다.</p>

  <h3>숙박비</h3>
  <p>1박 12만 원까지 정산합니다.</p>

  <h2>정산 절차</h2>
  <ol>
    <li>영수증을 스캔합니다.</li>
    <li>정산 시스템에 항목을 입력합니다.</li>
    <li>팀장 승인을 받습니다.</li>
  </ol>
</main>

잘못된 예와 수정된 예

1. 디자인 목적으로 제목 태그를 사용

<!-- 잘못된 예: 크게 보이려고 h2, 작게 보이려고 h5 -->
<h2>이달의 추천</h2>
<h5>서울 강남구</h5>
<h5>매일 09:00 - 18:00</h5>

주소와 영업시간은 절의 제목이 아니라 본문 데이터입니다. 제목 태그로 감싸면 문서 개요에 의미 없는 항목이 잔뜩 들어갑니다.

<!-- 수정된 예: 구조는 태그로, 크기는 CSS로 -->
<h2>이달의 추천</h2>
<p class="text-sm">서울 강남구</p>
<p class="text-sm">매일 09:00 - 18:00</p>

2. 단계 건너뛰기와 빈 제목

<!-- 잘못된 예 -->
<h1>배송 정책</h1>
<h4>국내 배송</h4>
<h2></h2>
<img src="/img/banner.png" alt="" />

H1 다음에 H4가 오면서 두 단계가 비었고, 내용 없는 H2가 배너 이미지를 위한 자리로 쓰였습니다. 이 두 가지가 heading-order와 empty-heading에서 각각 잡힙니다.

<!-- 수정된 예 -->
<h1>배송 정책</h1>
<h2>국내 배송</h2>
<p>결제 확인 후 영업일 기준 2일 이내에 출고합니다.</p>
<h2>해외 배송</h2>
<p>국가별로 7일에서 21일이 걸립니다.</p>

3. title과 H1이 서로 다른 주제

<!-- 잘못된 예 -->
<title>노트북 거치대 추천 - 예제상점</title>
<h1>환영합니다</h1>

검색결과에 보이는 제목과 페이지에 보이는 제목이 다른 주제를 말하면 방문자가 잘못 들어왔다고 느낍니다. B01은 이 둘의 주제어 겹침을 확인합니다.

<!-- 수정된 예 -->
<title>노트북 거치대 추천 - 예제상점</title>
<h1>노트북 거치대 추천 5종 비교</h1>

H1 개수에 대한 현재 입장

HTML5에서는 <section>, <article> 같은 구획 요소 안에서 H1을 여러 번 쓸 수 있게 문법상 허용합니다. Google도 H1이 여러 개라고 해서 문제가 되지는 않는다고 공개적으로 밝혔습니다. 다만 브라우저와 보조기술이 구획별로 제목 단계를 자동 조정해 주지는 않기 때문에, 실무에서는 다음 절충안을 권합니다.

상황	권장
일반 콘텐츠 페이지	H1 하나, 그 아래 H2·H3으로 전개
목록/피드 페이지	페이지 H1 하나, 각 항목 제목은 H2 또는 H3
랜딩 페이지의 큰 문구	시각적 크기는 CSS, 구조상 최상위 문구만 H1

접근성과 AI 추출 관점

접근성 쪽 요구는 명확합니다. 제목은 실제 구조를 반영해야 하고, 화면 낭독기 사용자가 제목 목록만으로 문서 지도를 그릴 수 있어야 합니다. 제목 텍스트가 비어 있거나 이미지만 들어 있으면 그 지점은 목록에서 빈칸으로 보입니다.

AI 검색 쪽은 다르게 접근합니다. 질문 형태의 제목 아래에 그 질문의 답을 완결된 문단으로 두면, 답변을 문단 단위로 골라내기 쉬운 구조가 됩니다. 애드브랜치의 B09 항목이 질문형 제목 바로 뒤에 충분한 길이의 답변 문단이 있는지를 확인하는 이유입니다. 여기에 목록과 표를 곁들이면(E06, E07) 비교·수치 정보가 구조적으로 드러납니다. 표에는 <th>나 <caption>을 반드시 넣어 열의 의미를 밝혀 주세요.

적용 시 주의점

• 제목에 키워드를 반복해 채우면 읽기 어려워지고 얻는 것도 없습니다. 절 내용을 그대로 요약한 한 줄이면 충분합니다.
• 제목 하나 아래에 문단 하나만 두는 잘게 쪼갠 구조도 좋지 않습니다. 절이 한 문장뿐이라면 상위 절에 합치세요.
• 사이드바나 푸터의 위젯 제목도 제목 태그를 쓰면 문서 개요에 섞입니다. 본문 구조와 섞이지 않게 <aside>, <footer> 안에 두세요.
• 본문 영역은 <main>이나 <article>로 감싸 두면 어디가 주 콘텐츠인지 명확해집니다. A07 항목이 이 부분을 봅니다.

자주 묻는 질문

H1이 하나도 없으면 문제인가요

문서의 최상위 주제가 무엇인지 알려 주는 표시가 사라집니다. 페이지 제목을 시각적으로만 크게 표시하고 태그는 <div>로 두는 디자인에서 자주 발생합니다. 특별한 이유가 없다면 페이지 제목에 H1을 쓰세요.

제목은 몇 개 정도가 적당한가요

정해진 수치는 없습니다. 애드브랜치는 300단어당 H2·H3이 1개 이상 8개 이하인지를 참고 기준으로 보지만, 이건 밀도의 대략적 지표일 뿐입니다. 내용이 바뀌는 지점마다 제목을 두는 것이 원칙이고 숫자를 맞추려고 억지로 나눌 필요는 없습니다.

제목 단계를 건너뛰면 검색 순위가 떨어지나요

순위와의 직접적인 인과관계를 공식 문서가 밝힌 바는 없습니다. 다만 접근성 관점에서는 분명한 결함이고, 문서 구조를 읽는 도구들이 계층을 잘못 해석하는 원인이 됩니다. 고치는 비용이 거의 없으니 맞추는 편이 낫습니다.

이미지를 제목 안에 넣어도 되나요

가능하지만 alt 텍스트를 반드시 넣어야 합니다. 로고 이미지를 H1으로 감싸면서 alt를 비워 두면 제목 텍스트가 존재하지 않는 것과 같습니다. 텍스트로 쓸 수 있다면 텍스트가 낫습니다.

관련 가이드

• GEO 점검 체크리스트
• SEO 기본 점검 체크리스트
• 구조화 데이터(JSON-LD) 적용 가이드