H1 태그란? H1·H2·H3 사용법과 SEO 점검 방법

웹페이지의 대표 제목은 보통 H1 태그로 지정합니다. 독자에게는 이 페이지에서 무엇을 읽을 수 있는지 알려주고, HTML에서는 글의 제목 구조를 나타냅니다.

H1을 점검할 때는 글자가 크게 보이는지만 확인해서는 부족합니다. 실제로 어떤 태그가 적용되어 있는지, 제목이 본문을 정확히 설명하는지, H2·H3 소제목과 자연스럽게 이어지는지를 함께 봐야 합니다. H1의 뜻부터 실제 화면에서 확인하고 수정하는 방법까지 살펴보겠습니다.

H1 태그란 무엇인가요?

H1 태그는 HTML에서 가장 높은 단계의 제목을 나타내는 요소입니다. 일반적인 블로그 글에서는 글 전체의 주제를 설명하는 대표 제목에 사용합니다. 시작 태그 <h1>과 종료 태그 </h1> 사이에 제목 문구를 넣습니다.

가상의 생활 정보 글을 예로 들면 다음과 같습니다.

<h1>원룸 이사 준비 체크리스트</h1>

브라우저에는 ‘원룸 이사 준비 체크리스트’라는 제목이 표시됩니다. 제목의 크기와 색상은 사이트 스타일에 따라 달라집니다. 반대로 일반 문장을 크게 보이게 만들었다고 해서 그 문장이 H1이 되는 것은 아닙니다.

아래 그림에서는 ‘What is a SERP?’로 시작하는 제목이 코드의 <h1> 안에 있고, 페이지 화면에도 대표 제목으로 나타납니다. 같은 문구가 <title>에 들어 있더라도 H1과 타이틀은 서로 다른 HTML 요소입니다.

HTML 요소마다 역할이 다르다는 점도 알아두면 좋습니다. H1이 제목을 나타낸다면, 링크를 만드는 <a> 태그와 href 속성은 다른 페이지나 특정 위치로 이동하게 합니다. 링크 쪽 기본 구조는 HTML 링크와 a 태그 사용법에서 확인할 수 있습니다.

실제 페이지의 제목은 어떻게 쓰일까요?

W3Schools의 HTML 제목 요소 설명 페이지는 대표 제목을 ‘HTML Headings’로 표시합니다. 독자는 제목만 보고도 이 페이지가 HTML의 제목 구조를 설명한다는 것을 알 수 있습니다.

뉴스 기사에서는 다룰 사건이나 질문을 제목에 드러냅니다. 아래 TechCrunch 화면의 제목은 Google의 Gemini 챗봇을 시험하고 그 결과를 다루는 기사라는 점을 알려줍니다. 중요한 것은 제목을 읽고 예상한 내용을 본문에서 실제로 설명하는 것입니다.

H1·H2·H3는 어떻게 구분하나요?

H태그는 H1부터 H6까지 있습니다. 숫자는 글자 크기를 고르는 번호가 아니라 제목의 단계입니다. 보통 H1에는 글 전체의 주제, H2에는 큰 항목, H3에는 그 항목에 속하는 세부 내용을 넣습니다.

아래 그림은 H1에서 H6로 내려가며 주제가 세분화되는 모습을 보여줍니다. 모든 글에 H6까지 사용해야 한다는 뜻은 아닙니다. 글의 내용이 어느 항목에 속하는지에 맞춰 필요한 단계까지만 사용하면 됩니다.

앞의 한국어 예시를 HTML로 작성하면 다음과 같습니다. 실제 글에서는 각 제목 아래에 해당 내용을 설명하는 본문이 들어갑니다.

<h1>원룸 이사 준비 체크리스트</h1>

<h2>이사 전 준비</h2>
<h3>이사업체 견적 비교</h3>
<h3>전입신고 준비</h3>

<h2>이삿날 확인</h2>
<h3>공과금 정산</h3>

