Get Structured, Get Sexy…

Get Schema

mitch canter, @studionashvegashttp://www.mitchcanter.me

#bcn13schema

Who is this guy?

Mitch Canter, International Man of Mystery

Senior Designer, Medicare.comChief Creative Mercenary, studionashvegas.comTheme DeveloperInternational Speaker

An Introduction

Two AudiencesThe Web Has

humans…

…and robots!

Write For BothAs content creators, we have to

…However…

Confused.Sometimes the robots get

Two OptionsWe ultimately have

“Keyword Stuffing”

Structure Our Content…or we

Schema…which is best done through

HTML Tags that webmasters can use to markup their pages in ways recognized by major search providers.

<schema>

Defining human-readable content into search-engine readable content.

<schema>

MicrodataThis is done through

Microdata is an HTML5 specification that allows machine-readable data to be embedded in

HTML documents.

microdata

ExampleLet’s look at an

Event…You’re hosting an

On Your Website……you have the date of the event

Associate The Two?…how does your website

Take Chances?It could get lucky, but why

Define The InformationThe better option is to

SchemaImplementing

Define The FormatStep 1

Define The Format<article>

<img src=“thumbnail.jpg” /><h1>

<a href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Define The Format<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1>

<a href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Creates a new “item” – a group of name-value pairs associated with microdata and schematic markup.

itemscope

An attribute that defines the microdata vocabulary in use.

itemtype

Assign The PropertiesStep 2

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

An attribute that labels the properties of the content

itemprop

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: Author’s Name</p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]”

itemprop=“author”>Author’s Name</a></p><p>Published on Month, Date Year</p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: Cat 1</p>

</article>

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: <span itemprop=“keywords”>

Cat 1</span></p></article>

Assign The Properties<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: <span itemprop=“keywords”>

Cat 1</span></p></article>

Types of Schema

An article, such as a news articleor piece of investigative report.

http://www.schema.org/Article

Article

A review of a restaurant, movie, or store.

http://www.schema.org/Review

Review

An event happening at a certain timein a certain location.

http://www.schema.org/Event

Event

A person (living, dead, undead, or fictional).

http://www.schema.org/Person

Person

Video, Audio, or other non-text embeddable media.(note: each media has a separate schema)

http://www.schema.org/AudioObjecthttp://www.schema.org/VideoObject

Embeds

Books, Movies, Recipes, or other creative works.(note: each type has a separate schema)

http://www.schema.org/Bookhttp://www.schema.org/Moviehttp://www.schema.org/Recipe

Creative

Google+Last question: Why bother with

Why Google+?<article itemscope itemtype="http://schema.org/Article”>

<img src=“thumbnail.jpg” /><h1 itemprop=“name headline”>

<a itemprop=“url” href=“#”>Title</a></h1>

<p>by: <a href=“[plus-url]” itemprop=“author”>Author’s

Name</a></p><p>Published on <span itemprop=“datePublished”>Month, Date

Year</span></p><div class=“entry” itemprop=“articleBody”>

<p>Content</p></div><p class=“categories”>Categories: <span itemprop=“keywords”>

Cat 1</span></p></article>

Google AuthorshipThis allows you to claim your

Rich Text Snippit…which gets you a

Verify Your EmailStep 1 (if your site and email address share a domain):

https://plus.google.com/authorship

Link to Google+ ProfileStep 1 (if your have a Gmail or Outlook address):

<a href=“[profile-url]?rel=author”>Real Name</a>

Link to Site in Google+Step 2

…under “Contributes To…”

Questions?

Thanks!

Twitter: http://www.twitter.com/studionashvegas/Google+: http://plus.google.com/+MitchCanterFacebook: https://www.facebook.com/mitchcanterspeaksURL: http://www.mitchcanter.meDesign: http://www.studionashvegas.com