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.

1. HACKING THE GOOGLE SNIPPET
2 6 TH S E P T EMB E R 2 0 1 4
Ian Macfarlane
Head of Technical Search
Ian@ianmacfarlane.com
http://ianmacfarlane.com

2. What we’ll cover today
• Introduction to Rich Snippets & microdata
• Exercise – breadcrumb trail (5 mins)
• Nesting microdata
• Exercise – nested microdata (10 - 15 mins)
• Introduction to JSON-LD
• Exercise – JSON-LD (10 - 15 mins)
• Wrapping up

3. A standard Google snippet
Title
URL
Snippet

4. A modern Google snippet
Review Breadcrumb trail
Price Stock
availability

5. Why care about this?

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

7. Appear in new places

8. … or maybe
(if you’re anything like me)
you just enjoying playing around
with shiny new code

9. Creating Rich Snippets

10. How to create Rich Snippets
• It’s simple
• Just add a little bit of extra code to your web pages
• Tells search engines what the content is about

11. Which format?
data-vocabulary.org
MICRODATA

12. Yep, pretty much this…

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

14. What does microdata look like?

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”

22. Nesting objects

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

27. Exercise 2
• Product with reviews
• Link: http://goo.gl/IiRPdC
• Password: “devon”

28. Introducing JSON-LD

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>

33. Exercise #3 – trailing comma fun
JSON-LD

34. Exercise 3
• JSON-LD exercise
• Link: http://goo.gl/z64oRy
• Password: “devon”

35. Which format should I use?

36. Which format?
data-vocabulary.org
MICRODATA

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

40. Exercise #4 – if we have time
Mark up your own site

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