The Server-Side Pad

by Fabien Tiburce, Best practices and personal experiences with enterprise software

Helping Machines Read, A Simple Microformat Case Study

with 2 comments

I recently made Betterdot’s Contact Us page both human and machine readable by adding hCard microformat markup to the underlying XHTML.  This notion of “machine readable” content is arguably abstract and somewhat obscure however.  What do we mean?  What do machines see?  Perhaps a picture (or three) are worth the proverbial 1,000 words.

When a human reader, using a web browser, looks at the page, he or she sees this:

Contact page, as seen by human readers

Contact page, as seen by human readers

 

Without semantic markups such as the hCard microformat markup, a machine (for example a Google bot crawling the Betterdot site for indexing) sees this:

Contact page as seen by machines (no microformat markup)

Contact page as seen by machines (no microformat markup)

 

With semantic markups such as the hCard microformat markup, the same machine or bot sees this:

Contact page, as seen by machines with microformat markup

Contact page, as seen by machines with microformat markup

 

In Layman’s terms, microformats help machine “read” data marked up with microformat tags on the page.   While “reading” falls short of true semantic “understanding”, microformats are certainly a step in the right direction.

Advertisements

Written by Compliantia

May 19, 2009 at 10:12 pm

2 Responses

Subscribe to comments with RSS.

  1. Very nice explanation of the “machine readable” data problem. I was already aware of this, but never seen a so simple explanation.

    keep going

    gdupont

    May 21, 2009 at 5:26 am

  2. […] Fabien Tiburce has just posted a simple to understand example of how/why microformats (rich snippets) can be used. What I love about this example is that it’s simply three illustrative pictures.  Now come on, we all love pictures, admit it.  Nice work Fabien! […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: