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

Uploaded on

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 …

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

More in: Marketing
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. 1 @JeffreyPreston #SMX #32A Lessons Learned: Open Graph and Schema.org Jeff Preston Disney Interactive
  • 2. 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. 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. 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. 5 @JeffreyPreston #SMX #32A Open Graph Example
  • 6. 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. 7 @JeffreyPreston #SMX #32A Open Graph Example Source: https://developers.facebook.com/tools/debug/
  • 8. 8 @JeffreyPreston #SMX #32A Schema.org • Microformat vocabulary to describe your data • Extends HTML 5 • Expandable vocabulary • Promoted by Google, Microsoft and Yahoo
  • 9. 9 @JeffreyPreston #SMX #32A Schema.org Movie Example
  • 10. 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. 11 @JeffreyPreston #SMX #32A Schema.org Movie Example Source: http://www.google.com/webmasters/tools/richsnippets
  • 12. 12 @JeffreyPreston #SMX #32A Schema.org Video Example
  • 13. 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/218ce62ef3cf3d91c4f1f d1f483aba2ba5e0339f.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. 14 @JeffreyPreston #SMX #32A Schema.org Video Example Source: http://www.google.com/webmasters/tools/richsnippets
  • 15. 15 @JeffreyPreston #SMX #32A Schema.org Video Example
  • 16. 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. 17 @JeffreyPreston #SMX #32A Schema.org Site Navigation Element Example
  • 18. 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. 19 @JeffreyPreston #SMX #32A Schema.org Site Navigation Element Example
  • 20. 20 @JeffreyPreston #SMX #32A Schema.org Event Markup Example
  • 21. 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. 22 @JeffreyPreston #SMX #32A Schema.org Event Markup Example
  • 23. 23 @JeffreyPreston #SMX #32A Schema.org - Other Applications • Executive and staff bios • Official logos • Local name, address, phone number • Products • Ratings
  • 24. 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. 25 @JeffreyPreston #SMX #32A Twitter Cards Example
  • 26. 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. 27 @JeffreyPreston #SMX #32A Twitter Cards Example Source: https://dev.twitter.com/docs/cards/validation/validator
  • 28. 28 @JeffreyPreston #SMX #32A Twitter Cards Example Source: https://twitter.com/Disney/status/303648378082951168
  • 29. 29 @JeffreyPreston #SMX #32A Twitter Cards Example Source: https://twitter.com/OhMyDisney/status/435830326678794240
  • 30. 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. 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. 32 @JeffreyPreston #SMX #32A Jeff Preston @JeffreyPreston https://twitter.com/jeffreypreston http://www.linkedin.com/in/jeffreypreston Thank You!