A brief history of the web, browser capabilities and semantic HTML - from Geocities to Microformats, Schema and beyond, and how this affects SEO; both today and in the future.

1. What’s the big deal about semantic
<acronym title=“Hypertext
markup language”>HTML
</acronym>?
@jonoalderson

2. The reality of SEO?
• Getting the big things that make the difference done
is hard.
• Getting little things done is easier, but these lack
impact.
• You have two options (do both)…
@jonoalderson

3. Schmooze
@jonoalderson

4. Squeeze
@jonoalderson

5. @jonoalderson

6. There are HTML tags for different purposes
• Things like…





<p>
<h1>, <h2>, <h3>…
<em> (or <i>)
<ul>, <ol> and <li>
<dl>, <dfn>, <abbr>, <address>, <cite>, <ins>, <del>
• It’s like (it is!) grammar.
• Using these tags provides and clarifies meaning.
@jonoalderson

7. Adding context
• <div>John said, “hello Jane”.</div>
• <p>John said, <q
cite="http://example.com/chatlog/123">hello
Jane</q>.</p>
• What happens if/when this becomes standard?
• This kind document markup has been part of HTML for
years.
@jonoalderson

8. So what’s the deal with Geocities?
• Pro tip: Geocities was a little thin on semantic value…
@jonoalderson

9. Code vs. Presentation
• Back in the bad old days, using semantic markup was
design-prohibitive.
• HTML Tags have default visual characteristics and
behaviours.
• Bastardising flexible tags (generally <table> and <br>
tags) was easier than using semantically correct tags.
•
Pro tip: Don’t hate tables – tabular data can be great, readable, linkable content.
@jonoalderson

10. Validation?
• This is about much more than error-free valid HTML
– it’s about using the language correctly and
contextually.
• There are overlaps, and validation is important – but
this is about grammar, rather than spelling.
•
Pro tip: W3 has galleries for websites which validate against HTML, CSS and
accessibility standards which link back to the source.
@jonoalderson

11. Capitalism saved the day
• Markup and presentation are separate (mostly); we can ensure that
content can be semantically accurate and attractive.
• There are no scenarios in which SEO should conflict with design, usability
or accessibility.
@jonoalderson

12. So what’s next?
• We can help search engines and software to
understand the nature of specific chunks of semantic
HTML and content.
• …But these are the tools for creating an
encyclopaedia, rather than poetry.
• <productinfo>Blue Widget, £19.99, 4.5/5
ratings</productinfo>
@jonoalderson

13. The Challenge…
• “What’s the relationship between the life expectancy in Leeds and
the number of SEO agencies operating in the city over the last
decade?”
• All of this data exists… but in different formats - human-readable
data and machine-readable data.
• This distinction is the single biggest bottleneck for the evolution of
the web.
• “We all know that we have to produce a human-readable version of
the thing... why not use that as the primary source?”
 Dan Connolly, W3, 2000
@jonoalderson

14. Microformats
• Microformats.org launches in 2005, providing
common approaches to adding meaningful relational
markup.
• Using the tools already at hand (HTML class
attributes), it allows us to add ‘bigger’ and
connected semantic content.
@jonoalderson

15. Addresses
• The Carriageworks
The Electric Press, 3 Millennium Square, Leeds, LS2 3AD
• We have sufficient human experience to interpret this
address and decode the components.
• Is the street ‘The Electric Press’?
• In order to progress, every piece of kit needs to be able
to explicitly understand each component of the address
markup.
@jonoalderson

16. hCard
<div id=“vcard-the-carriageworks” class=“vcard”>
<h1 class=“org fn n”>The Carriageworks</h1>
<div class=“adr”>The Electric Press
<span class="street-address"> 3 Millennium Square </span>,
<span class=“locality”>Leeds</span>,
<span class=“postal-code”> LS2 3AD</span>.
<div><abbr title=“Telephone number”>Tel</abbr>: <span
class=“tel”>0113 224 3801</span></div>
</div>
</div>
@jonoalderson

17. What’s this achieve?
• Practical applications:
 Build software or search engines to find and/or process all occurrences
