Post
Ask Question

Twitter Cards Implementation With Websites

Overview
 
In this article I will explain about Twitter Cards. Basically Twitter Cards are designed to communicate some information about our web pages like title, description, images, audio, video and etc. to social networks. It's like Open Graph Protocal. 

With Twitter Cards, we can attach rich photos, videos and media experiences to tweets, helping to drive traffic to a website.
 
Twitter Cards vs Open Graph
 
Twitter Cards meta tags work exactly like Open Graph meta tags, except that it is only for Twitter, while Open Graph tags are common for various social networks like facebook, linkedin and etc. Let's see a glimpse of open graph meta tags before going to explore more about twitter cards.
 
Open Graph Tags

It looks like following code snippet. We should add these tags inside the head.  
  1. <meta property="og:type" content="TypeName" />  
  2. <meta property="og:title" content="Title of the Page" />  
  3. <meta property="og:description" content="Description of the page" />  
We can ad more og meta tags by using og as prefix.
 
Twitter Cards Tags

It looks like following code snippet.
  1. <meta name="twitter:card" content="summary" >  
  2. <meta name="twitter:title" content="Title of the Page" >  
  3. <meta name="twitter:description" content="Description of the page" >  
We need to specify the type of card for your content by adding the following HTML markup to Head section of the page.
  1. <meta name="twitter:card" content="summary" >    
  2. <meta name="twitter:card" content="summary_large_image" >    
  3. <!-- etc. -->
Twitter Card Types

There are four types of cards and each have a beautiful consumption experience built for Twitter’s web and mobile clients:
  • Summary Card
  • Summary Card With Large Image
  • Player Card
Before going to explain about these cards, we should know about all the properties of cards which will be used with Twitter card meta tags.
Before going to explain about these card, we should know about all the properties of card which will be used with Twitter card meta tags.
Card Properties With Description
  • twitter:card
    Description: It shows the type of card we are using. It's required for all types of cards.
    IsRequired: Yes

  • twitter:title
    Description: We can put any title which we want to show as Tweet Title
    IsRequired: Yes, it is required for all cards except App Card.
    Max Length: 70 characters

  • twitter:description
    Description: It's for the description of the tweet.
    IsRequired: No, it is required for all cards except App Card.
    Max Length: 200 chars

  • twitter:image
    Description: URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
    IsRequired: Yes, it is required for all cards except App Card.

  • twitter:player
    Description: Url of player iframe
    IsRequired: It's required for player card

  • twitter:player:stream
    Description: It contains the url of video or audio. Its url must be a secure site
    IsRequired: It's required for player card

  • twitter:player:height
    Description: It shows the player iframe height in pixels
    IsRequired: Yes

  • twitter:player:width
    Description: It show the player iframe width in pixels
    IsRequired: Yes
For more properties about twitter card markup click here

Summary Card

Summary card is a kind of twitter card which allows us to show an image with our tweets. Basically, it is designed to give the reader a preview of the content before clicking through to your website.

Following are the code snippet which is used to implement twitter summary card.
  1. <meta name="twitter:card" content="summary" />  
  2. <meta name="twitter:site" content="@ProgramCafe" />  
  3. <meta name="twitter:title" content="Twitter Summary Card Example" />  
  4. <meta name="twitter:description" content="This describes about Twitter Summary Card" />  
  5. <meta name="twitter:image" content="https://www.programcafe.in/card-image.png" /> 
  6. <meta name="twitter:image:alt" content="Summary Card" />  
In the above code snippet content="summary" indecates the type of card used on this page.
 
Note

Card properties twitter:card and twitter:title are mandatory while twitter:description is not required. According to twitter guidelines we should not re-use the title of content as description or use this field to describe the general services provided by the websites.

Card property twitter:image is not a mandatory attribute but if we want we can use it. Following are the guidelines for this properties,
  • We should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. 
  • Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels.
  • Image size must be less than 5 MB.
  • JPG, PNG, WEBP and GIF formats are supported.
Here is the complete html code for a Twitter "Summary Card"
 
