The document discusses how to add structured data or schema to web pages in order to provide metadata to search engines like Google. It explains that schema allows you to define content in a way that is readable to both humans and search engines. The document provides examples of adding schema using microdata to articles. It outlines the steps to define the schema format and assign properties. Finally, it discusses how adding schema through Google+ allows you to claim authorship of content and get rich snippets in search results.

1. Get Structured, Get Sexy…
Get Schema
mitch canter, @studionashvegas
http://www.mitchcanter.me
#bcn13schema

2. Who is this guy?

3. Mitch Canter, International Man of Mystery
Senior Designer, Medicare.com
Chief Creative Mercenary, studionashvegas.com
Theme Developer
International Speaker

4. An Introduction

5. The Web Has
Two Audiences

8. As content creators, we have to
Write For Both

9. …However…

11. We ultimately have
Two Options

13. “Keyword Stuffing”

15. …which is best done through
Schema

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

17. <schema>
Defining human-readable content into
search-engine readable content.

18. This is done through
Microdata

19. microdata
Microdata is an HTML5 specification that allows
machine-readable data to be embedded in
HTML documents.

20. Let’s look at an
Example

24. It could get lucky, but why
Take Chances?

25. The better option is to
Define The Information

26. Implementing
Schema

27. Step 1
Define The Format

28. 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>

29. 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>

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

31. itemtype
An attribute that defines the
microdata vocabulary in use.

32. Step 2
Assign The Properties

33. 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>

34. itemprop
An attribute that labels the properties of the content

35. 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>

36. 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>

37. 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>

38. 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>

39. 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>

40. 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>

41. Types of Schema

42. Article
An article, such as a news article
or piece of investigative report.
http://www.schema.org/Article

43. Review
A review of a restaurant, movie, or store.
http://www.schema.org/Review

44. Event
An event happening at a certain time
in a certain location.
http://www.schema.org/Event

45. Person
A person (living, dead, undead, or fictional).
http://www.schema.org/Person

46. Embeds
Video, Audio, or other non-text embeddable media.
(note: each media has a separate schema)
http://www.schema.org/AudioObject
http://www.schema.org/VideoObject

47. Creative
Books, Movies, Recipes, or other creative works.
(note: each type has a separate schema)
http://www.schema.org/Book
http://www.schema.org/Movie
http://www.schema.org/Recipe

48. Last question: Why bother with
Google+

49. 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>

50. This allows you to claim your
Google Authorship

51. …which gets you a
Rich Text Snippit

52. Step 1 (if your site and email address share a domain):
Verify Your Email
https://plus.google.com/authorship

53. Step 1 (if your have a Gmail or Outlook address):
Link to Google+ Profile
<a href=“[profile-url]?rel=author”>Real Name</a>

54. Step 2
Link to Site in Google+
…under “Contributes To…”

55. Questions?

56. Twitter: http://www.twitter.com/studionashvegas/
Google+: http://plus.google.com/+MitchCanter
Facebook: https://www.facebook.com/mitchcanterspeaks
URL: http://www.mitchcanter.me
Design: http://www.studionashvegas.com
Thanks!