Open Graph Tag Generator
Fill in your page details to generate ready-to-use Open Graph and Twitter Card HTML meta tags.
Open Graph Tags
Twitter / X Card Tags
Twitter title, description, and image inherit OG values above unless overridden here.
Facebook / LinkedIn Link Preview
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.
- Enter your page title (40–60 characters recommended for social display).
- Enter the description (100–155 characters — shown in link preview text).
- Enter the absolute URL of your OG image (must be 1200×630px, publicly accessible).
- Select the page type (website, article, video.other, product).
- For articles, fill in the author, published time, and section fields.
- 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.
| Tag | Required | Example value |
|---|---|---|
| og:title | Yes | How to Build a REST API in Node.js |
| og:description | Yes | A step-by-step guide to building... |
| og:image | Yes | https://example.com/og-image.png |
| og:url | Yes | https://example.com/article-slug |
| og:site_name | Recommended | ToolsHub |
| og:image:width | Recommended | 1200 |
| og:image:height | Recommended | 630 |
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.
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
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Open Graph Tag Generator?
- Preview how posts and metadata appear on each platform
- Validate character counts against platform limits
- Generate production-ready meta tags with one click
- Identify username availability across all major networks
Common use cases
- Preview how a blog post looks when shared on Facebook
- Check Twitter card tags before a product launch
- Find an available username across all social networks
- Generate Open Graph tags for a landing page
- Create a social media post mockup for a client pitch
Related Social Media
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.
YouTube Thumbnail Downloader
Download YouTube video thumbnails in HD, HQ, MQ, and SD quality. Paste any YouTube URL or video ID to save the thumbnail. Free and instant.
YouTube Earnings Calculator
Estimate YouTube channel earnings based on views and niche RPM. See daily, monthly, and yearly revenue projections. Free YouTube money calculator.
Explore all Social Media.