By · Updated

Open Graph Preview

See How Your Link Card Looks on Facebook, LinkedIn, Slack, Discord and WhatsApp

No ratings yet

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Open Graph Preview works

An Open Graph preview shows how a link will look when it is shared, before anyone shares it. Enter the title, description, image and URL, and see the cards Facebook, LinkedIn, Slack, Discord and WhatsApp would draw, one under the other, then copy the tags for the page head.

When a link is pasted into a post or a chat, the app fetches the page and reads its Open Graph meta tags: og:title, og:description, og:image, og:url and og:site_name. Each app then lays those out its own way, so a title that fits on Facebook can be cut short on LinkedIn, and a description that shows in Slack never appears on LinkedIn at all.

How each platform uses your Open Graph preview tags

Facebook shows the image in a 1.91:1 crop, then the domain in capitals, a bold title over up to two lines and one line of description. LinkedIn shows the image, the title and the domain, and drops the description. Slack and Discord show the site name, the title as a link, the description and the image below. WhatsApp puts a compact card inside the chat bubble above the link itself.

Writing tags that work everywhere

Keep the title under about 60 characters and put the important words first, because every platform cuts from the end. Keep the description under 155 characters. Use a 1200 by 630 image with the subject in the middle, since some apps crop the edges, and always give absolute https URLs for both the image and the page.

FAQ

Why does my link preview show an old title or image?

Platforms cache link previews, often for days. After changing the tags, run the URL through the Facebook Sharing Debugger or the LinkedIn Post Inspector and ask them to scrape it again. Slack and Discord refresh on their own after a while, or when the URL changes.

Why is there no image in my preview?

The image URL must be absolute, start with https, and be reachable without a login. Very large files are skipped: keep it under 5 MB. Some apps also ignore images smaller than 200 by 200 pixels, so a small logo often produces a card with no picture.

Does the preview match the real apps exactly?

It follows each app's current layout, colours and line limits closely, but apps change their designs often and fonts differ between devices. Treat it as a check for truncation, cropping and missing tags, then confirm in the app itself for anything critical.

What does the theme colour do?

Discord uses the page's theme-color meta tag for the coloured bar down the left side of the embed. Other apps ignore it for link cards, but mobile browsers use the same tag to tint the address bar, so it is worth setting to your brand colour.

See also: all SEO tools, Dev Utilities, Formatters & Validators, Data & Encoding, Security & Identifiers, Accessibility, AI.

Related tools

Open Graph Tags Generator

Generate Open Graph and Twitter card meta tags for rich link previews.

Twitter Card Preview

Preview your link as an X (Twitter) card and copy the meta tags.

OG Image Generator

Make a 1200×630 Open Graph share image from a title and colours.

SERP Preview

Preview your page title and description as a Google search result.

Meta Tag & Open Graph Checker

Check title, description, canonical, Open Graph and Twitter card tags in pasted HTML.