Web GuideH1 태그제목 태그 구조시맨틱 마크업
제목 태그(H1~H3) 구조를 잡는 법
제목 태그는 글자 크기를 정하는 도구가 아니라, 페이지의 목차를 만드는 도구입니다.
검색엔진과 AI는 H1, H2, H3의 위계를 읽어 페이지의 구조와 핵심을 파악합니다. 디자인 편의로 아무 곳에나 제목 태그를 쓰면 이 목차가 엉망이 됩니다. 올바른 구조를 잡는 원칙입니다.
PAGE OUTLINE
H1
페이지 주제 — 하나만
H2
큰 단락
H3
세부 항목
H3
세부 항목
H2
큰 단락
책의 장과 절을 생각하면 됩니다.
01
H1
H1은 페이지당 하나, 주제를 담는다
H1은 이 페이지가 무엇에 관한 것인지 말하는 대제목입니다. 페이지당 하나만 두고, 메타 타이틀과 같거나 비슷한 내용으로 씁니다.
잘못된 H1
H1
웹비스타
로고나 사이트 이름을 H1으로 쓰면 모든 페이지의 주제가 회사명이 되는 셈입니다.
→
올바른 H1
H1
전시회 홈페이지 제작
그 페이지의 주제를 담습니다. 게시글 페이지에서는 글 제목이 H1입니다.
02
H2 · H3
H2는 큰 단락, H3는 그 아래
본문을 몇 개의 큰 단락으로 나누고 각각에 H2를, 그 안의 세부 항목에 H3를 씁니다.
성립하는 목차
H1
H2
H3
H2
성립하지 않는 목차
H1
H3 ← H2가 없음
H4
H2 ← 순서 역행
03
WORDING
제목에 핵심 단어를 넣되 자연스럽게
각 제목은 그 단락의 내용을 한 줄로 요약해야 합니다.
방문자가 검색할 만한 단어가 자연스럽게 들어가면 좋습니다.
억지로 키워드를 반복하면 읽는 사람에게도 검색엔진에게도 역효과입니다.
제목만 읽어도 페이지 내용을 알 수 있다면 잘 잡힌 구조입니다.
04
MEANING VS STYLE
디자인은 CSS로 분리한다
문제의 시작
큰 글자가 필요해서 H2를 쓴다
작게 보이고 싶어 제목을 일반 텍스트로 둔다
의미
태그로 정한다
H1·H2·H3는 문서의 구조를 나타냅니다.
모양
CSS로 정한다
어떤 디자인이든 올바른 구조를 유지할 수 있습니다.
관리자 에디터에서 글을 쓸 때도 서식 메뉴의 ‘제목 2’, ‘제목 3’을 쓰는 습관이 필요합니다.
✓
CHECK POINT
1
모든 페이지에 H1이 하나씩 있고 페이지 주제를 담고 있는가
2
H2·H3의 순서가 목차처럼 논리적인가
3
글자 크기를 위해 제목 태그를 임의로 쓴 곳이 없는가