하위 항목을 만들 때 H2 다음에 곧바로 H4를 쓰는 식으로 단계를 건너뛰지 않는 편이 좋습니다. 다만 H3 설명을 마치고 다음 큰 항목인 H2로 돌아가는 것은 자연스러운 구조입니다. W3C의 제목 구조 안내도 이 두 경우를 구분합니다.

제목의 크기가 마음에 들지 않으면 글꼴이나 스타일 설정을 조정합니다. 작게 보이게 하려고 H2를 H4로 바꾸면 내용의 관계까지 달라집니다. MDN의 제목 요소 설명에서도 글자 크기 조절을 위해 제목 단계를 선택하지 않도록 안내합니다.

H1과 타이틀 태그는 무엇이 다른가요?

H1과 타이틀 태그는 모두 페이지를 설명하지만 들어가는 위치가 다릅니다. 타이틀 태그는 HTML의 <head> 안에 있는 <title> 요소입니다. H1은 <body> 안에서 독자가 읽는 본문 제목입니다.

아래 화면은 같은 글의 브라우저 탭 제목과 당시 Google 검색 결과 제목을 함께 보여줍니다. 타이틀은 브라우저 탭에서 확인할 수 있으며, 검색 결과의 제목을 정하는 데도 참고됩니다.

반면 글을 열었을 때 본문 위에 크게 보이는 대표 제목은 H1입니다. 아래는 같은 글의 본문 제목을 강조한 화면입니다.

예를 들어 한국어 글에는 다음과 같이 설정할 수 있습니다.

<!-- head 안의 문서 제목 -->
<title>원룸 이사 체크리스트 | 생활 가이드</title>

<!-- body 안의 본문 제목 -->
<h1>원룸 이사 준비 체크리스트</h1>

두 문장이 완전히 같을 필요는 없습니다. 타이틀에는 사이트 이름을 붙이고, H1에는 본문 주제만 남길 수 있습니다. 다만 타이틀은 ‘이사 비용 비교’인데 H1과 본문은 ‘전입신고 방법’을 설명한다면 독자가 예상한 내용과 실제 내용이 어긋납니다.

검색 결과의 제목이 언제나 <title>과 똑같이 표시되는 것은 아닙니다. Google은 타이틀, 페이지의 주요 제목, H1 등 여러 정보를 참고해 제목 링크를 자동으로 만듭니다. 따라서 H1이 검색 결과에 사용될 수도 있습니다. Google의 제목 링크 안내에서 관련 기준을 확인할 수 있습니다.

H1을 SEO에서 점검하는 이유

페이지의 주제를 분명하게 전달합니다

‘알아두면 좋은 정보’보다 ‘원룸 이사 준비 체크리스트’가 어떤 내용인지 더 구체적으로 알려줍니다. 페이지의 핵심 주제가 제목과 본문에 일관되게 드러나면 사람과 검색엔진이 내용을 파악하는 데 도움이 됩니다.

H1을 붙이거나 키워드를 한 번 넣었다는 사실만으로 상위 노출이 결정되지는 않습니다. 제목이 약속한 내용을 본문에서 충분히 다루는지도 중요합니다. H1을 포함한 제목 구조는 페이지 안의 요소를 다듬는 온페이지 SEO와 함께 살펴볼 수 있습니다.

방문자가 필요한 글인지 판단하게 합니다

독자는 처음부터 끝까지 읽기 전에 제목과 소제목을 훑어보기도 합니다. 대표 제목이 분명하고 하위 항목이 정리되어 있으면, 찾는 내용이 있는지와 어느 부분부터 읽어야 하는지를 알기 쉽습니다.

아래 그림은 같은 종류의 내용을 서로 다른 제목 구조로 배치한 모습입니다. 왼쪽은 대표 제목이 중간에 섞여 있고 제목 단계가 뒤죽박죽입니다. 오른쪽은 대표 제목 아래에 큰 항목과 세부 항목이 순서대로 배치되어 있습니다.

