HtmlHow-ToBeginner · 4 min read

How to Add Twitter Card Tags in HTML for Rich Tweets

To add Twitter Card tags in HTML, include <meta> tags with specific name and content attributes inside the <head> section of your HTML. These tags define the card type and content like title, description, and image for Twitter previews.

📐

Syntax

Twitter Card tags are <meta> tags placed inside the <head> of your HTML. Each tag uses the name attribute to specify the card property and content to provide its value.

twitter:card: Defines the card type (e.g., summary, summary_large_image).
twitter:title: The title shown on the card.
twitter:description: A short description for the card.
twitter:image: URL of the image to display.

html

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description of the page.">
<meta name="twitter:image" content="https://example.com/image.jpg">

💻

Example

This example shows a complete HTML page with Twitter Card tags in the <head>. It creates a large summary card with a title, description, and image that Twitter will use when the page link is shared.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Twitter Card</title>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Welcome to My Website">
  <meta name="twitter:description" content="This is a simple example of Twitter Card tags in HTML.">
  <meta name="twitter:image" content="https://example.com/sample-image.jpg">
</head>
<body>
  <h1>Hello, Twitter Cards!</h1>
  <p>Share this page on Twitter to see the card preview.</p>
</body>
</html>

Output

A webpage with a heading 'Hello, Twitter Cards!' and a paragraph. When shared on Twitter, it shows a large summary card with the specified title, description, and image.

⚠️

Common Pitfalls

Common mistakes when adding Twitter Card tags include:

Forgetting to place <meta> tags inside the <head> section.
Using incorrect or missing content values, which can cause Twitter to ignore the card.
Not specifying the twitter:card type, which defaults to no card.
Using image URLs that are not accessible or too small (recommended minimum 300x157 pixels).

Always test your Twitter Cards with the Twitter Card Validator to ensure they display correctly.

html

<!-- Wrong: meta tags outside head -->
<body>
  <meta name="twitter:card" content="summary">
</body>

<!-- Right: meta tags inside head -->
<head>
  <meta name="twitter:card" content="summary">
</head>

📊

Quick Reference

Tag	Purpose	Example Content
twitter:card	Type of card to display	summary_large_image
twitter:title	Title of the card	My Website
twitter:description	Short description	Welcome to my site!
twitter:image	Image URL for the card	https://example.com/image.jpg
twitter:site	Twitter username of the site	@mytwitterhandle

✅

Key Takeaways

Add Twitter Card meta tags inside the section of your HTML.

Always include the twitter:card tag to specify the card type.

Use accessible, properly sized images for best display.

Test your Twitter Cards with Twitter's Card Validator tool.

Provide clear titles and descriptions to improve link previews.