This document discusses how to add rich snippets and structured data to web pages to enhance search engine results. It covers microdata and JSON-LD formats for Schema.org vocabulary. Exercises are provided to practice adding breadcrumb trails, nested data, and JSON-LD. The benefits of rich snippets for increasing traffic are noted.
6. How does it increase traffic?
• Rich Snippets catch people’s attention
• 15%-30% traffic uplift not uncommon
• That’s without any increase in rankings
13. What data types does Google support?
• Apps
• Articles
• Authors
• Business phone number
• Breadcrumbs
• Events
• Local business*
• Organisation logo
• People
• Products
• Publisher (link to G+)
• Recipes
• Review
• Reviews
• Site search
• Videos
15. Here’s some HTML …
<div>
<h1>iPhone 6</h1>
<div>Latest overpriced shiny thing from
Apple</div>
<img src="http://www.apple.com/iphone6.png">
</div>
16. Microdata is just adding some new properties
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">iPhone 6</h1>
<div itemprop="description">Latest overpriced
shiny thing from Apple</div>
<img src="http://www.apple.com/iphone6.png"
itemprop="image">
</div>
17. Three key attributes
• itemscope
– Defines the scope of the object
– All itemprop values inside this scope relate to the object
• itemtype
– Defines the type of object, e.g. a Product or Review
– Value is a URL e.g. http://schema.org/Product
18. Three key attributes
• itemprop
– Defines a property of the item (e.g. name, price, etc.)
– There are a variety of types in Schema.org
• Boolean
• Date
• Number
• Text
• Time
– A property can also be another Schema.org object
(we’ll look at this a bit later)
19. Here’s that example again
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">iPhone 6</h1>
<div itemprop="description">Latest overpriced
shiny thing from Apple</div>
<img src="http://www.apple.com/iphone6.png"
itemprop="image">
</div>
20. Exercise #1 – let’s start off simple
Breadcrumb trail
21. Exercise 1
• Mark up a breadcrumb trail
• Link: http://goo.gl/JKRlPE
• Password: “devon”
23. Nesting objects
• You can also nest one object inside another
• A nested object is a property of the parent object
24. Example of nesting
<div itemscope itemtype="http://schema.org/Event">
<h1 itemprop="name">Digpen 2015</h1>
<div itemprop="description">The nicest little
web conference in the West</div>
<div itemprop="location" itemscope
itemtype="http://schema.org/City">
<span itemprop="name">Plymouth</span>
</div>
</div>
25. You can nest multiple times
Hotel
AggregateRating
(average review) PostalAddress
Country
Parent
Organisation
PostalAddress
Country
26. Exercise #2 – getting more complex
Product with reviews
29. What is JSON-LD
• A format for linked data
• Uses JSON syntax – simple key:value pairs
• Instead of marking up existing on-page content, you
embed it via a <script> tag
30. <script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Schema.org type goes here",
"property name": "property value"
}
</script>
Simple JSON-LD
Watch out for
trailing commas!
31. Simple JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Event",
"name": "Digpen",
"description": "The nicest little web conference in
the West"
}
</script>
32. Nesting JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Event",
"name": "Digpen",
"description": "The nicest little web conference in the West",
"location": {
"@type": "City",
"name": "Plymouth"
}
}
</script>
37. Which format should I use?
• Microformats provide limited data
• Microformats 2 not supported by search engines
• RDFa usually ok if you use the Schema.org versions
– However, industry moving towards newer formats
38. Which format should I use?
Use Schema.org…
… in one of these
two formats
MICRODATA
39. Which format should I use?
• Microdata
– Simpler to code – just add properties to existing HTML
– Reduces code duplication (especially with large text values)
• JSON-LD
– Nesting is easier if item properties are all over the page
– Less error prone to breaking with page layout tweaks
41. Thank you
• Ian Macfarlane
• ian@ianmacfarlane.com
42. Documentation
• Schema.org specification
– The most important specification, supported by Google, Bing, Yahoo! & Yandex
• Google’s Rich Snippets documentation
– Documentation including list of supported formats
• Google’s Rich Snippets Course List
– More documentation and information on more supported formats e.g. sitelinks search
• Google’s customer service numbers specification
– Documentation on how to specify your company’s phone numbers to Google
• Google Publisher Markup
• Documentation on linking your Google+ profile to your website
43. Tools for testing
• Rich Snippets Testing Tool
• Gives snippet preview
• Corporate Contacts Tester
• Supports JSON-LD
• Google Webmaster Tools
• Shows you all structured data
Google has found, including
errors
• JSON-LD Playground
• Live error checking as you
type
• Bing Markup Validator
• Check in Bing
• Yandex data validator
• Russian search engine
Editor's Notes
Title – uses the <title> tag
Snippet – uses the <meta name=“description“ content=“xx”> tag