×

Stay in touch

×

SEO with microdata and Google+

SEO with microdata and Google+

  • Sep 30, 2011

I don't know you, but each time I discover a new site, I do a [ CTRL ] + [ U ] to view the html source. And often, it's hard to mind the code.

Specialy, CMS generated markup are hard to read, due to what some calls "html soup" ...

Each layer, each block, each module, add tags, and makes the code difficult to parse. And it's worse for a bot : text taming is not easy, even for Google's engineers...

Bing, Yahoo and Google thus decided to come together to provide a solution that ease html markup mining for web scraper. That solution is a microdata vocabulary called Schema.org.

I'll show you a large snippet that I used to describe myself on my résumé (work in progress), and how-to link that page with Google+ to trigger a bot visit that will boost your SEO.

Here is the code:

  1. <!-- Declare a person description with itemscope & itemtype-->
  2. <section itemscope itemtype="http://schema.org/Person">
  3.  
  4. <!-- Give the person a name, and link it with G+ -->
  5. <!-- Note the ?rel=author -->
  6. <p><a itemprop="name" rel="me" href="https://plus.google.com/102150802526393061930/posts?rel=author">Sylvain Artois</a></p>
  7.  
  8. <p itemprop="jobTitle">developer</p>
  9. <p itemprop="email">sylvain[ dot ]artois[ at ]yahoo[ dot ]com</p>
  10.  
  11. <!-- Person is a Thing in Schema.org, so it inherit the url property-->
  12. <p><a itemprop="url" rel="me" href="http://thelab.athome-training.com">http://thelab.athome-training.com</a></p>
  13.  
  14. <!-- Describe the person with his employer, as a sub-entity, Organization -->
  15. <div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
  16.  
  17. <!-- Organization description -->
  18. <span itemprop="name">Tanukis</span>
  19. <span itemprop="telephone">+33478273239</span>
  20. <a itemprop="url" href="http://www.lestanukis.com/">http://www.lestanukis.com/</a>
  21.  
  22. <!-- Declare a sub-sub-entity, a place for the Organization of the Person ... -->
  23. <div itemprop="location" itemscope itemtype="http://schema.org/Place">
  24.  
  25. <!-- Idem, the Place has a PostalAddress -->
  26. <ul itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  27. <li itemprop="streetAddress">40 rue de Bruxelles</li>
  28. <li itemprop="postalCode">69100</li>
  29. <li itemprop="addressLocality">Villeurbanne</li>
  30. <li itemprop="addressCountry">France</li>
  31. </ul><!-- end of the PostalAddress -->
  32.  
  33. </div><!-- end of the Place -->
  34.  
  35. </div><!- end of the Organization- -->
  36.  
  37. <!-- Declare a colleague as a Person sub-entity -->
  38. <ul>
  39. <li itemprop="colleagues" itemscope itemtype="http://schema.org/Person">
  40. <span itemprop="name" >Frédéric Lam</a>
  41. <a itemprop="url" href="http://www.fredericlam.com/web/">http://www.fredericlam.com/web/</a>
  42. </li>
  43. <li>... other colleagues ...</li>
  44. </ul>
  45.  
  46. <!-- home, sweet home -->
  47. <div itemprop="homeLocation" itemscope itemtype="http://schema.org/Place">
  48. <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  49. <span itemprop="addressLocality">Villeurbanne</span>,
  50. <span itemprop="streetAddress">rue Jules Vallès</span>,
  51. <span itemprop="addressCountry">France</span>
  52. </p>
  53. </div>
  54.  
  55. </section>

Schema.org is easy :

  • Declare an entity with itemscope and itemtype.
  • Add a property with itemprop, and wrap its content within a tag.
  • Entity can have sub-entities, described with itemprop, itemscop and itemtype.
  • Entities inherit property from their parents

But it is also rich.

I described here a person, but you can do the same with an event, a product, a place, even a blog or, ... a floating point number ... Read the vocabulary full list ...

The rel html attribute is not part of Schema.org, but a tool used by Google to link together some content. Add rel="me" or rel="author" to hang an item to someone. If you have a link in your Google+ profile that point to your content, and a back link from your page to Google, Google will understand that you are the page author, and will show the page in Google's results. You can also complete this form to accelerate the bot visit.

Here is my Google+ profile, about tab, with the links added that point to my blogs:

My G+ profile

And next a screenshot of a Google search on my name, layered with my G+ profile. The firsts results are all on my profile:

Screenshot of a Google search on my name layered with my Google profile

Finaly, you can test your code with the Rich Snippets Testing Tool, and see your SEO gain from Google, Bing and Yahoo webmaster's tools.

A Drupal module exists, that I'll test soon

Enjoy :)