Twitter Card Tags (HTML)

A Twitter Card is a technical optimization that enriches your tweets with media data from your website. When someone shares a link, the posted tweet will be accompanied by information in a multimedia format previously chosen by the author.

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

The Tweet embedded below shows a Player Card along with the text of the Tweet:

Purposes of Twitter Cards

• Twitter Cards make content more attractive because it automatically illustrates your web links that you share.
• Each card has a built-in content assignment, which displays the appropriate Twitter accounts for the content specified by you.
• Users will be able to track and view the profiles of assigned accounts directly from the card. This makes it easier for the user to read by automatically illustrating shared web links without inputting a number of characters on the tweet.

Twitter Cards and Open Graph

Twitter card tags look similar to Open Graph tags(used by Facebook), and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data.

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. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

Example of Twitter Cards:

Example of Open Graph:

Types of Twitter Cards

The different Card types each have a beautiful consumption experience built for Twitter’s web and mobile clients:

1. Summary Card

Title, description, and thumbnail.

2. Summary Card with Large Image

Similar to the Summary Card, but with a prominently-featured image.

3. App Card

A Card with a direct download to a mobile app.

4. Player Card

A Card that can display video/audio/media.

Getting Started with Cards

To get started with implementing Cards markup, specify the type of card for your content by adding the following HTML markup to the HEAD section of the page:

<meta name="twitter:card" content="summary" />

Card properties are simple key-value pairs, each defined in an HTML meta tag as. The combined collection of properties defines the overall card experience on Twitter, and each card type supports and requires a specific set of properties.

All cards have one basic property in common - the card type value:

twitter:card

The card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.

***Only one card type per-page is supported. If more than one ‘twitter:card’ value exists in the page, the “last” one in sequence will take priority.

Card and Content Attribution

Each card has built-in content attribution, which surfaces appropriate Twitter accounts for the content as specified by you.

Users will be able to follow and view the profiles of attributed accounts directly from the card. There are 2 kinds of attribution:

• Website Attribution

Indicates the Twitter account for the website or platform on which the content was published.

• Creator Attribution

Indicates the individual user that created the content within the card. This applies to the Summary with Large Image card.

Card Meta Tags

• twitter:card

The card type. Used with all cards.

• twitter:site

@username of website. Either twitter:site or twitter:site:id is required.

*Used with summary, summary_large_image, app, player cards

• twitter:site:id

Same as twitter:site, but the user’s Twitter ID. Either twitter:site or twitter:site:id is required.

*Used with summary, summary_large_image, player cards

• twitter:creator

@username of content creator

*Used with summary_large_image cards

• twitter:creator:id

Twitter user ID of content creator

*Used with summary, summary_large_image cards

• twitter:description

Description of content (maximum 200 characters)

*Used with summary, summary_large_image, player cards

• twitter:title

Title of content (max 70 characters)

*Used with summary, summary_large_image, player cards

• twitter:image

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.

*Used with summary, summary_large_image, player cards

• twitter:image:alt

A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.

*Used with summary, summary_large_image, player cards

You can check for all Twitter Card tags here: Twitter Card Tags

Read more details: Twitter Cards