← Reference

Link preview cards

The most visible item on any SEO list.

01

Why this one first

When someone shares your app in a Discord, on X, in a WhatsApp group, or in Slack, Open Graph tags are the difference between a rich clickable card with an image and a grey line of text.

For a product launched in communities, that is a direct hit to how many people click. It is also a twenty-minute fix.

02

The tags

<meta property="og:title" content="..." /> <meta property="og:description" content="..." /> <meta property="og:image" content="https://yourdomain.com/og-image.png" /> <meta property="og:url" content="https://yourdomain.com/" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />

The image should be 1200×630 pixels.

03

The mistake that wastes the most time

A relative path in og:image. Social platforms fetch the image from their own servers, where a relative path means nothing — so the tag looks correct and the preview is blank. It must be an absolute URL with the scheme and host.

On Next.js, use the Metadata API or an opengraph-image file rather than raw tags; it handles the absolute URL for you.

Not sure whether this applies to you?

Give us the address and we will tell you. No code, no access, no install — and every finding we have is shown in full, including on the free trial.

Check a site