Anyone that has spent time trying to improve their click through rates (
CTR ) from search engine results pages (
SERP s) will tell you that Google algorithmically picks the snippet displayed for a given page; it’s not something you can always control. Unfortunately, Google doesn’t always display the snippet that will give you the best conversion rate.
However, the use of microformats, a set of agreed upon
HTML conventions used to describe content, can give you more control of the snippets displayed in Google
SERP s. Once your site is properly using rich snippets, you will see them also appear in your Google custom search and Google site search results, so this technique is definitely worth exploring if you use those tools as well.
The changes are easy to implement for WordPress, Magento and other software, let’s take a look at some use cases based on hReview, hCard, hProduct and XFN:
Businesses & Organizations
| Property | Description |
| name (fn/org) | The name of the business. If you use microformats, you should use both fn and org, and ensure that these have the same value. |
| url | Link to a web page on the business’s site. |
| address (adr) | The location of the business. Can contain the sub properties street address, locality, region, postal-code, and country-name. |
| tel | The telephone number of the business or organization. |
| geo | Specifies the geographical coordinates of the location. Includes two elements: latitude and longitude. Optional. |
Could be marked up as follows:
<div class="vcard"> <span class="fn org">L'Amourita Pizza</span> Located at <div class="adr"> <span class="street-address">123 Main St</span>, <span class="locality">Albuquerque</span>, <span class="region">NM</span>. </div> <span class="geo"> <span class="latitude"> <span class="value-title" title="37.774929" /> </span> <span class="longitude"> <span class="value-title" title="-122.419416" /> </span> </span> Phone: <span class="tel">206-555-1234</span> <a href="http://pizza.example.com/" class="url">http://pizza.example.com</a> </div>
Learn more about the business and organization markup at webmaster central.
Products
| Property | Description |
| brand | The brand of the product for example, ACME. |
| category | The product category for example, "Books–Fiction", "Heavy Objects", or "Cars". |
| description | Product description |
| name (fn) | Product name |
| price | Floating point number. Can use currency format. |
| photo | URL of product photo |
| url | URL of product page |
Could be marked up as follows:
<div class="hproduct"> Brand: <span class="brand">ACME</span> <span class="category">Heavy objects</span> <h1 class="fn">Large all-purpose anvil</h1> On sale for <span class="price">$99.95</span>. <span class="description">If you need an object to drop from a height, the classic A23859 anvil from ACME is the way to go.</span> <a href="http://anvil.example.com" class="url">Anvil details page</a> </div>
Becomes:
Learn more about the product markup at webmaster central.
People
| Property | Description |
| name (fn) | Name |
| nickname | Nickname |
| photo | An image link |
| title | The person’s title (for example, Financial Manager) |
| role | The person’s role (for example, Accountant) |
| url | Link to a web page, such as the person’s home page |
| affiliation (org) | The name of an organization with which the person is associated (for example, an employer). If fn and org have the exact same value, Google will interpret the information as referring to a business or organization, not a person. |
| friend | Identifies a social relationship between the person described and another person. |
| contact | Identifies a social relationship between the person described and another person. |
| acquaintance | Identifies a social relationship between the person described and another person. |
| address (adr) | The location of the person. Can have the sub properties street address, city, region, postal-code, and country-name. |
Could be marked up as:
<div class="vcard"> My name is <span class="fn">Bob Smith</span>, but people call me <span class="nickname">Smithy</span>. Here is my home page: <a href="http://www.example.com" class="url">www.example.com</a>. I live in <span class="adr"> <span class="locality">Albuquerque</span>, <span class="region">NM</span> </span> and work as an <span class="title">engineer</span> at <span class="org">ACME Corp</span>. My friends: <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>, <a href="http://edna-blog.example.com" rel="friend">Edna</a> </div>
Becomes:
Learn more about markup for people at webmaster central.
Reviews
| Property | Description |
| itemreviewed (item) | The item being reviewed. In microformats, can contain the element name (fn). |
| rating | A numerical quality rating for the item (for example, 4). You can indicate a rating scale by specifying best (default: 5) and worst (default: 1). More information about review ratings. |
| reviewer | The author of the review. |
| dtreviewed | The date that the item was reviewed in ISO date format. |
| description | The body of the review. |
| summary | A short summary of the review. |
Could be marked up as:
<div class="hreview"> <span class="item"> <span class="fn">L’Amourita Pizza</span> </span> Reviewed by <span class="reviewer">Ulysses Grant</span> on <span class="dtreviewed"> Jan 6<span class="value-title" title="2009-01-06" /> </span>. <span class="summary">Delicious, tasty pizza on Eastlake!</span> <span class="description">L'Amourita serves up traditional wood-fired Neapolitan-style pizza, brought to your table promptly and without fuss. An ideal neighborhood pizza joint.</span> Rating: <span class="rating">4.5</span> </div>
Learn more about markup for reviews at webmaster central.
Interested in getting started? Well there’s no reason not to start using microformats as much as possible already; semantic markup is always good for search engine optimization:
- Update your markup (make sure it’s valid) and use the Quix bookmarklet to check your page, by entering ‘snippet’ to submit the current page to Google Rich Snippets test tool.
- Getting the “Insufficient data to generate the preview” error? Then make sure that there are no errors in the markup (go back to step one) or check that you are using enough data to generate the snippet preview, so check the microformat syntax again.
- Finally, let Google know that you’re an early adopter.
So who’s using microformats in this and other ways? Brands like Mashable, Yahoo!, Yelp, Technorati, SearchMonkey, LinkedIn, Urbanspoon and many more. If you’re interested in digging deeper into the future of microformats as they relate to web analytics as well, Dennis Mortensen from Yahoo! has a great post on what the future may hold.
Google & Microformats: Drive More Traffic is a post from Joost de Valk‘s Yoast – Tweaking Websites.A good WordPress blog needs good hosting, you don’t want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!
Related Articles
- All Facebook: Reality Check: Google Plus Is No Facebook Or Twitter Killer (But It Might Hurt WordPress And Tumblr)
- Mashable!: HOW TO: Integrate Google+ Into Your WordPress Site
- Yoast: WordPress-to-Lead for Salesforce CRM
- ReadWriteWeb: Google Brings Living Stories to WordPress
- HOW TO: Integrate Google Buzz Into Your WordPress Blog