Home Home Twitter Cards Meta Tags Tutorial

Twitter Cards Meta Tags Tutorial

twitter-cards

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
tweet

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:

<!-- You have to mention the card type. -->
<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:

<!-- You have to mention the card type. -->
<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:

<!-- You have to mention the card type. -->
<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:

<!-- You have to mention the card type. -->
<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:

<!-- You have to mention the card type. -->
<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:data1" content="$3">
<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.

Narayan Prusty

Facebook Open Graph Meta Tags TutorialCreating a Percentage of Webpage Scrolled Indicator
Comments: 4
  1. 1 year ago

    Thank you may be useful for us

    ReplyCancel
  2. 2 years ago

    Thanks for sharing here.
    I am very happy to read your review.

    ReplyCancel
  3. 2 years ago

    thank, useful for me

    ReplyCancel

Leave a Reply to celana hernia Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image4 years ago 4 Comments API, SEO, Web Development
Share this
Related Articles