For a long time search engines have been making sense of a web development approach that doesn’t incorporate consistent markup for consistent items. Search engines have managed to do a great job with this, however, now we have the advantage of microformats and other Rich Snippets. With microformats we can make both machine readable and human readable code. This concept will encourage SEO professionals to engage web developers as well as become more code savvy themselves.
Microformats are simple standardized ways of organizing website information. Microformats have implications for web development standards, SEO, and application development around parsing website information.
Lately, there has been a lot of discussion around these snippets for SEO, geo tagging, etc. I find this a bit ironic because they have been around for so long. (The microformat search term on Google hit its peak in 2007.) However, what hasn’t been around for very long is the Google adoption of all of these “Rich Text Snippets”. The term Rich Text Snippets includes microformats, microdata, and RDFa’s. I’ve seen some examples on the microformats blog and Google has been blogging about all the support they have been adding. Google actually made some mistakes in their examples, but it looks like they corrected them. So I thought I would outline my favorite examples of microformats to get that information out there. Hopefully we can perpetuate the wide-spread use of these.
These are my favorite markup uses for each format:
<div class="hreview"> <span class="item"> <span class="fn">Scott Gale's Blog</span> </span> Reviewed by <span class="reviewer">John Smith</span> on <span class="dtreviewed"> Jan 6<span title="2009-01-06" /> </span>. <span class="summary">Love the website</span> <span class="description"> I like your blog because it offers me, an SEM evangelist and sales guy, an insight into the world of technology from someone who understands the very essence of its infrastructure. </span> Rating: <span class="rating">4.5</span> </div>
<div class="vcard"> My name is <span class="fn">Scott Gale</span>, My blog url is: <a href="http://scottgale.com/blog" class="url">scottgale.com/blog</a>. I live in <span class="adr"> <span class="locality">South Burlington</span>, <span class="region">VT</span> </span> and work as a <span>Web Developer</span> at <span>Dealer.com</span>. </div>
<div class="vcard"> <span class="fn org">Scott Gale's Web Shop</span> Located at <div class="adr"> <span class="street-address">16 Any Dr.</span>, <span class="locality">South Burlington</span>, <span class="region">VT</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://scottgale.com/blog">scottgale.com/blog</a> </div>
<div class="hproduct"> Make: <span class="brand">Maserati</span> <span class="category">Automotive</span> <h1 class="fn">Granturismo</h1> Nicely equiped for: <span class="price">$134,000</span>. <span class="description">The Maserati GranTurismo design exudes elegance and has room for 4. Reinvented from the ground up.</span> <a href="http://www.scottgale.com/Maserati-GranTurismo" class="url">View Details</a> </div>
Video: (RDFa from Google’s site)
<object width="512" height="296" rel="media:video" resource="http://example.com/video_object.swf?id=12345" xmlns:media="http://search.yahoo.com/searchmonkey/media/" xmlns:dc="http://purl.org/dc/terms/"> <param name="movie" value="http://example.com/video_object.swf?id=12345" /> <embed src="http://example.com/video_object.swf?id=12345" type="application/x-shockwave-flash" width="512" height="296"> <a rel="media:thumbnail" href="http://example.com/thumbnail_preview.jpg" /> <a rel="dc:license" href="http://example.com/terms_of_service.html" /> <span property="dc:description" content="Cute Overload defines Baroo? as: Dogspeak for 'Whut the...?'Frequently accompanied by the Canine Tilt and/or wrinkled brow for enhanced effect." /> <span property="media:title" content="Baroo? - cute puppies" /> <span property="media:width" content="512" /> <span property="media:height" content="296" /> <span property="media:type" content="application/x-shockwave-flash" /> <span property="media:region" content="us" /> <span property="media:region" content="uk" /> <span property="media:duration" content="63" /> </object>
(Would be nice to see a video microformat, they audio spec is in review currently.)
With Google’s adoption of these standards it puts microformats in the running for some serious SEO discussion. Google has a lot of documentation about this. They also have a rich snippet testing tool to confirm that your html is properly formed and able to be parsed.
Also, I stumbled upon a great post by Jay Myers about the potential of these formats and how it relates to SEO.
With Google’s adoption of this it puts microformats as a new and important SEO component. Utilizing the examples above coupled with the tools that Google has for testing will help create a more human and machine readable web. Microformats.org can help get you started if you are interested in becoming a contributor.