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
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>
The "itemprop" Attribute
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
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.
Grouping Properties Together
<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.
Value from a "content" Attribute
<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
Setting Two Properties at Once
<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.
Value from a "datetime" Attribute
<time itemprop="datePublished" datetime="2020-09-20">20th of September, 2020</time>
The "datePublished" property uses the
time tag with the
The date is formatted as an ISO 8601 date.
Value from Inner Text
<div itemprop="articleBody"> Hello and welcome to this example! </div>
The "articleBody" property uses the inner content for its value.
The "itemtype" Attribute
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.
The "itemscope" Attribute
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.