Twitter Cards Markup

How to get your sites looking good on X timelines and ensure that images actually show up as intended. Sharing is caring!

in short, this is how it should look like for a default twitter (now called X) card of type summary:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@AnonyfoxCom">
<meta name="twitter:creator" content="@AnonyfoxCom">
<meta name="twitter:title" content="Your Meta Title">
<meta name="twitter:description" content="Your Meta Description">
<meta name="twitter:image" content="">
<meta name="twitter:image:src" content="">
<meta name="twitter:image:alt" content="some descriptive text">

remember to replace site/creator content with your twitter handle.

Important note: Ensure to use an absolute URL for the image, not a relative path, or else it won't work as of 2024!

Also the bot has been working quite unreliable in the past, therefore the twitter:image:src tag is defined with identical value to the normal twitter:image tag to ensure that the bot will pick it up.

The image itself should have a square (1:1) ratio. If you want to use the bigger summary_large_image card, everything remains the same except the image should be rectangular (2:1) in landscape orientation (and of good quality).

And ultimately yes: WEBP images work just fine, no need for heavy PNG or JPEG variants anymore

Linked Technologies

What it's made of

illustration of HTML

The backbone of the web. Master it to craft structured, accessible content for any online project, from simple sites to complex applications!

Linked Categories

Where it's useful

illustration of SEO

Make your digital content discoverable and digestable by web crawlers. Ensure that visitors have a straightforward experience.