This document summarizes a Google Hangout on Twitter Cards. It discusses what Twitter Cards are, the different types of cards including Summary, Photo, Player, and App Cards. It also covers how to create cards by adding meta tags, the validation process, how cards are processed and cached, and using cards on Twitter ads. Resources for documentation, the card validator, and troubleshooting are also provided.

2. Google Hangout - Twitter Cards
July 22, 2014
#TwitterDevLive

3. 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

4. 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

5. Twitter Cards Google Hangout - July 22, 2014
The What, Why and How of Cards
What?
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.

6. Twitter Cards Google Hangout - July 22, 2014
Summary
Summary w/ Large
Image
Photo
Gallery
App
Player
Product
!
ads.twitter.com
Card Types
Summary
Summary w/ Large
Image
Photo
Gallery
App
Player
Product
!
ads.twitter.com
*All previews demonstrate rendering on web

7. Twitter Cards Google Hangout - July 22, 2014
How to Create a Card: Meta Tags
Add 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">

8. Twitter Cards Google Hangout - July 22, 2014
How to Create a Card
Demo
Create, Validate, Tweet

9. 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

10. Twitter Cards Google Hangout - July 22, 2014
Validation
https://dev.twitter.com/docs/cards/validation/validator
!
Use “Validate & Apply” tab
!
One validation per domain per
Card type
!
Approved within minutes*

11. Google Hangout - May 29, 2014
Player Cards
!
Designed for linear audio and video
!
“Getting started” bundle:
https://github.com/twitterdev/cards
11

12. 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

13. Photo Card
Player Card
Large Image
Summary Card
Summary Card
App Card
Gallery Card
Product Card

14. Twitter Cards Google Hangout - July 22, 2014
Processing a Card: Crawling
!
!
The crawler respects yourdomain.com/robots.txt
!
Our user-agent is Twitterbot

15. Twitter Cards Google Hangout - July 22, 2014
Processing a Card: robots.txt
Disallow all but Twitter:
User-agent: Twitterbot
Disallow:
User-agent: *
Disallow: /

16. Twitter Cards Google Hangout - July 22, 2014
Processing a Card: robots.txt
Specify directories:
User-agent: Twitterbot
Disallow: *
Allow: /images
Allow: /archives

17. Twitter Cards Google Hangout - July 22, 2014
Processing a Card: Caching
!
!
• 7 days from first tweet
!
• Bust by revalidating
!
• Different query strings, different URLs

18. 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

19. Twitter Cards Google Hangout - July 22, 2014
App Installs and Deep-Linking
Enable 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"/>

20. 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

21. Twitter Cards Google Hangout - July 22, 2014
Cards on ads.twitter.com
Cards are hosted, no installation of meta tags needed
Website Card
Lead Generation Card

22. Twitter Cards Google Hangout - July 22, 2014
Cards on ads.twitter.com
Cards are hosted, no installation of meta tags needed
Basic App Card
Image App Card

23. Twitter Cards Google Hangout - July 22, 2014
Using analytics.twitter.com

24. Twitter Cards Google Hangout - July 22, 2014
Resources
Cards 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

25. Twitter Cards Google Hangout - July 22, 2014
Cards Troubleshooting
Frequently Asked Questions
https://dev.twitter.com/docs/cards/troubleshooting
!
Ask a Question
https://dev.twitter.com/discussions
!

26. t.co/hangout-feedback
Jon Bulava
@jbulava
Developer Advocate, NYC
Romain Huet
@romainhuet
Developer Advocate, London