Link preview and Open Graph tags

Enter the title, description and image of a page and see the preview cards that social networks and messaging apps show. Then copy the Open Graph and Twitter meta tags for your page.

  • Free
  • No sign-up
  • Runs in your browser
open-graph-preview
Full web address of the image, ideally 1200 × 630 px

Fill in the values above to see the result.

100% private — the calculation is done in your browser and nothing is sent to any server.

Next step

Keep going with your result in another tool. Nothing is uploaded.

How it works

Fill in the details

Title, description, image address and page address.

Look at the previews

Facebook, LinkedIn, X and messaging apps.

Copy the tags

Paste them inside the head of your page.

The card people see before they click

When a link is pasted into Facebook, LinkedIn, WhatsApp, Slack or X, the platform does not show the raw address. It shows a card with an image, a title and a short description, built from special meta tags in the head of the page. A good card gets clicks, and a missing or broken one, with no image or the wrong title, makes a link look untrustworthy. Setting these tags up takes a few minutes, and this tool shows you the result before you publish.

The tags that matter

  • og:title is the headline of the card. Keep it clear and under about 60 to 70 characters.
  • og:description is one or two sentences under the title. Many platforms show only the first 100 to 200 characters.
  • og:image is the picture. Use an image of about 1200 × 630 pixels, in the 1.91 to 1 ratio, as a JPG or PNG, hosted at a public web address.
  • og:url is the address that should be treated as the official one for the page.
  • og:site_name is the name of your site or brand.
  • twitter:card chooses between a large image card and a small one on X, which also reads the Open Graph tags when its own are missing.

How to use this tool

Fill in the fields and the previews appear for the main platforms, side by side. The image is loaded from the address you type, so it has to be a public web address, and the tool reports its real size and warns if it is too small or the wrong shape. When you like the result, copy the meta tags and paste them into the head of your page. The tool cannot read an existing page for you, because browsers do not let a web page fetch another site's content.

Why a shared link may show an old card

Platforms cache the card for a link. If you fix the tags and the old card still appears, use the debugger of the platform, such as the Facebook Sharing Debugger or the LinkedIn Post Inspector, to ask it to fetch the page again.

Limits

The previews are close approximations. Each platform has its own layout and changes it from time to time. The image address is contacted only to show the picture, and none of your text is sent anywhere. To check the length of your title and description for search results, use the title and description length checker.

Frequently asked questions

What size should an Open Graph image be?
About 1200 × 630 pixels, in a 1.91 to 1 ratio, as a JPG or PNG under a few megabytes, at a public web address.
Why does my link show no image when shared?
The og:image tag may be missing, the address may not be public, or the platform may have cached an older version. Use the platform's debugger to refresh it.
Do I need separate tags for X (Twitter)?
Not always. X uses Open Graph tags if its own are missing, but twitter:card lets you choose between a large and a small image card.
Can this tool read my page's tags from its address?
No. A browser page cannot fetch another site's content, so you type the values in and the tool builds the preview and the code.
How long should the title and description be?
Aim for a title under about 60 to 70 characters and a description under about 150 to 200. Platforms cut longer text.
Is my text sent anywhere?
No. Only the image is loaded from the address you type, to show it in the preview.

Related tools

More utilities that also run without leaving your browser.

Lorem ipsum generatorGenerate placeholder text by paragraphs, sentences or words. Markdown table generatorPaste data from a spreadsheet or a CSV and get a ready-made Markdown table. Robots.txt and sitemap.xml generatorCreate a robots.txt and a sitemap.xml for your site and download them. Clean URLRemove tracking parameters from links before you share them. Broken link checkerPaste a list of URLs and see which ones fail to respond. Email signature generatorCreate a professional HTML email signature and copy it into your email program.