Open Graph Generator
Generate Open Graph and Twitter Card meta tags for rich social media 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">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.
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?
What is the difference between og:url and the page URL?
What twitter:card type should I use?
Do Open Graph tags affect Google search rankings?
In Next.js/React, where do I put Open Graph tags?
Why is my link preview showing old/wrong information despite updating the tags?
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
Related Tools
Posts for This Tool
Broader workflow content that links this tool back into the wider cluster.
