Microdata was introduced in 2011 as a way to make website understandable for both computers and humans. This could be roughly translated to a shortcut to improving your google ranking without too much effort. However the fact is that many websites still don’t (properly) include them!
Even though microdata is here for a few years already, many, and I mean many, websites still don’t use them. And that is not even taken the ones that included them wrong into account. Sad, although, perhaps perfect for us. Including them might give us one more step before our competitors.
Ok got it, apply microdata… euhm, what is microdata?
Microdata is one of the three options to make content in a web page machine readable.
Microdata is a way to markup your text. Doing so will allow machines, and mostly search engines, to better understand the content of your pages. The main purpose of microdata is search engine optimization. And using it within your web pages can clarify a lot for search engines, thus, allows you to create your website in a way you see fitting for your users. Double profit!
Microdata can describe many different kinds of info: information about a news article, a person’s details, a description of a product, and so on.
How to use microdata
Implementing microdata in your website is very easy, once you know how to do it. What makes it so easy is the fact that you can use existing HTML elements, thus don’t have to necessarily add extra elements to your code.
Let’s take a look at an example where we want to define a person in our microdata:
<section itemscope itemtype="http://schema.org/Person"> ... </section>
First, you need to define a “wrapper”. You do this by adding the attribute “itemscope” around the surrounding element. In this example, the section element.
Second, you want to tell what library you will use. Do this by adding it in the “itemtype” attribute of the wrapper element. A small hint: the itemscope attribute and the library you will use are always in the same element.
Try to use as many existing libraries as possible. Using the same libraries has the advantage of not only already working with a well defined one, but as well making some libraries standard. Standard libraries will be taken into account by web crawlers.
Some libraries are already standard for many search engines.
Than proceed adding properties in the wrapper using the itemprop attribute:
<section itemscope itemtype="http://schema.org/Person"> <h2>About <span itemprop=”name”>Kevin</span></h2> <article> Kevin is a <span itemprop=”jobTitle”>writer</span> for <span itemprop=”affilation”>Earn With a Website</span> </article> </section>
Last but not least, it is important to know you can nest an itemtype into another itemtype.
Let’s take our last example and expand it a bit:
<section itemscope itemtype="http://schema.org/Person"> <h2>About <span itemprop="name">Kevin</span></h2> <article> Kevin is a <span itemprop="jobTitle">writer</span> for <span itemprop="affiliation"><a itemprop="url" href="www.earnwithawebsite.com">Earn With a Website</a></span> <span itemprop="contactPoint" itemscope itemtype="https://schema.org/ContactPoint"> <span itemprop="contactType">customer support</span> <span itemprop="telephone">+1-000-00-00-00</span> </span> </article> </section>
As you can see it is easy to implement microdata in already existing mark-up. Microdata will boost your website a lot in comparison to the “effort” that has to be made. Therefore, there are simply no excuses to not use it.