시맨틱 HTML5 태그가 SEO에 도움이 되는 이유는 태그 이름이 멋있어서가 아닙니다. 검색엔진이 페이지 구조를 덜 헷갈리게 읽도록 도와주기 때문입니다.
문제는 여기서 자주 생깁니다. <section>을 <div> 대용으로 남발하고, <article>을 그냥 큰 박스로 쓰고, <aside>는 아예 빠지는 경우가 많습니다. 개발자 입장에서는 정리된 것처럼 보여도, 검색엔진 입장에서는 우선순위가 흐려집니다.
태그를 많이 쓰는 것보다 신호를 선명하게 만드는 것이 중요하다
대부분의 페이지는 복잡한 구조가 필요하지 않습니다. 보통 아래 네 가지만 분명하면 충분합니다.
- 어디가 헤더인지
- 어디가 푸터인지
- 무엇이 메인 콘텐츠인지
- 어떤 블록이 메인과 관련은 있지만 우선순위는 낮은지
이 정도만 명확해도 <header>, <footer>, <main>, <article>, <aside>로 핵심 구조는 거의 정리됩니다.
구조가 단순해 보여도 괜찮습니다. 오히려 그 단순함이 장점입니다. 중요한 것만 남기면 검색엔진도 핵심을 더 쉽게 잡습니다.
가장 흔한 실수는 시맨틱 태그를 레이아웃용으로 쓰는 것이다
많은 페이지가 여기서 어긋납니다. 화면을 나누는 박스마다 <section>을 붙여 두면 더 의미 있어 보인다고 생각하지만, 실제로는 그렇지 않습니다.
위 예시에서 <article>과 <h1> 자체는 문제없습니다. 문제는 제목 주변에 있는 여러 개의 <section>입니다. 각 블록이 독립된 주제를 가진 것도 아닌데 시맨틱 태그만 늘어나 있습니다.
<section>은 보기 좋은 박스를 만들기 위한 태그가 아닙니다. 하나의 자립적인 콘텐츠를 주제별 하위 단위로 나눌 때 써야 합니다. 모든 것을 section으로 감싸면 오히려 중요한 구분이 사라집니다.
<section>이 제대로 먹히는 경우
반대로 <section>이 정말 잘 맞는 페이지도 있습니다. 예를 들어 스마트폰 리뷰라면 디자인, 디스플레이, 카메라, 배터리, 성능처럼 분명한 하위 주제가 생깁니다.
이럴 때는 각 블록이 하나의 질문에 답하고, 별도로 떼어 놓아도 의미가 통합니다. 그때 <section>이 구조를 더 또렷하게 만들어 줍니다.
사용 전에 확인해 볼 기준은 이렇습니다.
- 이 블록이 독립된 하위 주제를 다루는가
- 보통
<h2>나<h3>같은 자체 제목이 있는가 - 본문에서 떼어내도 내용이 어느 정도 자립하는가
- 시각적 배치가 아니라 주제 흐름 때문에 나누는가
이 기준을 설명하기 어렵다면, 그냥 <div>가 더 정직한 선택일 때가 많습니다.
<article>과 <aside>는 중요도를 나누는 태그다
<article>도 종종 과하게 쓰입니다. 원래는 혼자서도 의미가 서는 콘텐츠를 감쌀 때 어울립니다. 블로그 글, 뉴스 기사, 리뷰, 포럼 글 같은 경우입니다.
하지만 실제 페이지 하단에는 관련 글, 연관 상품, 구독 박스, 작성자 정보처럼 메인 콘텐츠를 보조하는 요소가 자주 붙습니다. 이런 블록이 쓸모없다는 뜻은 아니지만, 메인 콘텐츠와 같은 무게로 보이게 둘 필요는 없습니다.
그럴 때 <aside>가 맞습니다. 주제와 연결은 되어 있지만 중심 메시지는 아니라는 뜻을 분명하게 전달해 줍니다.
실무적으로 정리하면:
<article>은 URL의 핵심 메시지를 담는 블록<aside>는 보충, 안내, 전환 유도 역할을 하지만 중심은 아닌 블록
<h1>은 한 페이지에 하나가 가장 안전하다
HTML5 규격만 보면 여러 <h1>도 가능하다고 볼 수 있습니다. 그래도 SEO 관점에서는 한 페이지에 하나가 가장 안전하고, 지금도 가장 실용적입니다.
그 <h1>은 메인 <article> 안에 두는 편이 좋습니다. 페이지 주제가 어디에 실려 있는지 신호가 깔끔해집니다.
헷갈릴 때 쓰는 간단한 구조 결정법
태그 선택이 애매하면 아래 순서로 정리하면 됩니다.
<header>는 상단 헤더, 로고, 네비게이션, 검색 영역에 쓴다.<footer>는 하단 정보 영역에 쓴다.<main>은 페이지의 핵심 영역에 한 번만 쓴다.<main>안에서 가장 중요한 고유 콘텐츠를<article>로 감싼다.- 관련은 있지만 부차적인 요소는
<aside>로 구분한다. - 주제가 실제로 쪼개질 때만
<section>을 추가한다.
이미 운영 중인 페이지가 복잡하다면, 구조 문제를 다른 SEO 신호와 함께 보는 편이 낫습니다. SEO Analyzer 같은 점검 도구를 활용하면 우선순위를 잡기 쉽습니다.
본문 안에서 같이 쓰면 좋은 다른 시맨틱 태그
시맨틱 태그는 블록 구조에만 있는 것이 아닙니다. 텍스트 안에서도 유용한 태그가 있습니다.
<strong>: 정말 중요한 부분에만 사용<em>: 문맥상 강조가 필요한 표현에 사용<mark>: 사용자의 시선을 끌어야 하는 문장에 사용<abbr>: 약어와 풀네임을 함께 제시할 때 사용<figure>와<figcaption>: 이미지, 예시, 다이어그램에 설명을 붙일 때 사용<ul>과<ol>: 목록 구조를 분명하게 보여 줄 때 사용<table>과<caption>: 표 데이터를 맥락과 함께 제시할 때 사용
표는 제대로 마크업하면 검색엔진이 이해하기 쉬운 구조화 데이터 덩어리가 됩니다. 특히 <caption>이 있으면 이 표가 무엇을 보여 주는지 한눈에 드러납니다.
결론
시맨틱 HTML5 태그의 핵심은 많이 쓰는 데 있지 않습니다. 애매함을 줄이는 데 있습니다.
검색엔진이 메인 콘텐츠, 보조 콘텐츠, 주제별 구획을 빠르게 파악할 수 있으면 페이지를 이해하는 비용이 줄어듭니다. 그게 결국 더 안정적인 색인과 더 선명한 주제 인식으로 이어집니다.
정리하면 규칙은 단순합니다. 태그는 적게 쓰되, 왜 그 태그를 쓰는지는 분명해야 합니다.
참고 자료
- 시맨틱 HTML 요소 개요: W3Schools
- 페이지의 HTML5 구조를 시각적으로 보는 도구: Semantic HTML5 Viewer
- 사이트의 기술 SEO 신호를 빠르게 점검하려면 SeoSpeedup을 사용할 수 있습니다
