how to implement semantic html & structured data by jon henshaw

HOW TO

IMPLEMENT

SEMANTIC <HTML>

&

STRUCTURED DATA

#

Jon Henshaw

Raven Tools

@RavenJon

#SMX #21C

October 2, 2013

#

Semantic HTML is about

communicating the context of the page

RavenJon

<html lang="en-US">

RavenJon

Geo-Tag Generator

http://clck.io/geotag

RavenJon

http://clck.io/opengraph

RavenJon

Open Graph Generator

Help bots by using

semantic elements

RavenJon

Header

Footer

Nav

Main

Section

Article

Aside

RavenJon

RavenJon

header

nav

footer

article aside

Section = Generic

Article = Syndication

RavenJon

<body>

<header>

<h1>Title of Site</h1>

<nav>

<ul>

<li><a href="">Nav Item 1</a></li>



</ul>

</nav>

</header>

<main>

<article>

<h2>Article Title</h2>

<p>Greatest content ever!</p>

</article>

<aside>(list of related articles)</aside>

</main>

<footer>

<p>Copyright Whatevs</p>

</footer>

</body>

RavenJon

H1-h6

hgroup

RavenJon

<header>

<hgroup>

<h1>Main Title</h1>

<h2>Subheading</h2>

</hgroup>

</header>

RavenJon

http://clck.io/validate

RavenJon

Validate your code

microformats vs. RDFa vs. schema.org

RavenJon

FACT: Using schema.org is the same as

making sweet, sweet love to Googlebot

RavenJon

1. itemscope

2. itemtype

3. itemprop

Three main attributes

RavenJon

There are top level types

RavenJon

Specific types inherit properties

RavenJon

http://schema.org/Movie

<div itemscope itemtype="http://schema.org/Movie">

<h1><span itemprop="name"><strong>Matrix</strong></span></h1>

<p itemprop="description">A computer hacker learns...</p>

</div>

RavenJon

types have properties that have types

RavenJon

http://schema.org/Person




<p itemprop="director" itemscope itemtype="http://schema.org/Person">

Directed by: <span itemprop="name">Joe Director</span></p>

<p>Starring:<span itemprop="actors" itemscope itemtype="http://schema.org/Person

<span itemprop="name">Jane the Actress</span></span></p> </div>

</div>

RavenJon

Related Properties

The review property is listed as a

valid property on schema.org/Movie.

How do you add it to the movie?

RavenJon

http://schema.org/Review




<p itemprop="director" itemscope itemtype="http://schema.org/Person">

Directed by: <span itemprop="name">Joe Director</span></p>

<p>Starring: <span itemprop="actors" itemscope itemtype="http://schema.org

<span itemprop="name">Jane the Actress</span></span></p>

<div itemprop="review" itemscope itemtype="http://schema.org/Review">

<p itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating

<meta itemprop="worstRating" content="0"><span itemprop="ratingValue">4</span>

/<span itemprop="bestRating">5</span> stars</p>

</div>

</div>

RavenJon

Supported Elements

Microdata attributes can go into almost any block level element.

The most typical are key semantic and block elements, like

section, article, div, span and p

RavenJon

schema-creator.org

RavenJon

Learn from others

RavenJon

Test your code!

http://clck.io/testschema

RavenJon

Bam!

Find me online

@RavenJon

http://clck.io/gplus

http://raventools.com

RavenJon

http://www.slideshare.net/SearchMarketingExpo

#

see more presentations at:

#

how to implement semantic html & structured data by jon henshaw

Technology