Preview how your link looks when shared, and get the OG tags

How to use OG Image Preview

1. Enter the Title (og:title) and the Description (og:description).
2. Enter the Page URL; the cards show its domain.
3. Paste the Image URL (og:image, 1200 × 630) as a full https:// address. Leave it empty to see the warning platforms would give.
4. Add the Site name shown on Slack and Discord cards.
5. Watch the previews update as you type. Copy or download the Meta tags (og-tags.html) and read any warnings underneath.

What it does and when to use it

When someone shares a link, social networks and chat apps build a card from the page’s Open Graph tags: a picture, a title and a short description. A missing image or a title that is cut off halfway makes the link look careless and gets fewer clicks. This tool shows the three common card styles side by side so you can fix wording and pictures before the link goes out.

Make the image itself by cropping a photo to the 1.91:1 link-preview shape in the Image Cropper, or start from a 1200 × 630 Gradient Image. For a full set of SEO tags, use the Meta Tag Generator or the OG Tag Generator.

How it works

The tool runs in your browser. It escapes your text so it is safe in HTML, takes the host name from the URL, and builds three cards: a 500 px Facebook / LinkedIn card with the title cut near 88 characters and the description near 110; a 500 px X card (summary_large_image) with the title near 70 characters; and a 400 px Slack / Discord card that shows the site name, title and up to 160 characters of description. Only http and https image addresses are displayed.

Worked examples

Outputs from the tool’s own function.

Default fields, no image. The tags include <meta property="og:title" content="Free online tools that run in your browser"> and <meta name="twitter:card" content="summary_large_image">, and the tool warns that without og:image most platforms show a small or blank card.

A long blog title. “How to bake sourdough bread at home without a stand mixer or a proofing basket” gives the warning “The title is 78 characters; most cards cut it near 60–70.” Shorten it to keep the key words visible.

An http image. Image URL http://example.com/og.png produces “og:image should be an absolute https:// URL.”

Limits and tips

• Descriptions over 160 characters trigger a warning; aim for one clear sentence.
• After changing tags on a live site, platforms may keep showing the old card until their cache refreshes.
• Keep the important part of the image away from the edges, since some apps crop it.