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

3. 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

4. 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.

5. 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.

6. Microformats
vs
Microdata/RDFa

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

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

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

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

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

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

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

14. 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>

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

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

17. 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>

18. 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>

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

20. Compound microformats
hRecipe
Review Author
hreview-aggregate hCard

21. 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>

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

23. 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>

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

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

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

28. Thank you
and questions?

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

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