Semantic Mark-Up A Quick Introduction
What is semantic mark-up?• It is meta data: information about information• It tells search engines what a piece of content...
Semantic mark-up turns this…:
…in to this:
Via this:<div class="group business_title hreview-aggregate">    <div class="span4">           <h2 class="breadcrumbs" ite...
Before June 2nd 2011• Three competing standards for semantic  markup:  – Microformats: simple, straightforward, but limite...
Then:
Specifically:
And the winner is…:
Available schemas:•   Creative Works•   Multimedia Objects•   Events•   Organisations & People•   Places/locations/local b...
What should we do?• Implement Review schema where applicable• Mark up address data with Location schema• Mark up events (w...
The future of on-site SEO:<div itemscope itemtype="http://schema.org/Event">  <a itemprop="url" href="nba-miami-philidelph...
Questions?
Upcoming SlideShare
Loading in …5
×

Introduction to Semantic HTML mark-up

1,573 views

Published on

Slides for a company presentation aimed at providing a high-level introduction to semantic HTM.

Published in: Technology, Spiritual

Introduction to Semantic HTML mark-up

  1. 1. Semantic Mark-Up A Quick Introduction
  2. 2. What is semantic mark-up?• It is meta data: information about information• It tells search engines what a piece of content is about• And that allows SEs to do cool stuff with it – Specifically: Rich Snippets in SERPs
  3. 3. Semantic mark-up turns this…:
  4. 4. …in to this:
  5. 5. Via this:<div class="group business_title hreview-aggregate"> <div class="span4"> <h2 class="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://lookaly.com/belfast" itemprop="url"> <span itemprop="title">Belfast</span></a> <span><a href="http://lookaly.com/belfast/b2b/it-solutions" itemprop="url"><span itemprop="title">IT Solutions</span></a></span></h2> <h1><span class="item"><span class="fn">Aetopia</span></span>, Belfast</h1> <div class="group"> <ul class="star-rating rating left"> <li class="current-rating" style="width:20%;"><span class="average">1</span>/<span class="best">5</span> Stars</li> </ul> <span class="hide">based on <span class="count">1</span> reviews.</span> <div class="myreview"> <a href="http://lookaly.com/p/aetopia-belfast/#review-9458">Your rating</a> <ul class="small-star-rating left"> <li class="current-rating" style="width:20%;">1/5 stars.</li> </ul> </div> </div>
  6. 6. Before June 2nd 2011• Three competing standards for semantic markup: – Microformats: simple, straightforward, but limited in scope and scalability – RDFa: W3C official, advanced & scientific, but very complicated – Microdata: intermediate version, part of the HTML5 spec, incomplete
  7. 7. Then:
  8. 8. Specifically:
  9. 9. And the winner is…:
  10. 10. Available schemas:• Creative Works• Multimedia Objects• Events• Organisations & People• Places/locations/local businesses• Products & offers• Reviews• …and more coming
  11. 11. What should we do?• Implement Review schema where applicable• Mark up address data with Location schema• Mark up events (webinars, conferences, etc) with Events schema• Find plugins/extensions that do this for us …or get them built and Pierce-branded!
  12. 12. The future of on-site SEO:<div itemscope itemtype="http://schema.org/Event"> <a itemprop="url" href="nba-miami-philidelphia-game3.html"> NBA Eastern Conference First Round Playoff Tickets: Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1) </a> <time itemprop="startDate" datetime="2011-04-21T20:00"> Thu, 04/21/11 8:00 p.m. </time> <div itemprop="location" itemscope itemtype="http://schema.org/Place"> <a itemprop="url" href="wells-fargo-center.html"> Wells Fargo Center </a> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressLocality">Philadelphia</span>, <span itemprop="addressRegion">PA</span> </div> </div> <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> Priced from: <span itemprop="lowPrice">$35</span> <span itemprop="offerCount">1,938</span> tickets left </div></div>
  13. 13. Questions?

×