Schema for Bloggers: Structured Content, Demystified

3,614 views

Published on

My Session from #NMX (New Media Expo) 2014 in Las Vegas, NV.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,614
On SlideShare
0
From Embeds
0
Number of Embeds
2,544
Actions
Shares
0
Downloads
13
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Schema for Bloggers: Structured Content, Demystified

  1. 1. Schema for Bloggers: Structured Content, Demystified mitch canter, @studionashvegas http://www.binarychurch.com #nmxschema
  2. 2. Who is this guy?
  3. 3. Mitch Canter, International Man of Mystery Senior Designer, Medicare.com Chief Creative Mercenary, studionashvegas.com Blogger, binarychurch.com International Speaker
  4. 4. An Introduction
  5. 5. The Web Has Two Audiences
  6. 6. As content creators, we have to Write For Both
  7. 7. …However…
  8. 8. We ultimately have Two Options
  9. 9. “Keyword Stuffing”
  10. 10. …which is best done through Schema
  11. 11. <schema> HTML Tags that webmasters can use to markup their pages in ways recognized by major search providers.
  12. 12. <schema> Defining human-readable content into search-engine readable content.
  13. 13. This is done through Microdata
  14. 14. microdata Microdata is an HTML5 specification that allows machine-readable data to be embedded in HTML documents.
  15. 15. Let’s look at an Example
  16. 16. It could get lucky, but why Take Chances?
  17. 17. The better option is to Define The Information
  18. 18. Implementing Schema
  19. 19. Step 1 Define The Format
  20. 20. 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>
  21. 21. 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>
  22. 22. itemscope Creates a new “item” – a group of name-value pairs associated with microdata and schematic markup.
  23. 23. itemtype An attribute that defines the microdata vocabulary in use.
  24. 24. Step 2 Assign The Properties
  25. 25. 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>
  26. 26. itemprop An attribute that labels the properties of the content
  27. 27. 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>
  28. 28. 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>
  29. 29. 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>
  30. 30. 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>
  31. 31. 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>
  32. 32. 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>
  33. 33. Types of Schema
  34. 34. Article An article, such as a news article or piece of investigative report. http://www.schema.org/Article
  35. 35. Review A review of a restaurant, movie, or store. http://www.schema.org/Review
  36. 36. Event An event happening at a certain time in a certain location. http://www.schema.org/Event
  37. 37. Person A person (living, dead, undead, or fictional). http://www.schema.org/Person
  38. 38. 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
  39. 39. 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
  40. 40. Last question: Why bother with Google+
  41. 41. 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>
  42. 42. This allows you to claim your Google Authorship
  43. 43. …which gets you a Rich Text Snippit
  44. 44. Step 1 (if your site and email address share a domain): Verify Your Email https://plus.google.com/authorship
  45. 45. Step 1 (if your have a Gmail or Outlook address): Link to Google+ Profile <a href=“[profile-url]?rel=author”>Real Name</a>
  46. 46. Step 2 Link to Site in Google+ …under “Contributes To…”
  47. 47. Questions?
  48. 48. Twitter: http://www.twitter.com/studionashvegas/ Google+: http://plus.google.com/+MitchCanter Facebook: https://www.facebook.com/mitchcanterspeaks URL: http://www.binarychurch.com Design: http://www.studionashvegas.com Thanks!

×