Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML5 마이크로데이터(Microdata) 속성 완벽 가이드

HTML5의 마이크로데이터(Microdata)는 웹 페이지에 포함된 데이터를 기계(검색 엔진, 크롤러 등)가 더 잘 이해할 수 있도록 문맥을 제공하는 기능입니다. 마이크로데이터는 어떤 HTML 요소에도 사용할 수 있는 다섯 가지 전역 속성(global attributes)을 도입하여, 사람뿐만 아니라 기계도 데이터의 의미를 파악할 수 있게 해줍니다.

마이크로데이터 핵심 속성 5가지

속성설명
itemscope하나의 아이템(item)을 생성하는 데 사용됩니다. itemscope는 불리언(boolean) 속성으로, 해당 페이지에 마이크로데이터가 존재하며 이 지점부터 시작된다는 것을 나타냅니다.
itemtype아이템의 종류를 정의하는 유효한 URL입니다. 스키마(schema) 어휘를 가리키며, 아이템 속성들에 대한 전체적인 문맥을 제공합니다.
itemid해당 아이템을 식별할 수 있는 전역 고유 식별자(global identifier)입니다.
itemprop아이템이 가진 개별 속성(property)을 정의합니다. 예를 들어 이름, 저자, 가격 등의 데이터를 표현할 때 사용됩니다.
itemref아이템의 이름-값(name-value) 쌍을 찾기 위해 크롤링해야 하는 추가 요소들의 목록을 지정합니다. itemscope 범위 밖의 요소를 연결할 때 유용합니다.

간단한 활용 예시

다음은 마이크로데이터 속성들을 실제로 적용한 예시입니다:

<div itemscope itemtype="https://schema.org/Book">
  <h3 itemprop="name">HTML5 완벽 가이드</h3>
  <p>저자: <span itemprop="author">홍길동</span></p>
</div>

이처럼 마이크로데이터를 활용하면 검색 엔진이 페이지 내용을 구조화된 데이터로 인식하여, 리치 스니펫(rich snippet) 등 향상된 검색 결과 노출에 도움을 줄 수 있습니다.