Open Graph Tag Generator
Generate Open Graph and Twitter Card meta tags with live social previews.
How it works
- 1
Enter your page details
Fill in the title, description, image URL, page URL, and type. Add Twitter-specific fields if needed.
- 2
Preview the social cards
Toggle between Facebook and Twitter preview modes to see how your page will look when shared.
- 3
Copy the meta tags
Copy the generated HTML meta tags and paste them into the <head> of your page.
Common use cases
Basic website
Title: "My Website", Type: website
Blog article
Title: "Getting Started with SEO", Type: article
About This Tool
Generate Open Graph and Twitter Card meta tags for your website and see a live preview of how your page will look when shared on Facebook and Twitter. Enter your page details, preview the social cards, and copy the complete set of meta tags ready to paste into your HTML.
**What are Open Graph tags?**
Open Graph (OG) is a protocol created by Facebook that lets you control how your web pages appear when shared on social media. Without OG tags, social platforms guess what to show — they might pick the wrong image, truncate the title, or show an outdated description. With OG tags, you explicitly define the title, description, image, and type that appears in the social card.
OG tags are HTML meta elements placed in the <head> of your page. They use the property attribute (e.g., <meta property="og:title" content="Your Title" />). Every major social platform — Facebook, Twitter, LinkedIn, Discord, Slack, and others — reads these tags to generate rich link previews.
**What are Twitter Cards?**
Twitter Cards are Twitter's extension of the Open Graph protocol. While Twitter reads OG tags by default, adding twitter: meta tags gives you additional control over how your content appears in tweets. The two main card types are "summary" (small square image with text) and "summary_large_image" (large landscape image above text).
**How this tool works**
Fill in your page details on the left side: title, description, image URL, page URL, type, and site name. Add Twitter-specific fields if needed. The right side shows two things: a live social media card preview that simulates how your page looks when shared, and the generated meta tags code.
Toggle between Facebook and Twitter preview modes to see exactly how each platform will display your link. Character count indicators help you stay within recommended limits — titles over 60 characters and descriptions over 200 characters get truncated on most platforms.
**Image best practices**
The recommended image size is 1200x630 pixels for Facebook and 1200x628 pixels for Twitter summary_large_image cards. Use a URL that points to a publicly accessible image (not behind authentication). Supported formats are JPEG, PNG, and WebP. Images smaller than 200x200 pixels may not be displayed.
**Common use cases**
Webmasters generate OG tags for every page on their site to ensure professional-looking social shares. Bloggers add tags to their posts so shared links show the correct title and featured image. E-commerce sites set product-specific OG tags so product pages display images and prices when shared. Marketers preview social cards before launching campaigns to verify appearance. Developers paste the generated tags directly into their HTML templates or CMS.
All processing runs entirely in your browser — nothing is sent to any server.
More examples
Examples
Basic website
Input
Title: "My Website", Type: website
Output
<meta property="og:title" content="My Website" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
Blog article
Input
Title: "Getting Started with SEO", Type: article
Output
<meta property="og:title" content="Getting Started with SEO" /> <meta property="og:type" content="article" /> <meta name="twitter:card" content="summary_large_image" />
Frequently Asked Questions
- What are Open Graph tags?
- Open Graph (OG) tags are HTML meta elements that control how your web pages appear when shared on social media. They define the title, description, image, and type shown in link previews on Facebook, Twitter, LinkedIn, Discord, Slack, and other platforms.
- What is the difference between OG tags and Twitter Cards?
- OG tags are the standard protocol used by Facebook, LinkedIn, and most platforms. Twitter Cards (twitter: meta tags) are Twitter-specific extensions that give you additional control. Twitter falls back to OG tags if twitter: tags are not present, so OG tags alone are sufficient for basic sharing.
- What image size should I use?
- The recommended size is 1200x630 pixels for Facebook and 1200x628 pixels for Twitter summary_large_image cards. Use JPEG, PNG, or WebP format. Images must be publicly accessible via URL.
- Do OG tags affect SEO?
- OG tags are not a direct Google ranking factor. However, they improve click-through rates from social media shares, which can drive traffic and indirect SEO benefits. Twitter and Facebook use them exclusively for social card display.
- What happens if I omit required tags?
- Social platforms will try to guess the best values from your page content — they may use the <title> tag for the title, the <meta name="description"> for the description, and the first large image on the page. This often results in incorrect or suboptimal previews.
- Can I preview how my page looks when shared?
- Yes. This tool shows live Facebook and Twitter card previews based on the values you enter. For production pages already online, use Facebook Sharing Debugger and Twitter Card Validator to test actual URLs.
- Is my data sent to a server?
- No. All generation happens entirely in your browser. Nothing is transmitted anywhere.
Discover More Tools
View all Developer Tools →Robots.txt Generator
Generate and validate robots.txt files with a visual rule builder.
Schema Markup Generator
Generate JSON-LD structured data for Google rich results.
SEO Meta Tag Analyzer
Analyze and optimize your page title and meta description for search engines.
JSON Formatter & Validator
Format, validate, and prettify JSON instantly.