Open Graph Generator

Generate Open Graph meta tags with a live social-card preview, so links look right when shared on Facebook, LinkedIn, Discord and more.

100% Browser-Based • Local Processing
Card content
Image
Type & locale

Share card preview

No og:image — most platforms show a bare link
example.com Your og:title appears here Your og:description appears here, trimmed the way a share card trims it.

Open Graph tags

Platforms cache share cards. If a link was already shared, re-scrape it with Facebook’s Sharing Debugger or LinkedIn’s Post Inspector after changing these tags.

🧩 RELATED TOOLS
Twitter Card Generator Meta Tag Generator SERP Snippet Preview Canonical Tag Generator All SEO Tools

Privacy Focused

🔒 Local Processing. Your site data never leaves your device.

Instant Results

🌐 Fully Client-Side. Runs instantly in your browser.

No Signup

⚡ No accounts. No API keys. Just open and use.

Browser Based

🚀 No installs, no crawlers, no site verification.

Overview

What is a Open Graph Generator?

An Open Graph Generator creates the og: meta tags that control how your link looks when shared on social platforms. You enter the title, description, URL, and image, see a live preview of the share card, and copy the tags into your page's <head> so Facebook, LinkedIn, Discord, WhatsApp and similar apps display a rich preview instead of a bare link.

When someone shares your page on social media, the platform builds a preview card from your Open Graph (og:) meta tags — the title, description, and image. Without them, your link shows up bare or with the wrong image, which kills click-through.

This generator builds the og: tags and shows a live preview of the resulting card as you type. It runs entirely in your browser, and the tags are yours to paste into your page's <head>.

Guide

How to generate Open Graph tags

Step 1: Enter og:title, og:description, og:url, and an og:image URL (ideally 1200×630)

Enter og:title, og:description, og:url, and an og:image URL (ideally 1200×630).

Step 2: Check the live social-card preview and adjust the text or image

Check the live social-card preview and adjust the text or image.

Step 3: Copy the Open Graph tags and paste them into your page's <head>

Copy the Open Graph tags and paste them into your page's <head>.

Details

Open Graph cards, images, and caching

The Open Graph protocol uses a handful of og: properties to define a page's share preview: og:title and og:description for the text, og:url for the canonical link, og:type (usually 'website' or 'article'), og:site_name, and og:image for the picture. The image is the part people get wrong most — it should be an absolute URL (not a relative path), and the recommended size is 1200×630 pixels (a 1.91:1 ratio), which displays crisply across platforms; smaller images may render as a small thumbnail or be ignored. One practical gotcha: platforms cache your preview, so if you change the tags after a link has already been shared, the old card can persist — use Facebook's Sharing Debugger (or LinkedIn's Post Inspector) to force a re-scrape. Open Graph covers Facebook, LinkedIn, Discord, WhatsApp, Slack and most apps; X uses Twitter Card tags, which can fall back to Open Graph. Everything is generated locally in your browser. For X specifically, use the Twitter Card Generator; for all tags at once, the Meta Tag Generator.

Support

Frequently Asked Questions

What are Open Graph tags?

Open Graph (og:) tags are meta tags that tell social platforms how to display your page when it's shared — the title, description, image, and URL of the preview card. They were introduced by Facebook and are now used by LinkedIn, Discord, WhatsApp, Slack, and most apps that show link previews.

What image size should I use for og:image?

Use 1200×630 pixels, a 1.91:1 ratio — this is the recommended size that displays as a large, crisp card across platforms. The image must be referenced by an absolute URL (https://yoursite.com/image.jpg), not a relative path, or platforms won't load it. Keep important content away from the edges in case of cropping.

Where do I add the Open Graph tags?

Paste them inside the <head> of your page's HTML, alongside your other meta tags. In a CMS, add them via your theme header or an SEO plugin. They're read by social platforms when your link is shared or when they crawl the page, so they should be present before you share.

My preview is wrong after I updated the tags — why?

Social platforms cache link previews, so an older card can keep showing even after you fix the tags. Force a refresh with the platform's debugger — Facebook's Sharing Debugger or LinkedIn's Post Inspector — which re-scrapes your page and updates the cached preview. After that, new shares use the corrected card.

What's the difference between Open Graph and Twitter Cards?

Open Graph controls previews on Facebook, LinkedIn, Discord, and most apps; Twitter Card (twitter:) tags control previews on X. X will fall back to Open Graph tags if Twitter-specific ones are missing, but adding both gives you the most control. The Twitter Card Generator handles the X-specific tags.

Do Open Graph tags help SEO?

Not directly — search engines don't rank you for having og: tags. But they significantly improve how your links look when shared, which lifts click-through and traffic from social, and that engagement supports your overall visibility. So they're valuable for distribution rather than being a direct ranking factor.

Is it free, and do I need to sign up?

Yes, it's completely free with no account, no trial, and no limit on how many times you use it. Unlike most SEO suites, there's no login wall — it runs entirely in your browser, so you just open the page and use it.

Is my data private?

Yes. Everything is processed in your browser — whatever you type or paste is never sent to a server. Nothing is stored once you close the tab, so your URLs, content, and site details stay on your own device. That client-side approach is the core difference from cloud SEO tools.

Does it work on mobile?

Yes. It runs in your phone's browser with nothing to install, so you can generate or check markup on Android or iOS. The layout adapts to small screens, though pasting longer code is easier on a desktop.

Does it work offline?

Once the page has loaded, the work runs entirely on your device, so it keeps working without a connection. You only need to be online to open the page the first time — which is also why nothing you enter is uploaded.

Can I copy the output?

Yes. You can copy the generated code or results to your clipboard with one click, ready to paste straight into your site's HTML, CMS, or files. Because everything runs locally, copying is instant with no upload step.

Will this directly improve my rankings or get me into AI answers?

It produces correct, standards-compliant markup that helps search engines and AI engines (Google, AI Overviews, ChatGPT, Perplexity) understand your page clearly — which is a prerequisite for ranking and being cited. But it doesn't directly change rankings or guarantee a rich result or AI citation; those are decided by the engines based on your overall content and authority.

Still have questions?

If you can't find the answer you're looking for, feel free to contact our support team.

Contact Us