Product microformats and shopping feeds

Enhance your markup for the Googles

Mike Estes

Web Developer at Westcodes

Our Goal

NOT THIS

THIS

AND THIS

What's a microformat?

Example.com

Work:

1234 State St

Bellingham, WA 98225

USA

Work (360) 733-9739

Fax (360) 733-9739

Email: info@example.com

What's a microformat?

<div>
  <a href="http://www.example.com/">Example.com</a>
  <div>
    <span>Work</span>:
    <div>1234 State St</div>
    <span>Bellingham</span>,
    <abbr>WA</abbr>&nbsp;&nbsp;
    <span>98225</span>
    <div>USA</div>
  </div>
  <div>
   <span>Work</span> (360) 733-9739
  </div>
  <div>
    <span>Fax</span> (360) 733-9739
  </div>
  <div>Email:
   <span>info@example.com</span>
  </div>
</div>

What's a microformat?

<div class="vcard">
  <a class="fn org url" href="http://www.example.com/">Example.com</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">1234 Fake St</div>
    <span class="locality">Bellingham</span>,
    <abbr class="region" title="Washington">WA</abbr>&nbsp;&nbsp;
    <span class="postal-code">98225</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> (360) 733-9739
  </div>
  <div class="tel">
    <span class="type">Fax</span> (360) 733-9739
  </div>
  <div>Email:
   <span class="email">info@example.com</span>
  </div>
</div>

And what does it look like?

Reviews

Events

Recipes

Google calls these Rich Snippets

Product Detail Page

Nikon D40

$375.00

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Product Detail Page

HTML Source

<div class="productArea">
    <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera" class="myProductImage" />
    <div class="myProductInfo">
        <div class="myProductName">Nikon D40</div>
        <div class="myProductPrice">$375.00</div>
        <button class="clean-gray addToCart">Add To Cart</button>
        <div class="myProductDescription">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="productThumbs">
            <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera and lens" />
            <img src="images/camera2.jpg" alt="Nikon D40 DSLR Camera hanging by straps" />
            <img src="images/camera3.jpg" alt="Nikon D40 DSLR Camera and finger" />
            <img src="images/teddy.jpg" alt="a dog" />
        </div>
    </div>
</div>

Product Detail Page

HTML Source

<div class="productArea">
    <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera" class="myProductImage" />
    <div class="myProductInfo">
        <div class="myProductName">Nikon D40</div>
        <div class="myProductPrice">$375.00</div>
        <button class="clean-gray addToCart">Add To Cart</button>
        <div class="myProductDescription">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...
        </div>
        <div class="productThumbs">
            <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera and lens" />
            <img src="images/camera2.jpg" alt="Nikon D40 DSLR Camera hanging by straps" />
            <img src="images/camera3.jpg" alt="Nikon D40 DSLR Camera and finger" />
            <img src="images/teddy.jpg" alt="a dog" />
        </div>
    </div>
</div>

Product Detail Page

HTML Source

<div class="productArea">
    <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera" class="myProductImage" />
    <div class="myProductInfo">
        <div class="myProductName">Nikon D40</div>
        <div class="myProductPrice">$375.00</div>
        <button class="clean-gray addToCart">Add To Cart</button>
        <div class="myProductDescription">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...
        </div>
        <div class="productThumbs">
            <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera and lens" />
            <img src="images/camera2.jpg" alt="Nikon D40 DSLR Camera hanging by straps" />
            <img src="images/camera3.jpg" alt="Nikon D40 DSLR Camera and finger" />
            <img src="images/teddy.jpg" alt="a dog" />
        </div>
    </div>
</div>

And now for something completely slightly different.

Enhanced Product Page

With hProduct microformat markup

Nikon D40

Brand:

Nikon

MODEL#:

NK-11140

$450.00 $375.00

Average rating: 4.4, based on 89 reviews

<div class="hproduct">
    <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera" class="photo" />
    <div class="myProductInfo">
        <div class="fn">Nikon D40</div>
        <div class="myProductDetails">
            Brand: <div class="brand">Nikon</div>
            MODEL#: <div class="identifier model">NK-11140</div>
        </div>
        <div class="myPriceArea">
            <span class="myOldPrice">$450.00</span>
            <span class="price">$375.00</span>
        </div>
        <button class="clean-gray addToCart">Add To Cart</button>
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...
        </div>
        <div class="review hreview-aggregate">
            Average rating: <span class="rating">4.4</span>, based on
            <span class="count">89</span> reviews
        </div>
        <div class="pThumbs">
            <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera and lens" />
            <img src="images/camera2.jpg" alt="Nikon D40 DSLR Camera hanging by straps" />
            <img src="images/camera3.jpg" alt="Nikon D40 DSLR Camera and finger" />
            <img src="images/teddy.jpg" alt="a dog" />
        </div>
    </div>
</div>