예를 들어 ‘원룸 이사 준비 체크리스트’라는 제목 아래에 준비물, 견적 비교, 이삿날 확인 사항이 이어지면 글의 범위가 보입니다. 관련 없는 홍보 문구가 큰 제목을 차지하면 정작 본문이 무엇을 설명하는지 파악하기 어렵습니다.

화면 낭독기로 글을 탐색하는 데 도움이 됩니다

화면 낭독기는 화면의 내용을 음성 등으로 전달하는 보조 기술입니다. 사용자는 제목 목록을 확인하거나 제목 사이를 이동하며 내용을 읽을 수 있습니다. H1·H2·H3가 논리적으로 구성되어 있으면 이런 탐색을 지원할 수 있습니다.

아래는 Penn State의 접근성 안내에서 소개하는 제목 목록 화면입니다. 목록 앞의 숫자는 제목의 단계를 나타내므로, 화면의 글자 크기뿐 아니라 HTML의 제목 구조도 중요하다는 점을 보여줍니다.

글자를 굵게 표시한 문장만으로 제목을 대신하면 시각적으로는 구분되어도 HTML에서는 제목으로 인식되지 않을 수 있습니다. 접근성을 위해서도 실제 제목 요소를 사용해야 합니다. MDN의 접근성 설명을 참고할 수 있습니다.

웹페이지에서 H1을 확인하는 방법

브라우저의 검사 기능으로 확인하기

크롬에서는 눈에 보이는 제목을 직접 선택해 어떤 태그가 적용됐는지 확인할 수 있습니다.

1. 확인할 페이지를 열고 대표 제목 위에서 마우스 오른쪽 버튼을 누릅니다.
2. 검사(Inspect)를 선택합니다.
3. 개발자 도구의 Elements 영역에서 선택된 요소를 확인합니다.
4. 제목이 <h1> 요소 안에 있는지 확인합니다. <span> 같은 내부 요소가 선택됐다면 그 요소를 감싸는 상위 태그도 봅니다.

아래 Chewy 페이지 화면에서는 왼쪽의 고양이 카페 관련 제목과 오른쪽 Elements의 <h1> 문구가 대응됩니다. 제목을 선택한 뒤 코드에서 같은 문구를 찾으면 화면과 HTML을 연결해 볼 수 있습니다.

화면에는 큰 제목이 있는데 코드가 <div>나 <p>라면, 크기만 제목처럼 설정했을 가능성이 있습니다. 반대로 <h1>이어도 화면에서 숨겨져 있거나 엉뚱한 문구가 들어 있다면 내용과 표시 방식을 함께 확인해야 합니다. 크롬 개발자 도구의 요소 검사 안내를 참고하면 검사 화면의 기본 사용법을 익힐 수 있습니다.

페이지 소스에서 확인하기

브라우저에서 마우스 오른쪽 버튼을 누르고 페이지 소스 보기(View Page Source)를 선택합니다. 아래 화면에는 이 메뉴와 바로 아래의 검사(Inspect) 메뉴가 함께 보입니다.

소스가 열리면 Windows는 Ctrl + F, Mac은 Command + F로 <h1을 검색합니다. 아래처럼 속성이 붙어 있을 수 있으므로 <h1> 전체보다 <h1으로 찾는 편이 편리합니다.

<h1 class="post-title">원룸 이사 준비 체크리스트</h1>

아래 화면은 h1 검색 결과에서 해당 태그를 찾는 모습을 보여줍니다. 검색된 부분이 실제 시작 태그인지도 함께 확인합니다.

소스 보기는 서버가 처음 보낸 HTML을 확인하는 방법입니다. JavaScript가 나중에 제목을 추가하는 사이트에서는 실제 화면의 구조와 다를 수 있으므로, 소스에 H1이 없다는 이유만으로 누락을 확정하지 말고 Elements에서도 확인합니다.

