Open Graph Generator

What is Open Graph?

Open Graph is a protocol created by Facebook that allows web pages to become rich objects in social networks. When you share a link on Facebook, LinkedIn, WhatsApp, or Slack, these platforms use Open Graph meta tags to display a preview card with an image, title, and description. Proper Open Graph implementation dramatically improves engagement and click-through rates on social shares.

How to Use This Tool

Step 1: Choose a Preset

Start with one of the preset configurations:

• Website: General website homepage or landing page
• Blog Article: Blog posts and articles with publication details
• E-commerce Product: Product pages with images and descriptions
• Video Content: Video pages, YouTube links, tutorials
• Profile Page: Personal or professional profile pages

Click any preset to instantly load its configuration.

Step 2: Fill in Open Graph Properties

OG Title (Required)

• The title of your content as it appears in social shares
• This is NOT the same as your HTML <title> tag (though it can be similar)
• Character limit: 60-90 characters recommended
• Appears as the main clickable headline in social share cards
• Example: "How to Master Social Media Marketing in 2024"

OG Description (Required)

• The description that appears below the title in social shares
• Character limit: 200-300 characters recommended
• Should be compelling and entice clicks
• More space than regular meta descriptions
• Example: "Learn proven strategies to grow your social media presence, engage your audience, and drive conversions with our comprehensive guide."

OG Image URL (Required)

