헤딩 구조

소제목을 글자 크기 키우기로만 쓰던 시절이 있었습니다. 굵게 하고 두 단계 크게 하면 화면에서 제목처럼 보이니 그것으로 충분해 보입니다.

문제는 사람만 이 글을 읽는 것이 아니라는 데 있었습니다. 굵고 큰 글자는 기계에게 그냥 글자입니다. 3,000자 글에 굵은 글씨 여덟 개만 있고 제목 태그가 없으면, 검색 엔진은 그 글이 여덟 주제로 나뉘었다는 것을 알 수 없고 문단 스무 개가 한 덩어리로 읽힙니다.

읽는 방식이 다른 사람에게도 같은 문제가 생겼습니다. 화면 내용을 소리로 읽어 주는 스크린 리더는 제목만 골라 목록으로 만들어 주는데, 태그가 없으면 그 목록이 비어 있습니다. 헤딩 구조는 보이는 크기와 별개로 위계를 기계가 읽게 적어 두는 일입니다.

제목 태그는 h1 부터 h6 까지 있고 숫자가 작을수록 큰 제목입니다. 지킬 것은 다섯입니다.

1. h1 은 한 페이지에 하나, 본문 맨 위의 글 제목이 그 자리입니다. 검색 결과에 파란 제목으로 뜨는 제목 태그와는 다른 값입니다.
2. 단계를 건너뛰지 않습니다. h2 다음에 h4 로 가면 그 사이에 빠진 층이 있는 것처럼 읽힙니다.
3. 크기가 아니라 위계로 고릅니다. 작아 보이게 하려고 h2 를 h4 로 바꾸지 않습니다. 크기는 따로 지정하고 태그는 내용의 층에 맞춥니다.
4. 소제목에 그 절의 내용을 담습니다. "기타" 나 "더 알아보기" 는 목차로 만들어도 어디로 갈지 알 수 없습니다.
5. 깊이는 셋까지 씁니다. h4 아래로 가면 읽는 사람이 몇 층에 있는지 잃습니다.

하나 더 있습니다. 검색 결과 맨 위에 답을 발췌해 보여 주는 피처드 스니펫은 대개 소제목과 그 바로 아래 문단을 가져갑니다. 질문 형태의 소제목 아래에 답을 두 문장으로 적으면 뽑힐 확률이 올라갑니다.

다만 위계만 맞춰 순위가 오르지는 않습니다. 검색 의도를 채우는 내용의 깊이를 콘텐츠 품질이라 하고, 뼈대는 그 내용이 있어야 값을 합니다.

"이 글에 제목 태그가 없어요. 굵은 글씨만 여덟 개입니다."

사람 눈에만 보이는 구조라는 지적입니다.

"h2 다음에 h4 로 갔네요. 층을 하나 건너뛰었습니다."

위계가 끊겼으니 태그를 고치자는 말입니다.

"소제목을 질문으로 바꿔 보죠. 스니펫에 뽑힐 자리입니다."

발췌 자리를 노려 형태를 고치자는 뜻입니다.

페이지덱 블로그에서 민서가 글 서식을 정리하며 이 규칙을 문서로 남겼습니다. 글 제목은 h1 하나, 절은 h2, 절 안의 갈래는 h3 까지만 씁니다. 현우가 그 뒤에 쓴 글 여섯 편 중 두 편이 발췌 자리에 올랐습니다.