확장 프로그램으로 제목 구조 확인하기

제목 태그를 보여주는 브라우저 확장 프로그램을 사용하면 화면 위에 H1·H2·H3 위치를 표시하거나 제목을 목록으로 볼 수 있습니다. 아래는 H-tag 확장 프로그램으로 H1을 표시한 화면입니다.

아래 Detailed SEO Extension 화면은 타이틀, 설명, URL 등을 한 창에 보여줍니다. 상단의 Headings 항목에서는 제목 구조를 확인할 수 있습니다. 제목 문구와 타이틀을 함께 살펴볼 때 이런 방식의 정리가 도움이 됩니다.

페이지가 많다면 사이트를 순회하며 정보를 모으는 크롤러나 사이트 진단 도구가 적합합니다. URL별 H1 개수, H1 문구, 타이틀을 함께 확인하거나 내려받을 수 있는지 봅니다. JavaScript로 내용을 표시하는 사이트라면 렌더링 후의 제목을 확인할 수 있는지도 중요합니다.

워드프레스와 다른 CMS에서 H1 설정하기

워드프레스에서는 글 제목부터 확인합니다

많은 워드프레스 테마는 편집기의 글 제목을 페이지의 H1으로 출력합니다. 먼저 미리보기나 발행된 페이지에서 글 제목이 실제 H1인지 확인합니다. 이미 H1이라면 본문은 도입 문장으로 시작하고, 첫 큰 소제목부터 H2를 사용하면 됩니다.

본문의 문장을 소제목으로 바꾸려면 해당 블록을 선택합니다. 아래 화면에서는 Paragraph #1 문장이 선택되어 있고 그 위에 블록 도구 모음이 나타나 있습니다.

문단 기호가 있는 블록 변환 메뉴를 열고 Heading(제목)을 선택합니다. 큰 항목은 H2, 그 안에 속하는 세부 항목은 H3로 지정합니다.

블록 추가 버튼으로 제목 블록을 새로 넣는 방법도 있습니다. 설정을 마친 뒤에는 문서 개요에서 순서를 살펴보고 미리보기의 실제 HTML도 확인합니다. 도구 모음의 모양과 위치는 편집기 버전에 따라 달라질 수 있습니다. 워드프레스 제목 블록 문서에서 현재 설정 방법을 확인할 수 있습니다.

워드프레스에서 H1을 직접 지정해야 할 때

테마나 페이지 템플릿이 대표 제목을 자동으로 H1으로 출력하지 않는다면, 페이지의 대표 제목을 어디에서 지정할지 확인해야 합니다. 제목 블록으로 직접 지정하는 방식이라면 제목 단계 메뉴에서 H1을 선택할 수 있습니다.

이 작업은 대표 제목을 직접 지정해야 하는 경우에 적용합니다. 글 제목이 이미 H1인 포스팅에는 같은 제목을 본문 H1으로 다시 넣지 않습니다. 테마나 페이지 빌더가 제목을 처리하는 방식도 함께 확인해야 합니다.

Squarespace에서는 텍스트 서식을 확인합니다

Squarespace는 버전과 템플릿에 따라 글 제목의 태그가 달라질 수 있습니다. 먼저 개별 글 페이지에서 제목이 어떻게 출력되는지 확인합니다. 텍스트 블록의 대표 제목을 직접 지정해야 한다면 해당 문구를 선택하고 도구 모음의 서식 메뉴를 엽니다.

대표 제목을 H1으로 지정하는 경우에는 Heading 1을 선택합니다. 큰 소제목에는 Heading 2, 세부 소제목에는 Heading 3를 사용합니다.

글 제목이 이미 자동으로 적용된 경우에는 본문에 같은 H1을 반복하지 않습니다. Squarespace 공식 안내에 버전별 차이가 정리되어 있습니다.

Wix 블로그에서는 글 제목이 기본 H1입니다

