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
    or or
    . 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:
     
  • 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.
     
    
    

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/).