<div class="hproduct">
    <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera" class="photo" />
    <div class="myProductInfo">
        <div class="fn">Nikon D40</div>
        <div class="myProductDetails">
            Brand: <div class="brand">Nikon</div>
            MODEL#: <div class="identifier model">NK-11140</div>
        </div>
        <div class="myPriceArea">
            <span class="myOldPrice">$450.00</span>
            <span class="price">$375.00</span>
        </div>
        <button class="clean-gray addToCart">Add To Cart</button>
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...
        </div>
        <div class="review hreview-aggregate">
            Average rating: <span class="rating">4.4</span>, based on
            <span class="count">89</span> reviews
        </div>
        <div class="pThumbs">
            <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera and lens" />
            <img src="images/camera2.jpg" alt="Nikon D40 DSLR Camera hanging by straps" />
            <img src="images/camera3.jpg" alt="Nikon D40 DSLR Camera and finger" />
            <img src="images/teddy.jpg" alt="a dog" />
        </div>
    </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Product">
    <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera" itemprop="image" />
    <div class="myProductInfo">
        <div itemprop="name">Nikon D40</div>
        <div class="myProductDetails">
            Brand: <div itemprop="brand">Nikon</div>
            MODEL#: <div itemprop="identifier" content="model:NK-11140">NK-11140</div>
        </div>
        <div class="myPriceArea">
            <meta itemprop="currency" content="USD" />
            <span class="myOldPrice">$450.00</span>
            <span itemprop="price">$375.00</span>
        </div>
        <button class="clean-gray addToCart">Add To Cart</button>
        <div itemprop="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...
        </div>
        <div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
            Average rating: <span itemprop="rating";>4.4</span>, based on
            <span itemprop="count">89</span> reviews
        </div>
        <div class="pThumbs">
            <img src="images/camera.jpg" alt="Nikon D40 DSLR Camera and lens" />
            <img src="images/camera2.jpg" alt="Nikon D40 DSLR Camera hanging by straps" />
            <img src="images/camera3.jpg" alt="Nikon D40 DSLR Camera and finger" />
            <img src="images/teddy.jpg" alt="a dog" />
        </div>
    </div>
</div>

3rd option - Good Relations

<span property="gr:name">ACME Executive Anvil</span>

<span rel="foaf:depiction">
    <img src="anvil_executive.jpg" />
</span>

<span property="gr:description">Sleeker than ACME's Classic Anvil, the Executive Anvil
is perfect for the business traveler looking for something to drop from a height.
</span>

<span rel="gr:hasPriceSpecification">
    <span typeof="gr:UnitPriceSpecification">
    Regular price: $179.99
    Sale price: $<span property="gr:hasCurrencyValue" content="119.99">119.99</span>
      (Sale ends <span property="gr:validThrough" content="2010-5-11T23:59:59">
      5 November!</span>)
      <span property="gr:hasCurrency" content="USD" ></span>
    </span>
</span>

Testing

hproduct.html Google Rich Snippets Testing Tool

Google Shopping Feeds

Submit 1 feed for all products in the store
Syncronize daily, weekly, any schedule
Google pulls from url on your site - No uploading
Products are valid for 30 days

Atom Feed

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:g="http://base.google.com/ns/1.0">
<title>Vandalay Industries</title>
<link href="http://vandalay.com/store" rel="alternate" type="text/html" />
<updated>2010-10-14 00:00:00 +0000</updated>

Atom Feed - Individual Item

<entry>
    <title>Imported Grape</title>
    <id>1048</id>
    <link>http://vandalay.com/store/imported_grape</link>
    <summary>Grapes imported from North Dakota</summary>
    <updated>2010-10-14 00:00:00 +0000</updated>
    <g:price>11.20</g:price>
    <g:condition>new</g:condition>
    <g:brand>Vandalay Fruit</g:brand>
    <g:mpn>VF-GRAPE</g:mpn>
    <g:weight>2.00</g:weight>
    <g:image_link>http://vandalay.com/products/1048-large.jpg</g:image_link>
    <g:product_types>Food &gt; Fruit &gt; Grapes</g:product_types>
</entry>

Atom Feed - Enhanced Item

<entry>
    <title><![CDATA[
            Imported Grape
            ]]>
    </title>
    <id>1048</id>
    <link>http://vandalay.com/store/imported_grape?utm_campaign=google_shopping&amp;utm_medium=shopping&amp;utm_source=google</link>
    <summary><![CDATA[
            Grapes imported from North Dakota
            ]]>
    </summary>
    <updated>Thu, 17 Jun 2010 15:34:18 -0700</updated>
    <g:price>11.20</g:price>
    <g:condition>new</g:condition>
    <g:brand>Vandalay Fruit</g:brand>
    <g:mpn>VF-GRAPE</g:mpn>
    <g:weight>2.00</g:weight>
    <g:image_link>http://vandalay.com/products/1048-large-m1259091235.jpg</g:image_link>
    <g:image_link>http://vandalay.com/products/1048-side-m1259091235.jpg</g:image_link>
    <g:product_types>Food &gt; Fruit &gt; Grapes</g:product_types>
    <g:product_types>Gifts &gt; Sweets</g:product_types>
</entry>

Canonical URLs

Possible Variatons:

http://vandalay.com/store/?product_id=1048

http://vandalay.com/store/product/1048/grapes/fruit

http://vandalay.com/store/fruit/grapes/p1048

http://vandalay.com/store/ProductDetail.aspx?type=product&display=detail&guid=3577B5EF-523F-4946-9734-C974CEA6C646

http://vandalay.com/store/imported_grape

One URL to rule them all:

Resources

microformats.org http://www.google.com/products http://www.google.com/merchants Google microformats reference Google Shopping Data Feed Reference