한 페이지에 H1 태그가 두 개 이상 있거나, H2를 건너뛰고 바로 H4를 쓰는 구조는 디자인상으로는 티가 안 나지만 검색엔진과 스크린리더가 문서 구조를 이해하는 데 혼란을 줍니다. H1~H6 계층을 시맨틱하게 설계하는 원칙과 실제 마크업 예시를 정리합니다.
헤딩 태그는 디자인이 아니라 목차다
H1~H6는 글자 크기를 정하는 도구가 아니라, 문서의 목차 구조를 나타내는 태그입니다. 크기가 크게 보이게 하려고 본문 중간에 H2를 남용하거나, 디자인상 작게 보이려고 H5를 제목에 쓰는 것은 시맨틱 마크업 원칙에 어긋납니다. 크기는 CSS로, 구조는 헤딩 레벨로 분리해서 다뤄야 합니다.
H1 중복이 실제로 만드는 문제
한 페이지에 H1이 여러 개 있으면 다음과 같은 혼선이 생깁니다.
- 검색엔진이 페이지의 "핵심 주제"를 하나로 특정하기 어려워짐
- 스크린리더 사용자가 목차 탐색(헤딩 점프) 시 어떤 것이 진짜 제목인지 혼란
- 구조화 데이터·SEO 도구가 자동으로 제목을 추출할 때 오작동 가능성
원칙은 페이지당 H1 하나이며, 로고나 사이트명은 H1이 아니라 별도 마크업(예: 시각적 텍스트이거나 div)으로 처리해야 합니다.
올바른 계층 구조 예시
<h1>맞춤형 홈페이지 제작 가이드</h1>
<h2>기획 단계</h2>
<h3>요구사항 정의</h3>
<h3>IA·메뉴 구조 설계</h3>
<h2>개발 단계</h2>
<h3>프론트엔드</h3>
<h4>반응형 레이아웃</h4>
<h3>백엔드</h3>
<h2>운영 단계</h2>레벨을 건너뛰지 않는 것이 핵심입니다. H2 다음에 바로 H4로 가면 중간 단계(H3)가 없다고 스크린리더 사용자에게 잘못된 신호를 줍니다.
흔히 잘못 쓰는 패턴 vs 올바른 패턴
| 상황 | 잘못된 패턴 | 올바른 패턴 |
|---|---|---|
| 사이트 로고 영역 | <h1>로고 이미지</h1> | <div class="logo"><a href="/">로고</a></div> |
| 본문 섹션 제목을 크게 보이려고 | <h2>를 본문 중간에 남용 | 디자인은 CSS class로, 구조는 H3 유지 |
| 카드형 UI의 각 항목 제목 | <h1> 여러 개 반복 | <h3> 등 동일 레벨로 통일 |
H1은 페이지 제목과 어떻게 달라야 하나
H1과 <title> 태그는 완전히 같지 않아도 됩니다. title은 검색 결과·브라우저 탭에 보이는 요약형 문구로 짧게, H1은 페이지 안에서 방문자가 실제로 읽는 본문 제목으로 조금 더 자연스러운 문장형으로 쓰는 것이 일반적입니다.
다만 둘의 주제는 반드시 일치해야 하며, title은 "SEO용 키워드 나열", H1은 "전혀 다른 문구"처럼 어긋나면 검색엔진이 페이지 주제 판단에 혼란을 겪습니다.
기존 사이트의 헤딩 구조를 점검하는 방법
브라우저 개발자도구 콘솔에서 다음 코드를 실행하면 현재 페이지의 헤딩 목록을 빠르게 뽑아볼 수 있습니다.
[...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]
.map(h => h.tagName + ': ' + h.textContent.trim())결과에서 H1이 몇 개인지, 레벨이 순서대로 내려가는지 눈으로 바로 확인할 수 있습니다. 주요 페이지 10개 정도만 이렇게 점검해도 반복되는 패턴 오류를 찾을 수 있습니다.
접근성과 SEO, 두 마리 토끼를 같이 잡는 이유
시맨틱 헤딩 구조는 원래 시각장애인이 스크린리더로 헤딩 단위 탐색을 할 때를 위한 접근성 규칙이지만, 검색엔진 크롤러도 같은 원리로 문서 구조를 파싱합니다. 즉 접근성을 위해 정리한 헤딩 구조가 SEO 개선으로 그대로 이어지는, 드물게 두 목표가 완전히 겹치는 영역입니다.
리뉴얼 프로젝트에서 헤딩 구조를 어떻게 관리해야 하나
디자인 시안 단계에서는 보통 폰트 크기 중심으로 논의가 이뤄지고, 헤딩 레벨은 개발 단계에서 뒤늦게 임의로 붙는 경우가 많습니다. 이렇게 되면 시안에서 크게 보이는 문구를 개발자가 습관적으로 H2로 넣고, 실제로는 H4 레벨에 해당하는 소제목까지 H2로 마크업되는 문제가 반복됩니다.
기획·디자인 단계에서 와이어프레임에 헤딩 레벨을 함께 표기해두면, 개발 단계에서 구조가 흔들리지 않고 일관되게 반영됩니다.
실무 정리
헤딩 구조 정리는 코드 수정량은 적지만 전체 페이지에 걸쳐 일관되게 점검해야 효과가 나는 작업입니다. 함께 점검하면 좋은 항목으로 캐노니컬 태그 지정, JSON-LD 구조화 데이터가 있습니다. 전체 페이지의 헤딩·구조 점검이 필요하면 무료 견적요청으로 사이트 주소를 알려주세요.
자주 묻는 질문 (FAQ)
H1을 여러 개 써도 최근 검색엔진은 괜찮다고 하던데요? +
기술적으로 페널티를 받지 않는다는 의견도 있지만, 실무적으로는 페이지당 H1 하나 원칙을 지키는 것이 문서 구조를 명확히 하고 접근성에도 도움이 되어 여전히 권장됩니다.
섹션이 많은 긴 페이지는 H2가 몇 개까지 괜찮나요? +
개수 제한은 없습니다. 다만 각 H2가 실제로 독립된 주제 단위를 나타내야 하며, 지나치게 세분화해 의미 없는 소제목을 반복하면 오히려 구조가 산만해집니다.
CSS로 헤딩 태그의 폰트 크기를 줄이거나 숨겨도 되나요? +
가능합니다. 시각적 크기와 시맨틱 레벨은 분리해서 다뤄도 됩니다. 다만 화면에서 완전히 숨기는(visually hidden) 경우는 실제로 스크린리더에는 노출되도록 처리해야 접근성이 유지됩니다.
기존에 잘못된 헤딩 구조로 오래 운영해온 사이트, 지금 고치면 순위에 영향이 있나요? +
구조 정리 자체로 순위가 급격히 오르내리지는 않습니다. 다만 장기적으로 검색엔진의 페이지 이해도를 높이는 개선이므로, 리뉴얼이나 콘텐츠 개편 시점에 함께 정리하는 것을 권장합니다.
헤딩 구조를 자동으로 점검해주는 도구가 있나요? +
라이트하우스 접근성 감사, 브라우저 확장 프로그램(헤딩 구조 시각화 도구) 등을 활용하면 페이지별 헤딩 트리를 시각적으로 확인할 수 있습니다.