UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

OG Tag Generator

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

About OG Tag Generator

When a URL is shared on Facebook, LinkedIn, Twitter/X, 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 exactly how a shared link appears. Twitter Cards extend this with twitter:card and twitter:image tags for Twitter-specific previews. Getting these tags right is the difference between a compelling share that drives clicks and a grey box that nobody engages with. This generator lets you fill in your page details and image URL, then produces the complete set of Open Graph and Twitter Card meta tags to paste into your page head.

Why use OG Tag Generator

Richer Social Previews

Generates og:title, og:description, og:image, og:url, og:type, and twitter:card tags that produce fully-formed link preview cards on every major platform instead of blank or auto-guessed previews.

Twitter Card Included

Produces Twitter-specific card tags alongside Open Graph tags so previews are correctly formatted for both Twitter/X and every other platform with a single set of head tags.

Image Spec Guidance

Reminds you of the recommended 1200×630 pixel image size and minimum dimensions so your OG image renders at full size on Facebook and LinkedIn without cropping or upscaling artifacts.

Article and Product Support

Supports the article og:type with published_time, author, and section tags so blog posts get proper article metadata for news aggregators and Google Discover.

Complete Tag Block

Outputs a ready-to-paste HTML comment block with all required and recommended tags so nothing is missing when the page is scraped by Facebook's or Twitter's crawler.

Preview Before Deploy

Generates the tags without requiring a live page, so you can review and validate the tag values before publishing and avoid a bad first impression when the URL is shared.

How to use OG Tag Generator

Enter the page title as it should appear in shared previews (typically the same as your HTML title)
Write the Open Graph description — 2–4 sentences that entice a click when the link is shared in a feed
Provide the absolute URL of the preview image (recommended 1200×630 pixels, JPEG or PNG)
Set the canonical URL of the page being shared and the content type (website, article, product)
Add optional Twitter Card fields: card type (summary_large_image is most common), site handle, and creator handle
Click Generate and copy the output into the head section of your HTML page

When to use OG Tag Generator

When publishing a new blog post, landing page, or product page and wanting full control over how it appears when shared on LinkedIn, Twitter, 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 article templates for a blog and wanting a reference Open Graph block with article-type tags to include in the template

Examples

Blog article with large image card

Input: Title: How to Format SQL Like a Pro Description: Learn the formatting patterns that make complex SQL readable in code reviews. Image: https://utilitykit.tools/og/sql-formatter.jpg URL: https://utilitykit.tools/sql-formatter Type: article Twitter card: summary_large_image

Output: <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:image" content="https://utilitykit.tools/og/sql-formatter.jpg"> <meta property="og:url" content="https://utilitykit.tools/sql-formatter"> <meta property="og:type" content="article"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="How to Format SQL Like a Pro"> <meta name="twitter:image" content="https://utilitykit.tools/og/sql-formatter.jpg">

Homepage / website type

Input: Title: UtilityKit — Free Developer Tools Description: 40+ browser-based tools for developers: JSON formatter, regex tester, hash generator and more. Image: https://utilitykit.tools/og-default.jpg URL: https://utilitykit.tools Type: website

Output: <meta property="og:title" content="UtilityKit — Free Developer Tools"> <meta property="og:description" content="40+ browser-based tools for developers: JSON formatter, regex tester, hash generator and more."> <meta property="og:image" content="https://utilitykit.tools/og-default.jpg"> <meta property="og:url" content="https://utilitykit.tools"> <meta property="og:type" content="website">

Article with author and publish date

Input: Type: article Title: The Complete Guide to JWT Tokens Published: 2026-04-15 Author: https://utilitykit.tools/about Section: Security

Output: <meta property="og:type" content="article"> <meta property="article:published_time" content="2026-04-15"> <meta property="article:author" content="https://utilitykit.tools/about"> <meta property="article:section" content="Security">

Tips

Test your Open Graph tags immediately after deploying with the Facebook Sharing Debugger and Twitter Card Validator 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.
Add og:locale and og:locale:alternate for multilingual sites so platforms serve the correct language version of the preview card to users in each region.
If your page title includes the brand name (My Article | Brand), write og:title without the brand suffix — the preview card has limited space and the article title alone is more compelling.

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.

What Twitter Card type should I use?▾

Use summary_large_image for most pages — it shows a large header image above the title and description, which gets the best engagement. Use summary when you do not have a compelling image. Player and app card types are for video and app-specific contexts.

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 using dedicated twitter:card and twitter:image tags gives you more control over the Twitter-specific layout and size.

What is og:type and what values should I use?▾

og:type declares the kind of content. Use website for homepages and general pages, article for blog posts and news, product for e-commerce items, and video.movie or video.episode for video content. The article type unlocks additional tags like article:author and article:published_time.

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

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.