Boost Your Google Presence With Microdata

Jan 6, 2016

Microdata are the syntax for embedding machine readable metadata in simple HTML. With this extra attribute added search engine is able to understand as close to human. To be exact, it adds great contribution for browser to understand what the piece of content is all about in a relevant way.

Let us take an example

Sudip Shrestha- 24, Male, Single, Engineer, Digital Marketer, Nepal.

Well, humans can contextually understand what the content is all about. But, for the computer program like a web browser or search engine bot, it is not as simple. To make computer programs understand what the content of the content is, the way as human do automatically do, we add microdata.

Below is the microdata for above example – which is telling a computer program how to contextualize it.

<span itemprop=”Name”>Sudip Shrestha</span> –

<span itemprop=”Relationship Status”>Single</span>

<span itemprop=”Qualification”>Engineer</span>

<span itemprop=”Post”>Digital marketer</span>

<span itemprop=”Address”>24</span>.

</div>

Now, equipped with microdata segments, a computer program can understand that the element created is a person type with properties like name, age, sex, relationship status, qualification, post, address and so on.

The Significance of Microdata

We live in the age of information at our finger-tips. By the use of search engines like Google, Yahoo, Bing etc. While search engines do their best in understanding the content of the websites as they index billions of webpages out there, they are often unable to tell the context of the information. If only, we could tell search engines, while they are indexing our web-pages, the context of the information on it, it will aid them significantly to understand our web-pages better, isn’t it? Hence, microdata was devised and introduced.

Now, equipped with this extra information, search engines can improve their search results. Unfortunately, because this is just a guideline, not many websites attempt to help search engines with such metadata. Those who do, are naturally loved by search engines, as they help them improve their service.

Microdata Structure

Basically, microdata comprises of a group of name–value pairs. Group and each name–value pair is called ‘item’ and ‘property’ respectively.

Microdata usually defines element through its attribute in name-value pair:

— it is used to define an item.

itemprop=”property-name” — adds a property to a microdata item. The name of the property can be a text or URL, and the value is according to the ‘content’ of the element.

For most elements, the value is text.

For elements with a URL attribute, the value is the URL (<imgsrc=””>,

<a href=””>, etc.)

For the <time> element, the value is the datetime=”” attribute

For <meta itemprop=”” content=””>, the value is the content=”” attribute

Example:

<p itemscope>
Planning to go

<a itemprop=”url” href=”http://www.pinkflyod.com/“> <span itemprop=”name”>Pink Flyod</span></a>

concert <time itemprop=”date” datetime=”2012-12-18″>next Friday</time>.

They are going to reap the stage.

</p>

This defines an item with three properties: the url is http://www.pinkflyod.com/, the name is Pinkflyod, and the date is 2012-12-18.

itemref=”” — allows a microdata item to include non-descendent properties by referring to the ids of element(s) containing them

Example:

Planning to go

<a itemprop=”url”href=”http://www.pinkflyod.com/“> <span itemprop=”name”>Pink Flyod</span></a>

concert <time itemprop=”date” datetime=”2012-12-18″>next Friday</time>. They are going to reap the stage</p>

…

<p>Pink Flyod are

<span itemprop=”name”>Nick Mason</span>,

<span itemprop=”name”>David Gilmour</span>,

<span itemprop=”name”>Roger Waters</span>

<span itemprop=”name”>Richard Wright</span>

and <span itemprop=”name”>Syd Barrett</span>.

</span>

</p>

itemtype=”” — defines the item’s type when used on the same element as itemscope. The itemtype value is a URL that acts as an identifying vocabulary name.

itemid=”” — allows a vocabulary to define a global identifier for a microdata item, for example an ISBN number on a book. Use itemid on the same element as the item’s itemscope and itemtype attributes.

Example:

<p itemscope itemtype=”http://schema.org/book”

itemid=”urn:isbn:0-385-50420-9 (US)”>

<!– book info… –>

</p>

