A free Open Graph generator with live previews
Paste a link into WhatsApp, LinkedIn or a group chat and something appears: a picture, a headline, a line of description. That preview is not chosen by the platform. It comes from a handful of meta tags in the head of your page, and if you haven't set them, the platform guesses, often badly.
This Open Graph generator takes the guesswork away. Fill in your title, description, URL and image, and it writes the complete set of og: and twitter: tags for you. As you type, you see live previews of how the link will actually look on Facebook, X, LinkedIn and WhatsApp, with character counts so nothing gets cut off mid-word.
It handles articles, products, videos and profiles, warns you about the mistakes that break previews, and gives you code you can paste straight into your page. It's free, needs no account, and nothing you type is uploaded.
How to use the generator
- Pick your content typeWebsite for most pages, article for blog posts, product for shop items. The type unlocks extra tags such as publish date or price.
- Write the title and descriptionTreat them as the headline and subhead of your link, not a copy of your SEO title. The counters show when you're near the limits.
- Add the image URLUse an absolute link to a public image, 1200 by 630 pixels. The preview loads it so you can check the crop.
- Check all four previewsEach platform crops and truncates differently. It takes two seconds to flip between them.
- Copy the tags into your page headPublish, then run the URL through a debugger to clear any cached preview.
What is Open Graph?
The Open Graph protocol was introduced by Facebook in 2010 so that pages could describe themselves to social platforms in a consistent way. It caught on everywhere: LinkedIn, WhatsApp, X, Slack, Discord, Telegram, iMessage and most messaging apps read the same tags.
The tags live in the <head> and use the property attribute rather than name:
<meta property="og:title" content="How to bake sourdough" /> <meta property="og:description" content="A beginner's guide to your first loaf." /> <meta property="og:image" content="https://example.com/images/sourdough.jpg" /> <meta property="og:url" content="https://example.com/blog/sourdough" /> <meta property="og:type" content="article" />
Without them, platforms fall back to whatever they can scrape: the page title, the first paragraph they find and any image large enough to use. That's how links end up previewing with a sidebar advert or a logo cropped in half.
The tags that matter
| Tag | Required? | What it does |
|---|---|---|
og:title | Yes | The headline of the preview. Around 60 characters shows in full. |
og:type | Yes | website, article, product, video, profile. |
og:image | Yes | Absolute URL of the share image. |
og:url | Yes | The canonical URL of the page. |
og:description | Recommended | One or two lines under the title, roughly 110 to 200 characters. |
og:site_name | Recommended | Your brand name. |
og:locale | Optional | Language and region, such as en_US. |
og:image:width / :height | Recommended | Lets platforms lay out the card before the image loads. |
og:image:alt | Recommended | Describes the image for screen readers. |
twitter:card | Recommended | Large image or small thumbnail on X. |
Open Graph image sizes
One image at 1200 × 630 pixels works everywhere. That's the 1.91:1 ratio Facebook and LinkedIn expect, and X displays it cleanly as a large card. Keep the file under about 5 MB, use PNG or JPG, and make sure it loads over https without a login.
| Platform | Displays at | Notes |
|---|---|---|
| 1200 × 630 | Minimum 200 × 200; smaller images become a thumbnail | |
| 1200 × 627 | Very close to the standard; the same file works | |
| X (large card) | 1200 × 628 | Crops to roughly 2:1, so keep text away from top and bottom edges |
| Small preview | Often shows a compressed thumbnail; keep text large | |
| Slack and Discord | Varies | Both read Open Graph tags directly |
Design tip: keep important text within the middle 80% of the image. Different apps crop the edges, and a headline that touches the border will lose a letter somewhere.
Writing titles and descriptions that get clicked
Your social title doesn't have to match your SEO title, and often it shouldn't. A search title is written for a query; a social title is written for someone scrolling. Two different jobs.
- Lead with the benefit or the surprise, not your brand name. The site name already appears separately.
- Keep the title under about 60 characters so it survives on mobile.
- Use the description for the reason to click, in one or two lines. Anything past roughly 200 characters is cut.
- Don't repeat the title in the description. It wastes the only extra line you get.
- Skip the hashtags. They belong in the post, not the card.
Our blog title generator is useful here if the headline isn't landing, and the meta description generator handles the search version of the same job.
Type-specific tags
Setting og:type to something other than website unlocks extra properties that some platforms use.
Articles
article:published_time, article:modified_time, article:author, article:section and article:tag describe a blog post or news story. Dates use ISO 8601 format, such as 2026-09-24T09:00:00+05:30.
Products
product:price:amount, product:price:currency and product:availability let shopping-aware surfaces show the price with the link. They complement, rather than replace, Product structured data, which is what search engines actually use for rich results.
Videos and profiles
Video pages can add og:video, its MIME type and duration. Profile pages can add first name, last name and username. Both are niche, but they cost nothing when you have the data.
Twitter Cards: do you still need them?
X falls back to Open Graph tags when Twitter-specific tags are missing, so you won't get a blank preview without them. There's still one good reason to include twitter:card: it decides whether you get the big edge-to-edge image or a small square thumbnail beside the text. summary_large_image is what most publishers want.
The other Twitter tags are worth adding when they apply. twitter:site credits your brand account, and twitter:creator credits the author. Everything else can safely mirror your Open Graph values, which is what the "use the same" option in this tool does.
Common Open Graph mistakes
- Relative image URLs.
/images/share.pngwon't resolve for a crawler. Always absolute. - Images behind a login or a firewall. If a logged-out visitor can't load it, neither can the scraper.
- Tags outside the head. Open Graph tags in the body are ignored.
- Using
nameinstead ofproperty. Open Graph usesproperty; only Twitter tags usename. - Duplicate tags. A theme and a plugin both outputting
og:imageleads to unpredictable results. - Forgetting
og:url, which is how platforms group all shares of the same page. - An image that's too small. Under 200 pixels wide and Facebook won't use it at all.
- Text right at the image edges, which gets cropped differently on each platform.
- Assuming an update is instant. Previews are cached; you have to refresh them.
Why your preview won't update
This is the single most common complaint about Open Graph tags, and it's almost never a code problem. Platforms cache link previews aggressively, sometimes for weeks, so changing your tags does nothing to links already in the wild until the cache is cleared.
- Facebook and Instagram: paste the URL into the Sharing Debugger and click "Scrape Again".
- LinkedIn: use the Post Inspector, which re-fetches on demand.
- WhatsApp: shares Facebook's cache in most cases; refreshing there usually fixes it.
- X: re-scrapes periodically; adding a harmless query string such as
?v=2forces a fresh fetch for testing.
If the debugger shows the old image even after a re-scrape, check that your CDN or caching plugin isn't serving a stale copy of the page HTML.
Adding the tags to your site
WordPress
Yoast, Rank Math and All in One SEO all generate Open Graph tags from your featured image, title and excerpt, and each has a "Social" tab per post for overrides. Use this generator when you want a different social title or image from the SEO one, or for pages the plugin doesn't cover. Don't paste a second set into the theme if a plugin is already outputting them.
Shopify, Wix and Squarespace
All three output basic tags automatically, usually pulling the product image and description. Custom control means editing the theme's head template, so check what's there before adding more.
Static sites and frameworks
Generate the tags per page from your front matter or page data, so the title, description and image always match the content. In Next.js, Astro, Hugo and Jekyll this is a few lines in a layout file and it never drifts out of date.
Designing a share image that works
The image is the part of the preview people see first, and it is doing a job that a photograph from the article often cannot. It has to read at thumbnail size in a crowded feed, survive being cropped, and make sense without context.
- Put a short headline on the image, four to six words in large type. Many people never read the title text beside the card.
- Use strong contrast. Pale grey on white disappears on a phone screen in daylight.
- Add your logo small and in a corner, not across the middle. Recognition matters; domination does not.
- Avoid busy photographs behind text. A solid block or a darkened overlay keeps the words readable.
- Make a reusable template. A single file with a swappable headline and background colour turns a ten-minute design job into a thirty-second one, and gives every share a consistent look.
If you generate share images automatically from a template, keep the output at 1200 × 630 and make sure the file name changes when the design does, otherwise caches will keep serving the old version.
Testing before you publish
The previews on this page show how the tags will be interpreted, but the real test happens once the page is live and a crawler can fetch it. A quick routine that catches nearly everything:
- Publish the pageWith the tags in the head, not the body.
- View source and search for "og:"Confirm the tags are there, once each, with the values you expected. A plugin overriding your tags shows up immediately.
- Run it through a debuggerFacebook's Sharing Debugger reports exactly what it sees, including missing properties and image errors, and forces a fresh scrape.
- Send yourself the linkPaste it into WhatsApp or Slack. Real apps sometimes crop differently from any preview tool.
Do this once per template rather than per page. If your blog post template is right, every post that uses it will be right too.
Frequently asked questions
What are Open Graph tags?
Open Graph tags are meta tags in the head of a page that tell social platforms what title, description and image to show when someone shares the link. The protocol was created by Facebook in 2010 and is now used by almost every platform.
Is this Open Graph generator free?
Yes. It is free, needs no sign-up, and runs entirely in your browser, so nothing you type is uploaded.
What size should an Open Graph image be?
1200 by 630 pixels is the safe standard, which is a 1.91:1 ratio. Keep the file under about 5 MB and use PNG or JPG.
Which Open Graph tags are required?
The protocol requires og:title, og:type, og:image and og:url. In practice you should also add og:description and og:site_name, since most platforms display them.
Do I still need Twitter Card tags?
X falls back to Open Graph tags when Twitter tags are missing, but adding twitter:card is still worth it because it controls whether you get a large image or a small thumbnail.
Why is my old image still showing?
Platforms cache link previews. Run the URL through the Facebook Sharing Debugger or LinkedIn Post Inspector and use their scrape or refresh option to clear the cache.
Can I use a relative image URL?
No. og:image must be an absolute URL including https:// and the domain, and the image must be publicly accessible without a login.
Does WordPress add Open Graph tags automatically?
SEO plugins such as Yoast and Rank Math add them from your featured image and excerpt. Use this tool for custom overrides or for pages where the plugin output is wrong.
Build your meta tags
Every link you share is a small advert for your page. Go back to the Open Graph generator, fill in the details and make sure it looks the way you intended.