Open Graph Generator Free Online Tool 2026

Free online utility. 100% client-side processing with no signup required.

Free & instant 100% client-side No signup needed

Use Open Graph Generator

Enter your data below to use the Open Graph Generator

📌 Try these examples:
RESULT

Last updated

Basic Open Graph Tags for a Blog Post

The minimum required Open Graph tags for good social sharing:

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.example.com/posts/getting-started-with-react">
<meta property="og:title" content="Getting Started with React in 2024">
<meta property="og:description" content="A practical guide to building your first React application, covering components, state, hooks, and deployment.">
<meta property="og:image" content="https://blog.example.com/images/react-guide-og.jpg">

Without these tags, Facebook and LinkedIn will guess the title, description, and image from your page content — often with poor results. These five tags ensure your content always looks its best when shared.

Complete Open Graph + Twitter Card Block

The full set of tags generated for a product page:

<!-- Open Graph -->
<meta property="og:type" content="product">
<meta property="og:url" content="https://shop.example.com/products/wireless-headphones">
<meta property="og:title" content="Wireless Noise-Cancelling Headphones">
<meta property="og:description" content="Premium wireless headphones with 30-hour battery life, active noise cancellation, and multipoint Bluetooth. Free shipping.">
<meta property="og:image" content="https://shop.example.com/images/headphones-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="AudioShop">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://shop.example.com/products/wireless-headphones">
<meta name="twitter:title" content="Wireless Noise-Cancelling Headphones">
<meta name="twitter:description" content="Premium wireless headphones with 30-hour battery life and active noise cancellation.">
<meta name="twitter:image" content="https://shop.example.com/images/headphones-og.jpg">

Article-Specific Open Graph Tags

For blog posts and news articles, add publication metadata:

<meta property="og:type" content="article">
<meta property="article:published_time" content="2024-03-17T09:00:00Z">
<meta property="article:modified_time" content="2024-03-17T14:30:00Z">
<meta property="article:author" content="https://blog.example.com/authors/jane-doe">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="React">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="Frontend">

Facebook displays the author and publication date for article-type pages, giving your content more credibility and context in the social feed.

Twitter Card Types

Choose the right card type for your content:

<!-- Summary — small image, good for text-heavy content -->
<meta name="twitter:card" content="summary">

<!-- Summary Large Image — prominent image, best for visual content -->
<meta name="twitter:card" content="summary_large_image">

<!-- App Card — for mobile app promotion -->
<meta name="twitter:card" content="app">
<meta name="twitter:app:id:iphone" content="123456789">
<meta name="twitter:app:id:googleplay" content="com.example.app">

<!-- Player Card — for video/audio content -->
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/embed/video123">
<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">

Open Graph Image Specifications

Image requirements for different platforms:

Facebook / Open Graph:
  Recommended: 1200 × 630 pixels
  Minimum: 600 × 315 pixels
  Aspect ratio: 1.91:1
  Max file size: 8MB
  Format: JPG or PNG

Twitter summary_large_image:
  Recommended: 1200 × 628 pixels
  Minimum: 300 × 157 pixels
  Aspect ratio: ~1.91:1
  Max file size: 5MB

LinkedIn:
  Recommended: 1200 × 627 pixels
  Uses og:image tags

WhatsApp:
  Uses og:image, minimum 300 × 200 pixels

<!-- Specify image dimensions to help platforms render faster -->
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="A diagram showing React component hierarchy">

Homepage Open Graph Tags

For a company homepage, use og:type="website":

<meta property="og:type" content="website">
<meta property="og:url" content="https://techcorp.example.com">
<meta property="og:title" content="TechCorp — Cloud Solutions for Modern Teams">
<meta property="og:description" content="Scalable cloud infrastructure, DevOps tools, and 24/7 support for engineering teams of all sizes.">
<meta property="og:image" content="https://techcorp.example.com/og-home.jpg">
<meta property="og:site_name" content="TechCorp">
<meta property="og:locale" content="en_US">

Canonical URL and og:url

Keep og:url consistent with the canonical URL:

<!-- Both should point to the same canonical URL -->
<link rel="canonical" href="https://example.com/blog/react-guide">
<meta property="og:url" content="https://example.com/blog/react-guide">

<!-- NOT the URL with tracking parameters -->
<!-- Wrong: og:url = https://example.com/blog/react-guide?utm_source=twitter -->

When the same content is shared from different URLs (with UTM parameters, session IDs, etc.), og:url consolidates all shares to the canonical URL, keeping engagement metrics unified.

Testing Your Open Graph Tags

After adding tags, verify them with platform debuggers:

<!-- Force Facebook to re-scrape after updating tags -->
<!-- Use the Facebook Sharing Debugger "Scrape Again" button -->
<!-- Facebook caches OG data for up to 30 days -->

Multilingual Open Graph Tags

For sites with multiple language versions:

<!-- Primary language -->
<meta property="og:locale" content="en_US">

<!-- Alternate language versions -->
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="de_DE">
<meta property="og:locale:alternate" content="es_ES">

Use the format language_TERRITORY (e.g., en_US, fr_FR). This helps social platforms serve the correct language version to users in different regions.

Frequently Asked Questions

Simply enter your data, click the process button, and get instant results. All processing happens in your browser for maximum privacy and security.

Yes! Open Graph Generator is completely free to use with no registration required. All processing is done client-side in your browser.

Absolutely! All processing happens locally in your browser. Your data never leaves your device, ensuring complete privacy and security.