Download - From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

Transcript
Page 1: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

From Microdata & Schema

To Rich Snippets

SMX Munich – Jan-Willem Bobbink

@jbobbink - http://www.notprovided.eu

Page 2: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

WHO AM I?

Page 3: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

VISIT US AT STAND NUMBER 16

MAJESTIC SEO AMBASSADOR

Page 4: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

WHAT’S THE SEMANTIC WEB?

IS IT CODE?

Page 5: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

STRUCTURE THE WEB?

Page 6: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

W3C SEMANTIC WEB ACTIVITY

“The Semantic Web is a collaborative movement led by international standards body the World Wide Web Consortium (W3C). The standard promotes common data formats on the World Wide Web”

GOAL: EVOLUTION OF THE WEB

Page 7: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

THE SEMANTIC WEB

Tim Berners-Lee:

“The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries”

GOAL: CONVERTING THE WEB

Page 8: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

LINKED OPEN DATA

Page 9: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

STARTING POINT:

1. Make data available

2. Use specific markup languages

3. Data is available for everyone

ONLINE MARKETING POSSIBILITIES?

Page 10: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

GOAL 1: SEO

Page 11: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

GOAL 2: SOCIAL MEDIA

Page 12: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

HOW MANY WEBSITES ARE USING MARKUP?

Use Amazon EC2, setup a crawler and crawl the top 1.000.000 Alexa URLs

Checked for occurrences of:

–Microdata / Schema

–OpenGraph

–Twitter Cards

CRAWLED AT 18-03-2014

Page 13: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

RESULTS

- Crawled with 360/URLS/sec

- 68.4GB of data used

- 68% (683267 URLs) returned 200 OK

- 27% 30X Redirects

- 3% of domains had DNS issues

CRAWLED AT 18-03-2014

Page 14: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

15,84%

14,55%

1,59%

1,32%

7,27%

2,69%

0,22%

OpenGraph Title

OpenGraph URL

Twitter:title

Twitter:url

Schema itemprop

Schema Itemprop Name

AggregateRating

USAGE STRUCTURED DATA

BASED ON 683K OF TOP MILLION ALEXA URLS

Page 15: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

USAGE MICRODATA

Commercial tool: http://www.builtwith.com

Page 16: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

USAGE OPEN GRAPH PROTOCOL

Commercial tool: http://www.builtwith.com

Page 17: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

MANY OPPORTUNITIES!

Page 18: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

MICROFORMATS – RDFa - MICRODATA

Page 19: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

A BRIEF HISTORY

Page 20: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

MICROFORMATS

• March 2003: rel="friend" was used

• 2004 during eTech, Tantek hosted a presentation titled “Real World Semantics”

• May 2009: Google announced parsing hCard, hReview and hProduct attributes

http://tantek.com/presentations/2004etech/realworldsemanticspres.html

Page 21: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

RDFa

• First proposed in 2004, since 2012 RDFa 1.1 is recommended and can be used within HTML4 & 5

“The essence of RDFa is to provide a set of attributes that can be used to carry metadata in an XML language (hence the 'a' in RDFa).”

Page 22: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

26-04-2010 - INTERNATIONALLY LAUNCHED

Page 23: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

PREFERRED: MICRODATA “Microdata is a set of tags, introduced with

HTML5, that allows you to do this.”

SCHEMA.ORG: JUNE 2011

Page 24: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

Which snippets can you use?

NOT EVERY STRUCTURE IS USABLE YET

Page 25: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

REVIEW SNIPPETS

<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate"> <span itemprop="itemreviewed">Several German beers</span> <img itemprop="photo" src="beer.jpg" /> <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">

<span itemprop="average">9</span> <span itemprop="best">10</span>

</span> <span itemprop="votes">24</span> <span itemprop="count">5</span>

</div>

Page 26: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

PERSONAL SNIPPETS

<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Jan-Willem</span> <img src="janwillem.jpg" itemprop="image" /> <span itemprop="jobTitle">International SEO</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

<span itemprop="addressLocality">Amsterdam</span>, <span itemprop="addressRegion">- Europe</span> <span itemprop="postalCode">9999XX</span>

</div> </div>

Page 27: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

PRODUCTS SNIPPETS

1. Products

2. Product offer

3. Product aggregated offer

Page 28: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

BREADCRUMB SNIPPETS

Create multiple links to relevant pages within 1 entry in the SERPs.

Page 29: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

