Open Graph Generator — OG Tags & Twitter Cards with Multi-Platform Preview

Q: What are Open Graph tags?

Open Graph tags are meta tags that tell social platforms how to display a link when someone shares it. They control the title, description, image, and URL that appears in the preview card. Without them, platforms guess from the page content, often with poor results.

Q: What is the ideal OG title and description length?

Keep the OG title between 50 and 60 characters to guarantee it renders without truncation. Keep the description between 55 and 160 characters. Both are counted in this tool with live warnings when you exceed the recommended limit.

Q: What image size should I use for OG?

1200 by 630 pixels is the standard. Facebook, LinkedIn and Slack all render this size without cropping. Twitter uses the same ratio for large-image cards. Minimum acceptable is 600 by 315, and files should be under 5 MB.

Q: Why does my image not update when I share the link again?

Facebook, LinkedIn and X cache the preview for days or weeks. Use Facebook's Sharing Debugger, LinkedIn's Post Inspector, or X's Card Validator to force a fresh crawl. Changing the image filename also forces a re-scrape.

Q: Do I need both Open Graph and Twitter Card tags?

Yes, ideally. X falls back to Open Graph tags when its own are missing, but you get more control by adding twitter:card, twitter:title and twitter:image explicitly. The twitter:card property in particular has no Open Graph equivalent.

Q: Is my data sent to a server?

No. Everything you enter is processed in your browser with JavaScript. Nothing is uploaded, stored, or logged.

Fill in the fields below. Everything you type updates the previews, counters and generated code in real time. Warnings appear below the form when a value falls outside recommended limits.

Page title 0 / 60

OG type

Description 0 / 160

Page URL

Site name (optional)

Image URL

Image width (px)

Image height (px)

Image alt text

Twitter card type

Twitter @site

Twitter @creator (optional)

Locale

Article author (if type = article)

Validation

See exactly how your card will look on each platform. Every platform renders the same underlying tags slightly differently — image ratio, truncation, avatar placement, and card width all vary.

Facebook renders the classic card with a large image and two lines of description.

The same tags, formatted for the framework or CMS you actually use. Pick a language below and copy the snippet.

Paste an existing <head> section or full HTML page. The tool extracts every Open Graph and Twitter Card tag it finds, highlights what is missing, and can load the values back into the Builder for editing.

Paste HTML here

Pre-filled starting points for the most common page types. Click any template to load sensible defaults into the Builder, then edit the values to match your content.

💡 A note on templates. These are conventions, not rules. Social platforms do not differentiate much between an article and a product page in terms of how they render the card — the og:type value mainly helps aggregators and analytics tools categorise your content. Start with a template, then adjust the fields that matter for your specific page.

🔗 What Open Graph tags actually do

When you paste a link into Facebook, WhatsApp, Slack, Discord, LinkedIn or X, the platform fetches the page and looks for a small set of meta tags that describe it. Those tags are the Open Graph protocol, originally created at Facebook in 2010 and now treated as a de facto standard across the entire internet. If the tags are present and correct, you get a card with a title, a description, an image and the domain. If they are missing, the platform falls back to scraping whatever it can find — usually the page's title and first paragraph, and often the wrong image.

The difference between the two outcomes is dramatic for click-through rates. A page with a properly configured OG card gets a preview that looks deliberate and trustworthy. A page without one gets a preview that looks accidental, and users have learned to associate that with low-quality links.

Everything on this page is designed to make sure you fall into the first category.

📋 Every tag this generator produces

Tag	Recommended value	What it does
og:title	50–60 characters	The headline in the preview card. Longer values get truncated with an ellipsis.
og:description	55–160 characters	The supporting line below the title. Two lines on most platforms.
og:image	1200 × 630 px	The hero image. Use an absolute URL, not a relative path.
og:url	Canonical URL	The permanent URL of the page. Helps platforms deduplicate shares.
og:type	website / article / product	Tells aggregators what kind of content this is.
og:site_name	Your brand	Shown above the title on some platforms. Adds brand recognition.
og:image:width	1200	Tells the platform the aspect ratio up front, avoiding a crop.
og:image:height	630	Companion to the width. Set both or neither.
og:image:alt	Short description	Alternative text, used by screen readers and by some platforms as a fallback.
og:locale	en_US	The language and regional variant of the content.
twitter:card	summary_large_image	Controls the card style on X. Has no Open Graph equivalent.
twitter:title	70 characters max	Overrides og:title for X only, if you want different wording.
twitter:description	200 characters max	Overrides og:description for X only.
twitter:image	1200 × 628 px	Overrides og:image for X only.
twitter:site	@yourbrand	The brand's X handle, shown in the card on some layouts.
twitter:creator	@author	The content author's X handle, when it differs from the site.

⚠️ Absolute URLs only. Relative paths like /images/og.jpg do not work for og:image. Every platform fetches the image over the public internet, so it needs a full URL including the domain and the protocol. This is the single most common cause of "my image is not showing up" bugs.

🖼️ The OG image, in detail

The image is by far the most important part of the card. It is what people actually notice in a feed, and getting it wrong is what kills click-through rates. A few rules that hold across every platform:

