Sometime just tweeting a URL is not enough to make the users more engaging and bringing traffic to your website or app. So Twitter introduced “Twitter Cards”, using which we can make Twitter can generate a summarised preview of of our website or app and also provide basic information about what the webpage contains.
What Is Twitter Card?
Twitter card is a preview of a URL tweeted. This card is produced by twitter by crawling twitter card specific meta tags from the tweeted web page.
This is an example of Twitter card
There are different types of twitter cards, used based upon what the tweeted URL is about and way to convey better summary and experience to users.
Let’s see all types of twitter cards in depth:
Summary Card
Summary card is used when your URL points to a standard webpage i.e., contains mostly textual information. From WordPress point of view, this card can be used for standard post formats.
Place this tags in you webpage:
<meta name="twitter:card" content="summary">
<!-- If you want you can mention the twitter profile of your website -->
<meta name="twitter:site" content="@qscuttertutor">
<!-- If you want you can mention the twitter profile of the author of the webpage. This is useful if the URL is a blog post. -->
<meta name="twitter:creator" content="@narayanprusty">
<!-- You have to mention the title of the webpage -->
<meta name="twitter:title" content="An Introduction To Twitter Card">
<!-- You have to mention a 2-4 lines description about the webpage -->
<meta name="twitter:description" content="Sometime just tweeting a URL is not enough to make the users more engaging and bringing traffic to your website or app. So Twitter introduced "Twitter Cards", using which we can make Twitter can generate a summarised preview of of our website or app and also provide basic information about what the webpage contains.">
<!-- If you want you can embed a URL of a image representing the content of your webpage. This image will be displayed in the preview and will make your post look more attractive. -->
<meta name="twitter:image" content="http://qnimate.com/myImage.png">
Summary Card with Large Image
This is same as summary card but used when your want to display a larger size image. From WordPress point of view, this card can be used for image post formats.
Place this tags in you webpage:
<meta name="twitter:card" content="summary_large_image">
<!-- If you want you can mention the twitter profile of your website -->
<meta name="twitter:site" content="@qscuttertutor">
<!-- If you want you can mention the twitter profile of the author of the webpage. This is useful if the URL is a blog post. -->
<meta name="twitter:creator" content="@narayanprusty">
<!-- You have to mention the title of the webpage -->
<meta name="twitter:title" content="An Introduction To Twitter Card">
<!-- You have to mention a 2-4 lines description about the webpage -->
<meta name="twitter:description" content="Sometime just tweeting a URL is not enough to make the users more engaging and bringing traffic to your website or app. So Twitter introduced "Twitter Cards", using which we can make Twitter can generate a summarised preview of of our website or app and also provide basic information about what the webpage contains.">
<!-- If you want you can embed a URL of a large image representing the content of your webpage. This image will be displayed in the preview and will make your post look more attractive. -->
<meta name="twitter:image" content="http://qnimate.com/myImageLarge.png">
Photo Card
Photo card is used when URL represents a page that displays a image. Useful when a page is for downloading or previewing photo.
Place this tags in you webpage:
<meta name="twitter:card" content="photo">
<!-- If you want you can mention the twitter profile of your website -->
<meta name="twitter:site" content="@qscuttertutor">
<!-- If you want you can mention the twitter profile of the author of the webpage. This is useful if the URL is a blog post. -->
<meta name="twitter:creator" content="@narayanprusty">
<!-- If you want you can mention the title. Otherwise leave it blank. -->
<meta name="twitter:title" content="An Introduction To Twitter Card">
<!-- You have to embed a URL to a image file. Minimum width must be 280px and minimum height is 150px tall. -->
<meta name="twitter:image" content="http://qnimate.com/myImageLarge.png">
<!-- If you want you can mention the original width of the image. -->
<meta name="twitter:image:width" content="610">
<!-- If you want you can mention the original height of the image. -->
<meta name="twitter:image:height" content="610">
Gallery Card
Gallery card is used when URL represents a page that displays a image gallery. From WordPress point of view, this card can be used for gallery post formats.
Place this tags in you webpage:
<meta name="twitter:card" content="gallery">
<!-- If you want you can mention the twitter profile of your website -->
<meta name="twitter:site" content="@qscuttertutor">
<!-- If you want you can mention the twitter profile of the author of the webpage. This is useful if the URL is a blog post. -->
<meta name="twitter:creator" content="@narayanprusty">
<!-- If you want you can mention the title. Otherwise leave it blank. -->
<meta name="twitter:title" content="An Introduction To Twitter Card">
<!-- If you want you can mention the description. Otherwise leave it blank. -->
<meta name="twitter:description" content="Sometime just tweeting a URL is not enough to make the users more engaging and bringing traffic to your website or app. So Twitter introduced "Twitter Cards", using which we can make Twitter can generate a summarised preview of of our website or app and also provide basic information about what the webpage contains.">
<!-- You can maximum provide links to four different images. Providing more will be ignored by twitter. -->
<meta name="twitter:image0:src" content="http://qnimate.com/1.jpg">
<meta name="twitter:image1:src" content="http://qnimate.com/2.jpg">
<meta name="twitter:image2:src" content="http://qnimate.com/3.jpg">
<meta name="twitter:image3:src" content="http://qnimate.com/4.jpg">
App Card
App card is used when URL represents a page that provides information about a mobile app.
Twitter auto-creates App Cards for Tweets which contain a link to either the App Store or Google Play. This means that you can create an App Card experience just by sharing links directly to the download page for your application.
App card is only available for twitter mobile app but not available for mobile or desktop web.
Place this tags in you webpage:
<meta name="twitter:card" content="app">
<!-- If you want you can provide a small description about your app. -->
<meta name="twitter:description" content="This app allows you to download music for free.">
<!-- Set only if your app is not available in some country. Suppose this app is not available in India then set it this way -->
<meta name="twitter:country" content="IN">
<!-- Your app name in iphone app store -->
<meta name="twitter:app:name:iphone" content="Example App">
<!-- Your app id in iphone app store -->
<meta name="twitter:app:id:iphone" content="306934135">
<!-- Your app custom URL schema -->
<meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef">
<!-- Your app name in ipad app store -->
<meta name="twitter:app:name:ipad" content="Example App">
<!-- Your app id in ipad app store -->
<meta name="twitter:app:id:ipad" content="306934135">
<!-- Your app custom url schema -->
<meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef">
<!-- Your app name in googleplay -->
<meta name="twitter:app:name:googleplay" content="Example App">
<!-- Your app id in googleplay -->
<meta name="twitter:app:id:googleplay" content="com.example.app">
<!-- Your app custom URL schema -->
<meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef">
The image for the App Card is downloaded directly from the app market on which your app resides.
Product Card
Product card is used when URL represents a page that provides information about a eCommerce product.
Place this tags in you webpage:
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">
<!-- additional footer tags available (See the App Installs and Deep Linking document to learn more) -->
<!-- You have to mention the card type. -->
<meta name="twitter:card" content="product">
<!-- If you want you can mention the twitter profile of your website -->
<meta name="twitter:site" content="@qscuttertutor">
<!-- If you want you can mention the twitter profile of the author of the webpage. This is useful if the URL is a blog post. -->
<meta name="twitter:creator" content="@narayanprusty">
<!-- You have to mention the title of the webpage -->
<meta name="twitter:title" content="An Introduction To Twitter Card">
<!-- You have to mention a 2-4 lines description about the webpage -->
<meta name="twitter:description" content="Sometime just tweeting a URL is not enough to make the users more engaging and bringing traffic to your website or app. So Twitter introduced "Twitter Cards", using which we can make Twitter can generate a summarised preview of of our website or app and also provide basic information about what the webpage contains.">
<!-- You have to mention URL of your product image. If you want then you can mention the height and width of image using twitter:image:height and twitter:image:width. -->
<meta name="twitter:image" content="http://qnimate.com/myImage.png">
<!-- You have to mention two attributes of your product. -->
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">
Player Card
Product card is used when URL represents a page that is used to play a video, audio or any other media. For creating a Player card you need to verify your twitter card from Twitter. They don’t allow you to create and tweet player card without their permission and verification. For more information creating and verifying twitter card click here.
Website Card and Lead Generation Card
These cards are only available if you want to run a advertising campaign in twitter.
Card Approval
Twitter needs approval before displaying the cards in twitter.
Once your website has the twitter cards code in it. You need to visit Card Validator link and then provide your personal details as you will be the owner of all the cards of your website. After filling the details click request approval button. Approval process takes few hours.
Conclusion
For complete official documentation on twitter cards visit this link. I covered all basic types of twitter cards and this will be enough for most cases. Thanks for reading.