Wix 블로그에서는 기본적으로 글 제목에 H1이 적용되고, 본문 소제목에는 H2·H3를 사용합니다. 아래 화면은 블로그 글 제목 입력란을 보여줍니다.

본문에서 소제목으로 만들 문구를 선택하고 텍스트 스타일에서 Heading 2 또는 Heading 3를 지정합니다. 일반 페이지 편집기와 블로그 편집기는 설정 방식이 다를 수 있습니다. Wix 블로그 제목 태그 안내를 참고할 수 있습니다.

H1을 작성할 때 지킬 기준

대표 제목과 소제목의 역할을 구분합니다

일반적인 블로그 글이라면 대표 제목을 H1 하나로 정하고, 본문의 큰 항목부터 H2로 내려가는 구조를 권합니다. 제목끼리 무엇이 더 중요하고 어느 항목에 속하는지 분명해집니다.

H1이 여러 개 발견되면 글 제목, 로고, 배너, 본문 소제목 중 어디에 적용돼 있는지부터 확인합니다. 개수만 보고 모두 삭제하기보다 글의 대표 제목을 명확히 남기고 각 요소에 맞는 구조로 조정합니다. MDN도 일반적으로 페이지를 설명하는 H1 하나를 사용하는 방식을 권장합니다.

검색 유입을 기대하는 주요 페이지에 H1이 없거나 내용이 비어 있다면 먼저 확인할 대상입니다. 눈에 보이는 제목이 별도 이미지나 일반 문장으로만 들어가 있는지도 살펴봅니다.

핵심 검색어를 문장 안에 자연스럽게 넣습니다

H1은 페이지가 다루는 대상을 구체적으로 알려줘야 합니다. 핵심 검색어가 실제 주제와 일치한다면 제목에도 자연스럽게 사용하는 편이 좋습니다.

아래는 Title Tags(타이틀 태그)와 Alt Text(대체 텍스트)를 다루는 두 글의 제목입니다. 강조된 주제어를 보면 각 글이 무엇을 설명하는지 바로 알 수 있습니다.

한국어 글에서도 같습니다. H1 사용법을 설명하는 글의 제목을 ‘웹사이트 운영 팁’이라고만 쓰면 범위가 모호합니다. ‘H1 태그 사용법과 점검 방법’이라고 쓰면 어떤 설명을 읽을 수 있는지 더 분명합니다. 반면 ‘H1 태그, H태그, HTML H1 tag, H1 H2 사용법’처럼 검색어 변형을 한 줄에 나열하면 읽기 어렵습니다.

독자가 찾는 답을 제목과 본문에 담습니다

대표 키워드를 넣는 데서 그치지 말고 독자가 원하는 답까지 제목에 드러냅니다. 개념을 찾는 사람에게는 정의를, 설정 방법을 찾는 사람에게는 절차를 제공해야 합니다.

아래 content marketing 검색 화면에는 ‘콘텐츠 마케팅이란 무엇인가’처럼 개념을 설명하는 결과가 반복됩니다. 이런 경우에는 바로 구매를 유도하는 제목보다 해당 개념과 기본 정보를 설명하는 제목·본문이 독자가 찾는 답에 가깝다고 판단할 수 있습니다.

이 차이를 판단할 때는 검색 의도를 파악하는 방법을 함께 참고할 수 있습니다. 가령 ‘원룸 이사 준비물’을 다루는 글이라면 준비물 목록을, ‘원룸 이사 비용’을 다루는 글이라면 비용 항목과 비교 기준을 중심으로 구성해야 합니다. 제목만 바꾸고 본문을 그대로 두면 독자가 기대한 답을 주기 어렵습니다.

고정된 글자 수보다 명확성과 가독성을 봅니다

H1에는 ‘반드시 60자 이내’처럼 모든 언어와 화면에 적용되는 고정된 SEO 글자 수 규칙이 없습니다. 한국어 제목을 영어권 글자 수 권장치에 기계적으로 맞출 필요도 없습니다.

