Open Graph Preview & Meta Tag Generator
Write your page's title, description, and image, see the social share card render live, and copy the exact Open Graph and Twitter meta tags. In-browser.
Your stuff stays yours. The conversion happens in this page's JavaScript. Nothing you paste here leaves your machine, and the tool keeps working with the network unplugged.
Describe the card - title, description, image, URL - and two things happen: the exact Open Graph and Twitter meta tags appear ready to paste into your page's <head>, and a live preview renders below the output so you can see roughly what Slack, LinkedIn, iMessage, and X will show before the link is shared and cached wrong. Values are HTML-escaped for you, the Twitter card type switches to summary_large_image automatically when an image is present, and missing optional fields are simply omitted rather than emitted empty.
How to build and preview a share card
- In Card fields in, write one field per line as
key: value. The keys aretitle,description,image,url, andsite. Onlytitleis required, and the separator must be a colon. - Use full absolute addresses, starting with
https://, forimageandurl. - Press Generate + preview. The tags appear in Meta tags out, and a card preview renders directly underneath.
- Look over the preview. The domain line comes from
url, and the image disappears from the card if it fails to load. - Press Copy result and paste the tags inside the
<head>of the page at that URL, replacing any older Open Graph or Twitter tags.
How link previews get built
When someone pastes a link into Slack, LinkedIn, iMessage, Facebook, or X, the platform's crawler requests the page and reads the <meta> tags in its HTML. The Open Graph protocol, created by Facebook and now read by most platforms, defines four basic properties: og:title, og:type, og:image, and og:url. The generator always writes og:type as website, which is the right value for home pages, landing pages, and most product pages. It writes og:image and og:url only when you supply them, so include both if you want a complete card.
Open Graph tags use the property attribute. X's card tags use name, and the generator writes each kind correctly. X reads og:title, og:description, and og:image when its own tags are missing. The twitter:card value picks the layout: summary is a small square thumbnail beside the text, and summary_large_image is a wide image above it. The tool chooses summary_large_image whenever you provide an image.
Two crawler habits matter in practice. Many crawlers do not run JavaScript, so tags injected by a client-side framework after load may never be seen. The tags need to be in the HTML the server sends. And crawlers need to fetch the image without logging in, so an image behind authentication, a firewall, or bot blocking produces a card without a picture.
A worked example
A blog post title with an ampersand and quotation marks is exactly the kind of value that breaks hand-written tags. Enter:
title: Tips & Tricks for "Fast" Builds
description: Cut CI time <in half> with caching.
image: https://example.com/img/ci-card.png
url: https://example.com/blog/fast-builds
site: Example DevPress Generate + preview and the output is:
<meta property="og:type" content="website">
<meta property="og:site_name" content="Example Dev">
<meta property="og:title" content="Tips & Tricks for "Fast" Builds">
<meta property="og:description" content="Cut CI time <in half> with caching.">
<meta property="og:url" content="https://example.com/blog/fast-builds">
<meta property="og:image" content="https://example.com/img/ci-card.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tips & Tricks for "Fast" Builds">
<meta name="twitter:description" content="Cut CI time <in half> with caching.">
<meta name="twitter:image" content="https://example.com/img/ci-card.png">The quotation marks became ". Without that, the first " would end the content attribute and the title would be cut to Tips & Tricks for. Platforms decode the entities, so the card shows the original punctuation. The preview card shows example.com as the domain, the title in bold, and the description below it.
Drop the image line and generate again. The og:image and twitter:image tags vanish, and twitter:card switches to summary.
Common problems and fixes
A line is rejected with a "key: value" error
Every non-blank line must start with one of the five keys followed by a colon. og:title: ..., title=..., and Title - are all rejected. A description that wraps onto a second line fails too, because the second line has no key. Keep each value on a single line.
The image is missing from the preview
The preview loads the image straight from your address, so a typo, a relative path like /img/card.png, or a server that blocks hotlinking all make it disappear. Platforms fail the same way, and relative paths are the most common cause. Use the full https:// URL you can open in a private browser window.
No domain appears on the card
The domain line appears only when url is present and is a valid absolute address. A value like example.com/launch without a scheme is still written into og:url as typed, but platforms may reject it. Add https://.
The platform shows a different title than your tags
Pages built with a CMS or SEO plugin often already print Open Graph tags, and pasting a second set creates duplicates that each platform resolves differently. View the page source, search for og:title, and make sure it appears once.
Related tasks
Tag the shared link for analytics with the UTM link builder, or create a clean URL path for the page with the slug generator.
Questions this tool gets asked
What size should the og:image be?
1200 × 630 pixels is the standard that renders sharply everywhere and gives the 1.91:1 ratio large-image cards expect. Keep critical content away from the edges; some platforms crop.
I changed my tags but the platform still shows the old card. Why?
Platforms cache scraped cards aggressively. Use the platform's debugger to force a refresh - Facebook's Sharing Debugger, LinkedIn's Post Inspector, or (on X) simply appending a query string to the URL.
Is the preview pixel-identical to every platform?
No, and no tool's is - each platform renders cards with its own fonts, crops, and truncation. The preview shows the structure (image, domain, title, description) so you catch missing images and truncated titles, which is what actually goes wrong.
Do I need both Open Graph and Twitter tags?
X reads Open Graph tags as a fallback, but the twitter:card tag is what opts you into the large-image layout, so shipping both - as generated here - is the safe standard.