SummaryCard.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Twitter Summary Card</title>  
  5.     <meta charset="utf-8" />  
  6.     <meta name="twitter:card" content="summary" />  
  7.     <meta name="twitter:title" content="Summary Card Implementation" />  
  8.     <meta name="twitter:description" content="This describes about Twitter Summary Card" />  
  9.     <meta name="twitter:site" content="@KumarPraveen179" />  
  10.     <meta name="twitter:image" content="http://www.programcafe.in/card-image.png" />  
  11.   
  12.     <style>  
  13.         body{background: #148c6b;color: #fff;font-family: calibri;font-size: 16px;}  
  14.         a.tweet{color:#fff; padding:6px 20px; background:#ff6600;margin-top:40px;text-decoration:none; border-radius:5px;}  
  15.     </style>  
  16.       
  17. </head>  
  18.   
  19. <body>  
  20.     <h1>Twitter Summary Card</h1>  
  21.     <p>Summary Card Implementaion on Web Page</p>  
  22.     <div>  
  23.         <a class="twitter-share-button"  
  24.            href="https://twitter.com/intent/tweet?via=ProgramCafe">  
  25.             Tweet  
  26.         </a>  
  27.            
  28.         <a class="tweet"  
  29.            href="https://twitter.com/intent/tweet?via=ProgramCafe">  
  30.             Tweet  
  31.         </a>  
  32.     </div>  
  33.   
  34.     <script>  
  35.         //Twitter widget script to render tweet button
  36.         window.twttr = (function (d, s, id) {  
  37.             var js, fjs = d.getElementsByTagName(s)[0],  
  38.               t = window.twttr || {};  
  39.             if (d.getElementById(id)) return t;  
  40.             js = d.createElement(s);  
  41.             js.id = id;  
  42.             js.src = "https://platform.twitter.com/widgets.js";  
  43.             fjs.parentNode.insertBefore(js, fjs);  
  44.   
  45.             t._e = [];  
  46.             t.ready = function (f) {  
  47.                 t._e.push(f);  
  48.             };  
  49.   
  50.             return t;  
  51.         }(document, "script", "twitter-wjs"));</script>  
  52. </body>  
  53. </html>  
In the above code snippet, I am using Twitter widgets script to render the twitter button which is showing in the below snapshot.

Tweet Window
 
 
 
Now click on the Tweet button to share this information on Twitter and check your tweet on your timeline. It will look like the following snapshot which was taken from my timeline.

 
 
Summary Card With Large Image

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience and clicking on the image brings the user to your website.

Following is the code snippet which is used to implement twitter summary card with large image.
  1. <meta name="twitter:card" content="summary_large_image" />  
  2. <meta name="twitter:title" content="Twitter Summary Card With Large Image Example" />  
  3. <meta name="twitter:site" content="@ProgramCafe" />  
  4. <meta name="twitter:creator" content="@ProgramCafe" />  
  5. <meta name="twitter:description" content="It is designed to give the reader a preview of the content before clicking through to your website." />  
  6. <meta name="twitter:image" content="https://www.programcafe.in/card-large-image.png" />  

In the above code snippet content="summary_large_image" indecates the type of card used on this page. As with "Summary Card"  card properties, twitter:card and twitter:title properties are required.
 
If the has no twitter:title attribute then card validator will show some error message. I will explore about it at the end of the page where I will explain about Twitter Card Validator onlline feature.
 
Following are my complete html for Summary Card With Large Image.
 
SummaryCardWithLargeImage.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Summary Card With Large Image Example</title>  
  5.     <meta charset="utf-8" />  
  6.     <meta name="twitter:card" content="summary_large_image" />  
  7.     <meta name="twitter:title" content="Summary Card With Large Example" />  
  8.     <meta name="twitter:description" content="This describes about Twitter Summary Card With Large Image" />  
  9.     <meta name="twitter:site" content="@KumarPraveen179" />  
  10.     <meta name="twitter:image" content="http://www.programcafe.in/card-large-image.png" />  
  11.   
  12.     <style>  
  13.         body {  
  14.             background: #148c6b;  
  15.             color: #fff;  
  16.             font-family: calibri;  
  17.             font-size: 16px;  
  18.         }  
  19.     </style>  
  20.   
  21. </head>  
  22. <body>  
  23.     <h1>Summary Card With Large Image</h1>  
  24.     <p>Summary Card with Large Image Implementaion on Web Page</p>  
  25.     <div>  
  26.         <a class="twitter-share-button"  
  27.            href="https://twitter.com/intent/tweet?via=ProgramCafe">  
  28.             Tweet  
  29.         </a>  
  30.     </div>  
  31.   
  32.     <script>  
  33.         window.twttr = (function (d, s, id) {  
  34.             var js, fjs = d.getElementsByTagName(s)[0],  
  35.               t = window.twttr || {};  
  36.             if (d.getElementById(id)) return t;  
  37.             js = d.createElement(s);  
  38.             js.id = id;  
  39.             js.src = "https://platform.twitter.com/widgets.js";  
  40.             fjs.parentNode.insertBefore(js, fjs);  
  41.   
  42.             t._e = [];  
  43.             t.ready = function (f) {  
  44.                 t._e.push(f);  
  45.             };  
  46.   
  47.             return t;  
  48.         }(document, "script", "twitter-wjs"));</script>  
  49. </body>  
  50. </html>  
Now run this page and copy the url of this page paste in Card Validator text box to check how it will look after posting on your Twitter timeline.
 
 
As with card validator preview, it will look the same as our Twitter timeline after tweeting this page by following the same step as the Twitter Summary Card.
 
On the Twitter timeline, it looks like the following snapshot.
 
 
 
Player Card

By using Twitter Player Card we can post an video or audio stream along with our tweets as like Summary Card With Large Image where we can post a large image with tweet.
 
Twitter Policy

But it's not simply like Summary Card or Summary Card With Large Image. There are some twitter developer policies. We can only post this card if it is approved by the Twitter team. 
 
So, before getting to know more aout rules and policy, let us see a code snippet which is used for Player Card implementation. 
  1. <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />  
  2. <meta name="twitter:card" content="player" />  
  3. <meta name="twitter:site" content="@KumarPraveen179" />  
  4. <meta name="twitter:title" content="Twitter Player Card Implementation" />  
  5. <meta name="twitter:description" content="This is a sample video to test player card." />  
  6. <meta name="twitter:image" content="https://example.in/file/d/clipImage.png" />  
  7. <meta name="twitter:player" content="https://programcafe.in/player.html" />  
  8. <meta name="twitter:player:width" content="480" />  
  9. <meta name="twitter:player:height" content="480" />  
  10. <meta name="twitter:player:stream" content="https://example.com/file/d/myclip.mp4" />  
  11. <meta name="twitter:player:stream:content_type" content="video/mp4" />  
In the above code html,

content="player" denotes the type of card used on this page. 
 
The image mentioned in twitter:image property is used to display the image at the place of player where iframe or inline player is not supported, and this property is required for Player Card.
 
The card property twitter:player  is required and it must have an https url for IFrame player.
 
The card property twitter:player:stream contains the url of the video or audio file.
 
Height and Width properties twitter:player:height and twitter:player:width are mandatory properties for player card. It specifies the height and width of player iframe in pixcels.
 
http://programcafe.in/PlayerCard.html is the url of my PlayerCard page. Let's paste this url into twitter card validator.
 
 
 
While validating this player card, it shows a message *programcafe.in is not whitelisted for player card. And the button is for Request Approval.
 
When we click on the button Request Approval, a form will be opened where we need to fill all required information. It may take  1 to 3 business days for approval.
 
After submitting the approval request we can check the status from card validator, it will show approval is pending for player card. Twitter says - you will get an email regarding player card approval which is mentioned at the time of request for player card approval.
 
Let's try 
 
 

Once the card is approved, then our tweets for player card look like the following snapshot which is taken by twitter Click here.
 
App Card

The App Card is a great way to represent mobile applications on Twitter and to drive installs. We designed the App Card to allow for a name, description and icon, and also to highlight attributes such as the rating and the price.
 
In this article I will not explain about it, to know more about app card click on the following link.

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/app-card 

Fallback
 
When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property.
 
So we should write the appropriate open graph tags for appropriate twitter card properties.
 
Followings are the list of Open Graph fallback behaviors for each Twitter meta tag.

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup


Similar Articles