Skip to main content
ToolsHub

Open Graph Tag Generator

Fill in your page details to generate ready-to-use Open Graph and Twitter Card HTML meta tags.

Updated

Files never leave your browser

Open Graph Tags

0/60
0/160

Twitter / X Card Tags

Twitter title, description, and image inherit OG values above unless overridden here.

Facebook / LinkedIn Link Preview

1200×630 image

example.com

Page Title

Page description goes here

Generated HTML Meta Tags

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />

<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image" />

How to use Open Graph Tag Generator

Generate complete, validated Open Graph and Twitter Card meta tags for any webpage — fill in the title, description, image URL, type, and optional fields, and get ready-to-paste HTML meta tags. Includes all required fields, recommended optional fields, Twitter Card variants (summary, summary_large_image, player), and structured data for article pages. Copy to clipboard or download as a snippet.

  1. Enter your page title (40–60 characters recommended for social display).
  2. Enter the description (100–155 characters — shown in link preview text).
  3. Enter the absolute URL of your OG image (must be 1200×630px, publicly accessible).
  4. Select the page type (website, article, video.other, product).
  5. For articles, fill in the author, published time, and section fields.
  6. Copy the generated meta tags and paste them inside your HTML <head> section.

Your data never leaves your device — 100% private processing.

Complete OG tag reference

Beyond the four required tags (og:title, og:description, og:image, og:url), several optional tags significantly improve how your content is distributed. og:site_name adds your brand name to the card. og:locale sets the language (en_US, fr_FR). og:image:width and og:image:height help platforms display the image without waiting for the full download. For articles: article:author links to the author's Facebook/LinkedIn profile, article:published_time enables news feed prioritization, article:section categorizes the content. For video content: og:video:url and og:video:type enable in-feed video autoplay on Facebook.

TagRequiredExample value
og:titleYesHow to Build a REST API in Node.js
og:descriptionYesA step-by-step guide to building...
og:imageYeshttps://example.com/og-image.png
og:urlYeshttps://example.com/article-slug
og:site_nameRecommendedToolsHub
og:image:widthRecommended1200
og:image:heightRecommended630

Next.js and framework integration

In Next.js 13+ App Router, OG tags are generated via the `generateMetadata()` function in `page.tsx`. Return an `openGraph` object with title, description, images (array of {url, width, height, alt}), type, and siteName. The Next.js metadata API automatically generates both og:* and twitter:* tags from a single metadata object. For dynamic OG images (custom fonts, layouts), use the `@vercel/og` package with `ImageResponse` in a `opengraph-image.tsx` file — Next.js will auto-register it as the og:image for that route.

Worked examples

Article meta tags

Inputs: title, description, 1200×630 image URL

Result: og:title/description/image/url + twitter:card tags ready to paste

Image size hints

Inputs: add width and height

Result: og:image:width 1200 · og:image:height 630 (prevents layout shift)

Glossary

meta property="og:..."
An HTML meta tag using the property attribute (not name) to define Open Graph metadata.
Absolute URL
A complete URL including protocol and domain (https://example.com/path) — required for og:image and og:url.
article:published_time
An ISO 8601 date string in OG article tags that signals publication date to news aggregators and search engines.
ImageResponse
A Next.js/Vercel Edge API for generating dynamic PNG images from JSX — commonly used for OG image generation.

Related reading

Free · No spam

Get weekly tool tips & updates

New tools, power-user tips, and productivity hacks — delivered free every Friday.

No spam, ever. Unsubscribe with one click.

Related Social Media

Social Media Post Mockup

Create realistic social media post mockups for Twitter/X, Instagram, and Facebook. For education, humor, and creative projects.

UTM Campaign URL Builder

Build trackable campaign URLs with UTM parameters for Google Analytics. Add source, medium, and campaign, then copy the link. Free and private.

Meta Tag Generator

Generate SEO meta tags, Open Graph tags, and Twitter Card tags online. Preview Google search snippet and copy all tags instantly.

Hashtag Generator

Generate relevant hashtags for Instagram, TikTok, Twitter, LinkedIn, and YouTube. Mix popular and niche hashtags for maximum reach.

Open Graph Preview

Preview how your page appears when shared on Google, Facebook, Twitter, LinkedIn, and WhatsApp. Test Open Graph meta tags without publishing.

Social Media Character Counter

Count characters for Twitter/X, Instagram, LinkedIn, Facebook, and more. Live counter with limit warnings for every major social media platform.

Explore all Social Media.