microformats and seo
TRANSCRIPT
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