Developer SEO

Link preview generator

Drop an image to see it here

example.com

Your page title

What the card says underneath.

Title 15 / 70 characters Description 30 / 158 characters Site or brand name Drop an image Optional. Nothing is uploaded.

Rendered in your browser · nothing is uploaded

Local · the tags must be server-rendered

Compose a link preview card and see it rendered. The card comes from four tags — og:title, og:description, og:image and og:url — which you add to the page’s head.

How to use the link preview generator

1 Type your title and description. The preview updates as you type.

2 Watch the character counts — they turn red past the limit, and the preview shows where the cut lands.

3 Drop an image in to see the whole card.

A link preview is generated by the platform scraping your page, not by anything you upload, which is why you cannot fix a bad preview by re-posting. The four Open Graph tags are the entire mechanism, and they go in the head of the page being linked to. Two practical points: the scraper needs to be able to reach the page, so a link behind a login or a robots.txt block gets no preview at all, and single-page apps that set the tags with JavaScript often get nothing, because most scrapers do not run scripts. Server-render the tags.

Questions

How do I set a link preview? −

Add og:title, og:description, og:image and og:url to the head of the page being linked to.

Why does my single-page app have no preview? +

Can I set a preview without editing the page? +

Why does a private page show no card? +

Is the truncation exact? +

Sources

The Open Graph protocol

Was this tool any good?

INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING