OG Meta Tag Generator - Open Graph & Twitter Card Preview
Generate Open Graph and Twitter Card meta tags with visual previews. See how your page looks when shared on Facebook, X (Twitter), and LinkedIn.
Frequently Asked Questions
What are Open Graph meta tags?
Open Graph (OG) meta tags are HTML meta elements that control how a URL is displayed when shared on social media platforms like Facebook, Twitter, LinkedIn, and Slack. They were originally created by Facebook in 2010 and have since become the standard for social sharing metadata. Key tags include og:title, og:description, og:image, and og:url. Without these tags, social platforms attempt to extract information automatically, often producing inaccurate or visually unappealing previews.
How do I use this OG Meta Generator?
Enter your page's title, description, image URL, and page URL in the Open Graph fields. Select the appropriate content type (website, article, product, etc.). Optionally customize Twitter Card fields — they inherit from OG by default. Watch the real-time previews showing how your link will appear on Facebook, Twitter, LinkedIn, and Slack. Choose your preferred export format (HTML, Next.js, or Nuxt/Vue) and click Copy Code to paste the generated meta tags into your page's head section.
Is my data safe? Does anything get sent to a server?
All meta tag generation and preview rendering is performed 100% client-side in your browser using JavaScript. No page titles, descriptions, URLs, or image references are transmitted to any server. This tool works entirely in your browser, making it safe for use with unreleased product pages, confidential marketing campaigns, and pre-launch content. Your data never leaves your device.
What is the difference between Open Graph tags and Twitter Card tags?
Open Graph tags (using property="og:...") are the universal standard used by Facebook, LinkedIn, WhatsApp, Slack, and most other platforms. Twitter Card tags (using name="twitter:...") are specific to Twitter/X and provide additional control over how links appear in tweets. Twitter will fall back to Open Graph tags if Twitter-specific tags are not present. Best practice is to include both: OG tags for broad platform coverage and Twitter Card tags for Twitter-specific customization like card type selection.
What image size should I use for social media sharing?
The recommended image size is 1200 x 630 pixels for Open Graph (Facebook, LinkedIn). For Twitter Summary with Large Image cards, use 1200 x 628 pixels (approximately 2:1 ratio). For Twitter Summary cards (small), the minimum is 120 x 120 pixels with a 1:1 ratio. Always use HTTPS URLs for images, as some platforms reject or deprioritize HTTP images. The image should be under 5MB for most platforms.
Why are my social media previews not updating after I add meta tags?
Social platforms aggressively cache link previews. After adding or updating your meta tags, you need to purge the cache using each platform's official debugger: Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector. Simply paste your URL into these tools and they will re-fetch your page's metadata.
Code Examples
// Generate OG and Twitter Card meta tags
function generateMetaTags({ title, description, image, url, type = 'website', twitterCard = 'summary_large_image' }) {
const escape = (s) => s.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
const tags = [];
if (title) tags.push(`<meta property="og:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta property="og:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta property="og:image" content="${escape(image)}" />`);
if (url) tags.push(`<meta property="og:url" content="${escape(url)}" />`);
tags.push(`<meta property="og:type" content="${escape(type)}" />`);
tags.push(`<meta name="twitter:card" content="${escape(twitterCard)}" />`);
if (title) tags.push(`<meta name="twitter:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta name="twitter:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta name="twitter:image" content="${escape(image)}" />`);
return tags.join('\n');
}
console.log(generateMetaTags({
title: 'My Page',
description: 'A great page about something.',
image: 'https://example.com/image.jpg',
url: 'https://example.com'
}));