Upload
search-marketing-expo-smx
View
1.698
Download
0
Embed Size (px)
DESCRIPTION
Smx West 2014 Session #Smx #32A - Structured Data Super Session - What You Need To Be Doing Nowpresentation What Lessons Disney Interactive Learned By Using Open Graph Protocol & Schema.Org Markup By Jeff Preston @Jeffreypreston Of Disney Interactive
Citation preview
1@JeffreyPreston #SMX #32A
Lessons Learned:Open Graph and Schema.org
Jeff PrestonDisney Interactive
2@JeffreyPreston #SMX #32A
Structured Data and SEO
• Helps search engines better understand content and markup
• Provides opportunity to improve search engine listings and Facebook posts
• Will not fix other SEO problems
3@JeffreyPreston #SMX #32A
Schema.org and Open Graph
Schema.org Open Graph
Promoted by Google, Microsoft and Yahoo
Promoted by Facebook (and used by Google Plus & Twitter)
Inline markup Meta tags in head
4@JeffreyPreston #SMX #32A
Open Graph
• Provides basic data about the page: title, type of page, thumbnail, canonical URL, etc.
• Ensures additional data is available for videos, images, music, etc. in meta data
• Links together official website to official Facebook page
• Easy to implement
5@JeffreyPreston #SMX #32A
Open Graph Example
6@JeffreyPreston #SMX #32A
Open Graph Example
<meta property="og:type" content="video.movie">
<meta property="og:url" content=”http://muppets.disney.com/muppets-most-wanted" />
<meta property="og:image" content="http://cdn.dolimg.com/franchise/muppets-most-wanted/img/muppets-most-wanted.png" />
<meta property="og:title" content=“Muppets Most Wanted Official Website presented by Disney" />
<meta property="og:description" content=“Visit the Muppets Most Wanted official site to watch the trailer, meet the characters, browse photos, download media and play games." />Source: http://muppets.disney.com/muppets-most-wanted
7@JeffreyPreston #SMX #32A
Open Graph Example
Source: https://developers.facebook.com/tools/debug/
8@JeffreyPreston #SMX #32A
Schema.org
• Microformat vocabulary to describe your data
• Extends HTML 5
• Expandable vocabulary
• Promoted by Google, Microsoft and Yahoo
9@JeffreyPreston #SMX #32A
Schema.org Movie Example
10@JeffreyPreston #SMX #32A
Schema.org Movie Example
Source: http://movies.disney.com/frozen/story
<div itemscope itemtype="http://schema.org/Movie">Walt Disney Animation Studios presents <span itemprop="name">Frozen</span>, a stunning big-screen comedy adventure. Fearless optimist Anna (voice of <span itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Kristen Bell</span></span>) sets off on an epic journey-teaming up with rugged mountain man Kristoff (voice of Jonathan Groff) and his loyal reindeer Sven-to find her sister Elsa (voice of <span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Idina Menzel</span></span>), whose icy powers have trapped the kingdom of Arendelle in eternal winter.[...]</div>
11@JeffreyPreston #SMX #32A
Schema.org Movie Example
Source: http://www.google.com/webmasters/tools/richsnippets
12@JeffreyPreston #SMX #32A
Schema.org Video Example
13@JeffreyPreston #SMX #32A
Schema.org Video Example
Source: http://video.disney.com/watch/disneychannel-phineas-ferb-chains-on-me-4c263110a597e0de90fa6d32
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject" ><div id="video_wrapper" class="inverted">
<div id="frame"><meta itemprop="duration" content=“T00H01M20S" /><meta itemprop="thumbnail" content="http://cdnvideo.dolimg.com/cdn_assets/218ce62ef3cf3d91c4f1fd1f483aba2ba5e0339f.jpg" /><meta itemprop="title" content="Chains on Me"><meta itemprop="description" content="Phineas and Ferb have their imaginations chained up!"><div id="player" class="player"></div></div>
</div></div>
14@JeffreyPreston #SMX #32A
Schema.org Video Example
Source: http://www.google.com/webmasters/tools/richsnippets
15@JeffreyPreston #SMX #32A
Schema.org Video Example
16@JeffreyPreston #SMX #32A
Schema.org Video – Interesting Results
Using unique Open Graph, Schema.org, and XML sitemap video descriptions, Google displayed:
• 70% Schema.org
• 20% Open Graph
• 10% XML video sitemap
17@JeffreyPreston #SMX #32A
Schema.org Site Navigation Element Example
18@JeffreyPreston #SMX #32A
Schema.org Site Navigation Element Example
<div class="nav”><ul itemscope="itemscope" itemtype=http://www.schema.org/SiteNavigationElement><li itemprop="name" ><a itemprop="url” href="/our-story">About</a></li><li itemprop="name" ><a itemprop="url” href="/film-and-tv">Film & TV</a></li><li itemprop="name" ><a itemprop="url” href="/what-we-do">What We Do</a></li></ul></div>
Source: http://lucasfilm.com
19@JeffreyPreston #SMX #32A
Schema.org Site Navigation Element Example
20@JeffreyPreston #SMX #32A
Schema.org Event Markup Example
21@JeffreyPreston #SMX #32A
Schema.org Event Markup Example
<div itemscope itemtype="http://schema.org/MusicEvent"><a itemprop="url" href="http://music.disney.com/radio-disney-music-awards"><h1 itemprop="name">Radio Disney Music Awards 2014</h1></a>[…]<div itemprop="startDate" content="2014-04-26T16:00">Starts: 04/26/2014 4:00PM</div><div itemprop="location" itemscope itemtype="http://schema.org/PostalAddress"><div itemprop="name">Nokia Theatre L.A. LIVE</div><div itemprop="streetAddress">777 Chick Hearn Ct.</div><div itemprop="addressLocality">Los Angeles</div><div itemprop="addressRegion">CA</div></div><div itemprop="postalCode">90015</div><div itemprop="addressCountry">USA</div></div></div>
Source: http://music.disney.com/radio-disney-music-awards
22@JeffreyPreston #SMX #32A
Schema.org Event Markup Example
23@JeffreyPreston #SMX #32A
Schema.org - Other Applications
• Executive and staff bios
• Official logos
• Local name, address, phone number
• Products
• Ratings
24@JeffreyPreston #SMX #32A
Twitter Cards
• Gives you control of how your content is displayed with Tweets
• Improves content attribution
• Can be used for summaries and photos
• Links together official website to Twitter account
• Need to apply to Twitter for your cards to be approved
25@JeffreyPreston #SMX #32A
Twitter Cards Example
26@JeffreyPreston #SMX #32A
Twitter Cards Example
Source: http://blogs.disney.com/oh-my-disney/2014/02/18/see-kristoff-and-anna-in-a-deleted-scene-from-frozen/
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Disney">
<meta name="twitter:image" content="http://a.dilcdn.com/bl/wp-content/uploads/sites/2/2014/02/Kristoff5-300x150.jpg">
<meta name="twitter:description" content="A deleted scene from one of our favorite movies? Yes, please.">
<meta name="og:title" content="See Kristoff and Anna in a Deleted Scene from Frozen | Oh My Disney">
<meta name="twitter:url" content="http://blogs.disney.com/oh-my-disney/2014/02/18/see-kristoff-and-anna-in-a-deleted-scene-from-frozen/">
27@JeffreyPreston #SMX #32A
Twitter Cards Example
Source: https://dev.twitter.com/docs/cards/validation/validator
28@JeffreyPreston #SMX #32A
Twitter Cards Example
Source: https://twitter.com/Disney/status/303648378082951168
29@JeffreyPreston #SMX #32A
Twitter Cards Example
Source: https://twitter.com/OhMyDisney/status/435830326678794240
30@JeffreyPreston #SMX #32A
Structured Data Validators
Structured Data Linter
http://linter.structured-data.org/
Open Graph Debugger
https://developers.facebook.com/tools/debug
Schema Validator
http://validator.nu/
Twitter Card Preview
https://dev.twitter.com/docs/cards/preview
Google Structured Data Testing Tool
http://www.google.com/webmasters/tools/richsnippets
31@JeffreyPreston #SMX #32A
Resources
Open Graph protocol
https://developers.facebook.com/docs/opengraph/
Schema.org
http://schema.org/docs/schemas.html
Twitter cards
https://dev.twitter.com/docs/cards
32@JeffreyPreston #SMX #32A
Jeff Preston
@JeffreyPreston
https://twitter.com/jeffreypreston
http://www.linkedin.com/in/jeffreypreston
Thank You!