All tools
All tools › Open Graph Tag Generator ● Live Developer Tools

How Open Graph Tag Generator works

  1. Enter the page title, description, and image URL.
  2. Set the canonical og:url and choose an og:type (e.g. website, article).
  3. Add the site name if you want it shown in previews.
  4. Copy the generated <meta property="og:..."> tags into your page's <head>.
  • Make sure a blog post shows a custom image and summary when shared on Slack.
  • Set up consistent Open Graph tags for a new product landing page.
  • Fix a page whose link preview shows the wrong image or no image.
  • Generate og:type="article" tags for a content site.
  • Prepare social preview tags before a marketing campaign launch.

Everything is generated locally in your browser — no data is sent anywhere.

  • Doesn't fetch or validate images — verify the og:image URL is publicly accessible.
  • Doesn't trigger cache refreshes on social platforms after you publish.
  • Doesn't generate platform-specific extras like Pinterest Rich Pins.

Open Graph Tag Generator

Open Graph Tag Generator creates social preview tags for title, description, image, URL, and content type. Use it before publishing pages that need clean previews in chat and social feeds.

Open Graph Tag Generator Runs locally

Open Graph Settings

Generated Tags

<!-- Open Graph -->
<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="A short description of what this page is about.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="My Awesome Page">
<meta name="twitter:description" content="A short description of what this page is about.">
<meta name="twitter:image" content="https://example.com/og-image.png">

Preview

OG preview

https://example.com/page

My Awesome Page

A short description of what this page is about.
Similar tools

More Developer Tools tools

See all tools →
LiveDeveloper Tools

Meta Tag Generator

Generate SEO title, description, canonical, and social meta tags.

meta tagsseoopen graph
LiveDeveloper Tools

Open Graph Checker

Preview and validate Open Graph tags from pasted HTML.

open graph checkerog tagssocial preview
LiveDeveloper Tools

HTML Formatter

Format, indent, and clean up HTML snippets in your browser.

htmlformatterbeautifier
LiveDeveloper Tools

HTML Minifier

Minify HTML snippets by removing comments and extra whitespace.

html minifierhtmlweb performance
LiveDeveloper Tools

Robots.txt Generator

Create robots.txt rules and sitemap references for a website.

robots.txtseocrawler rules
LiveDeveloper Tools

Sitemap XML Generator

Generate XML sitemaps from URLs or website crawling. Create sitemap files for search engine submission and crawl optimization.

sitemap.xmlseoxml sitemap
Guide

How to use

  1. Enter the page title, description, and image URL.

  2. Set the canonical og:url and choose an og:type (e.g. website, article).

  3. Add the site name if you want it shown in previews.

  4. Copy the generated <meta property="og:..."> tags into your page's <head>.

Scenarios

Use cases

  • Make sure a blog post shows a custom image and summary when shared on Slack.

  • Set up consistent Open Graph tags for a new product landing page.

  • Fix a page whose link preview shows the wrong image or no image.

  • Generate og:type="article" tags for a content site.

  • Prepare social preview tags before a marketing campaign launch.

Good to know

Limitations & Privacy

Private by design

Everything is generated locally in your browser — no data is sent anywhere.

  • Doesn't fetch or validate images — verify the og:image URL is publicly accessible.

  • Doesn't trigger cache refreshes on social platforms after you publish.

  • Doesn't generate platform-specific extras like Pinterest Rich Pins.

FAQ

Frequently asked questions

Is Open Graph Tag Generator free to use?

Yes. The tool is free and runs directly in your browser with no account required.

Does this tool upload my data?

No. Processing happens locally in the browser tab. Your input is not sent to a server.

What is this tool best for?

Generating og: tags so links to your page show a rich preview (image, title, description) when shared on Facebook, LinkedIn, Slack, WhatsApp, and similar platforms.

What size should og:image be?

The recommended size is 1200x630 pixels (a roughly 1.91:1 ratio). Images smaller than 200x200 pixels may not display at all on some platforms.

What's the difference between og:url and the page's actual URL?

og:url should match the canonical URL of the page. If they differ, some platforms may cache the preview under the og:url value instead of the address the user actually visited.

What og:type values are common?

'website' is the default for most pages. 'article' is common for blog posts and adds fields like article:published_time. 'product', 'video', and others exist for specialized content.

Why isn't my preview updating after I change the tags?

Social platforms cache Open Graph data. After updating tags on a live page, use that platform's debugger/cache-refresh tool (e.g. Facebook Sharing Debugger) to force a re-scrape.

Do I need both Open Graph and Twitter Card tags?

For broad compatibility, yes. Twitter/X primarily reads twitter: tags but falls back to og: tags if Twitter-specific ones are missing, so having both covers more platforms reliably.