Hybrid Microformat/RDFa Example of the Day: Marking up Brick and Mortar Stores

Posted in: Business, HTML, Microformats, Theory, Web Standards, Working, example of the day

As part of a recent local store web site project, we’ve been experimenting with how to represent physical store locations using microformats and RDFa in a hybrid approach, giving the parser/page scraper/app the ability to choose it’s own format to parse while keeping it visually simple for the end user. This example (live on 1000+ store pages) uses hCard and geo microformats along with FOAF and GEO RDFa specfications. There are some interesting observations I have noted from iterating on this a couple of times:

  • Does a hybrid approach make sense? Could this be applied to other microformat/RDFa instances?
  • I think it would be beneficial to come up with an approach for representing store hours in the data. To my knowledge there is no microformat to handle this. I did stumble on the GoodRelations ontology, and could apply this as an RDFa. Looks like GoodRelations also appears in Yahoo! SearchMonkey’s documentation.

The example. First things first, add RDFa DOCTYPE declaration and appropriate namespaces for validity (dublin core dc: appears further in the (X)HTML in the posts, does not appear in this example).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">

The core of the markup:

<div id="storeinfo">
	<div class="vcard" typeof="foaf:Organization">
		<div class="fn n" property="foaf:name"><h1 class="org" property="geo:lat_long" content="44.863312,-93.292557">Best Buy - Richfield</h1></div>
		<span rel="foaf:depiction"><img src="http://stores.bestbuy.com/wp-content/store-images/bestbuy-store-281.jpg" border="0" alt="Best Buy - Richfield" class="photo" /></span>
		<div class="info">
			<div class="adr">
				<div class="street-address">1000 West 78th St</div>
				<span class="locality">Richfield</span>, <span class="region">MN</span>  <span class="postal-code">55423</span>
                        </div>
			<div class="tel"><span>Phone</span>: 612-861-3917</div>
			<div class="geo">GEO: <span class="latitude">44.863312</span>, <span class="longitude">-93.292557</span></div>
		        <div class="addl"><a href="javascript:mapanddirection('281','cat12091')">Maps & Directions</a> | <a href="javascript:openWeeklyAd('http://bestbuy.shoplocal.com/bestbuy/new_user_entry.aspx?adref=','55423')">Weekly Ad</a></div>
		        <h3>Store Hours</h3>
			<div class="hours">
				<strong>Mon:</strong> 10-9;
				<strong>Tue:</strong> 10-9;
				<strong>Wed:</strong> 10-9;
				<strong>Thurs:</strong> 10-9;
				<strong>Fri:</strong> 10-9;
				<strong>Sat:</strong> 10-9;
				<strong>Sun:</strong> 11-7
			</div>
		</div>
	</div>
</div>

Download the src

Make a comment