h 태그(h1~h6) 뜻과 SEO 작성법: 순서 규칙·예시 코드·확인 방법

h 태그는 HTML의 제목 요소(h1~h6)로, 페이지의 제목과 소제목 계층을 나타냅니다. h1이 가장 높은 단계, h6가 가장 낮은 단계입니다. SEO에서 h 태그는 순위를 직접 올리는 장치라기보다 검색엔진과 사용자가 글의 구조를 빠르게 파악하도록 돕는 요소이므로, 페이지 주제를 담은 h1 하나와 단계를 건너뛰지 않는 h2·h3 구조로 작성하는 것이 기본입니다.

h 태그(h1~h6)란 무엇인가요?

h 태그는 heading(제목)의 약자로, 문서의 구역마다 제목을 붙이는 6단계 요소입니다. h1은 페이지 전체의 주제, h2는 큰 소제목, h3는 h2 아래의 세부 항목처럼 숫자가 커질수록 하위 단계가 됩니다. 글자 크기를 바꾸려고 h 태그를 쓰면 안 되며, 크기는 CSS의 font-size로 조절합니다.

h 태그는 SEO에 어떤 영향을 주나요?

h 태그는 구조를 전달하는 역할을 하며, 개수나 순서 자체가 순위를 정하지는 않습니다. 구글 SEO 기본 가이드는 사용자가 페이지를 탐색하기 쉽도록 제목을 제공하라고 권하면서도, 구글 검색에서는 제목 요소를 순서대로 쓰지 않아도 문제가 되지 않고 이상적인 제목 개수도 없다고 설명합니다.

다만 h1은 검색 결과에 보이는 제목에도 쓰일 수 있습니다. 구글은 제목 링크를 만들 때 title 요소와 함께 h1 같은 제목 요소, 페이지에서 가장 눈에 띄는 제목을 참고합니다. 전체 흐름은 검색 엔진 최적화 글에서, title 작성법은 메타 태그 글에서 이어서 볼 수 있습니다.

h 태그는 어떻게 작성하나요?

페이지 주제를 h1 하나에 담고, 본문 소제목은 h2부터 단계를 건너뛰지 않고 내려가면 됩니다. 글 제목을 h1으로 출력하는 워드프레스 테마라면 본문 편집기에서는 h2부터 시작합니다.

<h1>h 태그 SEO 작성법</h1>
  <h2>h 태그란 무엇인가요?</h2>
    <h3>h1~h6의 단계</h3>
  <h2>h 태그 작성 규칙</h2>
    <h3>h1은 하나만 쓰기</h3>
    <h3>단계 건너뛰지 않기</h3>

MDN 문서는 HTML 표준상 h1을 여러 개 쓰는 것이 허용되더라도 페이지당 h1 하나를 권장하고, h2 다음에 바로 h4로 넘어가는 식으로 단계를 건너뛰지 말라고 안내합니다. 제목만 골라 이동하는 스크린 리더 사용자가 혼란을 겪기 때문입니다.

흔한 실수	문제	고치는 법
테마·편집기 문구까지 h1으로 출력	페이지 주제가 흐려짐	h1을 글 제목 하나로 정리
h2 다음에 바로 h4	제목 구조가 끊김	h3로 바꾸기
글자를 키우려고 h 태그 사용	본문이 제목으로 잘못 표시됨	CSS font-size로 조절
소제목마다 같은 키워드 반복	키워드 반복(스팸 정책)에 해당 가능	단락 내용을 요약하는 문장으로

내 페이지의 h 태그는 어떻게 확인하나요?

가장 빠른 방법은 크롬 개발자 도구입니다. 확인할 페이지에서 F12를 눌러 Console 탭을 열고 아래 코드를 붙여 넣으면 제목 요소가 순서대로 출력됩니다.

document.querySelectorAll('h1,h2,h3,h4,h5,h6')
  .forEach(h => console.log(h.tagName, h.textContent.trim()));

확장 프로그램을 쓰고 싶다면 크롬 웹 스토어의 SEO META in 1 CLICK을 설치합니다.

확인할 페이지에서 확장 프로그램을 누르고 HEADERS 탭을 열면 h1~h6 구조가 들여쓰기로 표시됩니다. 아래 화면에는 편집기 문구가 h1으로 잡혀 h1이 두 개 나오는데, 이런 경우가 정리 대상입니다. 이미지 점검은 alt 태그 작성법에서 이어집니다.

함께 보면 좋은 글

• 피처드 스니펫 완벽 가이드
• breadcrumb 완벽 가이드