Microdata is a HTML standard, created by WHATWG, for describing rich metadata in web pages. This rich metadata can be used by search engines or other computer systems to better understand the content of the web page.
Microdata is made of up a number of attributes including
itemtype. Below is an example of a basic web page using Microdata.
<html> <head> <title>What is Microdata?</title> </head> <body itemscope itemtype="https://schema.org/WebPage"> <article itemscope itemtype="http://schema.org/Article" itemprop="mainEntity"> <meta itemprop="url" content="https://brandvantage.co/blog/what-is-microdata"> <meta itemprop="image" content="https://brandvantage.co/blog/2020/images/what-is-microdata-cover.png"> <h1 itemprop="name headline">What is Microdata?</h1> <time itemprop="datePublished" datetime="2020-09-20">20th of September, 2020</time> <div itemprop="articleBody"> Hello and welcome to this example! </div> </article> </body> </html>
itemprop attribute defines a name-value pair for data. The value associated to the property can be derived from:
- The inner text content of the tag
contentattribute (if defined)
An item property can also contain a group of name-value pairs through the use of the
itemscope attribute. Additionally, the value on the
itemprop attribute may refer to multiple properties.
You can see a number of different examples of
itemprop in the previous example.
<article itemscope itemtype="http://schema.org/Article" itemprop="mainEntity">
With the use of
itemscope attribute here, the "mainEntity" property is grouping other name-value pairs together.
<meta itemprop="url" content="https://brandvantage.co/blog/what-is-microdata"> <meta itemprop="image" content="https://brandvantage.co/blog/2020/images/what-is-microdata-cover.png">
Here we have two properties ("url" and "image") with their values defined from the
<h1 itemprop="name headline">What is Microdata?</h1>
itemprop here is setting two properties at once ("name" and "headline") with the value from the inner text.
<time itemprop="datePublished" datetime="2020-09-20">20th of September, 2020</time>
The "datePublished" property uses the
time tag with the
datetime attribute. The date is formatted as an ISO 8601 date.
<div itemprop="articleBody"> Hello and welcome to this example! </div>
The "articleBody" property uses the inner content for its value.
itemprop helps set the values of properties, without a method to define what properties to expect, the usefulness can be called into question. This is where
itemtype comes in, giving context to the properties used through a URL which identifies the vocabularly.
One common vocabularly to use is Schema.org, a joint venture between Google, Microsoft, Yahoo and Yandex. A shared vocabularly like Schema.org makes interoperability easier for third parties who want or need to use the data. This being said, there is nothing stopping you from using other vocabularies or even making your own. If a third party doesn't understand your vocabularly, your metadata may not be processed and used.
In the previous example, there were two uses of
<body itemscope itemtype="https://schema.org/WebPage"> <article itemscope itemtype="http://schema.org/Article" itemprop="mainEntity">
The first is defining the scope as a WebPage schema object which has a number of useful properties including "breadcrumb" and "significantLink". In the Schema.org vocabularly, a WebPage extends CreativeWork which has a property "mainEntity". This property can be any Thing, the base type in the Schema.org vocabularly.
Now for the "mainEntity" property, we are defining the type to be an Article schema object for the scope. This means for all subsequent properties inside the
article tag are properties of our Article.
itemscope defines a group (scope) of name-value pairs (properties), effectively treating the property value as an object. It doesn't require the presences of an
itemtype however without one, the interoperability between systems can be very limited without a common vocabularly.
Microdata allows website developers to enrich a webpage with rich metadata, allowing for search engines and other systems to integrate the data into their systems. You can define individual properties with different values including nesting values through scopes.
While there are a number of other aspects about Microdata including additional attributes, this should serve as a basic introduction to the world of Microdata.