of X
• This is game-changing, but not significantly commercially
viable or exciting…
• Few systems supported this, so nobody took the time to
implement it. Catch 22?
• Until Google came in, introduced Rich Snippets (based on
microformats) in May 12, 2009, and started an arms race.
@jonoalderson

18. OMG!
•
Reported clickthrough rate increases of up to 30%.
•
This is no longer an abstract pipe-dream about connectivity – it’s
real, now, commercial and growing.
@jonoalderson

19. Microformatting vs. OGP
• Facebook have been doing similar things with the Open
Graph Protocol.
• OGP works at page-level, and allows pages to be more
richly and accurately represented in the social graph (on
Facebook walls, in posts, etc.).
• You can use both together.
• But…
• Both of these approaches are provider-specific and tied
to their services.
@jonoalderson

20. Schema
@jonoalderson

21. Schema
• In July 2011, Google, Bing and Yahoo announce a
partnership in the same spirit as Sitemaps.org.
• A formal, semantic and infinitely extensible grammar
designed to allow for and provide explicit markup for
every type of everything.
• This already plays a part of rich snippets, and is gradually
replacing microformats in common usage.
•
Pro tip: You can combine standard HTML meta, OGP meta and schema meta into single tags.
@jonoalderson

22. Schema Overkill?
• Schema is the tip of the iceberg of a wider
movement and evolution.
• It’s a means to an end, and it’s the beginning of
something bigger (web 3.0).
• It’s only one tool from the kit – use it alongside
OGP, normal meta and semantic HTML tags.
@jonoalderson

23. Schema - Restaurant
<div itemscope itemtype="http://schema.org/Restaurant">
<span itemprop="name">GreatFoodDeals</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">3</span> stars - based on <span itemprop="reviewCount">150</span> reviews
</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">123 Example Road</span>
<span itemprop="addressLocality">Trumpton</span>,
<span itemprop="addressRegion">Noddy County</span>
<span itemprop="postalCode">12345</span>
</div>
<span itemprop="telephone">(123) 456-7890</span>
<a itemprop="url" href="http://www.greatfooddeals.com">www.greatfooddeals.com</a>
Hours: <meta itemprop="openingHours" content="Mo-Sa 09:00-17:30">Mon-Sat 9am - 5:00pm
Categories: <span itemprop="servesCuisine"> Indian </span>
Price Range: <span itemprop="priceRange">£££</span>
</div>
@jonoalderson

24. Schema – Hierarchies of classification
•
•
Entities that have a somewhat fixed, physical
extension.
A public structure, such as a town hall or concert
hall.
•
A theatre or other performing art centre.
•
This one doesn’t exist… yet.
@jonoalderson

25. Schema – Practical Application
• Search verticals, rich
snippets, mashups, crawlers, platforms, functionality,
context, exposure, clickthrough, links
• Support for everything*
 *beach, pond, movietheatre, aquarium, dancegroup, optici
an, tatooparlor, nutritionalinformation, literaryevent…
@jonoalderson

26. When?
• This all exists now, and you can do it now; this is
widely supported and relatively straight-forward.
• It doesn’t require mass re-engineering – the whole
point is that you only need to mark up the existing
‘human’ information and presentation.
@jonoalderson

27. HTML
Tag
Description
<article>
Defines an article
<details>
Defines additional details that the user can view or hide
<summary>
Defines a visible heading for a <details> element
<figure>
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>
Defines a caption for a <figure> element
<footer>
Defines a footer for a document or section
<header>
Defines a header for a document or section
<hgroup>
Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark>
Defines marked/highlighted text
<nav>
Defines navigation links
<section>
Defines a section in a document
<time>
Defines a date/time
@jonoalderson

28. Immediate Actions
• Mark up simple content semantically to enrich context and
get incremental relevance, traffic, exposure and links.
• When you make content recommendations, write the code!
• Invest in marking up templates (‘page types’) with Schema
data.
• Start thinking about HTML 5, too!
• Invest in extending schema itself where your
products, services or business isn’t represented (and
evangelise to get links).
@jonoalderson

29. Resources
•
Microformat Cheat Sheet:
http://www.addedbytes.com/cheat
-sheets/microformats-cheat-sheet/
@jonoalderson

30. Jono Alderson
jonoalderson@gmail.com
@jonoalderson
www.jonoalderson.com
@jonoalderson