H1 태그는 웹페이지 본문의 주 제목을 표시하는 HTML 헤딩 요소입니다. <h1>으로 작성하며, 사용자와 검색엔진에 페이지의 핵심 주제를 알려 줍니다.
H1에 담을 대표 제목
<h1>H1 태그란? 페이지 제목 구조 이해하기</h1>
H1 아래의 큰 주제는 H2로, 각 주제의 세부 항목은 H3로 나눕니다. 원하는 글자 크기가 아니라 내용의 상하 관계에 맞춰 헤딩 단계를 선택합니다.
H1은 몇 개 쓰는 것이 좋을까요?
주 제목이 하나인 일반적인 콘텐츠 페이지라면 그 제목을 H1으로 두고, 본문의 각 절은 H2와 H3로 나누는 구성이 명확합니다. 네이버 서치어드바이저도 H1을 두 개 이상 사용하면 SEO 진단에서 점검하도록 안내합니다.
Google의 제목 링크 가이드는 주 제목을 다른 제목보다 분명하고 눈에 띄게 표시하라고 권장합니다. 크고 두드러진 제목이 여러 개여서 어느 것이 주 제목인지 알기 어려우면 검색결과 제목으로 첫 번째 헤딩을 선택할 수 있습니다. H1 개수뿐 아니라 화면에서 어떤 제목이 대표 제목으로 보이는지도 점검해야 하는 이유입니다.
H1과 타이틀 태그의 표시 위치 차이
H1은 페이지 본문에서 읽는 제목입니다. 타이틀 태그는 HTML의 head 영역에 들어가며 브라우저 탭의 제목을 정합니다. Google은 title뿐 아니라 H1 등 페이지의 여러 정보를 참고해 검색결과의 제목 링크를 만듭니다.
H1과 title의 문구는 완전히 같지 않아도 됩니다. 다만 같은 페이지 주제를 설명해야 검색결과에서 기대한 내용과 실제 본문이 이어집니다.
H1, H2, H3의 위계 구조
| 단계 | 역할 | 예시 |
|---|---|---|
| H1 | 페이지 전체 주제 | H1 태그란? |
| H2 | 주요 설명 단위 | H1은 여러 개 써도 될까? |
| H3 | H2 안의 세부 항목 | 복수 H1을 확인하는 법 |
같은 단계의 주제에는 같은 헤딩을 쓰고, 그 안에 속하는 항목은 한 단계 아래 헤딩으로 표시합니다. H2 안의 하위 주제는 H3가 되고, 다음 큰 주제로 넘어가면 다시 H2를 씁니다. 스크린리더 사용자는 이 헤딩 구조를 따라 필요한 절로 이동할 수 있습니다.
작은 글씨가 필요하다는 이유로 H2 자리에 H4를 쓰면 내용의 계층과 태그가 맞지 않습니다. 태그는 구조에 맞춰 정하고 크기와 모양은 CSS로 조절합니다.
H1에서 자주 생기는 실수
- 로고와 글 제목이 모두 H1이라 주 제목이 분명하지 않은 경우
- 서로 다른 내용을 다루는 페이지가 구분 없이 같은 H1을 사용하는 경우
- H1이 페이지 실제 내용과 맞지 않는 경우
- 키워드를 반복해 제목이 읽기 어려운 경우
- 제목처럼 보이는 문구를 div나 이미지 안의 글자로만 제공하는 경우
이미지 안에 제목을 넣었더라도 HTML 텍스트로 주 제목을 제공해야 합니다. 이미지의 alt만으로 H1의 문서 구조를 대신할 수는 없습니다.
개발자 도구의 Elements에서 h1을 찾아 화면의 주 제목이 실제 H1인지 확인합니다. 로고나 메뉴에도 H1이 붙어 있는지 살펴봅니다. JavaScript가 제목을 만든다면 실행 후 DOM을 확인해야 하므로 처음 받은 HTML 소스만 보고 H1이 없다고 판단하지 않습니다.
자주 묻는 질문
로고와 글 제목을 모두 H1으로 써도 되나요?
일반적인 글 페이지라면 글 제목을 H1으로 두는 편이 명확합니다. 로고까지 H1으로 표시하면 페이지마다 같은 브랜드명과 글 제목이 최상위 헤딩으로 나란히 놓입니다. 화면과 문서 구조에서 글의 주 제목이 무엇인지 분명하게 정하는 것이 좋습니다.
H1과 title은 똑같이 써야 하나요?
같은 문구일 필요는 없습니다. 두 제목이 같은 주제를 설명하고 검색결과의 기대와 본문 내용이 일치하면 됩니다.
H1에 핵심 키워드를 꼭 넣어야 하나요?
그 용어가 페이지의 주제를 정확히 나타낸다면 넣습니다. 같은 키워드를 여러 번 반복하기보다 독자가 제목만 보고 어떤 내용을 읽게 될지 알 수 있도록 씁니다.
함께 알아두면 좋은 용어
- heading 태그: H1부터 H6까지 문서 제목과 소제목을 나타내는 요소
- 타이틀 태그: HTML head에서 페이지 제목을 제공하는 요소
- H2 태그: 페이지의 주요 섹션 제목
- 시맨틱 HTML: 요소의 의미와 구조에 맞게 작성한 HTML