Tuesday, July 23, 2013

Using Micro Data on B2B Website

What is Micro Data?

It's been long since Micro Data has been discussed by various Website Masters, Web Developers and SEO People for various kind of purposes for various type of websites.

I am not going in too much basics on What is Micro Data as its already been discussed on various blogs. In single line it is a HTML5 specification which simply helps computers understand the content of the Web Page. Microdata has its own vocabulary as given by schema.org which include various tags like Organization, Person, Event, Product, Breadcrumb, Review, Offer etc. These vocabulary tags can be used on HTML using various Global Attributes like itemscope, itemprop etc.

Microdata on B2B Website

Its been about 3 years since I have started testing / implementing Microdata on various kind of websites, In most cases Microdata are used for eCommerce Websites, Event Websites or Article Sites like Blog sites. But I was brought to the situation that I had to use Microdata on B2B Website (e.g. A Website which is Website Design Service Provider which has pages talking about their services etc.)

Using Microdata on B2B Website is bit tricky, I studied the websites because usually You need Structured Data on your website where you have same format throughout all pages with various data (e.g. Product detail page of eCommerce Website all pages will display different product but structure of the page will remain same). But B2B sites I was given did not have same format which can be used to structure the data on page. 

Step 1: Identify the Data on B2B Website which can be used as Structured Data

First check out the B2B site which is given and identify vocabulary and attributes that can be used throughout the website mostly you will find one or more below things common across the pages

  1. Breadcrumb
  2. Organization name and address
  3. Static Content / About Pages
  4. Page Titles
  5. Blog / Posts

Step 2: Adding the Microdata on Header / Footer and Breadcrumb

We can start with Breadcrumbs, The Microdata Breadcrumb we use is also called RDFa Rich Snippet which is recommended Rich Snippet by Google to recognize it. Check out recommendations by Google for RDFa Rick Snippet.

For a Normal Breadcrumb like shown below
          Home > Services > Web Design Services

You might have HTML code like below.
<a href="home-url">Home</a> &gt; <a href="services-url">Services</a> &gt; Web Design Services
After we add RDFa Rich snippet as per google recommendations (as given in above link) the code will look something like below.

   <div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="home-url" rel="v:url" property="v:title">Home</a>
   </span> &gt; 
   <span typeof="v:Breadcrumb">
     <a href="services-url" rel="v:url" property="v:title">Services</a>
   </span> &gt; 
     Web Design Services

After We are done with Adding Microdata on Breadcrumb second thing is Organization Name and Address, Which is recommended to be on footer of every page and a Organization Name on Header of Every page. In Short the header of every B2B Website mostly is like Company Logo, Main Navigation, Phone Number etc. 

Mark this header section using "Corporate" Schema, but make sure If your Main Navigation has Keywords in Anchor Text then Mark Navigation as "significantLinks" and if not then you can use  "SiteNavigationElement" so that search engines understands page structure better. You can get Help about How to use Corporation Schema from here. You can use "telephone" markup for your phone number and image mark up for logo.

Next is the footer of the site which as discussed earlier should have the Address of the Organization and Mark it as "postalAddress: schema. There are various tags for various parts of Postal Address like streetAddress, addressLocality, addressRegion, postOfficeBoxNumber and postalCode. You can get further help on postalAddress schema from here.

 If you have links on footer there are again two ways of marking it up. Either use "SiteNavigationElement" or use "significantLinks" but make sure you don't repeat same markup on header and footer. Decide which one you want to show search engines as Navigation of website and which one as Other Significant Links.

Step 3: Adding the Microdata on Static Content Page and Other Pages

After you are done on Breadcrumb, Header and Footer, Its turn to add Microdata on Static pages, Here you have mark your Main Heading which is H1 using "name" tag. If you have Image within the content of the page mark it up as "image". If there is event mentioned anywhere on the page mark it as "BusinessEvent".

Talking about About page, if you have Names of your employees, VPs, CEOs etc on that page you can mark them using Person tag. Get details of Person tag from here

Step 4: Adding the Microdata to the Blog

Good News about Adding Microdata is we have a google tool to add Microdata. Where you just enter URL of your post page and it will Help you to add various tags to your Blog. But for your information We use below tags for various parts of Blog.

1. Post Name (H1) as name
2. Main Content (Text Content) as articleBody
3. Image as image
4. Author as author
5. Posted on Date as dataPublished

Once you are done with Adding Microdata don't forget to test them using Google's Microdata Testing Tool.

If you have any question or need any help you can discuss on comments. Don't hesitate to draw my attention towards any oversight i might have made in the post.