마이크로데이터는 HTML 요소에 속성을 붙여 상품, 사람 등의 대상과 그 정보를 표현하는 구조화 데이터 형식입니다. itemscope, itemtype, itemprop으로 무엇을 설명하는지, 어떤 값이 이름이나 가격에 해당하는지 표시합니다. 일반 data-* 속성이나 CSS 클래스만 붙여서는 이런 관계를 나타낼 수 없습니다.
상품명에 의미를 붙이는 예시
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">검은색 티셔츠</span>
</div>
itemscope는 하나의 항목을 시작하고, itemtype은 그 항목이 상품(Product)임을 알립니다. 안쪽의 itemprop="name"은 ‘검은색 티셔츠’라는 텍스트가 해당 상품의 이름임을 나타냅니다. 화면에 보이는 상품명과 검색엔진이 읽을 상품명을 같은 요소에서 가져오는 구조입니다.
JSON-LD와 다른 점
JSON-LD는 구조화 데이터를 별도 스크립트에 모아 적습니다. 마이크로데이터는 기존 HTML에 속성을 붙이므로, 예시처럼 보이는 텍스트를 값으로 쓰면 상품명을 바꿀 때 구조화 데이터도 같이 바뀝니다. 다만 화면의 HTML을 고치면서 요소의 위치가 달라지면 속성이 엉뚱한 항목에 연결될 수 있습니다.
Google은 Microdata, RDFa, JSON-LD를 지원하며, 구현하고 유지하기 쉬운 경우가 많다는 이유로 JSON-LD를 권장합니다. 올바르게 구현했다면 세 형식 모두 사용할 수 있습니다. 네이버도 Microdata와 JSON-LD를 권장 형식으로 안내합니다. 따라서 기존 마이크로데이터가 정확하다면 형식을 바꾸는 것 자체가 우선 과제는 아닙니다.
HTML을 수정한 뒤 확인할 연결 관계
- 상품명과 가격의
itemprop이 같은 상품 항목에 속하는지 확인합니다. - 여러 상품 카드를 표시했다면 각 상품이 별도의
itemscope로 나뉘는지 확인합니다. - 화면의 가격이나 재고를 바꾼 뒤 추출된 속성값도 같은지 대조합니다. 별도의
meta요소에 값을 적었다면 함께 갱신해야 합니다. - 구조화 데이터에만 있고 사용자에게는 제공하지 않는 상품 정보나 평가를 넣지 않습니다.
Schema Markup Validator에서 추출된 항목을 펼쳐 상품명, 가격 등이 어느 대상 아래에 들어갔는지 확인합니다. Google 검색 기능에 필요한 속성은 리치 결과 테스트로 추가 검사합니다. 문법 오류가 없어도 가격이 다른 상품에 연결돼 있다면 잘못된 마크업입니다.
자주 묻는 질문
Microdata와 메타태그는 같은가요?
같은 개념은 아닙니다. <meta>는 HTML 요소이고, Microdata는 여러 요소에 속성을 붙여 정보를 구조화하는 형식입니다. 다만 <meta itemprop="name" content="상품명">처럼 meta 요소를 마이크로데이터의 속성값에 사용할 수는 있습니다.
JSON-LD와 함께 써도 되나요?
함께 쓸 수 있습니다. 같은 상품을 두 형식으로 중복 작성했다면 가격이나 재고를 바꿀 때 양쪽 값이 달라지지 않도록 관리해야 합니다. 특별한 이유가 없다면 같은 대상의 정보를 한 방식으로 관리하는 편이 수정하기 쉽습니다.
함께 알아두면 좋은 용어
- JSON-LD: 별도 스크립트에 구조화 데이터를 적는 방식
- RDFa: HTML 속성으로 RDF 관계를 표현하는 방식
- 구조화 데이터: 정해진 형식과 속성으로 콘텐츠의 대상과 정보를 표현한 데이터