Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Happily Ever After: Open Graph Twitter Cards And By Jeff Preston


Published on

SMX Advanced 2014 Session #SMX #13A - Super Session: Enhancing Search Results With Structured Data & Markup Happily Ever After: Open Graph, Twitter Cards, & Schema.Org By Jeff Preston @Jeffreypreston Of Disney Interactive

Read more on SEO at

Published in: Internet, Technology
  • Hey guys! Who wants to chat with me? More photos with me here 👉
    Are you sure you want to  Yes  No
    Your message goes here

Happily Ever After: Open Graph Twitter Cards And By Jeff Preston

  1. 1. Happily Ever After: Open Graph, Twitter Cards, and Jeff Preston Disney Interactive
  2. 2. 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., Open Graph, and Twitter Cards Open Graph Twitter Cards Promoted by Google, Microsoft and Yahoo Promoted by Facebook (and used by Google Plus & Twitter) Promoted by Twitter Inline markup Meta tags in head Meta tags in head
  4. 4. 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. Open Graph Example
  6. 6. Open Graph Example <meta property="og:site_name" content="disney movies"> <meta property="og:description" content="Visit the official Million Dollar Arm website to watch trailers, read the synopsis, meet the cast, browse photos, play games, download media, and more!"> <meta property="og:title" content="Million Dollar Arm Official Website presented by Disney Movies"> <meta property="og:url" content=" arm"> <meta property="og:image" content=" dollar-arm/million-dollar-arm-movie-shared.jpg" /> <meta property="og:type" content="" /> Source:
  7. 7. Open Graph Example Source:
  8. 8. Open Graph Example
  9. 9. • Microformat vocabulary to describe your data • Extends HTML 5 • Expandable vocabulary • Promoted by Google, Microsoft and Yahoo
  10. 10. Movie Example Source:
  11. 11. Movie Example Source: <div itemscope itemtype=""> <div itemprop="description”><p><span itemprop="name"><a itemprop="url" href="">Maleficent</a></span>' explores the untold story of Disney’s most iconic villain from the classic 'Sleeping Beauty' and the elements of her betrayal that ultimately turn her pure heart to stone. ….</p> <p>The film stars <span itemprop="actor" itemscope itemtype=""><span itemprop="name"><a itemprop="url" href="">Angelina Jolie</a></span> as <a itemprop="url" href="">Maleficent</a> </span>, <span itemprop="actor" itemscope itemtype=""><span itemprop="name">Elle Fanning</span> as <a itemprop="url" href="">Princess Aurora</a></span>,[...] </div>
  12. 12. Movie Example Source:
  13. 13. Site Navigation Element Example
  14. 14. 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:
  15. 15. Site Navigation Element Example
  16. 16. Event Markup Example Source:
  17. 17. 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:
  18. 18. Event Markup Example
  19. 19. - Other Applications • Video • Executive and staff bios • Official logos • Local search: name, address, phone number • Products • Ratings
  20. 20. Twitter Cards • Gives you control of how your content is displayed with Tweets • Links together official website to Twitter account • Need to apply to Twitter for your cards to be approved • Easy to implement
  21. 21. Twitter Cards Example
  22. 22. 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/05/big-hero-6-hiro-300x125.jpg'/> <meta name="twitter:description" content="Walt Disney Animation Studios’ 54th feature film, Big Hero 6, opens in theaters this November and we finally have the first images from the film!"/>
  23. 23. Twitter Cards Example Source:
  24. 24. Twitter Cards Example Source:
  25. 25. Twitter Cards Example Source:
  26. 26. Knowledge Graph
  27. 27. Be Consistent Across Knowledge Graph Sources • markup • • • Other databases that Google might use to pull entity data
  28. 28. Knowledge Graph & Source:
  29. 29. Structured Data Validators Structured Data Linter Open Graph Debugger Schema Validator Twitter Card Preview Google Structured Data Testing Tool
  30. 30. Resources Open Graph protocol Twitter cards
  31. 31. Jeff Preston @JeffreyPreston Thank You!