hacking the google snippet - digpen 7 workshop
Post on 02-Dec-2014
492 Views
Preview:
DESCRIPTION
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
Ian@ianmacfarlane.comhttp://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• ian@ianmacfarlane.com
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
top related