Twitter/X Card Meta Tags

With Twitter/X 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.

Twitter/X Cards and Open Graph

Twitter/X Card tags look similar to Open Graph tags, 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.

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

  • Summary Card Title, description, and thumbnail.
  • Summary Card With Large Image Similar to the Summary Card, but with a prominently-featured image.
  • App Card A Card with a direct download to a mobile app.
  • Player Card A Card that can display video/audio/media.

Summary Card

The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is designed to give the reader a preview of the content before clicking through to your website.

  • twitter:card Must be set to a value of “summary”.
  • twitter:title A concise title for the related content.

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.

  • twitter:card Must be set to a value of “summary_large_image”.
  • twitter:title A concise title for the related content.

Player Card

Video and audio clips have a special place on the Twitter platform thanks to the Player Card. By implementing a few HTML meta tags to your website and following the Twitter Developer Policy, you can deliver your rich media to users across the globe.

  • twitter:card Must be set to a value of “player”.
  • twitter:title The title of your content as it should appear in the card.
  • twitter:site The Twitter @username the card should be attributed to.
  • twitter:player HTTPS URL to iFrame player. This must be a HTTPS URL which does not generate active mixed content warnings in a web browser. The audio or video player must not require plugins such as Adobe Flash..
  • twitter:player:width Width of iFrame specified in twitter:player in pixels.
  • twitter:player:height Height of iFrame specified in twitter:player in pixels.
  • twitter:image Image to be displayed in place of the player on platforms that don’t support iFrames or inline players. You should make this image the same dimensions as your player. Images with fewer than 68,600 pixels (a 262x262 square image, or a 350x196 16:9 image) will cause the player card not to render. 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.

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.

  • twitter:card Must be set to a value of “app”.
  • twitter:site The Twitter @username the card should be attributed to.
  • twitter:app:id:iphone String value, and should be the numeric representation of your app ID in the App Store
  • twitter:app:id:ipad String value, should be the numeric representation of your app ID in the App Store
  • twitter:app:id:googleplay String value, and should be the numeric representation of your app ID in Google Play

Debugging and Validation

Tools are available to validate the implementation of Twitter/X Card Meta Tags.

Other