CREATE COMBINATIONS

Page 30: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

SOME URLs TO HELP YOU:

• Schema Creator by Raven http://schema-creator.org/

• Schema.org Generator http://www.microdatagenerator.com/

• Rich Snippets Testing Tool Bookmarklet • http://www.blindfiveyearold.com/rich-snippets-testing-tool-bookmarklet

• Everything you need to know to generate rich snippets: http://seogadget.com/micro-data-schema-org-guide-to-

generating-rich-snippets/

Page 31: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

HOW TO IMPLEMENT? MAKE SURE:

1. You have specific data points available

2. SE’s accept specific markup language

3. SE’s accept certain snippets

4. Information within the SERPs is correct

• Implement code and check with the SE’s:

http://www.google.nl/webmasters/tools/richsnippets

Page 32: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

DELAYS BECAUSE OF PROCESSING

Page 33: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

PITFALLS

• Make sure all items are structured and nested in the correct way.

• Google Testing tool only shows errors based on missing elements, not on wrong coding!

KEEP CALM AND ADD SNIPPETS!

Page 34: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

WMT: WHAT DOES GOOGLE SEE?

Page 35: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

ERRORS ON PAGE LEVEL

Page 36: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

WMT: DATA HIGHLIGHTER

Page 37: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

DOES IT HELP YOUR RANKINGS?

“Google doesn’t use markup for ranking purposes at this time—but rich snippets can make your web pages appear more prominently in search results, so you may see an increase in traffic.”

Source: https://support.google.com/webmasters/answer/1211158?hl=en

Page 38: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

RICH SNIPPET SPAM?

Page 39: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

REPORT SPAM!

https://support.google.com/webmasters/contact/rich_snippets_spam

Page 40: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

RISKS OF SPAMMING?

Page 41: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

SHARE YOUR DATA?

Page 42: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

STRUCTURED DATA FOR SOCIAL

Page 43: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

“The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.”

OPEN GRAPH PROTOCOL

Page 44: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

FACEBOOK: OPEN GRAPH

Start at: https://developers.facebook.com/docs/opengraph/

Page 45: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

BASIC ELEMENTS

Use: http://ogp.me/

Page 46: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

https://developers.facebook.com/docs/opengraph/

SPECIFY CERTAIN ELEMENTS

Page 47: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

USE THE DEBUGGER TOOL!

WRONG DETAILS? CACHING ISSUES WRONG DETAILS? CACHING ISSUES

Use: https://developers.facebook.com/docs/opengraph/

Page 48: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

TWITTER: TWITTER CARDS

Page 49: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

TWITTER: EXAMPLE CODE

Page 50: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

https://dev.twitter.com/docs/cards/validation/validator

WRONG DETAILS? CACHING ISSUES MAKE SURE YOU VALIDATE!

Page 51: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

• Schema.org microdata

• Open Graph protocol

• Title + metadescription element

• Best guess from page content

MULTIPLE OPTIONS

Use: https://developers.google.com/+/web/snippet/

WRONG DETAILS? CACHING ISSUES GOOGLE+

Page 52: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

USE YOAST SEO PLUGIN

USING WORDPRESS?

Page 53: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

QUESTIONS?

http://www.notprovided.eu @JBOBBINK

Jan-Willem Bobbink

HTTP://WWW.NOTPROVIDED.EU/SMXDATA

Page 54: From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink

PICTURE CREDITS: Linked Open data: http://commons.wikimedia.org/wiki/File:LOD_Cloud_Diagram_as_of_September_2011.png

Schema meme: http://www.fscinteractive.com/wp-content/uploads/2013/07/schema-rich-snippets-all-the-things-meme-560x345.jpg

Social meme: http://socialmediasatisfied.com/wp-content/uploads/2013/06/529797_10150904238024534_3188681_n.jpg

Possibility meme: http://makeameme.org/character/dr-evil-austin-powers

Matrix coding: http://indervilla.com/matrix-wallpapers/matrix-code-hd/

Image processing: http://www.habiledata.com/blog/wp-content/uploads/2013/05/image-processing-services.jpg

Spam: http://www.cj-weblog.nl/wp-content/uploads/2009/11/Spam.jpg

Changes: http://erinamsili.blogspot.de/2011/12/ch-ch-ch-changes.html

Obama meme: http://cdn.memegenerator.net/instances/250x250/38508282.jpg

THANKS FOR THE PICTURES!