마이크로데이터는 화면을 이루는 HTML 요소에 속성을 붙여 대상과 정보를 표현하는 구조화 데이터 형식입니다. itemscope, itemtype, itemprop이 대표 속성입니다. 임의의 data-* 속성이나 CSS 클래스는 마이크로데이터가 아닙니다.
이 글은 HTML 표준, Google 검색 센터와 네이버 서치어드바이저의 공식 문서를 기준으로 작성했습니다.
HTML 안에 직접 표시합니다
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">검은색 티셔츠</span>
</div>
itemscope는 하나의 대상을 시작하고, itemtype은 그 대상이 Product임을 밝힙니다. itemprop="name"은 화면의 글자가 상품명이라는 뜻입니다. 사용자가 보는 HTML과 기계가 읽는 의미가 같은 요소에 붙는 것이 특징입니다.
JSON-LD와 다른 점
JSON-LD는 별도 스크립트에 정보를 모읍니다. 마이크로데이터는 표시용 HTML 곳곳에 속성을 넣습니다. 작은 정적 페이지에서는 화면과 값이 어긋날 가능성을 줄일 수 있지만, 복잡한 템플릿에서는 속성이 흩어져 수정하기 어렵습니다.
Google은 마이크로데이터를 지원하면서 JSON-LD를 권장합니다. 네이버는 Microdata와 JSON-LD를 권장 형식으로 안내합니다. 기존 사이트가 마이크로데이터로 안정적으로 운영되고 있다면 형식만 바꾸려고 전면 교체할 필요는 없습니다.
확인할 때 놓치기 쉬운 부분
itemprop이 잘못된 상위 대상에 묶이지 않았는지 확인합니다- 화면에서 반복되는 카드가 서로 다른
itemscope인지 봅니다 - 가격이나 재고가 화면과 같은지 대조합니다
- 숨긴 복제 텍스트를 마크업용으로 만들지 않습니다
Schema Markup Validator에 URL을 넣으면 추출된 대상과 속성의 중첩 구조를 볼 수 있습니다. Google 지원 기능이라면 리치 결과 테스트에서 필수값도 따로 확인하세요.
자주 묻는 질문
Microdata와 메타태그는 같은가요?
아닙니다. 메타태그는 문서 정보를 <meta> 요소로 전달합니다. Microdata는 여러 HTML 요소를 하나의 대상과 속성 관계로 묶습니다.
JSON-LD와 함께 써도 되나요?
가능하지만 같은 대상을 두 형식으로 중복 표현하면 값이 어긋날 위험이 큽니다. 특별한 이유가 없다면 대상별로 한 형식을 일관되게 관리하는 편이 낫습니다.