Schema for Bloggers: Structured Content, Demystified
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Schema for Bloggers: Structured Content, Demystified

on

  • 2,549 views

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

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

Statistics

Views

Total Views
2,549
Views on SlideShare
739
Embed Views
1,810

Actions

Likes
4
Downloads
10
Comments
0

11 Embeds 1,810

http://www.mitchcanter.com 1165
http://mitchcanter.com 267
http://www.binarychurch.com 115
http://fandommarketing.com 69
http://robertmarchwinski.com 68
http://www.robertmarchwinski.com 60
http://snv.dev 23
http://medicare.dev 23
http://10.0.1.3 13
http://feeds.feedburner.com 4
http://snv.local 3
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Schema for Bloggers: Structured Content, Demystified Presentation Transcript

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