H1 태그는 웹페이지 본문의 주 제목을 나타내는 <h1> heading 요소입니다. 글씨를 크게 만드는 장식이 아니라 사용자와 검색엔진에 페이지의 핵심 주제를 알려 주는 HTML 구조입니다.
이 글은 Google 공식 문서와 네이버 공식 문서를 기준으로 작성했습니다.
H1에 담을 대표 제목
<h1>H1 태그란? 페이지 제목 구조 이해하기</h1>
H1 아래에는 주요 내용을 H2로 나누고, H2 안의 세부 항목은 H3로 구성합니다. 글자 크기를 바꾸려고 heading 단계를 고르지 말고 내용의 위계에 맞춰 사용합니다.
H1 개수보다 중요한 구조
한 페이지에 H1이 여러 개 있다는 이유만으로 검색 페널티를 받는다고 단정할 공식 근거는 없습니다.
Google의 현재 검색 문서는 H1 개수보다 페이지의 주 제목이 명확하고 다른 큰 제목과 구분되는지를 강조합니다.
다만 주 제목이 하나인 일반적인 콘텐츠 페이지에서는 명확한 H1 하나를 사용하는 편이 구조를 관리하기 쉽습니다.
네이버 서치어드바이저의 SEO 진단은 H1이 두 개 이상인 문서를 점검 대상으로 안내합니다. 이는 네이버의 진단 기준이며, Google이 복수 H1에 페널티를 준다는 뜻은 아닙니다. 두 검색엔진의 안내를 하나의 절대 규칙으로 합치지 않습니다.
큰 제목이 여러 개이고 어느 것이 주 제목인지 구분되지 않으면 사용자도 페이지 구조를 파악하기 어렵고, Google이 검색결과 title link를 만들 때 다른 문구를 선택할 수 있습니다.
하나만 써야 한다는 절대 규칙보다, 주 제목이 분명한지가 중요합니다.
H1과 타이틀 태그의 표시 위치 차이
H1은 페이지 안에서 사용자가 보는 제목입니다. 타이틀 태그는 HTML head에 있으며, 브라우저와 검색엔진이 이 태그로 탭 제목과 검색결과 제목을 만듭니다.
두 문구는 같아도 되고 조금 달라도 됩니다. 다만 서로 다른 주제를 설명하면 안 됩니다. 검색결과에서 기대한 내용과 방문 후 보이는 H1이 자연스럽게 이어져야 합니다.
H1, H2, H3의 위계 구조
| 단계 | 역할 | 예시 |
|---|---|---|
| H1 | 페이지 전체 주제 | H1 태그란? |
| H2 | 주요 설명 단위 | H1은 여러 개 써도 될까? |
| H3 | H2 안의 세부 항목 | 복수 H1을 확인하는 법 |
heading 단계는 목차처럼 읽혀야 합니다.
H1 다음에 모든 제목을 H3로 쓰거나, 글씨를 작게 만들기 위해 H4를 선택하는 방식은 피합니다.
디자인은 CSS로 조정하고 HTML은 내용의 구조를 나타내게 두세요.
H1에서 자주 생기는 실수
- 로고와 글 제목이 모두 H1이라 주 제목이 분명하지 않은 경우
- 여러 페이지가 같은 H1을 사용하는 경우
- H1이 페이지 실제 내용과 맞지 않는 경우
- 키워드를 반복해 제목이 읽기 어려운 경우
- 제목처럼 보이는 문구를 div나 이미지 안의 글자로만 제공하는 경우
통이미지 안에 제목을 넣었다면 같은 제목을 HTML 텍스트로도 제공해야 합니다. 이미지 alt는 문서의 주 제목 구조를 대신하지 않습니다.
실제 페이지에서는 브라우저 개발자 도구의 Elements에서 h1을 검색하고, 화면에 보이는 주 제목과 같은지 확인합니다. JavaScript로 제목을 만든다면 페이지가 로드된 뒤의 HTML도 봅니다. H1은 문서 구조를 설명하는 요소이지, 범용 챗봇의 인용을 보장하는 AI 전용 신호는 아닙니다.
자주 묻는 질문
H1이 두 개면 SEO에 문제가 생기나요?
개수만으로 문제가 생긴다고 단정할 수 없습니다. 다만 일반 콘텐츠에서는 주 제목 하나를 명확한 H1으로 두면 구조를 이해하고 관리하기 쉽습니다.
H1과 title은 똑같이 써야 하나요?
동일할 필요는 없습니다. 두 문구가 같은 페이지 주제를 설명하고 검색결과의 기대와 실제 본문이 이어지면 됩니다.
H1에 핵심 키워드를 꼭 넣어야 하나요?
페이지의 주제를 정확하게 설명하다 보면 핵심 용어가 자연스럽게 포함될 수 있습니다. 키워드를 넣기 위해 어색하게 반복하지 마세요.
함께 알아두면 좋은 용어
- heading 태그: H1부터 H6까지 문서 제목과 소제목을 나타내는 요소
- 타이틀 태그: HTML head에서 페이지 제목을 제공하는 요소
- H2 태그: 페이지의 주요 섹션 제목
- 시맨틱 HTML: 요소의 의미와 구조에 맞게 작성한 HTML