H1 구조와 페이지 제목을 함께 설계하는 법

title과 H1은 다른 일을 한다

둘 다 제목이지만 보이는 곳이 다릅니다.

title은 "누를지 말지" 결정하게 하고, H1은 "제대로 왔는지" 확인시킵니다.

그래서 둘이 완전히 같을 필요는 없습니다. title에는 브랜드명이나 구분자를 붙이고, H1은 화면에서 자연스럽게 읽히도록 쓰는 편이 낫습니다. 다만 같은 주제를 말해야 합니다. 검색 결과에서 본 것과 들어와서 본 것이 다르면 바로 나갑니다.

H1 아래로 H2, H3가 내용의 구조를 만듭니다. 이 계층은 글자 크기가 아니라 논리입니다.

건너뛰지 않는 것이 원칙입니다. H2 없이 H1 다음에 H3가 나오면 구조가 어긋납니다. 크기가 마음에 안 들어서 태그를 바꾸는 것은 CSS로 해결할 일입니다.

H1이 여러 개 — 템플릿에서 로고와 페이지 제목을 둘 다 H1으로 쓰는 경우가 많습니다. 페이지의 주제가 두 개가 되어 무엇에 대한 페이지인지 흐려집니다.

H1이 없음 — 디자인상 큰 글씨를 div로 넣고 H1을 생략한 경우입니다. 화면은 멀쩡한데 문서 구조상 제목이 없는 페이지가 됩니다.

전 페이지 title이 같음 — 회사명만 들어간 title이 모든 페이지에 붙어 있으면, 검색 결과에서 어느 페이지인지 구분되지 않습니다.

H1이 로고 이미지 — 이미지만 있고 대체문구가 없으면 제목이 비어 있는 것과 같습니다.

제목에 키워드만 나열 — 사람이 읽는 문장이 아니면 검색 결과에서 다시 쓰이는 경우가 많습니다.

description도 같은 원칙입니다. 검색엔진이 다시 쓸 수 있지만, 잘 쓴 설명은 그대로 쓰이는 경우가 많습니다.

브라우저 개발자 도구에서 제목 태그만 뽑아 보면 문서의 뼈대가 한눈에 들어옵니다. 그 목록만 읽어도 페이지 내용이 짐작되면 잘 짜인 것입니다.

자주 묻는 질문

H1이 두 개면 반드시 문제인가요?

HTML 표준상 허용되긴 하지만, 페이지의 주제가 흐려지므로 하나로 두는 편이 좋습니다.

title과 H1이 같아도 되나요?

됩니다. 다만 title에는 브랜드명을 붙이고 H1은 화면에서 읽히기 좋게 쓰는 편이 자연스럽습니다.

검색 결과 제목이 내가 쓴 것과 다릅니다.

검색엔진이 질의에 맞춰 다시 쓸 수 있습니다. 페이지 내용을 잘 나타내는 고유한 제목을 쓰면 그대로 쓰일 확률이 올라갑니다.

description은 순위에 영향을 주나요?

순위 요인으로 쓰이지는 않지만 검색 결과에서 누를지 결정하는 문구라 중요합니다.