Web Development

Today sees a significant change to your Google listings with google announcing its support for rich snippets including vCard and vCalendar. This is important as it gives us an edge to make our listings stand out from the crown, however the down side (yes theres always one isnt there) is that it arms Google withgreater understanding our our content which can be used to marginalise sites and even worse reduce them to a local listing.

hCard

Heres my quick guide to creating a semantic hcard for your site to be used where ever you put your address:

1.  <div class="vcard">
2.    <a class="fn org url" href="http://www.click4beds.co.uk/">Click 4 Beds</a>
3.    <address class="adr">
4.      <span class="type">Work</span>:
4.      <div class="building">Enterprise Works</div>
6.      <div class="street-address">Long Lane</div>
7.      <div class="locality">Honley</div>,
8.      <div class="region">West Yorkshire</div>  
9.      <div class="postal-code">HD9 6EA</div>
10.     <div class="country-name">England</div>
11.   </address>
12.   <div class="tel">
13.     <span class="type">Work</span> +44 (0)1484 666563
14.   </div>
15.   <div>Email:
16.     <a class="email" href="mailto:sales@click4beds.co.uk">sales@click4beds.co.uk</a>
17.   </div>
18. </div>

The Breakdown.

1. Tells Google to start a vCard
2. Sets a link thats a [fn] Full Name, [org] organisation that has a [url] website address
3. Starts the [adr] address content
4. Sets this [type] field to be a work address
5. Sets this [building] field to be the building name
6. Sets this [street-name] field to be the street address
7. Sets this [locality] field to be the town/city or village address
8. Sets this [region] field to be the county address
9. Sets this [postal-code] field to be the postcode
10. Sets this [country-name] field to be the name of your country
11. Closes the address content
12. Identifies content as a telephone number
13. Tells Google this is a work number followed by the telephone number itsself
14. Closes the telephone number content
15. Starts a container
16. Tells google that this is an email address
17. Closes the container
18. Closes the vCard

Adapted from microformats.org/wiki/hcard

hReview

If you read the original Google post above you’ll notice that theyre also displaying a review for this listing. They claim that this is a standard format widely used on the Interwebs so best keep your eyes peeled for something like the following which is used as a sample on microformats.org/wiki/hreview

1.  <div class="hreview">
2.    <span><span class="rating">5</span> out of 5 stars</span>
3.    <h4 class="summary">Crepes on Cole is awesome</h4>
4.    <span class="reviewer vcard">Reviewer: <span class="fn">Tantek</span> -
5.      <abbr class="dtreviewed" title="20050418T2300-0700">April 18, 2005</abbr></span>
6.    <div class="description item vcard"><p>
7.      <span class="fn org">Crepes on Cole</span> is one of the best little
8.        creperies in <span class="adr"><span class="locality">San Francisco</span></span>.
9.      Excellent food and service. Plenty of tables in a variety of sizes
10.     for parties large and small.  Window seating makes for excellent
11.     people watching to/from the N-Judah which stops right outside.
12.     I've had many fun social gatherings here, as well as gotten
13.     plenty of work done thanks to neighborhood WiFi.
14.  </p></div>
15.  <p>Visit date: <span>April 2005</span></p>
16.  <p>Food eaten: <span>Florentine crepe</span></p>
17.  </div>

Based on the break down from the HCard this is pretty easy to understand.

XFN

XFN is already sidely used on blog engines like WordPress where it encourages you to identify link relations to your site using the REL attribute.

Heres the official list of regognised REL attributes microformats.org/wiki/existing-rel-values