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

Exercise 3

• JSON-LD exercise

• Link: http://goo.gl/z64oRy

• Password: “devon”

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