1.
Microformats
and SEO
Glenn Jones
Fresh Egg – Worthing
28 Oct 2011

2.
Microformats
<p class="vcard">
<a class="fn url"
href="http://glennjones.net/">
Glenn Jones</a>
</p>
A method of marking up data with the pre-existing attributes of HTML. Uses
fixed schemes developed by an online community

3.
RDFa
<p xmlns:v="http://rdf.data-
vocabulary.org/#"
typeof="v:Person">
<a href="http://glennjones.net/"
rel="v:url"
property="v:name">Glenn
Jones</a>
</p>
A method of marking up data with custom attributes and namespaces.

4.
Microdata (HTML5)
<p itemscope
itemtype="http://data-
vocabulary.org/Person">
<a href="http://glennjones.net/"
itemprop="url name">Glenn
Jones</a>
</p>
A method of marking up data with the HTML5 attributes.

5.
Microformats
vs
Microdata/RDFa

6.
http://www.google.com/landing/recip
es/

7.
Let’s mark-up a Yorkshire Pudding recipe page

8.
http://codebits.glennjones.net/semantic/hrecipe.html

9.
hRecipe - http://microformats.org/wiki/hrecipe

10.
Recipe
http://www.google.com/support/webmasters/bin
/answer.py?hl=en&answer=173379

11.
Add the top level class around the
HTML containing your data
<section class="hrecipe">
…
</section>

12.
Add class names to the elements
within your HTML
<section class="hrecipe">
<h1 class="fn">Yorkshire
Puddings</h1>
…
</section>

13.
One property can
live inside another
<p class="summary">Makes
<span class="yield">6 good size
Yorkshire pudding</span>, the way
my mum taught me
</p>

14.
A property can have child properties
<li class="ingredient">
<span class="amount">75g</span>
<span class="name">plain flour</span>
</li>

15.
A property can take data
from the text of an element or
another attribute
<img class="photo"
src="yorkshire-puddings.jpg" />

16.
ISO DateTime
<date>T<time>Z<timezone>
2011-10-27T20:41Z-1:00
<p class="published">Published on
<span class="value-title"
title="2011-10-27">27 Oct 2011
</span></p>

17.
ISO Duration
P<date>T<time>
PT0H10M is a duration of 10 minutes
<li class="prepTime">Preparation
<span class="value-title"
title="PT0H10M">10mins</span
</li>

18.
http://www.google.com/webmasters/tools/richsnippets

19.
Compound microformats
hRecipe
Review Author
hreview-aggregate hCard

20.
hReview-aggregate
<p class="review hreview-aggregate">
<span class="rating">
<span class="average">4.0</span>
stars based on
<span class="count">35</span>reviews
</span>
</p>

21.
Using a star image
<span class="average ">
<img
class="value-title"
title="4.5"
src="images/4-5stars.png" />
</span>

22.
Author hCard
<p class="hcard author published">
Published on
<span class="value-title" title="2011-10-
27">27 Oct 2011</span> by
<a class="fn url"
href="http://glennjones.net">Glenn Jones
</a>
</p>

23.
http://www.google.com/support/webmasters/bin/answer.
py?answer=1229920

24.
rel=me and rel=author
<a rel="me"
href="http://glennjones.net">Glenn Jones
</a>

25.
Interlinking sites
Recipe site
rel=author rel=me
Author Google
Recipe Profile Profile

26.
Thank you
and questions?

27.
Creative Commons Attribution-Non-Commercial 2.0
UK: England & Wales Licence.
Copyright Glenn Jones 2011
www.glennjones.net

28.
Thanks to the following for their photos
http://www.flickr.com/photos/dithie/4106528495/