Post on 26-Jan-2015
description
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