We All Know How important is Schema Markup for SEO as well as Website Optimization. The Main Purpose of Microformats or Schema Markup is wrapping the main content of a website in the standard attributes.
Microformats Help Search Engine or Any Other Crawler Bot to Understand Your Website Better. There Are billions of Website available on the internet and each publishes Different content. It is hard for Google to understand what they are posting. That’s where Structured data or says microformats come in the role.
Microformats Wrap your main Content in predefined class and attributes to make it accessible by Google and as well as other bots.
Table of Contents
What is Microformats?
Here a Quick definition of Microformats:
microformats are HTML for marking up people, organizations, events, locations, blog posts, products, reviews, resumes, recipes etc. Sites use microformats to publish a standard API that is consumed and used by search engines, browsers, and other websites.
If You Know What is Schema Markup that it isn’t hard for you to understand Microformats.
Let’s Understand Microformats With This easy Example:
Let’s assume you are running a website about news, People came to read your website & they know what a news headline is? and what is its source? But Google is an AI it doesn’t understand what you’re posting. It saw all text as HTML text.
So, You Use Wrap Up Your Title tag, Content, Date, Author and all other in some predefined Microformats attributes. Which tell Google “Hey Google! check
out this news, here its headline, author and content”
Microformats are made by a community of people all around the word to define some common attributes to design, analyze websites.
What is the Difference Between Schema.org and Microfomats.org?
If You’re Familiar with my previous article about Schema markup You Probably Know That Microformats feels same as schema markup.
Well, microformats and Schema.org are same in many ways and they both used to serve the same purpose to arrange data of a website in the standard way.
The Main Difference between both, is the use of attributes. Schema.org use attributes like itemprop, itemtype and itemscope which serve only one purpose -“Arrange your data is Structured manner”. While Microfomats.org use attributes class and rel which serve two main purpose -“Structured your data as well as CSS”.
Microformats use the class attribute to markup your content which helps is structured data and also web designer use standard classes to design websites.
Let’s Assume You’ve a job website which post image, name, job description and skill of a person. Your HTML code something look like this:
<div> <span> <ahref="http://example.org"> <img src="http://example.org/photo.png" alt="" /> Joe Bloggs </a> resume </span> <p> Joe is a top-notch llama farmer with a degree in Llama husbandry and a thirst to produce the finest wool known to man</p> </div>
The audience can easily understand this information but it is hard for search engines and bots to understand what is a person name? what are his skills? and other information.
To Tell Google About this Data let’s add an h-resume class in it. Which tell Google that this data is about resume.
<divclass='h-resume'> <span> <ahref="http://example.org"> <img src="http://example.org/photo.png" alt="" /> Joe Bloggs </a> resume </span> <p>Joe is a top-notch llama farmer with a degree in Llama husbandry and a thirst to produce the finest wool known to man</p> </div>
Now Google Understand that this html is about resume but still other data is unkown for him. So, we use other class to markup content.
Now Add p-name Class to tag containing name of person whch tell google about person’s name.
<divclass='h-resume'> <spanclass='p-name'> <ahref="http://example.org"> <img src="http://example.org/photo.png" alt="" /> Joe Bloggs </a> resume </span> <p>Joe is a top-notch llama farmer with a degree in Llama husbandry and a thirst to produce the finest wool known to man</p> </div>
By using these pre defined classes we can tell google about all data present in html. Below you can see the fully markuped resume code:
<div class="h-resume"> <span class="p-name"> <a class="p-contact h-card" href="http://example.org"> <img src="http://example.org/photo.png" alt="" /> Joe Bloggs </a> resume </span> <p class="p-summary">Joe is a top-notch llama farmer with a degree in <span class="p-skill">Llama husbandry</span> and a thirst to produce the finest wool known to man</p> </div>
As you can saw, we use classes like p-summary,p-skill, p-contact and many other to markup this data. Now Google understand Whole data and easily understand data and index it.
So, Whenever you search for any job in Google, Google will show you something like this:
Here a full list of items supported by Microformats available for markup.
I Hope Now You Understand microformats Markup properly. Let’s Use this feature to markup our while website.
How To Add Microformats in your website?
Adding Microformats to your website isn’t a rocket science you don’t need any Coding knowledge to integrate this structured data in your website.
Adding Microformats for articles
Adding Microformats for Article is easy, You just need to add some class in your article. Here’s how it look like:
<article class="h-entry"> <h1 class="p-name">Microformats are amazing</h1> <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p> <p class="p-summary">In which I extoll the virtues of using microformats.</p> <div class="e-content"> <p>Blah blah blah</p> </div> </article>
Just Wrap Your Content in Below Classes:
p-name – entry name/title
p-summary – short entry summary
e-content – full content of the entry
dt-published – when the entry was published
dt-updated – when the entry was updated
p-author – who wrote the entry, optionally embedded
You can Get little Help from google also or Comment Below your Problem I’ll guide you.
Once You Successfully embed Microformat in your website. It’s Time to Check it:
Structured data do not preview your Microdata it only previews your schema.org data. If you want to Check you Microformats data go to this tool hentry tester.
FAQS regarding Microdata
Here some most asked question regarding Microformats Schema:
Can I Use Schema.org and Microformats.org together?
Yes! You can Use Both Markups together. They Won’t hurt you SEO even they Help Google To Understand Your Website. Both of this markup use different attributes. So, there is no need to worry.
Is Microformats is necessary?
No! Microformats are not necessary for the website. Google Didn’t force you to add this feature. With time google bot can understand how user saw your website.
Why Structured data testing tool isn’t showing error in Microformats markup but searches console does?
The microformat is a Powerful Feature that can help you to Optimize your SERP preview and increase ranking. You just need to know how to use it.
Markup your content with mocrofomats.org data and rank your website high. IF You’ve any problem regarding this guide than Comment Below We’ll answer you soon.