HTML Meta Tags You Need for Twitter Card Generation

In this post we look at the meta tags required for Twitter to generate a nice card for your website when you copy and paste a link to your website in a tweet. The image below is an example of a Twitter card. If you have the correct meta tags on your site and you paste a URL to your website in a tweet, Twitter will generate a card like the one below when your tweet is posted.

Tag 1:  Card Type

This is the meta tag where you define the card content such as an image or a video.

<!-- required | default summary card -->
<meta name="twitter:card" content="summary" />

<!-- required | large summary card -->
<meta name="twitter:card" content="summary_large_image" />

<!-- required | video card -->
<meta name="twitter:card" content="player" />

Tag 2: User for the Card

Tag the username for this card.

<!-- required | The Twitter @username the card should be attributed to. -->
<meta name="twitter:site" content="@{twitter-username}" />

Tag 3: Title for the Card

This is the title for the card.

<!-- required | The title of your content as it should appear in the card. -->
<meta name="twitter:title" content="{card-title}" />

Tag 4: Video Meta Tag Settings Required for Videos

Here we need the video iframe url, the width, and the height for the player.

<!-- required | 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. -->
<meta name="twitter:player" content="{video-iframe-url}" />

<!-- required | Width of iFrame specified in twitter:player in pixels. -->
<meta name="twitter:player:width" content="420" />

<!-- required | Height of iFrame specified in twitter:player in pixels. -->
<meta name="twitter:player:height" content="230" />

Tag 5: Description

Add a description for the card.

<!-- not required | A description that concisely summarizes the content as appropriate for presentation within a Tweet. -->
<meta name="twitter:description" content="{description}" />

Tag 6: Image

This is the url to the thumbnail image for the card.

<!-- not required | A URL to a unique image representing the content of the page. You 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. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported. -->
<meta name="twitter:image" content="{url-to-image}" />

Tag 7: Image Alt Tag

This is the alt tag image text for the card.

<!-- not required | A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters. -->
<meta name="twitter:image:alt" content="{image-alt-tag}" />