Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

Using microdata in HTML

Microdata is part of theWHATWG HTML Standard and is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a declarative way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and classic microformats.

At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

  • To create an item, theitemscope attribute is used.
  • To add a property to an item, theitemprop attribute is used on one of the item's descendants.

Vocabularies

Google and other major search engines support theSchema.org vocabulary for structured data. This vocabulary defines a standard set of type names and property names, for example,Schema.org Music Event indicates a concert performance, withstartDate andlocation properties to specify the concert's key details. In this case,Schema.org Music Event would be the URL used byitemtype andstartDate and location would beitemprop's thatSchema.org Music Event defines.

Note:More about itemtype attributes can be found athttps://schema.org/Thing.

Microdata vocabularies provide the semantics or meaning of anItem. Web developers can design a custom vocabulary or use vocabularies available on the web, such as the widely usedschema.org vocabulary. A collection of commonly used markup vocabularies are provided by Schema.org.

Commonly used vocabularies:

Major search engine operators like Google, Microsoft, and Yahoo! rely on theschema.org vocabulary to improve search results. For some purposes, an ad hoc vocabulary is adequate. For others, a vocabulary will need to be designed. Where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier.

Localization

In some cases, search engines covering specific regions may provide locally-specific extensions of microdata. For example,Yandex, a major search engine in Russia, supports microformats such ashCard (company contact information),hRecipe (food recipe),hReview (market reviews) andhProduct (product data) and provides its own format for the definition of the terms and encyclopedic articles. This extension was made to solve transliteration problems between the Cyrillic and Latin alphabets. Due to the implementation of additional marking parameters of Schema's vocabulary, the indexation of information in Russian-language web-pages became considerably more successful.

Global attributes

itemid – The unique, global identifier of an item.

itemprop – Used to add properties to an item. Every HTML element may have anitemprop attribute specified, where anitemprop consists of a name and value pair.

itemref – Properties that are not descendants of an element with theitemscope attribute can be associated with the item using anitemref.itemref provides a list of element ids (notitemids) with additional properties elsewhere in the document.

itemscope – Theitemscope attribute (usually) works along withitemtype to specify that the HTML contained in a block is about a particular item. Theitemscope attribute creates theItem and defines the scope of the itemtype associated with it. Theitemtype attribute is a valid URL of a vocabulary (such asschema.org) that describes the item and its properties context.

itemtype – Specifies the URL of the vocabulary that will be used to defineitemprop's (item properties) in the data structure. Theitemscope attribute is used to set the scope of where in the data structure the vocabulary set byitemtype will be active.

Example

HTML

html
<div itemscope itemtype="https://schema.org/SoftwareApplication">  <span itemprop="name">Angry Birds</span> - REQUIRES  <span itemprop="operatingSystem">ANDROID</span><br />  <link    itemprop="applicationCategory"    href="https://schema.org/SoftwareApplication" />  <div    itemprop="aggregateRating"    itemscope    itemtype="https://schema.org/AggregateRating">    RATING:    <span itemprop="ratingValue">4.6</span> (    <span itemprop="ratingCount">8864</span> ratings )  </div>  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">    Price: $<span itemprop="price">1.00</span>    <meta itemprop="priceCurrency" content="USD" />  </div></div>

Structured data

itemscopeitemtype SoftwareApplication (https://schema.org/SoftwareApplication)
itempropnameAngry Birds
itempropoperatingSystemANDROID
itempropapplicationCategorySoftwareApplication (https://schema.org/SoftwareApplication)
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.6
itempropratingCount8864
itemscopeitemprop[itemtype]offers [Offer]
itempropprice1.00
itemproppriceCurrencyUSD

Result

Note:A handy tool for extracting microdata structures from HTML is Google'sStructured Data Testing Tool. Try it on the HTML shown above.

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp