Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 20, 2020 12:09 pm GMT

What is Microdata?

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 itemscope, itemprop and 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>

The "itemprop" Attribute

The 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
  • The content attribute (if defined)
  • The src attribute (for img, audio, video, iframe etc tags)
  • The href attribute (for link or a tags)
  • The value attribute (for data or meter tags)
  • The datetime attribute (for time tags)

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.

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 content attribute.

Setting Two Properties at Once

<h1 itemprop="name headline">What is Microdata?</h1>

The 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 datetime attribute. 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

While 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 itemtype:

  <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

The 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.

Summary

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.

Additional Resources


Original Link: https://dev.to/brandvantage/what-is-microdata-5epm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To