Free Tool

Free Open Graph Meta Tag Generator

Generate Open Graph and Twitter Card meta tags for any page, with a live social preview. Control how your link looks on Facebook, X, LinkedIn, and Slack. Free, copy-paste HTML, no signup.

Title

Description

Canonical URL

Image URL (1200x630 recommended)

Site name

og:type

Twitter card

Twitter @handle

Social preview

1200 x 630 image

example.com

Your page title

Your description preview appears here, the way it looks on Facebook, X, LinkedIn, and Slack.

Meta tags

Fill in the fields to generate your Open Graph and Twitter Card meta tags. Paste them into your page's <head>.

No signup required

Free forever

GDPR compliant

Quick Answer

An Open Graph generator builds the og: and twitter: meta tags that control how your page appears when shared on social media. Fill in the title, description, URL, and image, and the tool outputs ready-to-paste HTML plus a live preview of the share card. The U2L Open Graph Meta Tag Generator runs entirely in your browser. Free, no signup.

Quick Facts

Open Graph (og:) tags were created by Facebook and are now read by X, LinkedIn, Slack, Discord, WhatsApp, iMessage, and more.
The four essential tags are og:title, og:description, og:image, and og:url. Add og:type and og:site_name for completeness.
Recommended og:image size is 1200x630 pixels (1.91:1 ratio) for a large, crisp share card.
Twitter Cards use their own twitter: tags; twitter:card set to summary_large_image gives the big-image layout.
Tags go in the <head> of your HTML. Crawlers read them when a link is shared or scraped.
After updating tags, re-scrape with each platform's debugger (platforms cache the old preview aggressively).
Browser-only and instant - your inputs never leave your browser; U2L stores nothing.

How to generate Open Graph tags

Fill in four fields, copy the HTML, paste it in your head.

1
Enter your title, description, and URL
Add the title and description you want to appear in the share card, plus the canonical URL of the page. These map to og:title, og:description, and og:url.
2
Add an image and options
Paste a 1200x630 image URL for og:image and pick the og:type and Twitter card style. The live preview updates so you can see the card before you ship it.
3
Copy the tags into your <head>
Copy the generated meta tags and paste them inside the <head> of your page. Then re-scrape the URL in each platform's debugger to refresh the cached preview.

What is a Open Graph Generator?

Open Graph Generator is a tool that builds the Open Graph and Twitter Card meta tags that control how a web page looks when it is shared on social media. You enter a title, description, image, and URL, and the generator outputs the corresponding og: and twitter: <meta> tags, ready to paste into your page's head - with a live preview of the resulting share card.

The Open Graph protocol, introduced by Facebook in 2010, lets any web page declare structured metadata - a title, description, image, type, and canonical URL - so that social platforms can render a rich preview card instead of a bare link. Today nearly every platform that unfurls links (X, LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram) reads these tags.

Without Open Graph tags, a shared link is a flat, low-click URL: the platform guesses at a title, grabs a random image or none, and the result looks untrustworthy. With proper tags, you control the headline, the copy, and the image - which directly affects click-through rate on every share.

Marketers, developers, and content teams use a generator to author tags for new pages, fix pages whose previews look wrong, and standardize share cards across a site. Twitter/X uses its own twitter: tags as well, which the tool includes so your card looks right everywhere.

How does a Open Graph Generator work?

You fill in the fields that map to the core Open Graph properties: og:title, og:description, og:url, og:image, og:type, and og:site_name. The generator assembles a <meta property="og:..." content="..."> tag for each non-empty field, escaping quotes and angle brackets in your content so the HTML stays valid.

It also emits the Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image, twitter:site). X falls back to Open Graph tags for some fields, but specifying twitter:card explicitly is what triggers the large-image layout, so the tool includes it. The result is a single block you paste once into the page head.

The live preview approximates how the card renders: it shows the image area at the 1.91:1 ratio platforms expect, the host extracted from your URL, the title, and a two-line description clamp - the same hierarchy Facebook, LinkedIn, and Slack use. It is a guide; the authoritative preview is each platform's own debugger after it re-scrapes your page.

Everything runs in your browser. No request is sent to U2L - the tags are built locally from your inputs. Because social platforms cache previews aggressively, the most important post-step is re-scraping the URL in the platform debuggers (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) so they pick up your new tags.

Use Cases

How marketers, businesses, and developers use open graph generator.

Setting up share cards for a new page

Author the Open Graph and Twitter tags for a landing page or blog post before launch so the first share already renders a polished, on-brand card.

Fixing a broken or ugly link preview

When a shared link shows the wrong image or no title, generate correct tags, paste them in, and re-scrape to replace the bad preview.

