Generate Open Graph Meta Tags Instantly (Facebook & LinkedIn)
Generate Facebook Open Graph meta tags for social media sharing. Create og:title, og:description, og:image, og:url, and og:type tags. Perfect for optimizing how your links appear on Facebook, LinkedIn, WhatsApp, and Slack.
How to Use 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
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
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:
- Enter your URL
- Click "Debug" to see how Facebook reads your tags
- Click "Scrape Again" to clear cache if you made changes
LinkedIn Post Inspector:
- 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
Use High-Quality Images
- Sharp, professional photos or graphics
- Avoid pixelated or blurry images
- Test how it looks when scaled down
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
Safe Zones
- Keep important content in center 1200×600 area
- Edges may be cropped on some platforms
- Profile pictures may cover bottom-left corner
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
File Size
- Keep under 8MB for Facebook
- Keep under 5MB for LinkedIn
- Optimize images to load faster
Use HTTPS
- Always host images on HTTPS URLs
- HTTP images may not display on some platforms
Common Mistakes to Avoid
Relative Image URLs: Always use absolute URLs (https://example.com/image.jpg), not relative paths (/image.jpg)
Missing Required Tags: At minimum, include og:title, og:description, og:image, og:url, and og:type
Wrong Image Dimensions: Images smaller than 600×315px may not display properly
HTTP Instead of HTTPS: Modern platforms require HTTPS for security
Forgetting to Clear Cache: When updating OG tags, use Facebook Debugger to scrape again and clear cache
Duplicate Content: Each page should have unique OG tags matching its specific content
Long Titles/Descriptions: Keep titles under 90 characters and descriptions under 300 characters to avoid truncation
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">
Frequently Asked Questions
Most Viewed Tools
TOTP Code Generator
Generate time-based one-time passwords from a TOTP secret key. Enter your base32 secret, choose a period and digit length, and get the current and next codes with a live countdown timer. Useful for testing and debugging 2FA integrations.
Use Tool →JSON to Zod Schema Generator
Generate Zod validation schema code from a JSON sample object. Infers z.string(), z.number(), z.boolean(), z.array(), z.object(), and z.null() types automatically. Handles nested objects, arrays of objects with optional field detection, and outputs copy-ready TypeScript with import and z.infer type alias.
Use Tool →JSONL / NDJSON Formatter
Format, validate, and inspect JSON Lines (JSONL) and NDJSON files. Validates each line individually, reports parse errors by line number, outputs compact JSONL or a pretty-print preview, and lets you download the cleaned file.
Use Tool →Secret and Credential Scanner
Scan pasted text, code, or config files for accidentally exposed API keys, tokens, passwords, and private keys. Detects 50+ secret types across AWS, GitHub, Stripe, OpenAI, and more — all client-side, nothing leaves your browser.
Use Tool →TLS Cipher Suite Checker
Check TLS protocol version compatibility and cipher suite strength ratings against current best practices. Supports IANA and OpenSSL cipher names — rates each suite as Strong, Weak, or Deprecated and explains why.
Use Tool →Password Entropy Calculator
Calculate the information-theoretic bit entropy of any password or API key. Detects character set pools automatically, shows the total number of possible combinations, and estimates crack time across five attack scenarios from rate-limited web logins to GPU cracking clusters.
Use Tool →TOML Config Validator
Validate TOML configuration file syntax and report errors with line numbers. Paste any TOML content — Cargo.toml, pyproject.toml, config.toml — and instantly see a green checkmark with key counts and structure stats, or a precise error message pointing to the exact line. Includes a collapsible JSON structure preview to confirm what was parsed.
Use Tool →Content Security Policy Generator
Build Content Security Policy headers interactively. Toggle directives like script-src, style-src, and img-src, select allowed source tokens, and add custom origins. Instantly outputs your CSP as an HTTP header, meta tag, Nginx directive, or Apache header.
Use Tool →Related Marketing & SEO Tools
FAQ Schema Generator
Generate JSON-LD FAQPage schema markup for SEO. Add questions and answers to create structured data that helps search engines display FAQ rich snippets in search results.
Use Tool →Breadcrumb Schema Generator
Generate JSON-LD BreadcrumbList schema markup for SEO. Add breadcrumb items with names and URLs to create structured data that helps search engines understand your site hierarchy.
Use Tool →Google SERP Simulator
Preview how your title and meta description appear in Google search results. See real-time character counts, pixel width estimates, and desktop/mobile previews to optimize your SEO.
Use Tool →Meta Tag Generator
Generate HTML meta tags for SEO optimization. Create title, description, keywords, viewport, charset, robots, and author meta tags. Perfect for improving search engine rankings and social sharing.
Use Tool →Product Schema Generator
Generate JSON-LD Product schema markup for SEO. Add product details like name, price, brand, rating, and availability to create structured data for rich search results.
Use Tool →Twitter Card Generator
Generate Twitter Card meta tags for Twitter/X sharing. Create summary cards, large image cards, app cards, and player cards. Optimize how your links appear on Twitter with custom titles, descriptions, and images.
Use Tool →Share Your Feedback
Help us improve this tool by sharing your experience