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="https://anonyfox.com/your-image-url">
<meta name="twitter:image:src" content="https://anonyfox.com/your-image-url">
<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