Developer

OG Tag Generator

Generate Open Graph meta tags with preview-friendly fields and copy-ready output.

Loading interactive tool…

Embed this tool on your site

About this tool

When a URL is shared on Facebook, LinkedIn, Slack, Discord, or WhatsApp, the platform reads the page's Open Graph meta tags to generate a rich link preview card. Without these tags, the platform either shows a blank card or guesses poorly from whatever content it finds. The Open Graph protocol uses og:title, og:description, og:image, og:url, and og:type to control how a shared link appears. Getting these tags right is the difference between a compelling share that drives clicks and a grey box that nobody engages with. This generator gives you fields for Title, Description, URL, Type (website, article, profile or video.other), Image URL, Site Name and Locale, and writes the matching og: meta tags as you type, skipping empty fields and escaping quotes and angle brackets. A small text preview shows the title, description and URL. Copy the output into your page head. Twitter Card and article:* tags are not included.

Why use it

  • Richer Social Previews: Generates og:title, og:description, og:url, og:type and og:image tags that platforms use to build link preview cards instead of blank or auto-guessed previews.

  • Live Output: The meta tags update on every keystroke, and fields you leave empty are simply left out, so the block only contains what you filled in.

  • Safe Escaping: Quotes, ampersands and angle brackets in your title or description are escaped (", &, <, >) so the tags never break your HTML.

  • Site Name and Locale: Optional og:site_name and og:locale fields cover the extra tags many platforms read for branding and language.

  • Quick Text Preview: A small preview box shows the title, description and URL together so you can check the wording before copying.

  • Preview Before Deploy: Generates the tags without requiring a live page, so you can review the values before publishing and avoid a bad first impression when the URL is shared.

How to use

  1. Enter the page title as it should appear in shared previews (typically the same as your HTML title)
  2. Write the description — 1–2 sentences that entice a click when the link is shared in a feed
  3. Enter the canonical URL of the page and pick the Type: website, article, profile or video.other
  4. Provide the absolute Image URL of the preview image (1200×630 pixels is the common recommendation)
  5. Optionally add a Site Name and a Locale such as en_US
  6. Check the Generated Meta Tags box, which updates as you type, then click Copy Output and paste the tags into the head of your HTML page

When it helps

  • When publishing a new blog post, landing page, or product page and wanting control over how it appears when shared on LinkedIn, Facebook, or Slack
  • When launching a marketing campaign and needing the link preview image and headline to match the campaign creative
  • When debugging a broken or stale social preview by regenerating fresh tags after correcting the og:image URL
  • When building a static HTML page that does not have a CMS to auto-generate Open Graph tags
  • When reviewing a site audit report that flags missing og:title or og:image tags and needing to quickly generate correct replacements
  • When building page templates and wanting a reference Open Graph block to adapt

Examples

Blog article

Input
Title: How to Format SQL Like a Pro
Description: Learn the formatting patterns that make complex SQL readable in code reviews.
URL: https://utilitykit.tools/sql-formatter
Type: article
Image URL: https://utilitykit.tools/og/sql-formatter.jpg
Expected result
<meta property="og:title" content="How to Format SQL Like a Pro">
<meta property="og:description" content="Learn the formatting patterns that make complex SQL readable in code reviews.">
<meta property="og:url" content="https://utilitykit.tools/sql-formatter">
<meta property="og:type" content="article">
<meta property="og:image" content="https://utilitykit.tools/og/sql-formatter.jpg">

Homepage with site name and locale

Input
Title: UtilityKit — Free Developer Tools
Description: Browser-based tools for developers: JSON formatter, regex tester & hash generator.
URL: https://utilitykit.tools
Type: website
Image URL: https://utilitykit.tools/og-default.jpg
Site Name: UtilityKit
Locale: en_US
Expected result
<meta property="og:title" content="UtilityKit — Free Developer Tools">
<meta property="og:description" content="Browser-based tools for developers: JSON formatter, regex tester &amp; hash generator.">
<meta property="og:url" content="https://utilitykit.tools">
<meta property="og:type" content="website">
<meta property="og:image" content="https://utilitykit.tools/og-default.jpg">
<meta property="og:site_name" content="UtilityKit">
<meta property="og:locale" content="en_US">

Quotes are escaped

Input
Title: Say "Hello" <World>
Type: website
Expected result
<meta property="og:title" content="Say &quot;Hello&quot; &lt;World&gt;">
<meta property="og:type" content="website">

Tips

  • Test your Open Graph tags immediately after deploying with the Facebook Sharing Debugger to confirm images load and text truncates as expected.
  • Host OG images on a CDN with a permanent URL — changing the image path after widespread sharing means all cached previews will continue showing the old image.
  • Write og:description as a standalone sentence that makes sense out of context, since it appears without the rest of the page content in a feed card.
  • Fill in the Locale field (e.g. en_US) and add og:locale:alternate tags by hand for multilingual sites so platforms can pick the right language version.
  • If your page title includes the brand name (My Article | Brand), write og:title without the brand suffix and put the brand in Site Name instead.

Frequently Asked Questions

What is the Open Graph protocol?
The Open Graph protocol is a set of meta tags defined by Facebook that allow web pages to control how they appear when shared on social platforms. It is now the universal standard used by Facebook, LinkedIn, Slack, Discord, WhatsApp, and many other platforms.
What size should my OG image be?
The recommended size is 1200×630 pixels at a 1.91:1 aspect ratio. This renders at full size on Facebook and LinkedIn. The minimum for a large image card is 600×315 pixels. Images smaller than 200×200 pixels are not used for preview cards.
What is the difference between og:title and the HTML title tag?
The HTML title tag is used by browsers and search engines. The og:title tag is used by social platforms when generating preview cards. They can differ — for example the HTML title might include your brand name while the og:title is a more compelling standalone headline.
Does this tool generate Twitter Card tags?
No. It outputs Open Graph tags only (og:title, og:description, og:url, og:type, og:image, og:site_name, og:locale). X/Twitter falls back to og: tags when twitter: tags are missing, but if you want twitter:card set to summary_large_image, use the separate Twitter Card Generator and paste both blocks into your head.
Why does Facebook show old tags after I update them?
Facebook caches Open Graph data and does not automatically re-scrape. To force a refresh, paste your URL into the Facebook Sharing Debugger at developers.facebook.com/tools/debug and click Scrape Again.
Do I need both Open Graph and Twitter Card tags?
Twitter will fall back to Open Graph tags if Twitter Card tags are absent, but a dedicated twitter:card tag lets you choose the large-image layout. This tool covers the Open Graph side; add twitter: tags separately if you need them.
What is og:type and what values should I use?
og:type declares the kind of content. This tool's Type menu offers website (homepages and general pages), article (blog posts and news), profile (a person's page) and video.other. Other values such as product or video.movie, and extra tags like article:published_time, need to be added by hand.
Can the same image URL be used for both og:image and twitter:image?
Yes. If both platforms can access the same image URL and it meets the size requirements for both, using the same URL is standard practice. Some sites serve different image crops via separate URLs for platform-specific optimization.

