웹사이트에서 최적의 SEO 성과를 얻으려면 페이지당 H1 요소(태그)를 한 번만 사용해야 합니다. 그 이유와 올바른 제목 태그 활용법을 자세히 알아보겠습니다.
HTML5 제목 태그의 기본 구조
웹 개발자나 디자이너가 가장 먼저 배우는 개념 중 하나가 바로 HTML5의 6단계 제목 요소, 즉 H1부터 H6까지의 헤딩 구조입니다.
초보자에게는 H1이 가장 중요한 요소이며, 메인 제목이나 헤드라인처럼 핵심적인 내용에 사용해야 한다고 가르칩니다. 그다음에는 H2, H3, H4 등을 콘텐츠의 소제목으로 단계적으로 활용하게 됩니다.
H1을 여러 번 사용하면 생기는 문제
그런데 많은 초보자들이 같은 페이지에서 H1 태그를 여러 번 사용하는 경우를 자주 볼 수 있습니다. 페이지 안에서 중요하다고 생각되는 텍스트 요소가 여러 개 있다고 판단하기 때문일 겁니다. 하지만 이것은 명백한 문제입니다.
검색 엔진은 H1 태그로 감싸진 콘텐츠를 해당 페이지의 헤드라인, 즉 핵심 주제로 자동 인식합니다. 이것이 중요한 이유는 검색 엔진 결과 페이지(SERP)에서 검색했을 때 다음과 같은 항목이 표시되기 때문입니다.
- 페이지 제목
- 메타 설명(Meta description)
- URL
페이지마다 H1을 여러 번 사용하면 각 페이지의 우선순위가 흐려집니다. 검색 결과를 표시할 때 검색 엔진은 대체 어떤 H1 제목을 선택해야 할까요? 기본적으로 검색 엔진은 위에서부터 아래 순서로 선택하는 경향이 있지만, 색인 방식과 콘텐츠 표시 방식에 영향을 미치는 수많은 변수가 있어 반드시 그렇다고 보장할 수 없습니다.
검색 엔진은 H1 제목을 통해 각 페이지에서 가장 중요한 주제가 무엇인지 판단합니다. 그런데 모든 것이 중요하다고 알려주면, 결국 아무것도 중요하지 않게 되는 셈입니다.
포트폴리오 사이트의 흔한 실수
H1을 남용하는 대표적인 사례가 바로 포트폴리오 사이트입니다. 첫 화면에 프로젝트 목록을 그리드 형태의 갤러리로 보여주는 구성이 흔한데, 여기서 실수가 발생합니다.
각 프로젝트가 개별 URL로 연결되기 때문에 그리드 항목의 프로젝트 제목에 H1을 사용하는 것이 처음에는 당연해 보일 수 있습니다.
하지만 이것은 잘못된 SEO 방식입니다.
올바른 제목 태그 사용법
올바른 방법은 다음과 같습니다.
- 첫 페이지: 클라이언트 프로젝트 목록을 그리드 형태로 보여주는 첫 화면에서는 그리드 항목 제목에 H2, H3 또는 H4를 사용해야 합니다.
- 개별 프로젝트 페이지: 각 프로젝트 페이지에서는 프로젝트 제목을 H1(
<h1></h1>) 태그로 감싸야 하며, 프로젝트 페이지당 H1 요소는 반드시 하나만 사용합니다.
H2, H3, H4 등의 제목 태그는 페이지에서 원하는 만큼 자유롭게 사용할 수 있으므로, 세 가지 중 하나를 골라 그리드 항목 제목에 적용하면 됩니다.
H2, H3, H4 중 무엇을 사용해야 할까?
왜 H2, H3, H4 중 하나여야 할까요? 어느 것을 선택하느냐에 따라 큰 차이가 있을까요? 크지 않다고 생각합니다. 상위 랭킹에 오른 주요 웹사이트들을 살펴보면 대부분 이 세 가지 제목 중 하나를 사용하고 있으며, H2가 H3나 H4보다 더 유리하다는 증거는 찾아볼 수 없었습니다.
참고로 몇 가지 사례를 들자면 다음과 같습니다.
- css-tricks.com과 Scotch.io는 H2를 사용합니다.
- Medium.com과 sidebar.io는 H3를 사용합니다.
디자인 관점에서의 제목 태그 선택
제목 태그는 검색 엔진에게 콘텐츠의 구조를 알려주는 역할뿐 아니라, 사용자에게 시각적으로 콘텐츠의 위계 구조를 전달하는 역할도 한다는 점을 반드시 고려해야 합니다.
따라서 그리드 항목 제목에 어떤 제목 요소를 사용할지는 웹사이트에서 사용하는 타입 스케일(글꼴 크기 체계)에 따라 정하면 됩니다. 예를 들어 H3가 font-size: 1.5rem;으로 설정되어 있고 이 크기가 그리드 항목 제목에 잘 어울린다면, 그대로 H3를 사용하면 됩니다.