제목 태그는 글자를 크게 만드는 도구처럼 보이지만, 실제로 하는 일은 문서의 목차를 만드는 것입니다. 화면 낭독기를 쓰는 사람은 제목만 훑어 원하는 곳으로 바로 이동합니다 — 우리가 페이지를 위아래로 훑어보는 것과 같은 동작을, 제목 목록으로 합니다.
그래서 제목 계층이 무너지면 그 사람에게는 목차 없는 문서가 됩니다. 검색엔진도 같은 구조를 읽으므로, 화면과 색인이 함께 흐려집니다.
규칙은 둘뿐입니다
h1 은 그 페이지가 무엇인지 말하는 한 줄입니다. 사이트 이름이 아니라 이 문서의 제목이어야 합니다. 모든 페이지의 헤더 로고를 h1 으로 만든 사이트가 흔한데, 그러면 100개 페이지의 h1 이 전부 같은 문장이 됩니다.
흔한 사고 — 테마가 제목을 하나 더 그린다
직접 만든 화면에서는 h1 을 하나만 두기 쉽습니다. 정작 문제는 테마가 우리 모르게 제목을 하나 더 출력하는 경우입니다. 우리도 이 사이트를 만들면서 겪었습니다 — 목록 화면에서 테마가 자기 페이지 제목을 우리 제목 위에 그려, h1 이 둘이 된 상태로 한동안 서 있었습니다.
화면에는 본문이 멀쩡히 보였기 때문에 눈으로는 발견되지 않았습니다. 이런 종류는 브라우저에서 문서 구조를 확인해야 드러납니다. 개발자 도구에서 h1 을 검색해 개수를 세는 것만으로도 충분합니다.
크기와 단계를 분리합니다
디자이너가 자주 만나는 상황이 있습니다 — 구조상 h3 인데 화면에서는 크게 보였으면 하는 경우, 혹은 반대의 경우입니다. 이때 태그를 바꾸면 목차가 망가집니다.
해결은 타이포 스케일과 제목 단계를 분리하는 것입니다. 기본적으로는 단계에 맞는 크기가 적용되게 하고, 예외가 필요한 자리에는 크기만 바꾸는 방법을 따로 마련해 둡니다. 핸드오프에서 이 두 가지를 구분해 적어 주면 구현 쪽이 태그를 바꾸는 일이 없어집니다.
한 문장을 강조하려고 제목 태그를 쓰는 것도 같은 이유로 피합니다. 그 문장은 목차에 한 줄로 올라가는데, 목차에서 보면 그 자리에 있을 이유가 없는 항목입니다.
제목 구조가 검색 노출에 어떻게 쓰이는지는 SEO 아카이브에서 더 다루고, 운영 중인 사이트의 마크업 구조를 점검받고 싶다면 최적화 지원 사업의 SEO 점검에 포함돼 있습니다.
다음 회차
마지막 회차입니다. 지금까지 다룬 항목들을 매번 처음부터 확인할 수는 없으니, 자동 검사에 맡길 것과 사람이 봐야 할 것을 나누고 점검 루틴으로 정리합니다.