명시적 섹션 vs 암시적 섹션
SEO를 위한 마크업에서 헤딩만큼 중요 한 것은 "명시적 섹션"입니다. 명시적 섹션과 암시적 섹션은 HTML 문서 내에서 구조적인 계층을 형성하는 요소입니다.
명시적 섹션은 <section>과 <article> 등의 요소로 구성되어 있으며, 이 요소들은 HTML5에서 새롭게 도입된 구조 요소입니다. 이 요소들은 구조적인 계층을 명시적으로 나타내며, 검색 엔진은 이를 인식하여 웹 페이지의 구조를 파악할 수 있습니다.
암시적 섹션은 구조적인 계층을 명시하지 않은 일반적인 요소들입니다. 예를 들어 <div> 요소는 구조적인 의미를 가지지 않지만, HTML 문서 내에서 섹션을 형성할 수 있습니다.
명시적 섹션과 암시적 섹션의 잘못된 사용은 검색 엔진이 웹 페이지를 분석할 때 혼란을 줄 수 있습니다.
HTML5에서 명시적으로 정의된 섹션의 종류는 다음과 같습니다:
- <article> : 문서, 페이지, 사이트, 블로그 등 독립적으로 구성되어 있는 컨텐츠에 사용됩니다.
- <aside> : 본문과는 관련이 적은 사이드바, 광고, 콘텐츠와는 독립적인 콘텐츠 등을 감싸는 데 사용됩니다.
- <nav> : 문서 내부 또는 외부에서 다른 페이지나 위치로 연결하는 링크들의 모음인 내비게이션 메뉴를 감싸는 데 사용됩니다.
- <section> : 문서의 구분을 나타내며, 보통 헤딩과 함께 사용됩니다.
- <header> : 섹션의 시작 부분에 위치하며, 제목이나 로고, 검색창 등과 같은 정보를 담고 있는 데 사용됩니다.
- <footer> : 섹션의 끝 부분에 위치하며, 저작권 정보나 연락처 등과 같은 보조 정보를 담고 있는 데 사용됩니다.
- <main> : 문서에서 가장 중요한 콘텐츠를 감싸는 데 사용됩니다. 이 요소는 문서 내에서 한 번만 사용해야 합니다.
다음은 명시적 섹션과 암시적 섹션의 예시입니다.
명시적 섹션 :
<body>
<header>
<h1>웹 페이지 제목</h1>
<nav>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>섹션 1 제목</h2>
<p>섹션 1 내용</p>
</section>
<section>
<h2>섹션 2 제목</h2>
<p>섹션 2 내용</p>
</section>
<article>
<h3>글 제목</h3>
<p>글 내용</p>
</article>
</main>
<footer>
<p>저작권 정보</p>
</footer>
</body>
암시적 섹션 :
<body>
<div>
<h1>웹 페이지 제목</h1>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
</ul>
<div>
<h2>섹션 1 제목</h2>
<p>섹션 1 내용</p>
</div>
<div>
<h2>섹션 2 제목</h2>
<p>섹션 2 내용</p>
</div>
<div>
<h3>글 제목</h3>
<p>글 내용</p>
</div>
</div>
<div>
<p>저작권 정보</p>
</div>
</body>
<section>에는 헤딩이 꼭 필요할까?
답은 YES! 섹션에는 헤딩이 꼭 필요합니다. HTML5에서는 섹션 요소를 사용하여 웹 문서의 구조를 명시적으로 나타낼 수 있습니다. 이때, 섹션 요소에는 적절한 헤딩 요소를 사용하여 섹션의 목적을 명확히 해야 합니다.
검색 엔진은 웹 페이지의 구조를 이해하고 인덱싱할 때, 헤딩 요소를 사용하여 문서의 내용과 구조를 이해합니다. 따라서 섹션에 적절한 헤딩 요소를 사용하지 않으면 검색 엔진이 웹 페이지의 구조를 올바로 인식하지 못하고, 검색 결과에 노출되는 확률이 낮아집니다.