H1을 한 포스팅에 네 번 썼습니다. 강조하고 싶은 문장마다 H1을 붙였고, 그게 문제라는 생각은 전혀 없었습니다. 소스 보기 버튼을 처음 눌러봤을 때 제 글이 얼마나 구조적으로 엉망이었는지 한눈에 보였습니다. 그날부터 H 태그가 다르게 보이기 시작했습니다.
H 태그를 글자 크기 조절 도구로 쓰고 있진 않으신가요?
블로그를 처음 만들었을 때 저는 H 태그가 단순히 글꼴 크기를 바꾸는 수단이라고 생각했습니다. H1을 쓰면 크게, H3를 쓰면 조금 작게. 그 이상의 의미는 몰랐습니다. 강조하고 싶은 문장이 생기면 망설임 없이 H1을 붙였고, 한 포스팅에 H1이 네 개 들어간 글도 있었습니다.
그런데 헤딩 태그(Heading Element)는 디자인 도구가 아닙니다. 헤딩 태그란 HTML 문서에서 콘텐츠의 계층 구조, 즉 제목과 소제목의 위계를 나타내는 마크업 요소입니다. 쉽게 말해 구글 크롤러(Crawler)가 이 태그를 읽으며 글의 주제가 무엇이고 어떤 흐름으로 내용이 전개되는지 파악합니다. 여기서 크롤러란 검색엔진이 웹 페이지를 탐색하고 수집하는 자동화 프로그램입니다.
H1이 여러 개 있으면 크롤러 입장에서는 이 페이지의 핵심 주제가 무엇인지 판단하기 어려워집니다. 한 페이지에 H1은 단 하나, 나머지 큰 단락은 H2로, H2 아래의 세부 내용은 H3로 배치하는 것이 올바른 위계입니다(출처: MDN Web Docs). 저는 이걸 몰랐고, 그 결과를 나중에 혹독하게 체감했습니다.
올바른 H 태그 위계를 정리하면 다음과 같습니다.
- H1: 페이지 전체의 핵심 주제. 포스팅당 반드시 1개만 사용
- H2: 본문의 주요 단락 구분. 3~4개가 적당
- H3: H2 아래에 오는 세부 소제목. H2 없이 단독으로 쓰면 안 됨
- H4 이하: 정보량이 매우 많은 글에서만 필요 시 사용
구조적 오류가 색인에 영향을 미친다는 걸 직접 겪었습니다
H 태그 문제를 피부로 실감한 건 구글 서치 콘솔(Google Search Console)에서였습니다. 구글 서치 콘솔이란 구글이 내 사이트를 어떻게 수집하고 색인하는지 확인할 수 있는 무료 분석 도구입니다. 색인(Index)은 구글이 내 글을 검색 결과에 올릴 수 있도록 데이터베이스에 등록하는 과정을 의미합니다.
몇몇 포스팅이 색인이 잘 안 된다는 걸 알았을 때 처음에는 원인을 전혀 몰랐습니다. 내용도 나쁘지 않다고 생각했고, 키워드도 신경 써서 썼다고 판단했습니다. 그런데 문제는 태그 구조에 있었습니다. H2 다음에 H4가 바로 오는 식으로 위계가 뒤죽박죽이었고, H1이 두세 개 겹쳐 있는 글도 있었습니다.
시맨틱 마크업(Semantic Markup)의 관점에서 보면 이는 단순한 스타일 문제가 아닙니다. 시맨틱 마크업이란 HTML 태그가 단순히 화면 표시 방식이 아니라, 콘텐츠의 의미와 역할을 전달하도록 작성하는 방식입니다. 헤딩 태그의 위계를 지키는 것 자체가 구글에게 "이 글은 이런 구조로 읽어달라"고 명확히 신호를 보내는 행위입니다.
태그 위계를 정리하고 나서야 색인 상황이 조금씩 개선되기 시작했습니다. 물론 H 태그 하나만으로 SEO(Search Engine Optimization, 검색엔진 최적화)가 해결되진 않습니다. 하지만 구조가 틀어진 상태에서 아무리 좋은 콘텐츠를 써도, 구글이 그 글을 제대로 이해하지 못할 수 있다는 건 직접 경험하고 나서야 납득이 됐습니다. 구글 역시 웹 문서의 접근성과 구조화된 마크업의 중요성을 공식적으로 강조하고 있습니다(출처: Google 검색 센터).
태그를 정리했더니 글쓰기 실력이 달라졌습니다
이 부분이 솔직히 예상 밖이었습니다. H 태그를 정리한 목적은 구글 색인 문제 때문이었는데, 결과적으로 글 자체가 달라졌습니다.
H2를 3~4개로 맞추고 H3를 그 아래에 배치하는 위계를 지키다 보니, 글을 쓰기 전에 구조부터 먼저 생각하게 됐습니다. 어떤 내용을 H2로 잡을지 결정하는 과정이 곧 글의 뼈대를 세우는 과정이었습니다. 제가 직접 써봤는데, 이 순서가 바뀌면 글의 흐름 자체가 흔들립니다.
일반적으로 대부분의 블로그 강의가 "H1은 하나만 써야 한다"는 규칙을 가르쳐주는데, 저는 이유를 모른 채 규칙만 외운 시기가 있었습니다. 그때는 형식적인 체크리스트처럼 느껴졌습니다. 왜 지켜야 하는지를 알고 나서야 비로소 자발적으로 신경 쓰게 됐고, 그 차이가 꽤 컸습니다.
태그 정리 후 내 글의 소스를 다시 열어봤을 때, 코드가 눈에 읽혔습니다. 그리고 글을 다시 읽었을 때 빠진 내용도 보이고, 중복된 내용도 걸러지기 시작했습니다. 구글에게 잘 보이려고 시작한 일이, 결국 저 자신이 더 잘 쓰게 만든 계기가 됐습니다. 구조가 먼저고 승인은 나중이라는 걸, 꽤 돌아서 깨달았습니다.
H 태그는 규칙이기 전에 글을 읽는 모든 사람, 그리고 구글에게 보내는 신호입니다. 지금 당장 포스팅 하나를 열고 소스 보기를 눌러보시길 권합니다. H1이 몇 개 있는지, H2 없이 H4가 바로 나오진 않는지 확인해 보시면 많은 것이 보일 겁니다. 저처럼 돌아가는 시간을 줄이실 수 있으리라 생각합니다.
참고: https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/Heading_Elements
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko