hacking the google snippet - digpen 7 workshop
DESCRIPTION
These are the slides for a workshop run at the Digpen web conference on 26th September 2014. Discover the different types of structured markup you can embed within web pages, and how to use them to control how your website appears in Google’s listings, with Ian Macfarlance, DigitasLBi's Head of Technical Search. Understand the different formats and data types available, the benefits of using them, and get your hands dirty writing and testing some real code examples.TRANSCRIPT
HACK ING THE GOOGLE SN IPPET2 6 T H S E P T E M B E R 2 0 1 4
Ian MacfarlaneHead of Technical Search
[email protected]://ianmacfarlane.com
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
A standard Google snippetTitle
URL
Snippet
A modern Google snippet
Review
Breadcrumb trail
Price
Stock availability
Why care about this?
How does it increase traffic?
• Rich Snippets catch people’s attention
• 15%-30% traffic uplift not uncommon
• That’s without any increase in rankings
Appear in new places
… or maybe
(if you’re anything like me)
you just enjoying playing around with shiny new code
Creating Rich Snippets
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
Which format?
data-vocabulary.org
MICRODATA
Yep, pretty much this…
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
What does microdata look like?
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>
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>
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
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)
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>
Exercise #1 – let’s start off simple
Breadcrumb trail
Exercise 1
• Mark up a breadcrumb trail
• Link: http://goo.gl/JKRlPE
• Password: “devon”
Nesting objects
Nesting objects
• You can also nest one object inside another
• A nested object is a property of the parent object
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>
You can nest multiple times
Hotel
AggregateRating (average review) PostalAddress
Country
Parent Organisation
PostalAddress
Country
Exercise #2 – getting more complex
Product with reviews
Exercise 2
• Product with reviews
• Link: http://goo.gl/IiRPdC
• Password: “devon”
Introducing JSON-LD
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
<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!
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>
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>
Exercise #3 – trailing comma fun
JSON-LD
Which format should I use?
Which format?
data-vocabulary.org
MICRODATA
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
Which format should I use?
Use Schema.org…
… in one of these two formats
MICRODATA
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
Exercise #4 – if we have time
Mark up your own site
Thank you
• Ian Macfarlane• [email protected]
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
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