Explore the category

Meta Tag Generator Generate essential HTML head tags for SEO and metadata in one place. Twitter Card Generator Generate Twitter/X card tags and preview social metadata quickly. Canonical Tag Generator Normalize URLs and generate canonical link tags for SEO-safe page metadata. Gitignore Generator Generate merged and deduplicated .gitignore output from stack presets. README Generator Generate markdown README scaffolds from core project fields. CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets.

Glossary

Open Graph Protocol
A standard originally defined by Facebook that uses meta tags to describe web page content for social media preview cards. It is now universally adopted across major platforms.
Twitter Card
Twitter's implementation of social preview metadata, using twitter:card, twitter:title, twitter:description, and twitter:image tags to control link appearance in Twitter/X feeds.
og:type
An Open Graph tag declaring the content category of the page. Common values are website, article, product, and video.movie. The article type unlocks additional metadata tags.
summary_large_image
The Twitter Card type that displays a full-width header image above the card title and description. It is the most widely used card type for blog posts and landing pages.
Scraper / Crawler
An automated program run by social platforms like Facebook and LinkedIn that visits a URL, reads its Open Graph meta tags, and stores the preview data in a cache.
1200×630
The recommended pixel dimensions for an Open Graph preview image at a 1.91:1 aspect ratio. Images at this size render at maximum quality without upscaling on Facebook and LinkedIn.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities