Open Graph Generator
Generate Open Graph and Twitter Card meta tags with live preview cards for Facebook, LinkedIn, X and WhatsApp, plus image size checks. Or paste tags to inspect.
How to use Open Graph Generator
- 1Enter the title, description, page URL and an absolute image URL, or choose a local image to try the layout.
- 2Check the preview cards and fix any warning about missing tags or image size.
- 3Copy the tags into your page's head, or download them.
What makes it better
- Generate and Parse modes: build tags, or paste existing ones to see what each platform will use
- Preview cards for a Facebook and LinkedIn style large card, an X summary card and a compact WhatsApp style card
- Covers og:title, description, url, type, image with size and alt text, site_name, locale, article:* and og:video
- Twitter Card tags with automatic leading @ for handles
- Warnings for missing required tags, relative image URLs, http images and sizes below the recommendation
About Open Graph Generator
Open Graph Generator builds the og: and twitter: meta tags that control how a link looks when it is shared, and draws preview cards from what you enter. Add a title, description, URL and image, choose a card type, and the page warns about missing required tags and image sizes against the usual 1200 by 630 recommendation. The Parse mode reads tags from a pasted head and shows which value each platform will use, including fallbacks such as og:title to the page title.
Common uses
- Make sure a blog post shows a large image and the right headline when shared in a chat or on social media.
- Find out why a shared link shows no picture by parsing its head for relative or missing og:image values.
- Set article published time and tags for news and blog posts.
- Compare what Facebook, X and WhatsApp will each pick when only a few tags are present.
Example
Input
<title>Handmade Soap Shop | Lavender & Oat Bars</title> <meta name="description" content="Small-batch soap made with lavender and oats."> <link rel="canonical" href="https://example.com/soap"> <meta property="og:title" content="Lavender & Oat Soap Bars"> <meta property="og:description" content="Small-batch soap with free shipping over $30."> <meta property="og:image" content="https://example.com/img/soap-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:url" content="https://example.com/soap"> <meta name="twitter:card" content="summary_large_image">
Result
<meta property="og:type" content="website"> <meta property="og:title" content="Lavender & Oat Soap Bars"> <meta property="og:description" content="Small-batch soap with free shipping over $30."> <meta property="og:url" content="https://example.com/soap"> <meta property="og:image" content="https://example.com/img/soap-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image">
Good to know
- The cards are approximations drawn by this page. Each platform has its own layout and caches the result of its first crawl, so previews here will not match every detail.
- Preview images are loaded by your browser straight from the address you type, which tells that host the request. The Choose local image option previews a file on your device without any network request.
- Nothing here fetches your live page or clears a platform's cache; after changing tags you may need to re-scrape the link with that platform's own debugger.
Open Graph Generator FAQ
What is the best size for an Open Graph image?
The usual recommendation is 1200 by 630 pixels, a 1.91:1 ratio, as a JPG or PNG under 8 MB. Facebook accepts images from 200 by 200 pixels, but small ones are shown as a thumbnail rather than a large card.
Which Open Graph tags are required?
The Open Graph protocol asks for og:title, og:type, og:image and og:url. In practice og:description and og:image dimensions are also worth adding. This page warns when any of the main ones is missing.
Do I need separate Twitter Card tags?
Not always. X falls back to the og: tags for title, description and image, so you mainly need twitter:card to choose summary or summary_large_image. Add twitter:site or twitter:creator if you want an account attributed.
Why does my shared link show an old image?
Platforms cache the preview from the first time they crawl a link. After you change the tags, ask the platform's own sharing debugger to fetch the page again. Tags written here only help once they are live on the page.
Why is og:image ignored when I use a relative path?
Crawlers read your tags without the context of your site, so a path like /img/card.png has nothing to attach to. Use a full address that starts with https:// and is reachable without logging in.
Is my image uploaded when I preview it?
A typed image URL is loaded by your browser from that address, exactly as it would be on any web page. A local file chosen with the file picker is shown through a temporary in-browser link and never leaves your device.