Free SEO extension ๐Ÿ”ฅ
Social & Messaging โ€ข SeoSpidie Editorial Team โ€ข โ€ข 82 views

What Are Twitter Card Meta Tags? (X Cards Explained)

The meta tags that control how your links look on X (Twitter), and how they work with Open Graph.

Open graph preview illustration

When someone shares your link on X (formerly Twitter), the post can show a card with a title, description and image. Twitter card meta tags in your page's head tell X what to show. Without them, links may appear as plain text or with the wrong image.

The two common card types

  • summary โ€” a small square thumbnail next to the title and description.
  • summary_large_image โ€” a large, wide image above the title. Best for articles and products.

The tags

  • twitter:card โ€” the card type, such as summary_large_image.
  • twitter:title โ€” the title shown on the card.
  • twitter:description โ€” a short description.
  • twitter:image โ€” the full URL of the image.
  • twitter:image:alt โ€” a description of the image for accessibility.
  • twitter:site โ€” your brand's X handle (optional).

Open Graph fallback

X can fall back to your Open Graph tags (og:title, og:description, og:image) when matching Twitter tags are missing. So in practice, most sites need good Open Graph tags plus twitter:card to choose the card type. Read what Open Graph tags are.

Image guidelines

  • Use a wide image (about 2:1 or the common 1.91:1 social ratio) for large image cards.
  • Keep important content away from the edges โ€” it may be cropped.
  • Use JPG, PNG or WebP within X's file size limit.
  • The image URL must be public and absolute (starting with https://).

See OG image sizes for social media.

Why your card shows no image

  • No twitter:card tag, or the image tag is missing.
  • The image URL is relative, broken or blocked by robots.txt.
  • The image is too small or too large.
  • X cached an old version โ€” cards can take time to refresh.

Check your tags

Enter a URL into the Open Graph preview tool to see the title, description and image your page provides, and fix anything missing. Check the image itself loads with the image URL checker.

A worked example

A news site's links on X showed a tiny logo instead of article photos. Its pages had Open Graph tags but no twitter:card, so X used the small summary card. Adding twitter:card with summary_large_image to the template made every shared article display its full-width photo, and clicks from X increased.

Set it once in your template

You do not need to write card tags by hand for every page. Add them to your site template so each page fills in its own values:

  • Card type: summary_large_image for articles and products.
  • Title: the page's title.
  • Description: the page's meta description.
  • Image: the page's featured image, or a default brand image.

Most SEO plugins and site builders have a social settings section that does exactly this.

More free tools: browse all our free utility tools, no sign-up needed.

Frequently asked questions

Do I need both Open Graph and Twitter tags?

Open Graph plus twitter:card is usually enough, as X falls back to Open Graph for other values.

Do Twitter cards affect SEO?

Not search rankings directly, but they improve how links look and get clicked on X.

Why does X show an old image?

Cards are cached. Updated tags may take time to appear.

Is twitter:site required?

No. It is optional and links the card to your account.