google hangout - twitter cards
DESCRIPTION
Jon Bulava (@jbulava) and Romain Huet (@romainhuet) guide you through the setup for Twitter Cards. These are the slides from a Google Hangout on July 22, 2014. The video can be found here: https://www.youtube.com/watch?v=uarWbgBLRso We had a handful of questions during the Hangout. These questions and their answers can be found here: https://dev.twitter.com/hangout-cards-questionsTRANSCRIPT
Google Hangout - Twitter CardsJuly 22, 2014
#TwitterDevLive
Twitter Cards Google Hangout - July 22, 2014
Google Hangout - Twitter Cards
Jon Bulava @jbulava Developer Advocate, NYC #TwitterDevLive
bitly.com/hangout-cards t.co/hangout-feedbackRomain Huet
@romainhuet Developer Advocate, London
Twitter Cards Google Hangout - July 22, 2014
Overview• What are Twitter Cards? • Types of Cards • How to create a Card • Validation • Processing Cards • Cards on Twitter Ads • Twitter Analytics
t.co/cards
Twitter Cards Google Hangout - July 22, 2014
The What, Why and How of CardsWhat? Rich media experiences attached to Tweets for your domain. !Why? Customize how your content is presented. Drive more engaged traffic to your site or application. !How? Add Twitter meta tags to the HTML of your webpage.
Twitter Cards Google Hangout - July 22, 2014
Summary Summary w/ Large Image Photo Gallery App Player Product !
ads.twitter.com
Card TypesSummary Summary w/ Large Image Photo Gallery App Player Product !
ads.twitter.com
*All previews demonstrate rendering on web
Twitter Cards Google Hangout - July 22, 2014
How to Create a Card: Meta TagsAdd meta tags to your website
<meta name="twitter:card" content="summary"><meta name="twitter:title" content="JonBulava.com" /><meta name="twitter:site" content="@jbulava" /><meta name="twitter:image" content="http://www.jonbulava.com/images/jon-farm.jpg" /><meta name="twitter:description" content="Check out his photography and video projects. You'll also find links to where you can find him across the web. Including Twitter of course!" />
<meta name="twitter:card" content="summary">
Twitter Cards Google Hangout - July 22, 2014
How to Create a Card
DemoCreate, Validate, Tweet
Twitter Cards Google Hangout - July 22, 2014
How to Create a Card: Attribution
Define the website twitter:site or twitter:site:id !
Define the creator twitter:creator or twitter:creator:id
Twitter Cards Google Hangout - July 22, 2014
Validationhttps://dev.twitter.com/docs/cards/validation/validator !
Use “Validate & Apply” tab !
One validation per domain per Card type !
Approved within minutes*
Google Hangout - May 29, 2014
Player Cards!
Designed for linear audio and video !
“Getting started” bundle: https://github.com/twitterdev/cards
11
Twitter Cards Google Hangout - July 22, 2014
Player Cards: Approval• Test across all Twitter clients • HTML for twitter:player should be responsive • Use HTTPS • For video and audio content
• ‘sound off’ for auto-play content • Cannot auto-play if > 10 seconds • Include controls
Photo Card
Player CardLarge Image
Summary Card
Summary Card
App Card
Gallery Card
Product Card
Twitter Cards Google Hangout - July 22, 2014
Processing a Card: Crawling!
!
The crawler respects yourdomain.com/robots.txt !
Our user-agent is Twitterbot
Twitter Cards Google Hangout - July 22, 2014
Processing a Card: robots.txtDisallow all but Twitter:
User-agent: Twitterbot Disallow: User-agent: * Disallow: /
Twitter Cards Google Hangout - July 22, 2014
Processing a Card: robots.txtSpecify directories:
User-agent: Twitterbot Disallow: * Allow: /images Allow: /archives
Twitter Cards Google Hangout - July 22, 2014
Processing a Card: Caching!
!
• 7 days from first tweet !
• Bust by revalidating !
• Different query strings, different URLs
Twitter Cards Google Hangout - July 22, 2014
Processing a Card: Multiple URLs!
pic.twitter.com and vine.com have preference !
URLs are processed in order of appearance in the tweet
Twitter Cards Google Hangout - July 22, 2014
App Installs and Deep-LinkingEnable app installs and deep-linking on any kind of Twitter Card
<meta name="twitter:app:country" content="US"/><meta name="twitter:app:name:iphone" content="Example App"/><meta name="twitter:app:id:iphone" content="306934135"/><meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef"/><meta name="twitter:app:name:ipad" content="Example App"/><meta name="twitter:app:id:ipad" content="306934135"/><meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef"/><meta name="twitter:app:name:googleplay" content="Example App"/><meta name="twitter:app:id:googleplay" content="com.example.app"/><meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef"/>
American Apparel @AmericanApparel
Grab a treat! We're giving out another $25 gift card for Halloween! Sign up for your chance to win! #AAHALLOWEEN cards.twitter.com/cards/8i9bq/2bf
Sharing App Installs Deep Linking
Twitter Cards Google Hangout - July 22, 2014
Cards on ads.twitter.comCards are hosted, no installation of meta tags needed
Website Card
Lead Generation Card
Twitter Cards Google Hangout - July 22, 2014
Cards on ads.twitter.comCards are hosted, no installation of meta tags needed
Basic App Card
Image App Card
Twitter Cards Google Hangout - July 22, 2014
Using analytics.twitter.com
Twitter Cards Google Hangout - July 22, 2014
ResourcesCards Documentation t.co/cards !
Meta tag reference https://dev.twitter.com/docs/cards/markup-reference !
Card validator https://dev.twitter.com/docs/cards/validation/validator
Twitter Cards Google Hangout - July 22, 2014
Cards TroubleshootingFrequently Asked Questions https://dev.twitter.com/docs/cards/troubleshooting !
Ask a Question https://dev.twitter.com/discussions !
t.co/hangout-feedback
Jon Bulava @jbulava Developer Advocate, NYC
Romain Huet @romainhuet Developer Advocate, London