Happily Ever After: Open Graph, Twitter Cards, and Schema.org Jeff Preston Disney 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, Open Graph, and Twitter Cards

Schema.org 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

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: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="http://movies.disney.com/million-dollar-arm">

<meta property="og:image" content="http://movies.disney.com/million-dollar-arm/million-dollar-arm-movie-shared.jpg" />

<meta property="og:type" content="video.movie" />

Source: http://movies.disney.com/million-dollar-arm

Open Graph Example

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

Open Graph Example

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/maleficent/about/story

Schema.org Movie Example

Source: http://movies.disney.com/frozen/story

<div itemscope itemtype="http://schema.org/Movie"> <div itemprop="description”><p><span itemprop="name"><a itemprop="url" href="http://movies.disney.com/maleficent">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="http://schema.org/Person"><span itemprop="name"><a itemprop="url" href="http://movies.disney.com/maleficent/about/cast/angelina-jolie">Angelina Jolie</a></span> as <a itemprop="url" href="http://movies.disney.com/maleficent/characters/maleficent">Maleficent</a></span>, <span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Elle Fanning</span> as <a itemprop="url" href="http://movies.disney.com/maleficent/characters/princess-aurora">Princess Aurora</a></span>,[...] </div>

Schema.org Movie Example

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

Schema.org Site Navigation Element Example

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 Site Navigation Element Example

Schema.org Event Markup Example

Source: http://music.disney.com/radio-disney-music-awards

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 Event Markup Example

Schema.org - Other Applications

• Video

• Executive and staff bios

• Official logos

• Local search: name, address, phone number

• Products

• Ratings

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

Twitter Cards Example

Twitter Cards Example

Source: http://blogs.disney.com/oh-my-disney/2014/05/20/these-new-images-from-big-hero-6-are-awesome/

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

Twitter Cards Example

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

Twitter Cards Example

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

Twitter Cards Example

Source: https://twitter.com/jeffreypreston/status/469897896859426816

Knowledge Graph

Be Consistent Across Knowledge Graph Sources

• Schema.org markup

• Wikipedia.org

• Freebase.com

• Other databases that Google might use to pull entity data

Knowledge Graph & Freebase.com

Source: https://www.freebase.com/m/0vpw97h

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

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

Jeff Preston

@JeffreyPreston

https://twitter.com/jeffreypreston

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

Thank You!