Open Graph & Meta Tag Generator
Generate Open Graph and Twitter Card meta tags instantly. Preview how your page looks when shared on social media. Copy ready-to-paste HTML.
Recommended: under 60 characters
Recommended: under 160 characters
Recommended: 1200×630px, under 8MB
Facebook / Open Graph Preview
example.com
Awesome Page Title
This is an awesome page description that will show up on social media
Twitter / X Preview
Awesome Page Title
This is an awesome page description that will show up on social media
example.com
Generated Meta Tags
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Awesome Page Title</title> <meta name="description" content="This is an awesome page description that will show up on social media"> <!-- Open Graph Meta Tags --> <meta property="og:title" content="Awesome Page Title"> <meta property="og:description" content="This is an awesome page description that will show up on social media"> <meta property="og:url" content="https://example.com/page"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:type" content="website"> <meta property="og:site_name" content="My Website"> <!-- Twitter Card Meta Tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Awesome Page Title"> <meta name="twitter:description" content="This is an awesome page description that will show up on social media"> <meta name="twitter:image" content="https://example.com/image.jpg">
Frequently Asked Questions
What are Open Graph meta tags?
Open Graph (OG) meta tags are HTML elements that control how content is displayed when shared on social platforms like Facebook, LinkedIn, and Discord. They define the title, description, image, and URL that appear in preview cards. Without OG tags, platforms use generic defaults which may not represent your content accurately.
What is the difference between og:image and twitter:image?
og:image is used by Facebook, LinkedIn, Discord, and other platforms that support Open Graph. twitter:image is specifically for Twitter/X. While they often point to the same image, you can specify different images to optimize for each platform's audience and dimensions.
What image dimensions should I use for og:image?
The recommended size is 1200×630 pixels (1.91:1 aspect ratio) for optimal display on most platforms. Minimum is 600×315 pixels. Keep file size under 8MB and use JPG or PNG for best compatibility.
What is og:type and when should I change it?
Set og:type to "website" for general pages, "article" for blog posts and news, or "product" for e-commerce items. The type tells platforms how to interpret and display your content.
Which Twitter Card type should I use?
Use "summary" for a small card with title, description, and thumbnail. Use "summary_large_image" for a larger card with a prominent image — ideal if you have an eye-catching visual.
How do I test my meta tags?
After adding tags to your HTML, use platform-specific debugging tools: Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector. These tools show exactly how your content appears when shared and highlight any issues.
Will these meta tags improve my SEO?
Meta tags don't directly impact search rankings, but they improve click-through rates by making your content more attractive in social previews. This increased engagement indirectly benefits SEO.
Is my data safe when using this tool?
Yes. All tag generation happens entirely in your browser using JavaScript. No data is sent to any server. Your content and URLs never leave your device.