Microdata (HTML): Difference between revisions

Revision as of 01:25, 17 March 2011

Latest revision as of 13:14, 6 August 2024

(220 intermediate revisions by more than 100 users not shown)

Line 1:

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

'''Microdata''' is a [[WHATWG]] [[HTML5]] specification used to nest [[semantics]] 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. Microdata use a supporting vocabulary to describe an item and name-value pairs to assign values to its properties.<ref name="DIVE"/> Microdata helps technologies such as search engines and web crawlers better understand what information is contained in a web page, providing better [[Search_engine_results_page|search results]]. Microdata is an attempt to provide a simpler way of annotating [[HTML_element|HTML elements]] with machine readable tags than the similar approaches of using [[RDFa]] and [[Microformats]].

{{Other uses|Microdata (disambiguation)}}

{{HTML}}

'''Microdata''' is a [[WHATWG]] [[HTML5HTML]] specification used to nest [[semanticsmetadata]] within existing content on web pages.<ref name="WHATWG"/> [[Search engines]], [[web crawlers]], and [[Web_browserWeb 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 Microdata usebecause ait supportingallows vocabularythem to describeunderstand anthe iteminformation on web pages and name-valueprovide pairsmore torelevant assign[[Search valuesengine toresults itspage|results]] propertiesto users.<ref>{{cite nameweb|url="DIVE"http:/>/www.lyquix.com/blog-and-news/microdata-the-future-of-search-engine-relevance-and-search-engine-optimization-seo Microdata|title=MicroData helps- technologiesThe suchFuture asof searchSearch enginesEngine Relevance and webOptimization crawlers(SEO) better|publisher=Lyquix.com understand|access-date=2016-06-30}}</ref><ref>Schema.org whathttp://schema.org/</ref> informationMicrodata isuses containeda insupporting avocabulary webto page,describe providingan betteritem [[Search_engine_results_page|searchand results]]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|HTML elementselement]]s with machine -readable tags than the similar approaches of using [[RDFa]] and [[Microformatsmicroformat]]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 Working Draft 26 April 2018.<ref name=":0" />

== Microdata Vocabularies ==

Microdata vocabularies provide the [[semantics]], or meaning of an Item. Web developers can design a custom vocabulary or use vocabularies available on the web. A collection of commonly used (and Google Supported<ref name="GoogleRS"/>) Microdata vocabularies located at http://data-vocabulary.org which include: ''Person'', ''Event'', ''Organization'', ''Product'', ''Review'', ''Review-aggregate'', ''Breadcrumb'', ''Offer'', ''Offer-aggregate''. 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.<ref name="WHATWG"/>

== Microdata Vocabularies ==

== Microdata Global Attributes ==

Microdata vocabularies do not provide the [[semantics]], or meaning of an Item.<ref>{{Cite web | title = HTML Standard | url = https://html.spec.whatwg.org/multipage/microdata.html | website = Web Hypertext Application Technology Working Group | access-date = 30 December 2016}}</ref> Web developers can design a custom vocabulary or use vocabularies available on the web. A collection of commonly used markup vocabularies are provided by [[Schema.org]] schemas which include: ''Person'', "''Place''", ''Event'', ''Organization'', ''Product'', ''Review'', ''Review-aggregate'', ''Breadcrumb'', ''Offer'', ''Offer-aggregate''. The website schema.org was established by search engine operators like [[Google]], [[Microsoft]], [[Yahoo!]], and [[Yandex]], which use microdata markup to improve search results.<ref>{{cite book|title=HTML5: The missing manual|last=MacDonald|first=Matthew|edition=2nd|publisher=[[O'Reilly and Associates]]|date=2014|isbn=978-1-4493-6326-0}}</ref>{{rp|85}}

* <code>Itemscope</code> – Creates the Item and indicates that descendants of this [[HTML_element|element]] contain information about it.<ref name="WHATWG"/> This attribute precedes the <code>itemtype</code> attribute in the HTML element’s tag.

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

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.<ref name="WHATWG"/>

* <code>ItemId</code> – Indicates a unique identifier of the item in the vocabulary.

* <code>Itemprop</code> – Indicates that its containing tag holds the value of the specified item property. The properties name and value context are described by the items vocabulary. Properties values usually consist of string values, but can also use [[URL|URL's]] using the a 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/>

== Localization ==

* <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 elements to web crawlers to find additional property values of the item elsewhere in the document.<ref name="WHATWG"/>

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 as [[hCard]] (company contact information), [[hRecipe]] (food recipe), [[hReview]] (market reviews) and [[hProduct]] (product data) and provides its own format for definition of the terms and encyclopedic articles. This extension was made in order to solve [[transliteration]] problems between the Cyrillic and Latin alphabets. After the implementation of additional parameters from Schema's vocabulary,<ref name="AcademicYan"/> indexation of information in Russian-language web-pages became more successful.

== Global attributes ==

* <code>Itemscopeitemscope</code> – Creates the Item and indicates that descendants of this [[HTML_elementHTML element|element]] contain information about it.<ref name="WHATWG"/> This attribute precedes the <code>itemtype</code> attribute in the HTML element’s tag.

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

* <code>ItemIditemid</code> – Indicates a unique identifier of the item in the vocabulary.

* <code>Itempropitemprop</code> – Indicates that its containing tag holds the value of the specified item property. The propertiesproperty's name and value context are described by the itemsitem's vocabulary. Properties values usually consist of string values, but can also use [[URL|URL's]]URLs 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>Itemrefitemref</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 elementselement toIDs web(not crawlers<code>itemid</code>s) to findwith additional property values of the itemproperties 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“About” page containing information about a person:

<sourcesyntaxhighlight lang=html4strict"html">

<sectiondiv> Hello, my name is JhonJohn Doe, I am a graduate research assistant at
the University of Dreams.
My friends call me JhonnyJohnny.

You can visit my homepage at <a href="http://www.JhonnyDexample.com/~JohnnyD">www.JhonyDexample.com/~JohnnyD</a>.
I live at 1234 Peach Drive, Warner Robins, Georgia.</sectiondiv>

</syntaxhighlight>

</source>

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:

Here is the same markup with added Microdata:

<sourcesyntaxhighlight lang=html4strict"html">

<sectiondiv itemscope itemtype="http://data-vocabularyschema.org/Person">

Hello, my name is

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

I am a

<span itemprop="titlejobTitle">graduate research assistant</span>

at the

<span itemprop="affiliation">University of Dreams</span>.

My friends call me

<span itemprop="nicknameadditionalName">JhonnyJohnny</span>.

You can visit my homepage at

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

<sectiondiv itemprop="address" itemscope itemtype="http://data-vocabularyschema.org/AddressPostalAddress">

I live at

<span itemprop="street-addressstreetAddress">1234 Peach Drive</span> ,

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

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

,

</div>

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

</sectiondiv>

</syntaxhighlight>

</section>

</source>

As the above example shows, Microdata items can be nested. In this case, an item of type http://data-vocabularyschema.org/AddressPostalAddress is nested inside aan item of type http://data-vocabularyschema.org/Person.

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

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

<div class="plainlinks">

Item

Type: http://data-vocabularyschema.org/personPerson

name = JhonJohn Doe

titlejobTitle = graduate research assistant

affiliation = University of Dreams

nicknameadditionalName = JhonnyJohnny

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

address = Item(1)

Item 1

Type: http://data-vocabularyschema.org/addressPostalAddress

street-addressstreetAddress = 1234 Peach Drive

localityaddressLocality = Warner Robins

regionaddressRegion = 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>

[[Google]] can use microdata in its [[Search engine results page|result pages]].<ref name=GoogleRS />

* Browsers: {{As of|2021|7}}, no major 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>

Currently, no browser supports the Microdata [[Document_Object_Model|DOM]] [[API]].

== See also ==

* [[Semantic web]]

* [[Microformat]]

* [[RDFa Lite]]

* [[JSON-LD]]

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

=== Earlier related work ===

* [[Semantic HTML]]

* [[PlainSemantic Old Semanticsocial HTMLnetwork]]

== References ==

{{Reflist|30em|refs=

<ref name="WHATWG">[{{cite web|url=http://www.whatwg.org/specs/web-apps/current-work/multipage/linksmicrodata.html#microdata,'' |title=Microdata &mdash;— HTML5HTML Draft Standard''] |publisher=Whatwg.org |access-date=2016-06-30}}</ref>

<ref name="AcademicYan">{{cite web|url=https://www.academia.edu/6732371 |title=Semantic markup deployment in Russia |publisher=Academia.edu |access-date=2016-06-30}}</ref>

<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.orginfo/extensibility.html ''“Distributed|title="Distributed,”" “Extensibility"Extensibility,”" And Other Fancy Words'', Dive Into|publisher=Diveintohtml5.info HTML5]|access-date=2016-06-30}}</ref>}}

== External links ==

* {{citation |url=httphttps://wwwhtml.spec.whatwg.org/specs/web-apps/current-work/multipage/linksmicrodata.html#microdata |title=Microdata &mdash; HTML5HTML Draft Standard |publisher=[[Web Hypertext Application Technology Working Group|WHATWG]]}}

* {{citation |url=httphttps://ajaxianwww.comw3.org/archivesTR/hixie-discusses-the-addition-of-html5-microdata /|title=HixieW3C discussesHTML theMicrodata additionWorking ofGroup HTML5 “microdata” |date=2009-05-11 |first=Dion |last=AlmaerNote |publisher=Ajaxian[[W3C]]}}

* {{citation |url=http://ajaxian.com/archives/hixie-discusses-the-addition-of-html5-microdata |title=Hixie discusses the addition of HTML5 "microdata" |date=2009-05-11 |first=Dion |last=Almaer |publisher=Ajaxian|archive-url=https://web.archive.org/web/20091212053447/http://ajaxian.com/archives/hixie-discusses-the-addition-of-html5-microdata |archive-date=2009-12-12 }}

* {{citation |url=http://www.data-vocabulary.org |title=HTML5 Microdata Specs |publisher=Data-Vocabulary.org}}

[[Category:{{Semantic Web]]}}

== References ==

{{Reflist|refs=

<ref name="WHATWG">[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata,''Microdata &mdash; HTML5 Draft Standard'']</ref>

<ref name="GoogleRS">[http://www.google.com/support/webmasters/bin/topic.py?topic=21997 ''Rich snippets (microdata, microformats, RDFa)'', Google webmaster central]</ref>

<ref name="DIVE">[http://diveintohtml5.org/extensibility.html ''“Distributed,” “Extensibility,” And Other Fancy Words'', Dive Into HTML5]</ref>}}

[[Category:Microformats]]

[[Category:Semantic Web]]

[[Category:HTML]]

[[Category:MicroformatsSemantic HTML]]

{{web-stub}}

[[Category:Search engine optimization]]