헤딩 태그 퇴고 장면으로 읽기

한눈에 보기 메모

헤딩 태그는 가정한 장면 위에서 읽어 볼 온페이지 SEO¹ 낱말로, 다루는 글마다 Heading Tags, H1~H6, 제목 태그 같은 다른 이름·표기로 소개된다. 본문의 큰 제목부터 작은 소제목까지 여섯 단계로 나누어 표시하는 HTML 요소로, 글의 계층 구조를 기계와 사람 모두에게 알려 준다.

웹사이트상위노출은 검색 결과 위쪽에 웹사이트가 잡히게 하는 일을 말하는 이름이고, 페이지 글을 정리하는 일도 그 작업에 들어간다.

꾸민 상황 노트

아래 상황은 설명용으로 만든 가상 사례²다. 예를 들어 보일러 고장 안내 글이라면 전체 주제를 맨 위 큰 제목에 두고 증상, 원인, 해결 순서를 그 아래 소제목으로 나누는 구성이 자연스럽다.

장면 앞의 사정 단락

장면을 접어 두고 헤딩 태그가 쓰이게 된 내력은 다음과 같다. 문서를 장과 절로 나누는 인쇄물의 관행을 웹 문서에 옮긴 것으로, 화면 낭독기 사용자의 탐색과 검색엔진의 주제 파악을 함께 돕는다.

작용 방식 덧붙임

사례 속에 숨은 작동 흐름은 다음과 같다. 검색엔진은 제목 요소에 담긴 문구를 그 아래 내용의 주제를 짐작하는 단서로 읽는다. 화면 낭독기는 제목 목록을 따라 원하는 절로 바로 이동할 수 있게 해 준다.

나란히 보기 스케치

사례 노트에서 자주 엇갈리는 개념과 헤딩 태그를 갈라 보면 이렇다. 강조 요소인 strong과 헷갈리기도 하는데, strong은 문장 안의 단어가 중요하다고 표시하고 이 요소는 그 아래 이어질 단락 묶음의 제목을 표시한다는 점이 다르다.

오해와 사실 메모

장면을 접고 나서도 남아 있기 쉬운 착각은 다음과 같다. H1이 페이지에 하나만 있어야 순위가 유지된다는 말이 퍼져 있으나, 구글은 여러 개여도 문제 삼지 않는다는 취지로 설명해 왔다. 다만 주제를 분명히 하려면 큰 제목 하나가 읽기에 편하다.

비슷한 원고에서 걸리는 실수 스케치

닮은 문서를 퇴고³하는 단계에서 틀리기 쉬운 곳은 이렇다. 글자를 크게 보이려고 제목 요소를 쓰거나 모든 소제목에 같은 키워드를 반복해 넣으면 구조가 흐려지고 읽는 사람에게도 어색해진다.

살피는 법 단락

가상의 장면을 실제 원고로 옮기면 헤딩 태그를 살피는 방법은 다음과 같다. 브라우저 개발자 도구나 접근성 점검 도구로 제목 구조를 펼쳐 보고, 단계가 건너뛰어지거나 디자인 목적으로만 제목 요소를 쓴 곳이 없는지 살핀다.

할 일 여백

예시를 작업대 위로 옮기면 다음처럼 적을 수 있다. 글을 쓰기 전에 소제목만으로 개요를 먼저 짜 보고, 각 소제목이 아래 단락의 내용을 한 줄로 요약하는지 확인하며 본문을 채운다.

연결 고리 정리

사례의 개념을 다른 표제어 곁에 두면 다른 용어와 이어지는 방식은 이렇다. 본문 맨 위 큰 제목은 타이틀 태그와 주제를 맞추는 경우가 많고, 소제목 구조는 목차를 자동으로 만드는 바탕이 된다.

간추림 살피기

장면을 지나온 끝에 웹사이트상위노출을 바라는 쪽이 붙들 한 줄은 이렇다. 글의 뼈대를 기계가 읽을 수 있는 형태로 드러내는 장치이며, 보기 좋은 글자 크기보다 단계의 논리가 먼저다.

관련 문서 길잡이

사이트 안의 별도 안내로는 진행 과정 페이지로 이어 갈 수 있다. 함께 읽을 문서는 다음 목록에 있다.

• 목차

• 타이틀 태그

• 피처드 스니펫

• 아웃바운드 링크