diff options
Diffstat (limited to 'devdocs/html/microdata.html')
| -rw-r--r-- | devdocs/html/microdata.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/devdocs/html/microdata.html b/devdocs/html/microdata.html new file mode 100644 index 00000000..c305d97b --- /dev/null +++ b/devdocs/html/microdata.html @@ -0,0 +1,69 @@ +<header><h1>Microdata</h1></header><div class="section-content"> +<p>Microdata is part of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> 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 simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and classic microformats.</p> <p>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.</p> <ul> <li>To create an item, the <code>itemscope</code> attribute is used.</li> <li>To add a property to an item, the <code>itemprop</code> attribute is used on one of the item's descendants.</li> </ul> +</div> +<h2 id="vocabularies">Vocabularies</h2> +<div class="section-content"> +<p>Google and other major search engines support the <a href="https://schema.org" target="_blank">Schema.org</a> vocabulary for structured data. This vocabulary defines a standard set of type names and property names, for example, <a href="https://schema.org/MusicEvent" target="_blank">Schema.org Music Event</a> indicates a concert performance, with <a href="https://schema.org/startDate" target="_blank"><code>startDate</code></a> and <a href="https://schema.org/location" target="_blank"><code>location</code></a> properties to specify the concert's key details. In this case, <a href="https://schema.org/MusicEvent" target="_blank">Schema.org Music Event</a> would be the URL used by <code>itemtype</code> and <code>startDate</code> and location would be <code>itemprop</code>'s that <a href="https://schema.org/MusicEvent" target="_blank">Schema.org Music Event</a> defines.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> More about itemtype attributes can be found at <a href="https://schema.org/Thing" target="_blank">https://schema.org/Thing</a>.</p> </div> <p>Microdata vocabularies provide the semantics or meaning of an <em><code>Item</code></em>. Web developers can design a custom vocabulary or use vocabularies available on the web, such as the widely used <a href="https://schema.org" target="_blank">schema.org</a> vocabulary. A collection of commonly used markup vocabularies are provided by Schema.org.</p> <p>Commonly used vocabularies:</p> <ul> <li>Creative works: <a href="https://schema.org/CreativeWork" target="_blank">CreativeWork</a>, <a href="https://schema.org/Book" target="_blank">Book</a>, <a href="https://schema.org/Movie" target="_blank">Movie</a>, <a href="https://schema.org/MusicRecording" target="_blank">MusicRecording</a>, <a href="https://schema.org/Recipe" target="_blank">Recipe</a>, <a href="https://schema.org/TVSeries" target="_blank">TVSeries</a> +</li> <li>Embedded non-text objects: <a href="https://schema.org/AudioObject" target="_blank">AudioObject</a>, <a href="https://schema.org/ImageObject" target="_blank">ImageObject</a>, <a href="https://schema.org/VideoObject" target="_blank">VideoObject</a> +</li> <li><a href="https://schema.org/Event" target="_blank"><code>Event</code></a></li> <li> +<a href="https://schema.org/docs/meddocs.html" target="_blank">Health and medical types</a>: Notes on the health and medical types under <a href="https://schema.org/MedicalEntity" target="_blank">MedicalEntity</a> +</li> <li><a href="https://schema.org/Organization" target="_blank"><code>Organization</code></a></li> <li><a href="https://schema.org/Person" target="_blank"><code>Person</code></a></li> <li> +<a href="https://schema.org/Place" target="_blank"><code>Place</code></a>, <a href="https://schema.org/LocalBusiness" target="_blank">LocalBusiness</a>, <a href="https://schema.org/Restaurant" target="_blank">Restaurant</a> +</li> <li> +<a href="https://schema.org/Product" target="_blank"><code>Product</code></a>, <a href="https://schema.org/Offer" target="_blank">Offer</a>, <a href="https://schema.org/AggregateOffer" target="_blank">AggregateOffer</a> +</li> <li> +<a href="https://schema.org/Review" target="_blank"><code>Review</code></a>, <a href="https://schema.org/AggregateRating" target="_blank">AggregateRating</a> +</li> <li><a href="https://schema.org/Action" target="_blank"><code>Action</code></a></li> <li><a href="https://schema.org/Thing" target="_blank"><code>Thing</code></a></li> <li><a href="https://schema.org/Intangible" target="_blank"><code>Intangible</code></a></li> </ul> <p>Major search engine operators like Google, Microsoft, and Yahoo! rely on the <a href="https://schema.org/" target="_blank">schema.org</a> 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.</p> +</div> +<h2 id="localization">Localization</h2> +<div class="section-content"><p>In some cases, search engines covering specific regions may provide locally-specific extensions of microdata. For example, <a href="https://yandex.com/" target="_blank">Yandex</a>, a major search engine in Russia, supports microformats such as <code>hCard</code> (company contact information), <code>hRecipe</code> (food recipe), <code>hReview</code> (market reviews) and <code>hProduct</code> (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.</p></div> +<h2 id="global_attributes">Global attributes</h2> +<div class="section-content"> +<p><a href="global_attributes/itemid"><code>itemid</code></a> – The unique, global identifier of an item.</p> <p><a href="global_attributes/itemprop"><code>itemprop</code></a> – Used to add properties to an item. Every HTML element may have an <code>itemprop</code> attribute specified, where an <code>itemprop</code> consists of a name and value pair.</p> <p><a href="global_attributes/itemref"><code>itemref</code></a> – Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. <code>itemref</code> provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</p> <p><a href="global_attributes/itemscope"><code>itemscope</code></a> – The <code>itemscope</code> attribute (usually) works along with <a href="global_attributes/itemtype"><code>itemtype</code></a> to specify that the HTML contained in a block is about a particular item. The <code>itemscope</code> attribute creates the <em><code>Item</code></em> and defines the scope of the itemtype associated with it. The <code>itemtype</code> attribute is a valid URL of a vocabulary (such as <a href="https://schema.org/" target="_blank">schema.org</a>) that describes the item and its properties context.</p> <p><a href="global_attributes/itemtype"><code>itemtype</code></a> – Specifies the URL of the vocabulary that will be used to define <code>itemprop</code>'s (item properties) in the data structure. The <a href="global_attributes/itemscope"><code>itemscope</code></a> attribute is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</p> +</div> +<h2 id="example">Example</h2> + +<h3 id="html">HTML</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ai8NwsrfDCmuLxRS+UVZfScghNaShUWGeBEb5Ltc+Ow=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/SoftwareApplication<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Angry Birds<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> - REQUIRES + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>operatingSystem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ANDROID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>applicationCategory<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/GameApplication<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aggregateRating<span class="token punctuation">"</span></span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/AggregateRating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + RATING: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ratingValue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4.6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> ( + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ratingCount<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>8864<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> ratings ) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>offers<span class="token punctuation">"</span></span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/Offer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Price: $<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>price<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>priceCurrency<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>USD<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="structured_data">Structured data</h3> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="4">itemscope</td> <td>itemtype</td> <td colspan="2">SoftwareApplication (https://schema.org/SoftwareApplication)</td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Angry Birds</td> </tr> <tr> <td>itemprop</td> <td>operatingSystem</td> <td>ANDROID</td> </tr> <tr> <td>itemprop</td> <td>applicationCategory</td> <td>GameApplication (https://schema.org/GameApplication)</td> </tr> <tr> <td rowspan="3">itemscope</td> <td>itemprop[itemtype]</td> <td colspan="2">aggregateRating [AggregateRating]</td> </tr> <tr> <td>itemprop</td> <td>ratingValue</td> <td>4.6</td> </tr> <tr> <td>itemprop</td> <td>ratingCount</td> <td>8864</td> </tr> <tr> <td rowspan="3">itemscope</td> <td>itemprop[itemtype]</td> <td colspan="2">offers [Offer]</td> </tr> <tr> <td>itemprop</td> <td>price</td> <td>1.00</td> </tr> <tr> <td>itemprop</td> <td>priceCurrency</td> <td>USD</td> </tr> </tbody> </table></div></figure></div> +<h3 id="result">Result</h3> +<div class="section-content"> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="HTML sample" id="frame_html" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Microdata/runner.html?id=html" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> A handy tool for extracting microdata structures from HTML is Google's <a href="https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data" target="_blank">Structured Data Testing Tool</a>. Try it on the HTML shown above.</p> </div> +</div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="section-content"><p>Supported in Firefox 16. Removed in Firefox 49.</p></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="global_attributes">Global Attributes</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata</a> + </p> +</div> |