Boosting click-through on social shares

A compelling title, description, and image raise the click rate on every share. Craft them deliberately instead of letting platforms guess.

Standardizing previews across a site

Generate a consistent tag template so every page on your site shares with the same structure, site name, and image conventions.

Per-article tags for a blog or news site

Use og:type=article and unique titles, descriptions, and images per post so each article unfurls distinctly across networks.

Product page share cards for e-commerce

Set og:type=product with the product name, price-driving copy, and a clean product image so shared product links look like a storefront, not a raw URL.

Slack and Discord unfurl control

Internal and community links unfurl using Open Graph too. Good tags make shared docs and tools look credible in team channels.

Email and newsletter link previews

Some clients and forwarding tools render Open Graph previews. Consistent tags keep your links looking professional wherever they travel.

Learning the Open Graph protocol

See exactly which tags map to which card elements by editing fields and watching the HTML and preview update in real time.

Open Graph Generator vs Alternatives

Side-by-side feature and pricing comparison with the top alternatives.

Feature	U2L	Manual coding	CMS SEO plugin	Hardcoded tags
Free, no signup			Varies
Live social preview			Sometimes
Open Graph + Twitter tags together		Manual		Manual
Escapes special characters
Works without a CMS
Pair with branded link analytics	Via u2l.ai

Open Graph Generator vs Writing the tags by hand

You can write og: and twitter: meta tags by hand if you know the property names and the recommended values. It is free and gives total control.

The generator saves time and prevents mistakes: it includes the full tag set, escapes quotes and brackets in your copy, and shows a live preview so you catch a wrong image or truncated title before publishing. For a single page it is faster; across many pages it enforces consistency.

Open Graph Generator vs A CMS SEO plugin

Plugins like Yoast or Rank Math manage Open Graph tags inside WordPress and similar CMSs, which is ideal when your whole site lives in that CMS.

This generator is the right tool for static sites, custom apps, landing pages, and one-off pages that are not in a CMS - anywhere you need the raw tags to paste directly into the head without installing anything.

Best Practices

Use a 1200x630 image

That is the sweet spot for the large card across platforms. Smaller images downgrade to a tiny thumbnail or get cropped awkwardly.

Keep titles around 60 characters

Longer titles get truncated in the card. Front-load the important words so the headline reads well even when clipped.

Write descriptions of 2 to 4 lines

Aim for roughly 110-160 characters. Most platforms clamp the description to about two lines, so make the first sentence count.

Always set og:url to the canonical URL

This consolidates engagement signals on the canonical page and prevents duplicate previews for tracking-parameter variants of the same URL.

Set twitter:card explicitly

Specifying summary_large_image is what triggers X's big-image layout. Relying on Open Graph fallback alone can give you the small card.

Re-scrape after every change

Platforms cache previews. Use the Facebook Sharing Debugger, X Card Validator, and LinkedIn Post Inspector to force a refresh after updating tags.

Use an absolute image URL

og:image must be a full https URL, not a relative path. Relative paths fail to load in most crawlers and leave you with no image.

Add og:site_name for brand recognition

It shows your brand name on the card and reinforces trust. It is a one-line addition with an outsized credibility benefit.

Common Mistakes to Avoid

Using a relative image path

og:image needs an absolute https URL. A relative path like /og.png does not resolve for external crawlers, so the card renders imageless.

Forgetting to re-scrape after updating

Platforms cache the old preview. If your change does not show, it is almost always the cache - re-scrape in the platform's debugger.

An image that is too small or wrong ratio

Images under about 600px wide or far from 1.91:1 get cropped or shrunk into a thumbnail, undercutting the visual impact of the share.

Leaving out twitter:card

Without an explicit twitter:card, X may render the small summary layout even when you wanted the large image card.

Putting tags outside the <head>

Open Graph tags must live in the document head. Tags injected late in the body or via client-side JS are often missed by crawlers.

Unescaped quotes breaking the tag

A literal double quote in your title or description ends the content attribute early. The generator escapes these; hand-written tags often break here.

Technical Specifications

Core og tags	og:title, og:description, og:image, og:url, og:type, og:site_name
Twitter tags	twitter:card, twitter:title, twitter:description, twitter:image, twitter:site
Recommended image	1200 x 630 px (1.91:1), absolute https URL
Placement	Inside the <head> of the HTML document
Twitter card types	summary_large_image, summary
Title length	~60 characters before truncation
Description length	~110-160 characters (clamped to ~2 lines)
Privacy	Built in your browser. No data sent to U2L.

Frequently Asked Questions

What are Open Graph tags?