1200 × 630 pixels is the standard. It has a 1.91:1 aspect ratio, which is what Facebook, LinkedIn, Slack and Discord all expect. It is also what X uses for summary_large_image.
Minimum 600 × 315 pixels. Anything smaller will be rejected by some platforms or rendered as a small thumbnail.
Under 5 MB. Facebook's hard limit. X is more generous but you should stay under 5 MB anyway for load time.
Safe zone in the centre. Some platforms crop to a square for certain layouts. Keep the essential content inside a centred 630 × 630 region so nothing important is lost if the card is cropped.
File format: JPEG for photos, PNG for graphics with flat colour, WebP for everything if you want the smallest file. All three are supported.
Text on the image: keep it to under about 20% of the pixel area. Facebook used to penalise images with heavy text overlay, and while the penalty is gone, the card still looks cluttered when the image is text-heavy.

The validator in the Builder tab checks the dimensions you enter and warns you when they fall outside these ranges, so you know before you publish.

🧪 Testing and cache-busting

After you deploy your tags, the platforms will not necessarily show the new preview right away. Every major platform caches the OG data for a period of time, and the cache is served from their servers, not yours. To force a fresh crawl, use the official debuggers:

Facebook / Meta: Sharing Debugger — enter your URL, click "Scrape Again" if the cached version is stale.
LinkedIn: Post Inspector — same idea, has a "Re-fetch" button.
X (Twitter): Card Validator — preview and force a re-scrape.
Discord, Slack, WhatsApp, Telegram: no public debugger, but they generally re-fetch within minutes. If they do not, tweak the image filename and share again.

The other reliable trick is to change the image filename every time you update the image. A new filename is treated as a new resource, which forces every platform to re-fetch rather than serving the cached version. It is a small annoyance that saves a lot of "why is the old image still showing" frustration.

🔒 Your privacy and how we handle data

Nothing you type is sent anywhere. Every preview, validation check and code generation runs as JavaScript in your browser. There is no server-side component, no account and no logging. If you paste confidential marketing copy into the Builder, it stays on your own device.

Nothing is stored between visits. Refresh the page and the form resets. We do not use localStorage, sessionStorage or cookies to remember what you entered.

Cookies and advertising. Advertising and analytics cookies are switched off by default. They only turn on if you press Accept all, or select them individually under Manage preferences. You can change your choice at any time from the Cookie Policy page. Full details are in our Privacy Policy.

About the author

Khalil Rahman — Front-end developer and tool builder

Khalil has spent the last eight years building browser-based tools for SEOs, marketers and developers. He built this generator after noticing that every other free OG tool only showed one preview card, and none of them warned you when your title was going to be truncated or your image was the wrong aspect ratio. The multi-platform preview and the validation list exist because those are the two features that actually prevent mistakes. He maintains the SkillsInsider SEO and developer toolset.

More about SkillsInsider · Editorial policy · Report an issue

❓ Frequently asked questions

What are Open Graph tags?

Open Graph tags are meta tags placed inside the <head> of a web page that tell social platforms how to display a link when someone shares it. They control the title, description, image and URL that appear in the preview card. Without them, platforms scrape the page and often produce something unappealing — wrong image, truncated title, missing description.

What is the ideal OG title and description length?

Keep the OG title between 50 and 60 characters to guarantee it renders without truncation. Absolute maximum is around 90 characters, but anything past 60 risks an ellipsis on mobile. The description should be 55 to 160 characters; past 160 and platforms will cut it off. Both are counted live in the Builder tab with a warning when you exceed the recommended limit.

What image size should I use for OG?

1200 × 630 pixels is the standard. It has a 1.91:1 aspect ratio, which is what Facebook, LinkedIn, Slack and Discord all expect, and what X uses for the summary_large_image card. The minimum acceptable is 600 × 315. Keep the file under 5 MB. If you want to be safe against square crops, keep the essential content inside a centred 630 × 630 region.

Why does my image not update when I share the link again?

Facebook, LinkedIn and X cache the OG data for days or weeks. Use Facebook's Sharing Debugger, LinkedIn's Post Inspector or X's Card Validator to force a fresh crawl. Changing the image filename also forces a re-scrape everywhere, which is the most reliable trick when the debugger is not available for a particular platform.

Do I need both Open Graph and Twitter Card tags?

Yes, ideally. X falls back to Open Graph tags when its own tags are missing, so you will get some preview without them — but you lose control over the card style, which is what twitter:card sets. That property has no Open Graph equivalent. Adding the explicit Twitter tags is a small amount of extra work that gives you a much more predictable result on X.

Can I use relative URLs for og:image?

No. Every platform fetches the OG image over the public internet, which means you need a full absolute URL including the domain and protocol. A relative path like /images/og.jpg will fail silently and the platform will either show no image or scrape one from the page. This is the single most common cause of "my OG image does not show up" reports.

How does the HTML analyzer work?

Paste the source of a page — the full HTML, or just the contents of the <head> element — and the tool runs a regular-expression scan looking for every <meta> tag with an og: or twitter: property or name. It lists what it finds, flags what is missing from the standard set, and can send those values back to the Builder for editing.

Is my data sent to a server?

No. Every preview, validation check and code snippet is generated in your browser with JavaScript. Nothing you type is uploaded, stored, tracked or shared. Close the tab and it is gone.

Related tools

Open Graph Checker

Twitter Card Generator

All Meta Tags

Bulk SEO Tag Generator

Schema Generator

On-Page SEO Checklist