Open Graph Generator

What is an Open Graph generator?

An Open Graph generator produces the set of og: meta tags that control how your page appears when someone shares it on Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, Pinterest, or X (Twitter). Without them, those platforms guess what to show — usually pulling the wrong image, a truncated title, or a generic placeholder.

This free Open Graph meta tag generator produces a complete, ready-to-paste set of Open Graph and Twitter Card tags for any page. Enter your title, description, image, and URL — the tool outputs the HTML block you paste into your <head>. No signup required.

How to generate Open Graph tags

1. Enter your page title — this becomes og:title.
2. Enter a short description — this becomes og:description.
3. Paste the URL of the image you want to appear in the preview (see image size guidance below).
4. Paste the canonical URL of the page — this becomes og:url.
5. Choose your content type — usually website or article.
6. Click Generate and copy the output into your HTML <head>.

Open Graph meta tags example

Here's what the generated output looks like:

<meta property="og:type" content="website">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A short description of the page.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A short description of the page.">
<meta name="twitter:image" content="https://example.com/image.jpg">

Paste this block into the <head> of your page. The og:image:width and og:image:height tags help platforms render the preview without having to fetch the image first.

Open Graph image size — what to use

The most widely supported size for Open Graph images is 1200 × 630 pixels — a roughly 1.91:1 aspect ratio. This is what Facebook, LinkedIn, Slack, Discord, and WhatsApp render without cropping.

Other platforms:

• Twitter/X (summary_large_image): 1200 × 628 minimum, up to 2:1 ratio.
• LinkedIn: 1200 × 627 recommended.
• Pinterest: 1000 × 1500 (2:3 portrait) — Pinterest uses its own aspect ratio.
• WhatsApp: 300 × 200 minimum, will render whatever ratio you provide.

File size: keep under 1 MB. JPG or PNG. Avoid GIFs and SVGs — most platforms don't render them in previews.

Open Graph Protocol — the short version

The Open Graph Protocol was introduced by Facebook in 2010 and is now an open standard used by most social and messaging platforms. It defines a set of meta property="og:*" tags that describe a web page's title, type, image, URL, and description. Platforms read these tags instead of inferring from the page content, which gives you full control over the preview.

Why your preview might still be wrong after adding tags

Once you've added the tags, Facebook, LinkedIn, and X cache the preview for a period. If you've changed your tags but the old preview is still showing when you share, it's usually because the platform is serving a cached version. To force a refresh, use the platform's own debugger tool — Facebook's Sharing Debugger, LinkedIn Post Inspector, or the Twitter Card Validator. These tools let you paste the URL and request a re-scrape.

Open Graph vs Twitter Cards — what's the difference?

Open Graph tags (og:*) are read by Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, and Pinterest. Twitter/X reads its own twitter:* tag set — but if you don't provide them, X falls back to your Open Graph tags. In practice, most sites use Open Graph tags as the primary source and add two or three Twitter-specific tags on top (usually twitter:card and twitter:image). Our generator outputs both.

Frequently asked questions

Is this Open Graph generator free?

Yes — free to use, no signup required.

Do I need to generate tags for every page on my site?

Yes, ideally. Each page has its own title, description, and image, so each page needs its own Open Graph tags. If you're using a CMS or framework, most have plugins or components that generate these automatically — but you'll want to verify the output on a few pages to make sure it's correct.

Does adding Open Graph tags affect my SEO rankings?

No. Open Graph tags are not a ranking factor. Their purpose is to control the preview when your page is shared on social and messaging platforms. They can indirectly improve traffic by making shared links more appealing, but Google's rankings don't read them.

Can I use this generator for any framework?

Yes. The generated output is plain HTML meta tags, which work on any platform — static HTML, WordPress, Next.js, Nuxt, Astro, Hugo, Jekyll, Ghost, or a custom framework. You paste the tags into your page head, or into the framework's head-management component.

What image should I use?

A 1200 × 630 pixel JPG or PNG, under 1 MB, that includes your brand, the page title, and one clear visual. Don't just use your logo on a plain background — the preview needs to communicate what the page is about at a glance.

What's the difference between an Open Graph generator and an Open Graph checker?

A generator creates tags you add to your page. A checker (also called a debugger or validator) fetches an existing page and shows what tags are currently on it, and how the preview will render. Use a generator first, then a checker to verify.