Open Graph Generator
Generate Open Graph and social preview tags for webpages. Use this tool to create share-ready metadata for Facebook, LinkedIn, Slack, Discord, X, and other platforms that render link previews.
Last updated: March 25, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is Open Graph Generator?
Open Graph (OG) is a metadata protocol originally developed by Facebook in 2010 that allows any web page to become a rich "object" in the social graph. When you paste a link into Facebook, LinkedIn, Slack, Discord, or iMessage, these platforms read your page's Open Graph tags to generate a rich preview card — with title, description, image, and site name. Without OG tags, platforms either show a bare link or attempt to extract information on their own, often with poor results.
Twitter (now X) has its own parallel system called Twitter Cards, which adds the same capability for tweets. This tool generates both sets of tags together, plus the essential standard SEO tags (title, description, canonical). A complete, correct set of these tags ensures every shared link looks professional and maximizes click-through rates from social traffic.
How to Use Open Graph Generator
Select the content type: website, article, product, or video
Enter your page title (65-70 chars max for OG — slightly more than the 60-char SEO limit)
Write a compelling description (up to 200 characters — Twitter shows about 125 chars)
Enter your page URL for the og:url canonical link
Paste your image URL (1200×630px JPEG/PNG) — this is the most important tag for click-through rate
Copy the generated HTML block and paste it into your page's <head>
Common Use Cases
- Making blog posts render as eye-catching preview cards when shared on LinkedIn and Facebook
- Setting up product pages to show product images when shared in messaging apps
- Ensuring news articles render with the correct headline and thumbnail on Twitter/X
- Making homepage links look professional when pasted into Slack channels or Teams
- Adding article-specific OG tags (published time, author, section) for news publishers
- Preventing social platforms from picking the wrong image when sharing your page
- Setting up video.movie or video.episode OG types for streaming or media sites
- Optimizing affiliate or marketing landing pages for maximum social ad share performance
Example Input and Output
Complete Open Graph and Twitter Card tags for an article — copy this block into your HTML <head>:
Type: article
Title: The Complete Guide to Web Performance (2024)
Description: Everything you need to know about Core Web Vitals, image optimization, and server-side rendering for fast websites.
URL: https://example.com/guides/web-performance-2024
Image: https://example.com/images/web-performance-og.jpg
Twitter: @ExampleSite<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="The Complete Guide to Web Performance (2024)">
<meta property="og:description" content="Everything you need to know about Core Web Vitals, image optimization, and server-side rendering for fast websites.">
<meta property="og:url" content="https://example.com/guides/web-performance-2024">
<meta property="og:image" content="https://example.com/images/web-performance-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Example Site">
<meta property="article:published_time" content="2024-03-25T00:00:00Z">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ExampleSite">
<meta name="twitter:title" content="The Complete Guide to Web Performance (2024)">
<meta name="twitter:description" content="Everything you need to know about Core Web Vitals, image optimization, and server-side rendering for fast websites.">
<meta name="twitter:image" content="https://example.com/images/web-performance-og.jpg">How This Tool Works
The tool builds the OG and Twitter Card HTML tags from user input fields using JavaScript template literals. The og:type selection determines which additional tags are included (e.g. article:published_time for articles, og:price for products). Real-time character counting tracks title and description length against platform limits. A preview pane simulates the approximate look of the generated card. All generation runs in the browser — no network requests are made.
Technical Stack
Test Your Tags Live
Always test after deploying: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator (cards-dev.twitter.com/validator). Forces a fresh scrape and shows exactly how your link will appear.
Build the preview image
Use the sourced social image reference to compare the 1200 × 630 Open Graph canvas with other reusable platform destinations before creating the final artwork.
Client-Side Processing
All Open Graph tag HTML is generated locally in your browser. No page URLs, image addresses, or titles are transmitted to our servers.
og:image Must Be Absolute
The og:image URL must be an absolute URL (starting with https://) — not a relative path like /images/og.jpg. Social crawlers fetch the image directly from outside your site, so relative paths will fail. Always use the full URL including your domain.
Frequently Asked Questions
What is the ideal Open Graph image size?
1200×630 pixels is the universal standard. This renders correctly at full size on Facebook (with aspect ratio 1.91:1) and at large size on Twitter. The minimum is 600×315px (smaller images render as a small thumbnail rather than a large card). Keep file size under 8MB (JPEG preferred for photos, PNG for graphics with text).
What is the difference between og:url and the page URL?
og:url specifies the canonical URL for the page — the "true" URL that represents the content. This matters for tracking: likes, shares, and comments all get associated with the og:url. Set it to your canonical URL and ensure it matches your <link rel="canonical"> tag. Mismatches can split social engagement across multiple URLs.
What twitter:card type should I use?
"summary_large_image" shows the card with a large full-width image — the best option for blog posts, articles, and marketing pages. "summary" shows a smaller square thumbnail — appropriate for apps, books, or product pages. "player" is for video content. Use "summary_large_image" for most use cases.
Do Open Graph tags affect Google search rankings?
Not directly. Google does not use OG tags for organic search ranking. However, they indirectly affect rankings by improving social sharing performance — more shares mean more backlinks, which do directly improve rankings. Well-crafted OG tags also improve click-through from Google Discover, which uses image and title much like social platforms.
In Next.js/React, where do I put Open Graph tags?
In Next.js 13+ App Router, use the Metadata API (export async function generateMetadata()). In Pages Router, use <Head> from "next/head" in each page. In React SPA, use React Helmet or React Helmet Async. Important: Open Graph tags must be server-rendered — client-rendered tags are often not read by social crawlers.
Why is my link preview showing old/wrong information despite updating the tags?
Social platforms aggressively cache OG data for 24–72 hours. Force a cache refresh using the official debugger tools: Facebook Sharing Debugger (click "Scrape Again"), LinkedIn Post Inspector (click "Inspect"), and Twitter Card Validator. These tools fetch fresh data and clear the cache for your URL.
Related Tools
Meta Tag Generator
Generate SEO title tags, meta descriptions, Open Graph, and Twitter Card tags for any webpage.
Slug Generator
Convert any text to a clean, SEO-friendly URL slug — handles special characters, accents, and spaces.
Robots.txt Generator
Build a valid robots.txt file with visual rules, user-agent controls, and sitemap declaration.
QR Code Generator
Create free static QR codes for URL, WiFi, UPI, vCard, WhatsApp, text, and more. Download PNG, SVG, JPG, or WebP in your browser.
Open Port Checker
Check whether a public TCP port is open, closed, or filtered on a hostname or IP address.
Part of Collections
Posts for This Tool
Broader workflow content that links this tool back into the wider cluster.
How to Preview a Tweet Before Posting
Check an X post before publishing — character count, line breaks, image crops, link previews, and light/dark themes — with a free in-browser preview workflow.
X Post Image Sizes and Media Layouts Explained
Recommended X (Twitter) image sizes for posts, profiles, headers, and link previews, plus how 1–4 image layouts crop in the timeline and how to prepare media.
Static vs Dynamic QR Code: Key Differences Explained
Compare static and dynamic QR codes, when each type makes sense, and how to choose the right QR workflow for print, campaigns, tracking, and stable links.