문제는 HTML 자체가 아닙니다. 모든 블록이 똑같아 보이는 게 문제입니다
<div>만으로 페이지를 만드는 건 어렵지 않습니다. 브라우저는 잘 렌더링하고, 사용자도 겉으로는 큰 차이를 못 느낄 수 있습니다. 그런데 검색엔진 입장에서는 이야기가 달라집니다. 페이지 전체가 일반 컨테이너뿐이면 어떤 부분이 핵심 본문이고 어떤 부분이 메뉴, 추천 링크, 광고, 푸터인지 직접 추측해야 하기 때문입니다.
이럴 때 시맨틱 HTML5 태그가 역할을 합니다. <header>, <main>, <article>, <aside>, <section>은 단순히 코드를 예쁘게 정리하는 태그가 아니라, 각 영역이 페이지 안에서 어떤 의미를 가지는지 알려주는 표지판에 가깝습니다.
구조가 명확해지면 검색엔진은 템플릿 잡음을 덜 받고, 본문 주제를 더 쉽게 읽습니다. 사이드바가 많거나 추천 모듈이 빽빽한 페이지일수록 차이가 더 잘 드러납니다.
왜 SEO에 실제로 도움이 될까
구글이 HTML을 전혀 이해 못해서 이런 태그가 필요한 것은 아닙니다. 핵심은 오해할 여지를 줄이는 데 있습니다.
콘텐츠 페이지 하나만 봐도 보통 이런 요소가 같이 붙습니다.
- 글로벌 내비게이션
- 관련 글 모듈
- 프로모션 배너
- 사이드바 위젯
- 사이트 공통 푸터 링크
이 모든 것이 구조상 같은 레벨에 놓여 있으면, 검색엔진은 무엇이 주제 중심인지 더 많이 추정해야 합니다. 규모가 큰 블로그, 미디어 사이트, 쇼핑몰에서는 이런 모호함이 누적되기 쉽습니다.
예를 들어 BMW X5 시승기를 생각해 보겠습니다. 본문은 X5를 다루지만, 옆에는 Mercedes GLE, Audi Q7, 유지비 관련 글이 같이 노출될 수 있습니다. 이런 블록이 나쁜 것은 아니지만, 검색엔진이 페이지 주제를 판단할 때 본문과 같은 무게로 취급되면 곤란합니다.
먼저 큰 영역부터 나누세요: <header>, <main>, <footer>
가장 바깥 구조는 생각보다 단순합니다.
<header>: 사이트 헤더와 주요 내비게이션<main>: 이 URL만의 고유한 핵심 콘텐츠<footer>: 푸터, 저작권, 보조 링크
1<body> 2 <header> 3 <!-- 로고, 주 내비게이션, 검색 --> 4 </header> 5 6 <main> 7 <!-- 이 페이지의 핵심 본문 --> 8 </main> 9 10 <footer> 11 <!-- 저작권, 약관, 연락처 --> 12 </footer> 13</body>
여기서 실무적으로 꼭 기억할 점은 두 가지입니다.
- 페이지마다
<main>은 하나만 두는 편이 좋습니다. - 이 태그들은 의미와 구조를 위한 것입니다. 시각적인 배치는 CSS가 맡아야 합니다.
검색 의도를 직접 해결하는 덩어리는 <article>로 감싸세요
<main> 안에서도 본문 핵심을 더 분명히 표시할 수 있습니다. 하나의 독립적인 콘텐츠 단위를 담는다면 <article>이 가장 자연스럽습니다.
대표적인 예시는 이렇습니다.
- 블로그 글
- 뉴스 기사
- 긴 가이드
- 제품 리뷰
- 독립적으로 읽힐 수 있는 설명 페이지
대개 메인 <h1>도 이 안에 들어갑니다.
1<main> 2 <article> 3 <h1>BMW X5 시승기: 주행감과 장단점 정리</h1> 4 <p>핵심 리뷰 본문...</p> 5 </article> 6</main>
이 구조는 검색엔진에 "이 블록이 이 URL의 중심 답변이다"라고 알려주는 효과가 있습니다.
보조 정보는 <aside>로 분리해 두는 편이 안전합니다
메인 콘텐츠 바깥의 정보가 다 쓸모없는 것은 아닙니다. 다만 중심 서사와는 거리가 있는 경우가 많습니다. 이럴 때 <aside>가 잘 맞습니다.
보통 이런 영역에 쓰기 좋습니다.
- 작성자 소개
- 짧은 배경 설명
- 관련 글 목록
- 광고나 프로모션
- 사이드 위젯
1<main> 2 <article> 3 <h1>BMW X5 시승기: 주행감과 장단점 정리</h1> 4 <p>핵심 본문...</p> 5 6 <aside> 7 <p>모델 히스토리와 간단한 제원 요약.</p> 8 </aside> 9 </article> 10 11 <aside> 12 <h2>함께 보면 좋은 글</h2> 13 <ul> 14 <li><a href="/mercedes-gle-review">Mercedes GLE 리뷰</a></li> 15 <li><a href="/audi-q7-review">Audi Q7 리뷰</a></li> 16 </ul> 17 </aside> 18</main>
이렇게 나눠 두면 BMW X5 리뷰가 주제의 중심이고, 오른쪽 블록은 보조 정보라는 점이 훨씬 명확해집니다.
<section>을 멋있어 보이는 <div> 대용으로 쓰면 오히려 헷갈립니다
<section>은 주제가 구분되는 콘텐츠 묶음에 잘 맞습니다. 보통 자체 제목이 있고, 긴 글 안에서 하나의 하위 주제로 읽히는 경우입니다. 반대로 단순히 박스를 하나 더 감싸려고 쓰는 것은 이득이 거의 없습니다.
1<article> 2 <h1>시맨틱 HTML5 태그 활용법</h1> 3 4 <section> 5 <h2>main은 무엇을 맡는가</h2> 6 <p>...</p> 7 </section> 8 9 <section> 10 <h2>article은 언제 쓰는가</h2> 11 <p>...</p> 12 </section> 13</article>
빠르게 판단하는 기준은 단순합니다. 그 블록에 어울리는 소제목이 없다면, 굳이 <section>일 필요가 없는 경우가 많습니다.
템플릿 점검할 때 먼저 볼 것
시맨틱 구조를 SEO 관점에서 확인할 때는 아래 항목부터 보시면 됩니다.
<main>이 페이지당 하나인지- 검색 의도를 해결하는 본문이
<article>안에 들어 있는지 - 관련 글, 배너, 사이드 모듈이 적절히 분리되어 있는지
<section>이 실제 하위 주제를 나눌 때만 쓰였는지- 시각적 순서와 시맨틱 순서가 크게 어긋나지 않는지
- 블로그, 랜딩, 카테고리, 리소스 페이지 전반에 같은 원칙이 적용되는지
이 문제는 한 URL만의 이슈로 끝나는 경우가 드뭅니다. 보통 템플릿 단위로 반복됩니다.
정리
시맨틱 HTML5가 좋은 콘텐츠나 검색 의도 대응을 대신해 주는 것은 아닙니다. 하지만 검색엔진이 본문, 보조 정보, 템플릿 반복 영역을 더 빠르게 구분하도록 돕는다는 점에서 분명히 가치가 있습니다.
이미 노출은 나오는데 클릭 이후 성과가 기대만큼 이어지지 않는 페이지라면, 이 구조를 한 번 점검해 볼 만합니다. SeoSpeedup Site Audit 같은 기술 SEO 점검에서도 이런 구조 문제는 꽤 자주 잡힙니다.
