Most of the times when you are coding your personal website or web page you focus only on making it looks better for your 'human' users. Have you ever wonder what a machine (bots) thinks about it? To make your website more readable for the bots you need to use the HTML microdata. They will not change anything visually, but they allow your page to be read by the search engines’ bots. Don't underestimate the microdata only because they can’t be visualized, they can really change what other websites think about yours.



Google gives you a really useful tool to visualize all the hidden information that microdata adds to a web page. To really understand the potential of the microdata, try to insert the URL of this page on the tool and take a look at how microdata works. You can see that all the page is structured and every tag has his own microdata attached. In this way, you can let the bots know how your page works. This tool allows you also to spot some errors in the structure of your microdata.

IMPLEMENT MICRODATA ON YOUR PAGE

To implement microdata on your web page you need to figure out how your page is structured. Then you can use the official website schema.org which contains all the references to the single elements of your page. For example, if you need some microdata for your personal blog you can take a look at these properties here and choose some of them.

HTML ATTRIBUTES FOR MICRODATA

Now you need to add some attributes to your containers.

  • Itemscope
    It is a global attribute which defines the main div in which you are going to add some microdata. You can add this attribute to the main <div> or <main> or <article>. You can also add an itemscope inside another one to be more specific about the content of your page.
  • Itemtype
    This attribute must be associated to an itemscope. It defines the type of your itemscope. All the tags under this itemtype must contain a sub-category of this itemtype. For example, you may have a main div which contains your blog post. In this case, you can add something like this:
    <div id="main" itemscope itemtype="http://schema.org/BlogPosting">
  • Itemid
    It is an extra attribute associated with an itemscope and an itemtype. It defines an unique id for your div (like an ISBN for a book).
  • Itemprop
    It defines some sub-category of the main itemtype. For example, if your itemtype is a Film (http://schema.org/Movie) you can specify an actor (http://schema.org/actor) or other information.
  • Itemref
    You might have a div outside the main itemscope container which has the same category of it. In this case, you can reference this div by using the itemref and the id of the main container.
    <div itemscope Id=”main”></div>
    <iframe itemref=”main” itemprop=”trailer”></iframe>

This image below shows an example of microdata on a web page. The page is about a movie (main itemscope), then you can specify some information like the author, the director, the name of the movie itself. If you want to add a trailer outside the main div you can reference it by using the itemref propriety.

image



That’s all you need to know to start working with some microdata. If you need some extra information take a look at the official guide here (https://www.w3.org/TR/microdata/).


NEWSLETTER

Do not lose our new articles! Sign up to our newsletter to receive one and only one email every time a new article is online. You will be able to unsubscribe to the service later if you want. What are you waiting for?

Sandro Maglione
Designer / Developer

I really love to share all the secrets and the tricks, which I learned surfing on the web or studing on my own, with some articles or tutorial online. I believe that through coding you can create a real piece of art by using only your imagination and your skills.