(Courtesy: http://html5doctor.com/microdata/#syntax)

Typical Use-Cases

Programmers should integrate microdata attributes to their website. It has been boon for any website company to produce informative content that a computer can interpret well and provide highly relevant data to the needy people

Microdata technique has been widely used to create a rich snippet and marking up data to create creativity in articles, books, person, organization, services and many more. You can get detailed scope of microdata here

We have already discussed on a structure of microdata in the earlier post. Now assuming you understand the attributes involved in marking up your structured data let’s take a look at some commonly used cases.

Product

As we are all known to Ecommerce site, which sells product and services to people through online. On that note, developer has to incorporate lots of data(properties) relating to product like name, description, images, URL, reviews, model, brand and color. You may find full list here

An example for marking up product information:

<h1 itemprop=”name”>Samsung Galaxy Tab S2</h1>

Samsung Galaxy Tab S2 8.0 Android tablet. Announced 2015, July. Features 3G, 8.0″ Super AMOLED capacitive touchscreen, 8 MP camera, Wi-Fi, GPS,…….

</p>

<p>

Brand: <span itemprop=”brand”>Samsung</span>

</p>

<p>

Model: <span itemprop=”model”>Galaxy Tab S2</span>

</p>

<p>

Color: <span itemprop=”color”>Silver</span>

</p>

<p>

Product ID: <span itemprop=”productID”>SM-T715</span>

</p>

<p>

Price: <span itemprop=”price”>$399</span>

</p>

</div>

Person

A user may search from anything to everything. He may also ask a query to know details about Scientists, Actors, Inventors, etc. So web developer has to integrate many details (properties) ranging from name, images, url, job, description, family member and so on. Here, is the full scope of marking up technique for person.

An example for marking up personal details:

<p>

<h1 itemprop=”name”><span itemprop=”givenName”>Sudip</span> <span itemprop=”familyName”>Shrestha</span></h1>

</p>

<p>

DOB: <span itemprop=”birthDate”>12/15/1990</span>

</p>

<p>

Web: <a href=”http://websupreme.com.au” itemprop=”url”>http://websupreme.com.au</a>

</p>

<p>

Telephone: <span itemprop=”telephone”>+9770849622158</span>

</p>

<span itemprop=”streetAddress”>Phulchowki Marg, </span>

<span itemprop=”addressLocality”>Kathmandu, </span>

<span itemprop=”addressRegion”>Bagmati, Nepal</span>

</div>

Movie

To create an article, blog, post or snippet for movie we can use microdata marking up technique to include properties of movie covering name of the movie, star cast, genre, release date, reviews, rating, and description. Properties that can be covered through are this

An example to create article on movie:

<h1 itemprop=”name”>Forrest Gump</h1>

<span itemprop=”description”>Slow-witted Forrest Gump (Tom Hanks) has never thought of himself as disadvantaged, and thanks to his supportive mother (Sally Field), he leads anything but a restricted life. Whether dominating on the gridiron as a college football star, fighting in Vietnam or captaining a shrimp boat, Forrest inspires people with his childlike optimism. But one person Forrest cares about most may be the most difficult to save — his childhood love, the sweet but troubled Jenny (Robin Wright).</span>

<a href=”http://robert-zemeckis.com” itemprop=”url”><span itemprop=”name”>Robert Zemeckis</span></a>

</div>

<a href=”http://winston-groom.com” itemprop=”url”><span itemprop=”name”>Winston Groom</span></a>

</div>

<a href=”https://tom-hanks.com” itemprop=”url”><span itemprop=”name”>Tom Hanks</span></a>,

</div>

<a href=”http://robin-wright.com” itemprop=”url”><span itemprop=”name”>Robin Wright</span></a>,

</div>

<span itemprop=”ratingValue”>8.8</span>/

<span itemprop=”bestRating”>10</span> stars from

<span itemprop=”ratingCount”>119,012</span> users.

</div>

Guidelines for Developers

The concept of embedding microdata into simple HTML code is trending these days. Only a few website companies have incorporated this attribute onto their website and most are still on race to facilitate their website with this feature.

Integrating microdata is a complex process and the complete headache to the developer. Here, we have included 15 actionable steps so that developers can follow to code more efficiently with no headache.

Initially, have a complete look at source code of your website patiently.It is the first step and developer needs to check and go through whole list of code.
Have a detail research on the same. It is developer’s duty to research and have a clear vision on how and where to apply microdata attributes.
Mark up the places and feel the necessity of microdata on to the content of your web page. After acknowledging the scope of microdata onto your webpage list down the places where it can be used in full swing to create a creative webpage.
You can also rely on tools to highlight your data types in web page like Google Data Highlighter.Below is the piece of webpage from https://support.google.com/webmasters/answer/2851971?hl=en

Copy the code first rather than starting to edit. Passion is all that it takes to be a sound developer so instead of hurrying up to edit and markup your code, copy the code so that the valuable code will not go out of your hand (or waste).
Note down what properties of the items or types can be addressed thoroughly. Webpage covers wide range of elements, it can be made to describe some product and services or to describe a person. Hence, it must be kept in mind to address all the properties of elements like if you are a web developer for eCommerce site that sells products then you should collect enough information regarding the products as such names, reviews, price, offer, discount, sales, rating, and more.
Categorize the types based on product, people, organization, creative things, etc. Be clear which element is of what data type. For example, if you categorize product into the person type then the computer will misinterpret your code and understand the product like a person.

Have clear knowledge on the types, items and properties. Often it is more challenging and confusing to know the data types, same is for its items and properties. So developer needs to surpass this hurdle and have precise knowledge regarding each.
Along with desktop computers; work on marking up content for mobile specific pages. Website are not only meant for browsing in laptops or desktop computers, hence marking up technique is equally essential for mobile pages. Additionally, work on responsive environment for tablet and ipads.
When you have several properties of different types on single unit, then markup sensitively. If an organization is selling its product through online campaign comprising of many personnel working under it then developer has to integrate each types separately and more sensitively to let search engine know which is the organization, product and people also with their corresponding features included.
Use corresponding structured data for every element on webpage to well define them accurately.For example if you are posting the rating of movies or books then you have to use AggregateRating type. Look above at typical cases in creating article related to movie.
When marking up image URL as type property, make sure that the image belongs to that type. For example, marking up shema.org/image property of type schema.org/person, then that image must belong to that person type.
Collect information as much as you can on data types and syntaxes to address their properties. You can have sound knowledge on various data types here.
Be up to date with any extension or vocabulary released or defined under http://schema.org. Many extension may be available to address wider properties of an element, so keep tracking and try to integrate the same into yours
Finally, before embedding into your HTML code, test its accuracy and validate through online tools like Live Microdata