웹사이트의 디자인을 완성하고 콘텐츠를 작성했는데도 페이지가 체계적으로 읽히지 않거나, 검색엔진 최적화 상태를 어디서부터 확인해야 할지 막막한 경우가 있습니다. 이때 확인할 요소 중 하나가 HTML 제목 태그, 즉 H 태그입니다.
H 태그는 글자의 크기나 굵기를 조절하는 장식용 요소가 아닙니다. 페이지의 제목과 하위 주제를 계층적으로 구분해 콘텐츠 구조를 전달하는 역할을 합니다.
다만 H1을 하나만 사용하거나 키워드를 모든 제목에 넣는다고 검색 순위가 자동으로 상승하는 것은 아닙니다. 중요한 것은 제목의 계층이 실제 콘텐츠의 구조와 일치하고, 사용자가 페이지를 쉽게 이해할 수 있도록 설계하는 것입니다.
HTML에는 <h1>부터 <h6>까지 여섯 단계의 제목 요소가 있습니다.
H1: 페이지의 핵심 주제를 나타내는 대표 제목
H2: 주요 내용이나 큰 주제 구분
H3: H2 아래의 세부 주제
H4~H6: 더 세분화된 하위 주제
예를 들어 홈페이지 제작 가이드를 작성한다면 다음처럼 구성할 수 있습니다.
<h1>기업 홈페이지 제작 전 확인할 사항</h1>
<h2>홈페이지 제작 목적 정하기</h2>
<h3>브랜드 소개가 목적인 경우</h3>
<h3>상담 문의 확보가 목적인 경우</h3>
<h2>페이지 구성 설계하기</h2>
<h3>필수 페이지 선정</h3>
<h3>사용자 이동 경로 구성</h3>
<h2>검색엔진 최적화 설정하기</h2>
<h3>메타 정보 작성</h3>
<h3>이미지 대체 텍스트 설정</h3>이 구조에서는 H1이 페이지 전체 주제를 나타내고, H2가 주요 영역을 구분하며, H3가 각 영역의 세부 내용을 설명합니다.
H 태그의 핵심 역할은 콘텐츠 구조를 명확하게 표현하는 것입니다. 제목 요소는 사용자와 보조 기술이 페이지를 탐색하는 데 도움을 주며, 검색엔진이 페이지의 콘텐츠를 이해하는 데 활용할 수 있는 단서이기도 합니다.
제목이 본문과 일치하고 각 섹션의 내용을 정확히 설명하면 페이지를 이해하기 쉬워집니다. 검색엔진은 H 태그뿐 아니라 본문 텍스트, 페이지 제목, 링크 등 여러 정보를 함께 참고하므로 H 태그만으로 검색 성과가 결정되는 것은 아닙니다.
소제목이 적절하게 구성된 페이지는 사용자가 필요한 정보를 빠르게 찾는 데 도움이 됩니다. 특히 서비스 안내나 기술 가이드처럼 내용이 긴 페이지에서는 제목 구조가 탐색 편의성을 높일 수 있습니다.
Google은 검색 결과 제목을 자동으로 생성할 때 HTML <title>뿐 아니라 페이지의 주요 시각적 제목과 제목 요소 등 여러 정보를 참고할 수 있습니다. 따라서 페이지에 표시되는 대표 제목과 HTML 제목 구조가 서로 모순되지 않도록 관리하는 것이 좋습니다.
실무에서는 페이지의 핵심 주제를 명확히 표현하기 위해 H1을 하나의 대표 제목으로 구성하는 방식이 관리하기 쉽습니다. 하지만 H1이 여러 개라는 이유만으로 검색 순위에 직접적인 불이익이 발생한다고 단정할 수는 없습니다.
HTML 구조상 여러 H1이 사용되는 페이지도 존재할 수 있습니다. 중요한 것은 제목 구조가 문서의 실제 의미를 잘 전달하는지, 페이지의 대표 주제가 명확한지입니다.
Google 검색 센터의 SEO 기본 가이드도 같은 입장입니다. 제목 요소의 개수나 순서는 Google 검색 관점에서 문제가 되지 않는다고 설명합니다. 다만 순서를 지키면 스크린 리더로 페이지를 탐색하는 사용자에게 도움이 됩니다.
일반적인 기업 홈페이지나 랜딩페이지를 설계한다면 다음 기준을 권장합니다.
페이지의 대표 주제를 설명하는 H1을 명확하게 정합니다.
서로 다른 주요 영역은 H2로 구분합니다.
H2의 세부 내용은 필요할 때 H3로 나눕니다.
제목을 단지 글자 크기를 키우기 위한 목적으로 사용하지 않습니다.
가장 쉬운 방법은 제목을 책의 목차처럼 생각하는 것입니다.
요소 | 확인할 질문 | 예시 |
|---|---|---|
H1 | 이 페이지 전체는 무엇을 다루는가? | 기업 홈페이지 제작 가이드 |
H2 | 페이지의 주요 주제는 무엇인가? | 제작 전 준비 사항 |
H3 | 주요 주제 안에서 구체적으로 무엇을 설명하는가? | 목표 고객과 제작 목적 정하기 |
H4 | H3 아래에 별도 하위 주제가 필요한가? | 목적별 필수 기능 비교 |
모든 페이지에 H4~H6까지 사용할 필요는 없습니다. 콘텐츠가 실제로 그만큼 세분화될 때만 사용합니다.
<h1>기업 홈페이지 제작</h1>
<h3>제작 목적</h3>
<h2>페이지 구성</h2>
<h4>메뉴 설계</h4>여기서는 H3가 상위 주제인 H2보다 먼저 나오고, H4가 H2 바로 아래에 배치되어 계층이 일관되지 않습니다.
<h1>기업 홈페이지 제작</h1>
<h2>제작 목적</h2>
<h3>브랜드 소개와 신뢰 확보</h3>
<h3>상담 문의와 전환 확보</h3>
<h2>페이지 구성</h2>
<h3>메뉴 설계</h3>
<h3>콘텐츠 배치</h3>이렇게 하면 제목 간의 관계가 더 명확해집니다. 다만 모든 계층 이동을 엄격한 규칙처럼 적용하기보다 실제 콘텐츠의 논리적 관계를 우선해야 합니다.
웹사이트를 제작할 때 흔히 발생하는 실수는 큰 글씨로 보이게 하려고 H 태그를 선택하는 것입니다.
예를 들어 본문 중간의 작은 문구를 크게 표시하려고 <h2>를 사용하거나, 제목처럼 보이는 문장을 일반 <div>로만 만드는 경우가 있습니다.
제목의 의미와 시각적 디자인은 구분해야 합니다.
<h2 class="section-title">서비스 진행 절차</h2>.section-title {
font-size: 28px;
font-weight: 700;
}HTML은 제목의 의미를 전달하고 CSS는 글자 크기와 색상 등 시각적 표현을 담당합니다. 제목의 의미를 먼저 정한 뒤 디자인을 적용하는 방식이 바람직합니다.
모든 H 태그에 같은 키워드를 넣는 것은 좋은 전략이 아닙니다. 각 제목은 그 아래에 나오는 내용을 정확하게 설명해야 합니다.
예를 들어 ‘홈페이지 제작’이 페이지의 주요 주제라면 다음처럼 구성할 수 있습니다.
H1: 기업 홈페이지 제작 전 확인할 사항
H2: 홈페이지 제작 목적과 목표 고객 정하기
H2: 페이지 구성과 사용자 이동 경로 설계
H2: 홈페이지 제작 비용에 영향을 주는 요소
H2: 검색엔진 최적화 기본 설정
이 구조는 하나의 주제를 중심으로 관련 하위 질문을 다룹니다. 반면 아래처럼 작성하면 제목의 의미가 약해집니다.
H2: 홈페이지 제작 업체
H2: 홈페이지 제작 전문
H2: 홈페이지 제작 회사
H2: 홈페이지 제작 추천
실제 각 섹션에서 서로 다른 내용을 설명하지 않는다면 단순 키워드 변형을 반복하기보다 하나의 충실한 섹션으로 통합하는 편이 좋습니다.
H1: 기업명과 핵심 사업 또는 고객 가치
H2: 주요 서비스
H2: 회사 소개
H2: 프로젝트 사례
H2: 문의 안내
H1: 서비스명과 핵심 목적
H2: 어떤 문제를 해결하는 서비스인가
H2: 주요 기능과 제공 범위
H2: 진행 절차
H2: 도입 시 고려할 사항
H2: 자주 묻는 질문
H1: 사용자의 문제를 명확하게 표현한 제목
H2: 문제의 원인
H2: 해결 방법
H2: 단계별 적용 절차
H2: 자주 발생하는 오류
H2: 점검표와 마무리
이 구조는 고정 템플릿이 아니라 출발점입니다. 검색자가 실제로 필요로 하는 정보와 페이지의 목적에 따라 섹션을 추가하거나 통합해야 합니다.
페이지에서 개발자 도구를 열어 제목 요소가 어떻게 작성되어 있는지 확인할 수 있습니다. 화면에서 크게 보이는 문구가 실제로 H 태그인지, 반대로 화면에서 보이지 않는 제목이 불필요하게 남아 있는지 살펴봅니다.
페이지의 H1부터 H6까지를 추출해 목록으로 확인하면 계층이 뒤섞이거나 같은 제목이 반복되는 문제를 찾기 쉽습니다.
H2가 ‘제작 비용 안내’라면 해당 섹션에서 실제 비용 요소나 견적 기준을 설명해야 합니다. 제목이 본문에 없는 내용을 약속하지 않는지 점검합니다.
반응형 디자인이나 탭·아코디언 구성에서는 화면에 보이는 콘텐츠와 HTML 구조가 다를 수 있습니다. 사용자에게 필요한 제목과 콘텐츠가 적절하게 제공되는지 확인합니다.
H 태그를 수정한 후 순위가 변했다고 해서 그 변화가 제목 구조 하나 때문이라고 단정하기는 어렵습니다. 콘텐츠 변경, 경쟁 상황, 색인 처리 등 다른 요소가 영향을 줄 수 있으므로 페이지 전반의 품질과 검색 데이터를 함께 확인합니다.
페이지의 핵심 주제를 나타내는 대표 제목이 있다.
H1이 페이지 내용과 일치한다.
H2가 주요 주제를 논리적으로 구분한다.
H3는 필요한 하위 내용을 설명한다.
제목 단계가 실제 콘텐츠의 계층과 맞는다.
글자 크기만 조절하려고 H 태그를 사용하지 않는다.
제목에 키워드를 부자연스럽게 반복하지 않는다.
제목과 해당 섹션의 본문이 일치한다.
숨겨진 제목이나 중복된 제목이 불필요하게 남아 있지 않다.
모바일에서도 콘텐츠를 쉽게 탐색할 수 있다.
H 태그 최적화의 목적은 모든 제목에 키워드를 넣거나 H1 개수를 기계적으로 맞추는 것이 아닙니다. 페이지의 대표 주제와 하위 내용을 논리적으로 구분해 사용자가 정보를 쉽게 찾고 검색엔진이 콘텐츠의 관계를 이해할 수 있도록 하는 것입니다.
페이지의 목적을 먼저 정하고, 그 목적에 맞춰 H1과 하위 제목을 설계하세요. 이후 실제 HTML과 본문을 함께 검수하면 디자인만으로는 발견하기 어려운 구조적 문제를 줄일 수 있습니다.
검색 결과에 보이는 제목과 설명은 메타 타이틀·디스크립션 작성법에서, 이미지 설명은 ALT 태그 작성법에서 이어서 점검할 수 있습니다.