What Lessons Disney Interactive Learned by Using Open Graph Protocol & Schema.org Markup

1@JeffreyPreston #SMX #32A

Lessons Learned:Open Graph and Schema.org

Jeff PrestonDisney Interactive


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


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


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


Open Graph Example


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


Open Graph Example

Source: https://developers.facebook.com/tools/debug/


Schema.org

• Microformat vocabulary to describe your data

• Extends HTML 5

• Expandable vocabulary

• Promoted by Google, Microsoft and Yahoo


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>



Source: http://www.google.com/webmasters/tools/richsnippets


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>



Source: http://www.google.com/webmasters/tools/richsnippets


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


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


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


Schema.org - Other Applications

• Executive and staff bios

• Official logos

• Local name, address, phone number

• Products

• Ratings


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


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/">



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



Source: https://twitter.com/Disney/status/303648378082951168



Source: https://twitter.com/OhMyDisney/status/435830326678794240


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

http://linter.structured-data.org/

https://developers.facebook.com/tools/debug

http://validator.nu/

https://dev.twitter.com/docs/cards/preview

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


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

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

http://schema.org/docs/schemas.html

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


Jeff Preston

@JeffreyPreston

https://twitter.com/jeffreypreston

http://www.linkedin.com/in/jeffreypreston

Thank You!

https://twitter.com/jeffreypreston

http://www.linkedin.com/in/jeffreypreston

What Lessons Disney Interactive Learned by Using Open Graph Protocol & Schema.org Markup

Marketing

Transcript of What Lessons Disney Interactive Learned by Using Open Graph Protocol & Schema.org Markup