Your SlideShare is downloading. ×
0
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Get Structured, Get Sexy... Get Schema!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Get Structured, Get Sexy... Get Schema!

622

Published on

An introduction to schema and microformats, definitions and terminology, and implementing them schema markup into HTML.

An introduction to schema and microformats, definitions and terminology, and implementing them schema markup into HTML.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
622
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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.mitchcanter.me Design: http://www.studionashvegas.com Thanks!

×