What is Microdata?
Published: 2020-09-20 12:09:42

---
title: What is Microdata?
description: Learn what Microdata is and understanding its format for use in web pages.
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nch20gcl6px0pv2wphog.png
published: true
canonical_url: https://brandvantage.co/blog/what-is-microdata
---

Microdata is [a HTML standard](https://html.spec.whatwg.org/multipage/microdata.html), created by [WHATWG](https://whatwg.org/), 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
<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

```html
<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

```html
<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

```html
<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

```html
<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](https://en.wikipedia.org/wiki/ISO_8601) date.

### Value from Inner Text

```html
<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](https://html.spec.whatwg.org/multipage/microdata.html#typed-items).

One common vocabularly to use is [Schema.org](https://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`:

```html
  <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](https://schema.org/WebPage) which has a number of useful properties including ["breadcrumb"](https://schema.org/breadcrumb) and ["significantLink"](https://schema.org/significantLink). In the Schema.org vocabularly, a WebPage extends [CreativeWork](https://schema.org/CreativeWork) which has a property ["mainEntity"](https://schema.org/mainEntity). This property can be any [Thing](https://schema.org/Thing), the base type in the Schema.org vocabularly.

Now for the "mainEntity" property, we are defining the type to be an [Article](https://schema.org/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
- [Microdata WHATWG Standard](https://html.spec.whatwg.org/multipage/microdata.html)
- [Microdata on Wikipedia](https://en.wikipedia.org/wiki/Microdata_(HTML))
- [Schema.org](https://schema.org/)
- [Schema.org on Wikipedia](https://en.wikipedia.org/wiki/Schema.org)