Today I shared a tweet containing a link to a post on my website. I expected Twitter to do some magic and make the link preview look great as I was used to from other tweets. However, the link was displayed just as a text link.

After some googling I found out that in order for link previews to look nice on Twitter you need to add some Open-Graph data to your website and tell Twitter how to render the link preview.

The page I wanted to share was https://mnml.wtf/notes/product-love (I also shared in on DEV here).

This is what I needed to add:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mnmlwtf" />
<meta name="twitter:creator" content="@mnmlwtf" />
<meta property="og:title" content="Product Love" />
<meta property="og:url" content="https://mnml.wtf/notes/product-love" />
<meta property="og:image" content="https://mnml.wtf/static/og/product-love.png" />

Let's go through these meta tags one by one:

• twitter:card tells Twitter to render a large image as link preview instead of a small image
• twitter:site and twitter:creator let Twitter know that I am the author of the content
• og:title contains the post title as it should be rendered on social media
• og:url is the URL to to the page on my website
• og:image is an image I created in Figma, it looks like this:

Invalidate Twitter's Cache

Since I already had shared the link and Twitter had tried to fetch all these meta tags I needed to invalidate Twitter's cache to make sure it checked my page again for these meta information.

I did this by submitting my post's URL on this tool: https://cards-dev.twitter.com/validator

The nice thing about it is that it instantly renders a tweet preview so you immediately know if everything looks as it should: