Microdata, enrich search engine results

Find more tutorials explaining the basics of a subject in ten minutes with the tag what is it.

You've probably already seen on your favorite search engine results page (SERP) that, for some websites, the result is enriched with graphic elements: rating of a movie on 5 stars, quick answers of an FAQ, author of an article and so on... These graphic results, called rich snippets, are way more efficient than just a title and a description.

I always thought it was an automatic behavior for the biggest websites!

Each search engine has its own policy for choosing to display or not these graphic elements, the popularity of the website might indeed be one of the factors. There is however a basic assumption that we can do: they can display the SERP features because they succeed to understand the content of the page.

That's what microdata is about: describing the content of a page so that search engines can understand it!

The description is done by adding some attributes to your HTML tags.

• itemtype: makes the type of the element explicit. Is it a video? a tech article?
• itemprop: each type is linked to a multitude of mandatory and optional properties. For instance a tech article has a title, a description, a writing date and so on...
• itemscope: the scope of the element represents its starting and ending points. Inside this scope, all the properties are linked to the element.

Let's take an example.

TechArticle and its microdata
<article itemscope="itemscope" itemtype="http://schema.org/TechArticle">

    <h1 itemprop="headline">
        Microdata, enrich search engine results
    </h1>

    <div itemprop="description">
        How to make Yahoo, Yandex, Bing and Google understand the content of a web page?
    </div>

    <time datetime="2020-11-08" itemprop="datePublished dateModified">
        2020-11-08
    </time>

    <div itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="author publisher">
        <img src="/authors/NicolasGautron.jpeg" alt="Nicolas Gautron" itemprop="image" />
        <span itemprop="name">Nicolas Gautron</span>
    </div>

    <p itemprop="articleBody">
        ...
    </p>

</article>

• The root item is a tech article.
• The tech article has several properties like a headline, a description, a body, a publication date, an author and so on...
• The author is both a property of the tech article and an independent item with its own scope and properties.

All itemtypes and the linked itemprops are available in the microdata documentation. When browsing the documentation, you will see that some types are related: for instance TechArticle inherits from Article and therefore has the same properties.

Each search engine proposes a tool to test your page like Google's structured data tester. You will see that each one of them has its own recommendations and sometimes triggers some weird warnings.

Even if in the end Google chooses not to enrich your snippet, it's always a good thing for your general SEO to make it understand your website. Be patient, you never know, maybe one day you will have a good surprise!

Have a nice day :)

Continue your apprenticeship of the search engine results enrichment in the tutorial JSON-LD, enrich search engine results.

JSON linked data is an alternative to the microdata. Sorry to tell you that only now but it's actually the format recommended by Google.