HTML에서 schema.org SiteNavigationElement의 올바른 사용법

SiteNavigationElement란 무엇인가?

schema.org의 SiteNavigationElement는 WebPageElement를 확장한 타입으로, 웹사이트의 내비게이션 링크를 구조화된 데이터로 표시할 때 사용합니다. 이 마크업을 적용하면 검색 엔진이 사이트의 주요 메뉴 구조를 더 정확하게 파악할 수 있으며, 문맥상 중요한 링크(contextual links)로 인식되도록 도와줍니다.

기본 마크업 예시

HTML의 <nav> 요소에 Microdata 형식으로 itemscope과 itemtype을 지정하고, 각 링크에는 itemprop="url", 링크 텍스트에는 itemprop="name" 속성을 부여하는 것이 일반적인 패턴입니다.

<nav role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement">
<ul>
   <li>
      <a href="https://example.com/" title="홈 페이지로 이동" itemprop="url">
         <span itemprop="name">홈</span>
      </a>
   </li>
   <li>
      <a href="https://example.com/demo" title="데모 페이지로 이동" itemprop="url">
         <span itemprop="name">데모 페이지</span>
      </a>
   </li>
</ul>
</nav>

속성 설명

itemscope / itemtype: 해당 영역이 schema.org의 SiteNavigationElement 타입임을 선언합니다.
itemprop="url": 링크가 가리키는 실제 URL을 나타냅니다.
itemprop="name": 사용자에게 보여지는 링크 텍스트(메뉴 이름)를 나타냅니다.

적용 시 유의사항

SiteNavigationElement는 반드시 <nav> 태그 안에 넣어야 하는 것은 아니지만, HTML5의 시맨틱 구조와 함께 사용하면 접근성과 SEO 모두에 긍정적인 영향을 줍니다. 또한 Microdata 대신 JSON-LD 방식으로도 동일하게 표현할 수 있으며, Google은 JSON-LD 형식을 권장합니다. 전체 사이트에 걸쳐 일관된 메뉴 구조에 적용하는 것이 바람직합니다.