• The image URL that appears in social share previews
• Must be an absolute URL (https://example.com/image.jpg)
• Recommended size: 1200×630 pixels (1.91:1 aspect ratio)
• Minimum size: 600×315 pixels
• Maximum file size: 8MB (Facebook), 5MB (LinkedIn)
• Formats: JPG, PNG (avoid GIF for static images)
• Use high-quality, eye-catching images with minimal text
• Example: "https://example.com/images/og-social-media-guide.jpg"

OG URL (Required)

• The canonical URL of your page
• Must be an absolute URL
• Use the permanent URL, not temporary or tracking URLs
• Should match the actual page URL users land on
• Example: "https://example.com/blog/social-media-marketing"

OG Type (Required)

• Defines the type of content you are sharing
• Common types:
  • website: General web pages, homepages, landing pages
  • article: Blog posts, news articles, editorial content
  • product: E-commerce products, items for sale
  • video.other: Video content, tutorials, courses
  • profile: Personal or company profiles
  • book: Books, ebooks, publications
  • music.song: Individual songs
  • music.album: Music albums or collections

Site Name (Optional but recommended)

• The name of your website or brand
• Appears above the title in some social platforms
• Should be consistent across all pages
• Example: "TechBlog" or "Marketing Insights"

Locale (Optional but recommended)

• Language and territory of your content
• Format: language_TERRITORY (e.g., en_US, es_ES, fr_FR)
• Helps platforms display your content to the right audience
• Default: en_US

Step 3: Preview Your Social Share

The tool shows a live preview of how your link will appear when shared:

• Displays the image, site name, title, and description
• Resembles Facebook/LinkedIn share card format
• Updates in real-time as you edit fields
• Helps visualize the final result before implementation

Step 4: Copy the Open Graph Tags

Click "Copy Tags" to copy all generated Open Graph meta tags.

The generated tags look like this:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your compelling description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">

Step 5: Implement in Your Website

Paste the tags inside the <head> section of your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Page Title</title>

  <!-- Open Graph tags -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Your description">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Your Site">
  <meta property="og:locale" content="en_US">
</head>
<body>
  <!-- Your content -->
</body>
</html>

Framework-specific implementations:

Next.js (App Router):

export const metadata = {
  openGraph: {
    title: "Your Page Title",
    description: "Your description",
    url: "https://example.com/page",
    siteName: "Your Site",
    images: [
      {
        url: "https://example.com/og-image.jpg",
        width: 1200,
        height: 630,
      },
    ],
    locale: "en_US",
    type: "website",
  },
}

Next.js (Pages Router):

import Head from "next/head"

<Head>
  <meta property="og:title" content="Your Title" />
  <meta property="og:description" content="Your description" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />
</Head>

WordPress:

• Use Yoast SEO or Rank Math for automated OG tag management
• Or add manually to header.php inside <head> tags
• Many themes include built-in OG tag support

Shopify:

• Edit theme.liquid file
• Add tags inside the <head> section
• Use {{ page_title }}, {{ page_description }} liquid variables

Step 6: Test Your Open Graph Tags

After implementation, validate your OG tags:

Facebook Sharing Debugger:

1. Go to: https://developers.facebook.com/tools/debug/
2. Enter your URL
3. Click "Debug" to see how Facebook reads your tags
4. Click "Scrape Again" to clear cache if you made changes

LinkedIn Post Inspector:

1. Go to: https://www.linkedin.com/post-inspector/
2. Enter your URL to preview how it appears on LinkedIn

Other Testing Tools:

• OpenGraph.xyz: Preview how your link appears on multiple platforms
• Twitter Card Validator: Test Twitter-specific cards
• Browser Extensions: Use Social Share Preview or similar tools
• WhatsApp: Send the link to yourself to see the preview

Open Graph Image Guidelines

Image Dimensions

Recommended:

• 1200×630 pixels (1.91:1 aspect ratio)
• This is Facebook and LinkedIn recommended size
• Works well on all platforms

Minimum:

• 600×315 pixels
• Below this, images may not display

Other accepted ratios:

• 1.91:1 (1200×630) - Landscape, most common
• 1:1 (1200×1200) - Square, works on Instagram/WhatsApp
• 4:5 (1200×1500) - Portrait, less common

Image Best Practices

1. Use High-Quality Images

   • Sharp, professional photos or graphics
   • Avoid pixelated or blurry images
   • Test how it looks when scaled down

2. Minimize Text Overlay

   • Facebook may reduce reach of image-heavy text (20% rule removed but still advised)
   • Keep text large and readable
   • Ensure text has sufficient contrast with background

3. Safe Zones

   • Keep important content in center 1200×600 area
   • Edges may be cropped on some platforms
   • Profile pictures may cover bottom-left corner

4. File Formats

   • JPG: Best for photos (smaller file size)
   • PNG: Best for graphics with transparency or text
   • Avoid GIFs: Use static images for OG tags

5. File Size

   • Keep under 8MB for Facebook
   • Keep under 5MB for LinkedIn
   • Optimize images to load faster

6. Use HTTPS

   • Always host images on HTTPS URLs
   • HTTP images may not display on some platforms

Common Mistakes to Avoid

1. Relative Image URLs: Always use absolute URLs (https://example.com/image.jpg), not relative paths (/image.jpg)

2. Missing Required Tags: At minimum, include og:title, og:description, og:image, og:url, and og:type

3. Wrong Image Dimensions: Images smaller than 600×315px may not display properly

4. HTTP Instead of HTTPS: Modern platforms require HTTPS for security

5. Forgetting to Clear Cache: When updating OG tags, use Facebook Debugger to scrape again and clear cache

6. Duplicate Content: Each page should have unique OG tags matching its specific content

7. Long Titles/Descriptions: Keep titles under 90 characters and descriptions under 300 characters to avoid truncation

8. Using Dynamic Parameters in og:url: Use clean, canonical URLs without tracking parameters

Platform-Specific Behavior

Facebook:

• Strictly follows Open Graph protocol
• Caches aggressively (use Sharing Debugger to clear)
• Recommends 1200×630 images
• Shows site name above title

LinkedIn:

• Uses Open Graph tags
• Also has LinkedIn-specific tags (article:author, article:published_time)
• Recommends 1200×627 images
• Professional context

WhatsApp:

• Uses Open Graph tags for link previews
• Shows smaller image thumbnails
• Title and description are truncated more aggressively
• End-to-end encrypted previews

Slack:

• Reads Open Graph tags
• Also supports Twitter Cards
• Shows inline image previews
• Unfurls links automatically in channels

Twitter/X:

• Prefers Twitter Card tags but falls back to Open Graph
• Use twitter:card, twitter:title, twitter:description, twitter:image
• Different card types: summary, summary_large_image, player

Advanced Open Graph Properties

Beyond the basic tags, you can add:

Article-specific tags:

<meta property="article:published_time" content="2024-01-15T08:00:00Z">
<meta property="article:author" content="John Doe">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="SEO">

Product-specific tags:

<meta property="product:price:amount" content="29.99">
<meta property="product:price:currency" content="USD">

Video-specific tags:

<meta property="og:video" content="https://example.com/video.mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

Multiple images:

<meta property="og:image" content="https://example.com/image1.jpg">
<meta property="og:image" content="https://example.com/image2.jpg">