How to implement Twitter Cards for Your Website

About
(http://www.searchlaboratory.com/about/)
Contact
(http://www.searchlaboratory.com/contact/)
Clients
(http://www.searchlaboratory.com/clients/)
Careers
(http://www.searchlaboratory.com/about/careers/)
Partners
(http://www.searchlaboratory.com/about/partners/)

(http://www.searchlaboratory.com/)

Search
Tel: Leeds: +44 113 350 5373 London: +44 207 147 9980
Email: info@searchlaboratory.com
(mailto:info@searchlaboratory.com)

SEO (HTTP://WWW.SEARCHLABORATORY.COM/SEO/)
PPC (HTTP://WWW.SEARCHLABORATORY.COM/PPC/)

Search Laboratory (http://www.searchlaboratory.com) > Blog (http://www.searchlaboratory.com/blog/) > Social Media
>
>
(http://www.searchlaboratory.com/blog/category/social-media/) > How to Implement Twitter Cards for your
> How to Implement Twitter Cards for your
MULTILINGUAL (HTTP://WWW.SEARCHLABORATORY.COM/MULTILINGUAL-SEARCH/)
Website
Website

Categories
Categories
Analytics

(http://www.searchlaboratory.com/blog/category/ana
CRO (HTTP://WWW.SEARCHLABORATORY.COM/CONVERSION-OPTIMISATION-AND-ANALYTICS/)

How to Implement Twitter Cards
ANALYTICS (HTTP://WWW.SEARCHLABORATORY.COM/PPC/WEB-ANALYTICS-PPC/)
for your Website
ABOUT (HTTP://WWW.SEARCHLABORATORY.COM/ABOUT/)
Tweet
BLOG (HTTP://WWW.SEARCHLABORATORY.COM/BLOG/)

Posted on December 3, 2013 (http://www.searchlaboratory.com/blog/2013/12/how-to-implement-twitter-cards-forPosted on
your-website/) by Colin Docherty (http://www.searchlaboratory.com/blog/author/colin-docherty/)
Despite being over a year old Twitter cards are still an opportunity being missed for brands and bloggers alike. In this post
I’ll go through the various options there are for Twitter cards and show how they can be implemented.
The easiest way to ensure your pages are using the right mark-up for Twitter Cards is to use Twitter’s Card Validator tool
(https://dev.twitter.com/docs/cards/validation/validator).
Simply select which card type you want to use and Twitter will then populate the relevant fields you need to fill in to
create the correct HTML code. The nice thing about this tool is that not only does it generate the required code for your
web pages, it will also generate a preview of what the tweet will look like when your marked up page is tweeted.

(27)

Charity
(http://www.searchlaboratory.com/blog/category/com
news/charity/) (9)

Company News
(http://www.searchlaboratory.com/blog/category/com
news/) (48)

Content Marketing
(http://www.searchlaboratory.com/blog/category/seo
marketing-seo/) (9)

Conversion Optimisation
(http://www.searchlaboratory.com/blog/category/con
optimisation/) (15)

Google Updates
updates-seo/) (8)

Industry News
(http://www.searchlaboratory.com/blog/category/ind
(127)

Landing Page Design
(http://www.searchlaboratory.com/blog/category/con
optimisation/landing-pagedesign/) (4)

Link Bait
bait-seo/) (16)

Link Building
building-seo/) (57)

Mobile
(http://www.searchlaboratory.com/blog/category/mo
(11)

Multilingual
(http://www.searchlaboratory.com/blog/category/mu
(47)

The Twitter Card Validator Tool makes it easy to generate the right Twitter Card HTML as well as giving a
preview of what the Tweet will look like.
If you’ve filled in all the fields correctly, all you need to do is copy the ‘Sample Embed Code’ and paste it into the HTML
<head> section of the page you want to enable for Twitter Cards:

Online PR
(http://www.searchlaboratory.com/blog/category/onl
pr/) (20)

Overseas Expansion
(http://www.searchlaboratory.com/blog/category/mu
expansion/) (23)

PPC
(http://www.searchlaboratory.com/blog/category/ppc
(100)

Retail News
news/) (4)

SEO
(191)

Social Media
(http://www.searchlaboratory.com/blog/category/soc
media/) (46)

Testing
(http://www.searchlaboratory.com/blog/category/tes
(1)

This week in digital
week-in-digital/) (13)

Trends
(11)

Uncategorized
(http://www.searchlaboratory.com/blog/category/unc
(35)

Request a Call Back
Request a Call Back
First Name:*
Last Name:*
Email:*
Telephone:*
(http://www.searchlaboratory.com/wp-content/uploads/2013/12/c2.jpg)
If you are happy with the preview that the tool generates, copy the generated sample embed code and paste
into your webpage.
Once the Twitter Card META data is included in your live web page, you need to have your domain approved to use that
particular Twitter Card type. This is in order to ensure the content being displayed in the Twitter Card is not offensive or
illegal.
If for example, you wanted to use the Summary Card type for some pages of your site and the Player Card type for
others, you would have to have apply twice for approval, once for the Summary Card type and then a second time for the
Player Card.
You only have to apply for approval once for each card type. Once your site is approved for a particular card type, you are
free to use that card type on any page for the approved domain without needing further approval.
To request approval, click on the ‘Validate & Apply’ tab that is located on the same page you have just used to generate
the Twitter Card code:

Once your page is live with the Twitter Card code embedded, apply for
approval using the card validator tool.
Paste the URL of the live page that contains the META data, hit “Go!” and then “Request Approval”.

(http://www.searchlaboratory.com/wp-

content/uploads/2013/12/c4.png)
You will be prompted to fill in some basic information about the domain you are requesting Twitter Card approval for.

eNewsletter Signup
eNewsletter Signup
Email

(http://www.searchlaboratory.com/wp-content/uploads/2013/12/c5.png)
Twitter Card approval requires that you give some basic information about the site you
want to use it for.
Once approval has been requested, a message is displayed informing you to expect a few weeks before approval is
granted. However, from experience, this is normally just a few minutes (except for the Player Card type that is subject to
a few days as more checks are made for video content).
Within a few minutes, you should receive an email to the address your Twitter account is linked to confirming that you
have been approved for the Twitter Card type you have applied for. You can now use that particular card type for any
page of your site without needing to apply for approval again.

Once you receive an email like this from Twitter, you are free to use that card type on any page of your
website.

What do the other Twitter Card types look like?
What do the other Twitter Card types look like?
Each Twitter Card type allows you to display content in a different way depending on your needs. I have given an
example of how each card type looks in a Twitter Feed. I have also included the HTML code you need to use to create the
tweet. Any Twitter Meta tag in red is mandatory for this card type.

Summary Card
Summary Card
The Summary card enables a tweet to contain a title, description and thumbnail image about the page being tweeted.
The title and description should use no more than and 70 and 200 characters respectively. The image you use does not
have to be used on the actual linked to page but has to be a minimum of 120px x 120px and no bigger than 1mb in file
size.
More information on Twitter’s Summary Card can be found here (https://dev.twitter.com/docs/cards/types/summarycard).

What the Summary card looks like in a Twitter timeline.

HTML Code
HTML Code
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@colin_docherty”>
<meta name=”twitter:title” content=”Learn how to mark your webpages up for Twitter Card Summary Tweets”>
<meta name=”twitter:description” content=”This tweet was created using Twitter’s Summary Card HTML markup. Visit
my tutorial page to learn how to apply this to your webpages to create richer & more engaging tweets.”>
<meta name=”twitter:creator” content=”@colin_docherty”>
<meta name=”twitter:image” content=”http://www.colindocherty.co.uk/img/twitter/summary.png”>
<meta name=”twitter:domain” content=”www.colindocherty.co.uk/twitter”>

Summary Card with Large Image
Summary Card with Large Image
The large image summary card is essentially the same as the standard summary card except that it allows for a much
larger image. The image needs to be a minimum of 280px by 150px and less than 1mb in file size.
More information on Twitter’s Large Image Summary Card can be found here (https://dev.twitter.com/docs/cards/largeimage-summary-card).

What the Large Summary card looks like in a Twitter timeline.

HTML Code
HTML Code
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:image” content=”http://www.colindocherty.co.uk/img/twitter/largesummarycardtweet.png”>
<meta name=”twitter:domain” content=”www.colindocherty.co.uk”>

What the Gallery card looks like in a Twitter timeline.

HTML Code
HTML Code
<meta name=”twitter:card” content=”gallery”>
<meta name=”twitter:description” content=”This tweet uses Twitter’s Gallery Card HTML markup. Visit my tutorial page to
learn how to apply this & other Twitter Card mark-up code types to your webpages to create richer & more engaging
tweets.”>
<meta name=”twitter:image1:src”
content=”"http://www.colindocherty.co.uk/img/twitter/twitter_gallery_card_example_1.png”>
<meta name=”twitter:title” content=”Learn How to Mark Your Web Pages up for Twitter Card Gallery Tweets”>

Photo Card
Photo Card
The photo card allows you to display a large image in either landscape or portrait orientation and does not require a title.
Twitter will not create a photo card unless the twitter:image is of a minimum size of 280px wide by 150px tall.
More information on Twitter’s Photo Card can be found here (https://dev.twitter.com/docs/cards/types/photo-card).

What the Photo card looks like in a Twitter timeline.

HTML Code
HTML Code
<meta name=”twitter:card” content=”photo”>
<meta name=”twitter:title” content=”An example of a Twitter Photo Card”>
<meta name=”twitter:image:src” content=”http://www.colindocherty.co.uk/img/twitter/photo-card.png”>
<meta name=”twitter:domain” content=”www.colindocherty.co.uk/twitter”>

Player Card
Player Card
The player card allows pages embedded with YouTube videos (and other video sources) to be played directly within a
Tweet. They differ from Vines in that they have no maximum play duration (Vines are only six seconds in length). In the
below example, the video is actually 15 minutes long.
Player cards are a little trickier to implement and whilst you can use the Card Validator tool to generate the Player card
code for you, if you video is hosted on YouTube, it’s actually easier to visit the YouTube page that the video is located on
and copy and paste the Twitter Meta tags in the source code of the page.
Player cards take a few days to approve rather than a few minutes as they are subject to more rigorous checks regarding
the content they contain before Twitter will allow them to be used publically.
More information on Twitter’s Player Card can be found here (https://dev.twitter.com/docs/cards/types/player-card).

What the Player card looks like in a Twitter timeline.

HTML Code (copied straight from YouTube source code)
HTML Code (copied straight from YouTube source code)
<meta name=”twitter:card” content=”player”>
<meta name=”twitter:site” content=”@youtube”>
<meta name=”twitter:url” content=”http://www.youtube.com/watch?v=Qi1zuQ9qBr8″>
<meta name=”twitter:title” content=”Learn how to mark your webpages up for Twitter Card Player Tweets”>
<meta name=”twitter:description” content=”This tweet uses Twitter’s Player Card HTML markup. Visit my tutorial page to
learn how to apply this & other Twitter Card mark-up code types to your webpages to create richer & more engaging
tweets.”> <meta name=”twitter:image” content=”http://i1.ytimg.com/vi/Qi1zuQ9qBr8/maxresdefault.jpg”>
<meta name=”twitter:app:name:iphone” content=”YouTube”>
<meta name=”twitter:app:id:iphone” content=”544007664″>
<meta name=”twitter:app:name:ipad” content=”YouTube”>
<meta name=”twitter:app:id:ipad” content=”544007664″>
<meta name=”twitter:app:url:iphone” content=”vnd.youtube://watch/Qi1zuQ9qBr8″>
<meta name=”twitter:app:url:ipad” content=”vnd.youtube://watch/Qi1zuQ9qBr8″>
<meta name=”twitter:app:name:googleplay” content=”YouTube”>
<meta name=”twitter:app:id:googleplay” content=”com.google.android.youtube”>
<meta name=”twitter:app:url:googleplay” content=”http://www.youtube.com/watch?v=Qi1zuQ9qBr8″>
<meta name=”twitter:player” content=”https://www.youtube.com/embed/Qi1zuQ9qBr8″>
<meta name=”twitter:player:width” content=”1920″>
<meta name=”twitter:player:height” content=”1080″>
If you want to test any of these pages out for yourself and see how they look in an actual Twitter Feed, you can do so
here (http://www.colindocherty.co.uk/twitter) where a page for each Twitter Card type has been marked up in the
necessary HTML code ready to tweet. Happy Tweeting!
This entry was posted in Social Media (http://www.searchlaboratory.com/blog/category/social-media/). Bookmark the
permalink (http://www.searchlaboratory.com/blog/2013/12/how-to-implement-twitter-cards-for-your-website/).

← Emotive Marketing: Too Close to Emotional Blackmail? (http://www.searchlaboratory.com/blog/2013/12/emotivemarketing-too-close-to-emotional-blackmail/)
5 Terrible SEO Sales Emails → (http://www.searchlaboratory.com/blog/2013/12/5-terrible-seo-sales-emails/)

One Response to How to Implement Twitter Cards for your Website
One Response to How to Implement Twitter Cards for your Website
Ginny (http://www.shrinkingvioletinthegate.com) says:
December 4, 2013 at 9:38 am (http://www.searchlaboratory.com/blog/2013/12/how-to-implement-twitter-cards-for-yourwebsite/#comment-112982)

Very nice Colin!! I particularly like the summaries of the different cards and the explanations of who these would be useful
for. A*
Reply (/blog/2013/12/how-to-implement-twitter-cards-for-your-website/?replytocom=112982#respond)

Leave a Reply
Leave a Reply
Your email address will not be published. Required fields are marked *
Name *
Email *
Website
Comment

You may use these HTML (HyperText Markup Language) tags and
attributes: <a href="" title=""> <abbr title="">
<acronym title=""> <b> <blockquote cite="">
<cite> <code> <del datetime=""> <em> <i> <q
cite=""> <strike> <strong>

Notify me of follow-up comments by email.
Notify me of new posts by email.

(/about/careers/)

(https://www.google.com/partners/#a_profile;idtf=02398417687560879717)

(https://www.google.com/partners/#a_profile;idtf=02398417687560879717)

(https://plus.google.com/116294148749918695974/pos
(http://www.facebook.com/searchlaboratory)
(http://twitter.com/searchlabs)
(http://www.linkedin.com/company/searchlaboratory)
(http://www.searchlaboratory.com/feed/)
© Search Laboratory Ltd 2013. All rights reserved.
Terms and Conditions (http://www.searchlaboratory.com/terms-and-conditions/) | Privacy Policy (http://www.searchlaboratory.com/privacy-policy/) |
Cookie Policy (http://www.searchlaboratory.com/cookie-policy/) | Sitemap (http://www.searchlaboratory.com/sitemap.xml)

Registered Company Address: The Old Chapel, 8 Shadwell Lane Leeds LS17 6DR
London office: 24 Greville Street, London EC1N 8SS
Registration Number: 5608449
This site uses cookies

Okay, thanks

Find out more (http://www.searchlaboratory.com/cookie-policy/)

Leeds Tel: +44 113 350 5373
London Tel: +44(0)20 714 79980

How to implement Twitter Cards for Your Website

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

How to implement Twitter Cards for Your Website