Glenn JonesFresh Egg – Worthing28 Oct 2011

Microformatsand SEO

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

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.

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.

Microformats vs

Microdata/RDFa

http://www.google.com/landing/recipes/

Let’s mark-up a Yorkshire Pudding recipe page

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

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

Recipe http://www.google.com/support/webmasters/bin

/answer.py?hl=en&answer=173379

Add the top level class around the HTML containing your data

<section class="hrecipe">

…

</section>

Add class names to the elementswithin your HTML

<section class="hrecipe"><h1 class="fn">Yorkshire

Puddings</h1>…

</section>

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>

A property can have child properties

<li class="ingredient"> <span class="amount">75g</span> <span class="name">plain flour</span></li>

A property can take datafrom the text of an element or

another attribute

<img class="photo" src="yorkshire-

puddings.jpg" />

ISO DateTime

<p class="published">Published on <span class="value-title"

title="2011-10-27">27 Oct 2011</span></p>

<date>T<time>Z<timezone>2011-10-27T20:41Z-1:00

ISO Duration

<li class="prepTime">Preparation <span class="value-title" title="PT0H10M">10mins</span</li>

P<date>T<time>PT0H10M is a duration of 10 minutes

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

Compound microformats

AuthorhCard

Reviewhreview-aggregate

hRecipe

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>

Using a star image

<span class="average "><img

class="value-title" title="4.5"

src="images/4-5stars.png" /></span>

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>

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

rel=me and rel=author

<a rel="me"

href="http://glennjones.net">Glenn Jones </a>

Interlinking sites

Recipe site

RecipeAuthorProfile

GoogleProfile

rel=author rel=me

Thank youand questions?

Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence.

Copyright Glenn Jones 2011www.glennjones.net

http://www.flickr.com/photos/dithie/4106528495/

Thanks to the following for their photos