Microdata for web semantic

Microdata - Small with a big impact

Did you know that your web app can provide much more information about itself than just the good old meta-elements in the document’s ? Nowadays, web applications are more interconnected than ever, therefore it becomes increasingly relevant to clearly define each page’s purpose.

A real world example

If this sounds a little bit strange to you, then let’s take a quick look at a simple example. Consider you have a blog and, naturally, want search engines to better understand the content you publish with every article. A clear and semantically correct HTML structure is a basic requirement, but only the beginning.

Thanks to the development of standards such as JSON-LD, you can provide structured data in a uniform way. The keyword here is the standardized format in which this additional metadata gets defined by you, as search engines and their bots are programmed to understand exactly this metadata.

Coming back to our example, for a blog article, the JSON-LD element “article” is available, which describes key properties for an article.

Alternative to JSON-LD

Well, this all sounds very nice, but what does that have to do with microdata? Microdata basically has the same purpose as the JSON-LD described above: provide more metadata for the page its used in. The key difference is that JSON-LD has to be defined in the web app’s element. Yet microdata elements can be used directly inside your page's content, without the need to split the data between and .

<!-- 
The following eample is taken from Mozilla's site,
linked in the addendum. 
-->

<div itemscope itemtype="http://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> -

  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

Depending on your use case or flavor, this might be a better maintainable solution than JSON-LD. The nice thing about microdata is that it's not actually a separate element in your DOM but rather a set of properties you can enhance your existing HTML with.

There are many available variants for microdata to choose from, for example about places, persons or products. They are well recognized by the search engines’ bots and therefore offer a viable alternative to JSON-LD.