H1과 같은 문구를 타이틀에도 사용한다면 검색 결과에서의 표시를 별도로 살펴봅니다. 아래 화면에서는 긴 검색 결과 제목의 뒤쪽이 말줄임표로 생략되어 있습니다.

Google은 타이틀의 길이에 제한이 없으며, 검색 결과에서는 기기 너비 등에 따라 제목이 잘릴 수 있다고 안내합니다. 따라서 ‘60자 이하이면 잘리지 않는다’고 보장할 수 없습니다. 중복 수식어를 줄이고 모바일에서 줄이 바뀌어도 뜻이 자연스럽게 이어지는지 확인하면 좋습니다.

타이틀과 본문이 같은 내용을 약속하게 합니다

H1과 타이틀은 문구가 조금 달라도 같은 주제를 설명해야 합니다. 제목에 ‘사용법’을 넣었다면 실제 절차가 있어야 하고, ‘비교’를 넣었다면 비교 기준과 결과를 제시해야 합니다.

아래 화면에서는 페이지의 대표 제목과 코드의 <title>이 표현은 조금 다르지만 모두 시장 분석과 마케팅 전략이라는 같은 주제를 설명합니다.

서로 다른 글의 H1이 모두 ‘SEO 가이드’처럼 똑같다면 각 글이 무엇을 다루는지 구체적으로 구분할 여지가 있습니다. 단순히 중복 경고를 없애기 위해 단어만 바꾸기보다 각 페이지의 목적에 맞춰 제목과 내용을 함께 검토합니다.

사이트 전체의 H1은 어떻게 점검하나요?

주요 글과 서비스 페이지부터 URL, 타이틀, H1 문구, H1 개수를 모아 봅니다. 페이지 수가 많으면 크롤러로 목록을 만들고, 같은 템플릿을 쓰는 페이지에서 반복되는 문제인지 확인합니다.

같은 문제가 여러 글에서 반복된다면 개별 글보다 테마나 페이지 템플릿을 먼저 살펴보는 편이 효율적입니다. 수정 후에는 해당 템플릿을 쓰는 글과 다른 유형의 페이지를 각각 확인합니다. H1 외에 크롤링과 사이트 구조까지 점검하려면 테크니컬 SEO의 기본 점검 항목으로 범위를 넓힐 수 있습니다.

점검 도구의 경고는 확인할 대상을 찾는 출발점입니다. 경고를 없앤 것과 검색 순위가 개선된 것은 구분해야 합니다. 새 글을 발행하거나 테마·페이지 빌더를 바꿨을 때도 대표 제목과 하위 제목이 의도대로 출력되는지 다시 확인합니다.

발행 전 확인할 항목

• 대표 제목이 페이지의 주제를 구체적으로 설명하는지 확인합니다.
• 제목이 실제 HTML에서도 H1으로 지정되어 있는지 확인합니다.
• 글 제목이 이미 H1이라면 본문에 같은 H1을 다시 넣지 않았는지 확인합니다.
• H2·H3의 순서와 포함 관계가 본문의 내용에 맞는지 확인합니다.
• 타이틀과 H1이 독자에게 같은 내용을 약속하는지 확인합니다.
• 핵심 검색어를 나열하거나 제목에 불필요하게 반복하지 않았는지 확인합니다.
• 모바일 화면에서도 제목과 소제목을 읽기 편한지 확인합니다.

원문: Carlos Silva, What Is an H1 Tag? Why It Matters & Best Practices for SEO, Semrush, 2024년 3월 11일.

원문 저작권은 Semrush에 있습니다. 마케팅 엑시트는 허가를 받아 한국어로 번역·편집했습니다. 이미지는 원문 자료를 활용했으며 일부 문구와 홍보 요소를 편집했습니다. 별도 출처가 있는 이미지는 해당 캡션에 표시했습니다.