Open Graph Preview & Meta Tag Generator
Fill in a title, description, image and URL to see approximate link-card mockups for X (Twitter), Facebook, LinkedIn and WhatsApp, then copy the matching Open Graph and Twitter Card tags.
What this Open Graph tool is for
When someone pastes a link into a social feed or a chat, the app fetches the page and builds a card from its Open Graph (og:) and Twitter Card (twitter:) meta tags: a headline, a short summary, an image and the domain. If those tags are missing, the card may show the wrong image, a cut-off title or nothing useful at all. This page helps you draft the tags before publishing. You type the values, see four side-by-side mockups styled after X (Twitter), Facebook, LinkedIn and WhatsApp, and copy ready-to-paste HTML.
How to use it
- Enter the Page URL (the canonical address of the page being shared), a Title and a Description. The counters turn amber past 85% of the guide length and red once the title passes 60 or the description passes 160 characters.
- Paste an absolute Image URL, for example
https://example.com/share.jpg. If it fails to load, the cards say so. - Optionally add a Site Name and change OG Type (it defaults to
website;articleis common for blog posts). - The previews update as you type; Preview & Generate refreshes them manually and Reset clears the form.
- Press Copy Tags and paste the block inside the
<head>of your page.
What gets generated
The output always contains og:type and twitter:card set to summary_large_image (the large-image card layout). Other tags appear only for fields you filled in: og:title, og:description, og:url, og:image and og:site_name, plus twitter:title, twitter:description and twitter:image. Quotes, ampersands and angle brackets are escaped so the attributes stay valid. The placeholder text shown in empty previews ("Page Title") is never written into the tags.
How faithful are the previews?
They are simplified mockups drawn with this page's own CSS, meant to show layout and truncation at a glance. The real platforms change their designs, crop images to their own aspect ratios, may shorten text at different lengths and can ignore tags altogether, for example when a site is blocked or the image is too small. The 60- and 160-character guides are common rules of thumb rather than limits published by the platforms. For large cards, an image of about 1200 × 630 pixels (roughly 1.91:1) is widely recommended; keep key text away from the edges so cropping does not cut it.
Everything is assembled in your browser and nothing you type is sent to ToolHub. The only network request is for the image: your browser loads it straight from the address you entered, so that server sees the request.
Frequently asked questions
Why does the real share card still look old after I fixed my tags?
Platforms cache link previews, sometimes for days. Facebook's Sharing Debugger and LinkedIn's Post Inspector let you ask for a fresh scrape of a URL; other apps usually refresh on their own schedule.
Do I need both og: and twitter: tags?
X can fall back to Open Graph for the title, description and image, but it needs twitter:card to choose a card type. Including both sets, as generated here, is the safest option.
Can I use a relative image path?
No. Crawlers fetch the image on their own, so og:image should be a full https URL that is publicly reachable without a login or hot-link protection.
Can this page read the tags from an existing URL?
No, it only builds tags from what you type. To inspect the meta tags a live page already has, paste its source into the HTML Analyzer on our Web Page Tools page.