DevToolKit

Open Graph Meta Generator

Generate Open Graph and Twitter Card meta tags with live social media card previews for Facebook, Twitter/X, LinkedIn, Discord, and WhatsApp. 100% client-side.

Web Utility

OG Meta Generator

Open Graph Details

Title Length18 / 60
Description Length89 / 200

Platform Settings

Validation (1)

imageUrl: An image dramatically increases engagement. Use 1200x630px for best results.

Social Preview

No image set
example.com
My Awesome Website
A brief and compelling description of your page content for social media sharing and SEO.

Generated Meta Tags

<meta property="og:title" content="My Awesome Website">
<meta property="og:description" content="A brief and compelling description of your page content for social media sharing and SEO.">
<meta property="og:url" content="https://example.com">
<meta property="og:site_name" content="Example">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Website">
<meta name="twitter:description" content="A brief and compelling description of your page content for social media sharing and SEO.">
Was this tool helpful?

How to Use

Generate pixel-perfect Open Graph and Twitter Card meta tags with live social media previews showing exactly how your links appear when shared on Facebook, Twitter/X, LinkedIn, Discord, and WhatsApp.

How to use this tool

  1. Enter OG Details: Fill in your page title (max 60 characters for Facebook), description (max 200 characters), page URL, and image URL. The character counters show real-time feedback on optimal lengths.
  2. Set Image URL: Provide a direct URL to your OG image. The ideal size is 1200x630 pixels (1.91:1 ratio). This image appears in social card previews across all platforms.
  3. Configure Platform Settings: Select the OG type (website, article, or product), choose your Twitter card style (summary_large_image for hero images or summary for compact cards), and add your Twitter handle.
  4. Preview on Each Platform: Switch between the Facebook, Twitter/X, LinkedIn, Discord, and WhatsApp tabs to see pixel-accurate mock previews of your social card.
  5. Copy & Deploy: Copy the generated HTML meta tags and paste them into the <head> section of your web page. Use platform debuggers to verify after deployment.

About This Tool

Open Graph Protocol

The Open Graph protocol, originally created by Facebook in 2010, transforms ordinary web pages into rich objects within social graphs. When you share a URL on Facebook, LinkedIn, Discord, or WhatsApp, the platform's crawler reads your og:title, og:description, og:image, and og:url meta tags to construct a visual card preview. Without these tags, platforms generate card content by scraping your page content, often producing poor-quality previews with missing images or truncated text.

Twitter Cards vs Open Graph

Twitter/X implements its own card system using twitter:card, twitter:title, twitter:description, and twitter:image meta tags. Twitter falls back to Open Graph tags when its own tags are absent, but there are key differences: Twitter supports two card types (summary for small square images, summary_large_image for hero images), enforces different character limits (70 characters for title, 200 for description), and uses its own image aspect ratios. Our generator outputs both tag sets simultaneously so each platform gets optimized content.

Platform-Specific Rendering

Each social platform renders shared links differently. Facebook displays a 1.91:1 aspect ratio image with title and description below. LinkedIn uses the same ratio but truncates more aggressively. Discord shows an embedded card with a colored left-border accent, the site name above the title, and a large inline image. WhatsApp renders a compact card within a chat bubble, requiring images under 300KB for reliable unfurling. This tool previews all five rendering modes so you can optimize for each audience.

Image Best Practices

Use a 1200x630px image at 1.91:1 aspect ratio for maximum compatibility. Keep file size under 300KB for WhatsApp and under 5MB for Facebook. Always use HTTPS URLs; some platforms (especially Twitter/X) silently reject HTTP image URLs. Center-crop your key content because platforms may crop to different ratios. If using text overlays, keep text within the inner 80% safe zone to avoid cropping.

Why Use This Tool

Why Open Graph Tags Matter

Pages with properly configured Open Graph tags see up to 2.5x higher click-through rates when shared on social media, according to multiple marketing studies. A well-crafted social card with a compelling image, concise title, and engaging description can be the difference between a scroll-past and a click. For content marketing and SEO strategies, social sharing amplification is a significant traffic driver that starts with correct meta tag implementation.

Privacy-First Generation

This generator runs entirely in your browser. Your page metadata, URLs, and content strategy details are never transmitted to any server. Unlike online OG validators that fetch your page, our tool generates tags locally, making it safe for use with pre-launch pages, internal tools, and confidential projects.

FAQ

What are Open Graph meta tags?
Open Graph meta tags are HTML meta elements that control how your page appears when shared on social media platforms like Facebook, LinkedIn, and Discord. They define the title, description, image, and URL that display in the social card preview.
What image size should I use for og:image?
The recommended size is 1200x630 pixels for og:image. This aspect ratio (1.91:1) works across Facebook, Twitter/X, LinkedIn, and Discord. Images should be under 5MB for Facebook and under 300KB for reliable WhatsApp unfurling.
What is the difference between og:title and twitter:title?
og:title is used by Facebook, LinkedIn, Discord, and WhatsApp. twitter:title is used by Twitter/X. Twitter falls back to og:title when twitter:title is absent, but using both ensures optimal character lengths for each platform.
Do I need both Open Graph and Twitter Card tags?
Twitter/X falls back to Open Graph tags if Twitter Card tags are missing. However, Twitter has different character limits and card types (summary vs summary_large_image), so using both gives you platform-specific control.
How do I verify my Open Graph tags are working?
Use platform-specific debuggers: Facebook Sharing Debugger (developers.facebook.com/tools/debug/), Twitter Card Validator (cards-dev.twitter.com/validator), and LinkedIn Post Inspector (linkedin.com/post-inspector/). Our tool provides instant local previews before deployment.
NavigateOpenEscClose