@jonoalderson

What’s the big deal about semantic

<acronym title=“Hypertext

markup language”>HTML

</acronym>?

@jonoalderson

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

Schmooze

@jonoalderson

Squeeze

@jonoalderson

@jonoalderson

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

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

So what’s the deal with Geocities?

• Pro tip: Geocities was a little thin on semantic value…

@jonoalderson

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

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

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

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

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

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

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

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

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

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

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

Schema

@jonoalderson

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

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

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

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.

Thing

Place

CivicStructure

PerformingArtsTheatre

(OperaHouse)

@jonoalderson

Schema – Practical Application

• Search verticals, rich snippets, mashups, crawlers, platforms, functionality, context, exposure, clickthrough, links

• Support for everything* *beach, pond, movietheatre, aquarium, dancegroup,

optician, tatooparlor, nutritionalinformation, literaryevent…

@jonoalderson

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

HTMLTag 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

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

Resources• Microformat Cheat Sheet:

http://www.addedbytes.com/cheat-sheets/microformats-cheat-sheet/

@jonoalderson

Jono Alderson

www.jonoalderson.com

jonoalderson@gmail.com

@jonoalderson