• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to Semantic HTML mark-up

Introduction to Semantic HTML mark-up



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

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



Total Views
Views on SlideShare
Embed Views



4 Embeds 27

http://www.stateofsearch.com 24
http://sos.dev42.nl 1
http://www.slashdocs.com 1
http://www.docshut.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Introduction to Semantic HTML mark-up Introduction to Semantic HTML mark-up Presentation Transcript

    • 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 is about• And that allows SEs to do cool stuff with it – Specifically: Rich Snippets in SERPs
    • Semantic mark-up turns this…:
    • …in to this:
    • 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>
    • 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
    • Then:
    • Specifically:
    • And the winner is…:
    • Available schemas:• Creative Works• Multimedia Objects• Events• Organisations & People• Places/locations/local businesses• Products & offers• Reviews• …and more coming
    • 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!
    • 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>
    • Questions?