구조화된 데이터
구조화된 데이터의 의미는 다양한 정보를 담고 있는 콘텐츠를 논리적으로 조직화하여 가공된 데이터를 의미한다.
검색엔진의 입장에서는 해당 웹페이지의 콘텐츠가 조직화된 구조로 되어 있을 경우 더 쉽게 해석할 수 있다.
schema.org는 Google, Microsoft, Yahoo!가 웹의 데이터를 설명하는 공통 용어를 만들어 웹을 개선하기 위해 시작한 공동 프로젝트
schema.org에서 정의하는 구조화된 데이터는 2015년 웹 표준 기구인 W3C 내에서 공식적으로 편입되어 웹 표준이 되었음
구조화된 데이터를 통해 리치 스니펫(Rich Snippets)를 검색엔진에서 표현한다.
- HTML 형식의 이메일에 schema.org 마크업을 추가하면 Gmail 등에 반영되어 표시가 가능함 (ex. 항공권 e-ticket)
- Microdata, RDFa, JSON-LD 세가지 형태의 표준으로 제공됨 (RDFa는 Naver 미지원)
- 구글에서 제공되는 구조화된 데이터 테스팅 도구를 통해 확인 가능 https://search.google.com/structured-data/testing-tool
Schema.org는 지속적으로 개선되고 있으며 굉장히 많은 항목이 포함되고 있음
- flight : http://schema.org/Flight
- flight Reservation : http://schema.org/FlightReservation
- Reservation Package : http://schema.org/ReservationPackage
- Hotel : http://schema.org/Hotel
- Tourist Attraction : http://schema.org/TouristAttraction
<script type="application/ld+json">
{
"aggregateRating" : {
"bestRating" : 10,
"ratingValue" : 8.7,
"@type" : "AggregateRating",
"reviewCount" : 2897
},
"description" : "파라다이스호텔 부산은 … ",
"url" : "http://housing.interpark.com/Goods/Goods_DetailInfo.aspx?GoodsCode=041876",
"image" : "http://tourimage.interpark.com/Product/Housing/Hotel/041876/041876_01bb.jpg?ver=20170712",
"name" : "파라다이스호텔 부산",
"address" : {
"addressCountry" : "대한민국",
"addressLocality" : "해운대구 해운대해변로 296",
"addressRegion" : "",
"streetAddress" : "48099, 부산, 해운대구 해운대해변로 296, 대한민국",
"@type" : "PostalAddress",
"postalCode" : "48099"
},
"@type" : "Hotel",
"@context" : "http://schema.org",
"priceRange" : "다가오는 날짜의 숙박 요금: 1박 기준 ₩240,000부터"
}
</script>
BreadcrumbList
헨젤과 그레텔에서 유래한 단어, 길찾기를 위한 빵부스러기 목록 (breadcrumbs, breadcrumb list, breadcrumb navigation)
웹페이지의 상위 계층 구조를 표시하기 위해 사용한다.
http://schema.org/BreadcrumbList 로 정의되어 있다. Microdata, RDFa, JSON-LD 모두 제공된다.
Google 등 검색엔진의 스니펫에 위치값으로 표시된다.
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://example.com/dresses",
"name": "Dresses"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://example.com/dresses/real",
"name": "Real Dresses"
}
}
]
}
</script>