Open Graph tags are <meta> tags (og:title, og:description, og:image, og:url, and more) that tell social platforms how to render a rich preview card when your page is shared. They were created by Facebook and are now read by most platforms that unfurl links.

Which Open Graph tags are required?

The four essentials are og:title, og:description, og:image, and og:url. Add og:type and og:site_name to be complete. Without these, platforms guess at the preview and the result usually looks broken.

What image size should I use for og:image?

Use 1200x630 pixels, a 1.91:1 ratio, served from an absolute https URL. That produces the large, crisp card across platforms. Smaller images get downgraded to a thumbnail or cropped.

Do I need separate Twitter Card tags?

X reads Open Graph as a fallback, but setting twitter:card to summary_large_image is what reliably triggers the big-image layout. The generator includes the twitter: tags so your card looks right on X specifically.

Where do I put the meta tags?

Inside the <head> of your HTML document. Crawlers read the head when they scrape your URL. Tags placed in the body or injected late by JavaScript are frequently missed.

Why is my preview not updating after I changed the tags?

Social platforms cache previews aggressively. Re-scrape the URL in the platform's debugger - Facebook Sharing Debugger, X Card Validator, or LinkedIn Post Inspector - to force it to fetch your new tags.

Can I use a relative path for og:image?

No. og:image must be an absolute https URL like https://example.com/og.png. Relative paths do not resolve for external crawlers, so the image will not appear in the card.

What does og:type do?

It declares the kind of content - website, article, product, profile, and so on. Some platforms use it to choose card layout or to enable richer features, and certain integrations expect a specific type.

How long should the title and description be?

Keep the title around 60 characters and the description roughly 110-160. Most platforms truncate beyond that, so front-load the key message and treat the first sentence as the part that always shows.

Do Open Graph tags help SEO?

They do not directly affect search rankings, but they improve click-through on social, which drives traffic and engagement. Better previews mean more clicks, which indirectly supports your overall growth.

Will these tags work on LinkedIn, Slack, and Discord?

Yes. LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram, and others all read Open Graph tags to build their previews. One correct tag set covers nearly every platform that unfurls links.

Does the live preview exactly match every platform?

It approximates the common card layout (image, host, title, two-line description). Each platform styles cards slightly differently, so use their official debuggers for the authoritative preview after you publish.

Do I need a CMS or plugin to use these tags?

No. The generated tags are plain HTML you paste into any page's head - static sites, custom apps, or landing pages included. A CMS plugin is only one of several ways to manage them.

Are my inputs sent to a server?

No. The generator builds the tags entirely in your browser with JavaScript. Your title, description, image URL, and other inputs never leave your device.

How do I preview my card before sharing publicly?

Use the live preview here for a quick check, then validate on the platform debuggers (Facebook, X, LinkedIn) which render the real card and report any missing or malformed tags.

Can I add tracking to the shared link?

Keep og:url as the canonical URL, but share a u2l.ai short link pointing to that page when you want click analytics. The short link tracks clicks while the destination keeps its clean Open Graph card.

Related Free Tools

WhatsApp Link Generator

Create wa.me click-to-chat links with prefilled messages. Add to your bio, ads, or QR codes for instant WhatsApp customer chats.

OG / Metatag Checker

Inspect Open Graph and Twitter Card tags for any URL. Preview link cards on Facebook, X, LinkedIn, and Slack before publishing.

Redirect Checker

Trace the full redirect chain of any URL. See every hop, status code, response time, and final destination.

URL Encoder / Decoder

Encode or decode any URL. Handle special characters, query strings, and percent-encoding. Pure browser, instant.

Schema Markup Generator

Generate valid JSON-LD schema for FAQ, HowTo, Article, Product, and Organization. Boost rich results and AI Overview citations.

URL Expander

Reveal the full destination behind any shortened URL. Check where a short link leads before clicking it.

See all 50 free tools

Key Terms

Open Graph protocol: The metadata standard, introduced by Facebook, that lets a page declare a title, description, image, type, and URL for rich social previews.
og:image: The Open Graph tag specifying the preview image. Should be an absolute https URL, ideally 1200x630 pixels.
Twitter Card: X's own preview format, controlled by twitter: meta tags. summary_large_image renders the large-image layout.
Unfurl: What a platform does when it expands a shared link into a rich preview card using the page's Open Graph tags.
Sharing debugger: A platform tool (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) that re-scrapes a URL and shows the rendered card.

Customize previews for your shortened links

With U2L you can set a custom title, description, and image on your u2l.ai short links so every share looks on-brand - and track the clicks. Sign up free for branded links with custom social previews.