how to implement semantic html & structured data by jon henshaw
Post on 26-Jan-2015
114 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
<meta name="geo.region" content="US-TN" />
<meta name="geo.placename" content="Nashville" />
<meta name="geo.position" content="37.09024;-95.712891" />
<meta name="ICBM" content="37.09024, -95.712891" />
RavenJon
Geo-Tag Generator
http://clck.io/geotag
RavenJon
<meta property="og:locale" content="en_US"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="7 Critical Questions for SEO"/>
<meta property="og:description" content="To squeeze..."/>
<meta property="og:url" content="http://raventools.com/article/"/>
<meta property="og:site_name" content="Raven Internet Marketing Tools"/>
<meta property="og:image" content="http://raventools.com/keywords.png"/>
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>
<li><a href="">Nav Item 2</a></li>
<li><a href="">Nav Item 3</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
<div itemscope itemtype="http://schema.org/Movie">
<h1><span itemprop="name"><strong>Matrix</strong></span></h1>
<p itemprop="description">A computer hacker learns...</p>
<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
<div itemscope itemtype="http://schema.org/Movie">
<h1><span itemprop="name"><strong>Matrix</strong></span></h1>
<p itemprop="description">A computer hacker learns...</p>
<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:
#
top related