Microdata (HTML): Difference between revisions

Revision as of 13:52, 5 July 2021

Latest revision as of 13:14, 6 August 2024

(28 intermediate revisions by 23 users not shown)

Line 1:

{{short description|Specification for metadata in web pages}}

{{Other uses|Microdata (disambiguation)}}

{{HTML}}

'''Microdata''' is a [[WHATWG]] [[HTML]] specification used to nest [[metadata]] within existing content on web pages.<ref name="WHATWG"/> [[Search engines]], [[web crawlers]], and [[Web browser|browsers]] 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 dataMicrodata because it allows them to understand the information on web pages and provide more relevant [[Search engine results page|results]] to users.<ref>{{cite web|url=http://www.lyquix.com/blog-and-news/microdata-the-future-of-search-engine-relevance-and-search-engine-optimization-seo |title=MicroData - The Future of Search Engine Relevance and Optimization (SEO) |publisher=Lyquix.com |access-date=2016-06-30}}</ref><ref>Schema.org http://schema.org/</ref> Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties.<ref name="DIVE"/> Microdata is an attempt to provide a simpler way of annotating [[HTML element]]s with machine-readable tags than the similar approaches of using [[RDFa]] and [[microformat]]s.

In 2013, because the W3C HTML Working Group failed to find someone to serve as an editor for the '''Microdata HTML''' specification, its development was terminated with a 'Note'.<ref>{{cite mailing list|url=https://lists.w3.org/Archives/Public/public-html-admin/2013Oct/0018.html |title=WG Decision to publish HTML Microdata as a WG Note |mailing-list=[e-mail] |date=2 Oct 2013 |first=Paul |last=Cotton |access-date=2016-06-30}}</ref><ref>{{cite web|url=http://www.w3.org/TR/microdata/ |title=HTML Microdata |publisher=W3.org |date=23 June 2014 |access-date=2016-06-30}}</ref> However, since that time, two new editors were selected, and five newer versions of the working draft have been published,<ref>{{Cite web|url=https://www.w3.org/TR/2017/WD-microdata-20170504/|title=HTML Microdata W3C First Public Working Draft 04 May 2017|website=World Wide Web Consortium (W3C)|access-date=2017-09-06}}</ref><ref>{{Cite web|url=https://www.w3.org/TR/2017/WD-microdata-20170626/|title=HTML Microdata W3C Working Draft 26 June 2017|website=World Wide Web Consortium (W3C)|access-date=2017-09-06}}</ref><ref>{{Cite web|url=https://www.w3.org/TR/2017/WD-microdata-20171009/|title=HTML Microdata W3C Working Draft 09 October 2017|date=9 October 2017|website=World Wide Web Consortium (W3C)|access-date=16 March 2018}}</ref><ref name=":0">{{Cite web|url=https://www.w3.org/TR/2017/WD-microdata-20171010/|title=HTML Microdata W3C Working Draft 10 October 2017|date=10 October 2017|website=World Wide Web Consortium (W3C)|access-date=16 March 2018}}</ref> the most recent being [https://www.w3.org/TR/microdata/<abbr>W3C</abbr> Working Draft 26 April 2018].<ref name=":0" />

== Vocabularies ==

Line 14 ⟶ 16:

== Global attributes ==

* <code>itemscope</code> – Creates the Item and indicates that descendants of this [[HTML element|element]] contain information about it.<ref name="WHATWG"/>

* <code>itemtype</code> – A valid URL of a vocabulary that describes the item and its properties' context.

* <code>itemid</code> – Indicates a unique identifier of the item.

* <code>itemprop</code> – Indicates that its containing tag holds the value of the specified item property. The property's name and value context are described by the item's vocabulary. Properties values usually consist of string values, but can also use [[URL]]sURLs using the <code>a</code> element and its <code>href</code> attribute, the <code>img</code> element and its <code>src</code> attribute, or other elements that link to or embed external resources.<ref name=WHATWG/>

* <code>itemref</code> – Properties that are not descendants of the element with the <code>itemscope</code> attribute can be associated with the item using this attribute. Provides a list of element idsIDs (not <code>itemid</code>s) with additional properties elsewhere in the document.<ref name="WHATWG"/>

* <code>datetime</code> -– Indicates date or duration as specified by [[ISO 8601]] standard.

== Example ==

The following HTML5 markup may be found on a typical “About” page containing information about a person:

<syntaxhighlight lang=html5"html">

<sectiondiv> Hello, my name is John Doe, I am a graduate research assistant at

the University of Dreams.

My friends call me Johnny.

You can visit my homepage at <a href="http://www.JohnnyDexample.com/~JohnnyD">www.JohnnyDexample.com/~JohnnyD</a>.

I live at 1234 Peach Drive, Warner Robins, Georgia.</sectiondiv>

</syntaxhighlight>

Here is the same markup with added [[Schema.org]]<ref>{{cite web|url=http://schema.org/docs/documents.html |title=Documentation |publisher=Schema.org |access-date=2016-06-30}}</ref><ref>{{cite web|url=http://schema.org/docs/full.html |title=Type Hierarchy |publisher=Schema.org |access-date=2016-06-30}}</ref><ref>{{Cite web |url=http://schema.rdfs.org/all.ttl |title=Schema.org Turtle RDFS Schema |access-date=2013-05-29 |archive-url=https://web.archive.org/web/20140921103224/http://schema.rdfs.org/all.ttl |archive-date=2014-09-21 |url-status=dead }}</ref> Microdata:

<syntaxhighlight lang=html5"html">

<sectiondiv itemscope itemtype="http://schema.org/Person">

Hello, my name is

<span itemprop="name">John Doe</span>,

Line 44 ⟶ 46:

<span itemprop="additionalName">Johnny</span>.

You can visit my homepage at

<a href="http://www.JohnnyDexample.com/~JohnnyD" itemprop="url">www.JohnnyDexample.com/~JohnnyD</a>.

<sectiondiv itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

I live at

<span itemprop="streetAddress">1234 Peach Drive</span>,

<span itemprop="addressLocality">Warner Robins</span>,

<span itemprop="addressRegion">Georgia</span>.

</sectiondiv>

</sectiondiv>

</syntaxhighlight>

Line 57 ⟶ 59:

The following text shows how Google parses the Microdata from the above example code. Developers can test pages containing Microdata using Google's ''Rich Snippet Testing Tool''.<ref name="GoogleRS"/>

<div class="plainlinks">

Item

Type: http://schema.org/Person

Line 64 ⟶ 66:

affiliation = University of Dreams

additionalName = Johnny

url = <nowiki>http://www.johnnydexample.com/~JohnnyD</nowiki>

address = Item(1)

Item 1

Line 71 ⟶ 73:

addressLocality = Warner Robins

addressRegion = Georgia

</div>

The same machine-readable terms can be used not only in HTML Microdata, but also in other annotations such as [[RDFa]] or [[JSON-LD]] in the markup, or in an external [[Resource Description Framework|RDF]] file in a serialization such as [[RDF/XML]], [[Notation3]], or [[Turtle (syntax)|Turtle]].

== Support ==

* Servers: [[Google]] can<ref name=GoogleCan /> use microdata in its [[Search engine results page|result pages]].<ref name=GoogleRS /> It was the preferred snippet format for the [[Google+]] social network.<ref>{{cite AV media|url=https://www.youtube.com/watch?v=4W8Ah394bH8 |archive-url=https://ghostarchive.org/varchive/youtube/20211215/4W8Ah394bH8 |archive-date=2021-12-15 |url-status=live|title=Types of Rich Snippets |author=Google Webmasters Channel |medium=Video |date=2011-12-06 |access-date=2016-06-30}}{{cbignore}}</ref>

{{update|section|date=January 2018}}

* Browsers: {{As of|2021|7}}, no mojormajor browser supports the Microdata [[Document Object Model|DOM]] [[API]].<ref>{{Cite web|title=Microdata DOM API - Web APIs {{!}} MDN|url=https://developer.mozilla.org/en-US/docs/Web/API/Microdata_DOM_API|access-date=2021-07-05|website=developer.mozilla.org|language=en-US}}</ref> Opera supported it from 11.60 (released in 2011), but since removed its implementation.<ref>{{cite web |author=Opera Software Documentation Team |url=http://www.opera.com/docs/changelogs/windows/1160/ |title=Opera 11.60 for Windows changelog |publisher=Opera.com |date=2011-12-06 |access-date=2016-06-30 |archive-url=https://web.archive.org/web/20141023082043/http://www.opera.com/docs/changelogs/windows/1160/ |archive-date=2014-10-23 |url-status=dead }}</ref> Firefox removed it in version 49.<ref>{{Cite web|title=909633 - Remove HTML Microdata API|url=https://bugzilla.mozilla.org/show_bug.cgi?id=909633|access-date=2021-07-05|website=bugzilla.mozilla.org|language=en}}</ref>

* Servers: [[Google]] can<ref name=GoogleCan /> use microdata in its [[Search engine results page|result pages]].<ref name=GoogleRS /> It was the preferred snippet format for the [[Google+]] social network.<ref>{{cite AV media|url=https://www.youtube.com/watch?v=4W8Ah394bH8 |title=Types of Rich Snippets |author=Google Webmasters Channel |medium=Video |date=2011-12-06 |access-date=2016-06-30}}</ref>

* Browsers: {{As of|2021|7}}, no mojor browser supports the Microdata [[Document Object Model|DOM]] [[API]].<ref>{{Cite web|title=Microdata DOM API - Web APIs {{!}} MDN|url=https://developer.mozilla.org/en-US/docs/Web/API/Microdata_DOM_API|access-date=2021-07-05|website=developer.mozilla.org|language=en-US}}</ref> Opera supported it from 11.60 (released in 2011), but since removed its implementation.<ref>{{cite web |author=Opera Software Documentation Team |url=http://www.opera.com/docs/changelogs/windows/1160/ |title=Opera 11.60 for Windows changelog |publisher=Opera.com |date=2011-12-06 |access-date=2016-06-30 |archive-url=https://web.archive.org/web/20141023082043/http://www.opera.com/docs/changelogs/windows/1160/ |archive-date=2014-10-23 |url-status=dead }}</ref> Firefox removed it in version 49.<ref>{{Cite web|title=909633 - Remove HTML Microdata API|url=https://bugzilla.mozilla.org/show_bug.cgi?id=909633|access-date=2021-07-05|website=bugzilla.mozilla.org|language=en}}</ref>

* Libraries: MicrodataJS<ref name=MicrodataJS/> is a [[JavaScript]] library and [[jQuery]] plugin that emulates the DOM API.

== See also ==

Line 86 ⟶ 85:

* [[RDFa Lite]]

* [[JSON-LD]]

* [[CP/LD|CP/LD (Content Profile/Linked Document)]]

* [[Semantic HTML]]

* [[Semantic social network]]

Line 95:

<ref name="GoogleCan">{{cite web|url=https://www.google.com/support/webmasters/bin/answer.py?answer=99170 |title=Rich Snippet display clarification |date=2016-06-22 |access-date=2016-06-30}}</ref>

<ref name="GoogleRS">{{cite web|url=https://developers.google.com/structured-data/testing |title=Rich snippets (microdata, microformats, RDFa) |publisher=Google Inc. |date=2016-05-17 |access-date=2016-06-30}}</ref>

<ref name="DIVE">{{cite web|url=http://diveintohtml5.info/extensibility.html |title="Distributed," "Extensibility," And Other Fancy Words |publisher=Diveintohtml5.info |access-date=2016-06-30}}</ref>}}

<ref name="MicrodataJS">{{cite web|url=https://github.com/foolip/microdatajs |title=MicrodataJS |publisher=Github.com |date=2011-12-12 |access-date=2016-06-30}}</ref>}}

== External links ==