Your SlideShare is downloading. ×
What Lessons Disney Interactive Learned by Using Open Graph Protocol & Markup
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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


Published 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

Published in: Marketing
  • 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 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 and Open Graph 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=""> <meta property="og:url" content=” most-wanted" /> <meta property="og:image" content=" 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:
  • 7. 7 @JeffreyPreston #SMX #32A Open Graph Example Source:
  • 8. 8 @JeffreyPreston #SMX #32A • Microformat vocabulary to describe your data • Extends HTML 5 • Expandable vocabulary • Promoted by Google, Microsoft and Yahoo
  • 9. 9 @JeffreyPreston #SMX #32A Movie Example
  • 10. 10 @JeffreyPreston #SMX #32A Movie Example Source: <div itemscope itemtype=""> 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=""> <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=""> <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 Movie Example Source:
  • 12. 12 @JeffreyPreston #SMX #32A Video Example
  • 13. 13 @JeffreyPreston #SMX #32A Video Example Source: <div itemprop="video" itemscope itemtype="" > <div id="video_wrapper" class="inverted"> <div id="frame"> <meta itemprop="duration" content=“T00H01M20S" /> <meta itemprop="thumbnail" content=" 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 Video Example Source:
  • 15. 15 @JeffreyPreston #SMX #32A Video Example
  • 16. 16 @JeffreyPreston #SMX #32A Video – Interesting Results Using unique Open Graph,, and XML sitemap video descriptions, Google displayed: • 70% • 20% Open Graph • 10% XML video sitemap
  • 17. 17 @JeffreyPreston #SMX #32A Site Navigation Element Example
  • 18. 18 @JeffreyPreston #SMX #32A Site Navigation Element Example <div class="nav”> <ul itemscope="itemscope" itemtype=> <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:
  • 19. 19 @JeffreyPreston #SMX #32A Site Navigation Element Example
  • 20. 20 @JeffreyPreston #SMX #32A Event Markup Example
  • 21. 21 @JeffreyPreston #SMX #32A Event Markup Example <div itemscope itemtype=""> <a itemprop="url" href=""> <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=""> <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:
  • 22. 22 @JeffreyPreston #SMX #32A Event Markup Example
  • 23. 23 @JeffreyPreston #SMX #32A - 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: <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Disney"> <meta name="twitter:image" content=" 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=" disney/2014/02/18/see-kristoff-and-anna-in-a-deleted-scene-from-frozen/">
  • 27. 27 @JeffreyPreston #SMX #32A Twitter Cards Example Source:
  • 28. 28 @JeffreyPreston #SMX #32A Twitter Cards Example Source:
  • 29. 29 @JeffreyPreston #SMX #32A Twitter Cards Example Source:
  • 30. 30 @JeffreyPreston #SMX #32A Structured Data Validators Structured Data Linter Open Graph Debugger Schema Validator Twitter Card Preview Google Structured Data Testing Tool
  • 31. 31 @JeffreyPreston #SMX #32A Resources Open Graph protocol Twitter cards
  • 32. 32 @JeffreyPreston #SMX #32A Jeff Preston @JeffreyPreston Thank You!