Open Graph Generator & Preview

Generate OG meta tags for your website or preview how any URL appears when shared on social media platforms.

Website URL (for og:url)

og:title *

og:description *

og:image (Image URL)

Recommended size: 1200×630 pixels (1.91:1 ratio). Max 5MB.

og:site_name

Twitter Card Type

Twitter @username

og:type

Generated OG Meta Tags

What Are Open Graph Tags?

Open Graph (OG) tags are meta tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, and Twitter. Without proper OG tags, social platforms guess what to display — often pulling the wrong image, title, or description.

             Why OG Tags Matter:
            📈 Rich previews get 2-3x more clicks than text-only links
🎨 Control exactly which image, title, and description appear when shared
🔄 Consistent branding across Facebook, LinkedIn, Twitter, WhatsApp
🔍 Better social media discovery and engagement

        

Basic OG Tag Example:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page 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 name="twitter:card" content="summary_large_image" />

Understanding Open Graph & Social Media Tags

When someone shares your link on Facebook, Facebook's crawler reads your OG tags to create a rich preview: title, description, image, and site name. A well-optimized social preview can increase click-through rates by 200-300% compared to plain text links.

             Why Open Graph Tags Matter for Social Media:
            📈 Higher CTR: Rich previews with images get 2-3x more clicks than text-only links.
🎨 Brand Control: Choose exactly which image, title, and description appear when your content is shared.
🔄 Consistent Branding: Ensure your logo, brand colors, and messaging appear consistently across all social platforms.
📊 Better Analytics: Track shares, clicks, and engagement accurately with proper OG tags.
🔍 Improved Discovery: Facebook's algorithm prioritizes content with complete OG tags in news feeds.
📱 Mobile Optimization: OG tags control how previews appear on mobile devices where most social sharing happens.
🌐 Cross-Platform: OG tags work on Facebook, LinkedIn, Pinterest, WhatsApp, Telegram, and many other platforms.

        

Basic Open Graph Tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page 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" />

Add these tags inside the <head> section of your HTML.

Complete Open Graph Tag Reference

og:title

The title of your content. Appears in bold in social previews. Keep under 60 characters for full display. Example: "10 Best SEO Tools for 2024"

og:description

A short description of your content. Appears below the title. Keep under 200 characters for full display. Include a call-to-action when possible.

og:image

The image that appears in the social preview. Recommended size: 1200×630 pixels (1.91:1 ratio). Minimum size: 200×200 pixels. Use high-quality, eye-catching images.

og:url

The canonical URL of your content. Use absolute URL, not relative. This is where users go when they click the preview.

og:type

The type of your content: website, article, product, video, music, etc. Different types enable different features in social previews.

og:site_name

Your website or brand name. Appears below the preview in some platforms. Helps with brand recognition.

Twitter Card Tags (Separate from OG)

twitter:card

Card type: "summary" (small image), "summary_large_image" (large image), "app" (mobile app), "player" (video). Summary_large_image is recommended for most content.

<meta name="twitter:card" content="summary_large_image" />

twitter:title

Title for Twitter cards. If not specified, Twitter uses og:title. Recommended length: 70 characters or less.

<meta name="twitter:title" content="Your Title" />

twitter:description

Description for Twitter cards. Falls back to og:description if not specified. Keep under 200 characters.

<meta name="twitter:description" content="Your description" />

twitter:image

Image for Twitter cards. For summary_large_image, recommended size: 1200×675 pixels (16:9 ratio).

<meta name="twitter:image" content="https://example.com/image.jpg" />

twitter:site

Your Twitter username (without @ symbol). Appears as attribution in Twitter cards.

<meta name="twitter:site" content="@yourhandle" />

Pro Tip:

Twitter falls back to Open Graph tags if Twitter-specific tags are missing. For best results, implement both OG and Twitter tags. Use Twitter's Card Validator to test and debug your Twitter cards.

12 Costly Open Graph Mistakes

Mistake #1: Missing og:image Tag

Without og:image, Facebook randomly selects an image from your page — often the wrong one. Always specify a high-quality, relevant image.

Mistake #2: Using Small Images

Images smaller than 200×200 pixels don't display in previews. Facebook recommends 1200×630 pixels for best quality. Small images get cropped or rejected.

Mistake #3: Title Too Long

Titles over 60 characters get truncated with "...". Keep titles concise and front-load important keywords.

Mistake #4: Description Too Long

Descriptions over 200 characters get cut off. Put important information first within the first 150 characters.

Mistake #5: Using Relative URLs

Facebook can't resolve relative URLs. Always use absolute URLs (https://example.com/image.jpg not /image.jpg) for og:image and og:url.

Mistake #6: Missing og:url Tag

Without og:url, Facebook may use the wrong canonical URL, splitting engagement across duplicate URLs.

Mistake #7: Wrong og:type

Using "website" for a product page misses product-specific features. Use appropriate type: article, product, video, music.

Mistake #8: Not Testing After Implementation

Facebook aggressively caches OG data. Use Facebook Sharing Debugger to clear cache and test changes before sharing.

Mistake #9: Ignoring Twitter Cards

Twitter displays plain text links without proper cards. Implement twitter:card for better Twitter engagement.

Mistake #10: Missing og:site_name

Without og:site_name, users don't see your brand name in shares. Add it for brand recognition.

Mistake #11: Cache Not Cleared After Updates

Changing OG tags without clearing Facebook's cache shows old previews. Use Sharing Debugger to scrape again.

Mistake #12: No Fallback og:image

If primary image fails to load, have a fallback. Facebook needs at least one working image URL.

Essential Social Media Debugging Tools

Facebook Sharing Debugger

Enter any URL to see how Facebook sees your page. Shows scraped OG tags, errors, warnings, and cached versions. Use after any OG tag changes to clear cache.

→ Open Facebook Debugger

LinkedIn Post Inspector

LinkedIn's tool shows how your page appears when shared. Validates OG tags and shows any issues with image loading or metadata.

→ Open LinkedIn Inspector

Twitter Card Validator

Test Twitter cards before sharing. Shows how your card renders on desktop and mobile. Validates twitter:* meta tags.

→ Open Twitter Validator

Pinterest Rich Pins Validator

Validate product, recipe, and article rich pins. Shows OG tag data and any validation errors.

→ Open Pinterest Validator

You Might Also Like These SEO Tools

Meta Title Checker Meta Description Checker Schema Generator Redirect Checker URL Slug Generator Hashtag Formatter

Frequently Asked Questions About Open Graph

What is the difference between Open Graph and Twitter Cards?

Open Graph (og:) tags work on Facebook, LinkedIn, Pinterest, WhatsApp, and many other platforms. Twitter Cards (twitter:) are specific to Twitter. Twitter falls back to OG tags if Twitter-specific tags are missing, but for best results, implement both. Use twitter:card="summary_large_image" for image-rich previews on Twitter.

What is the ideal image size for social sharing?

Facebook recommends 1200×630 pixels (1.91:1 ratio) for best display. Minimum size is 200×200 pixels. Twitter summary_large_image also uses 1200×675 pixels (16:9 ratio). Use high-quality JPEG or PNG under 5MB. Avoid text-heavy images as text may be truncated on mobile.

How do I test my Open Graph tags before sharing?

Use our Open Graph Preview tool above — enter your URL to see how it appears. For official validation, use Facebook Sharing Debugger, LinkedIn Post Inspector, and Twitter Card Validator. These tools show errors, warnings, and cached versions. Always test after making OG tag changes.

Why is Facebook showing the wrong image?

Common causes: missing og:image tag, image too small (<200px), Facebook cache not cleared, or relative URL instead of absolute. Use Facebook Sharing Debugger to see which image Facebook is finding. Click "Scrape Again" to clear cache and force Facebook to re-read your OG tags.

Do I need Open Graph tags for every page?

Yes, every page that could potentially be shared should have OG tags. Homepage, blog posts, product pages, landing pages, and articles all benefit. Pages without OG tags rely on Facebook's guess, which often pulls wrong images or generic titles.

How long should my og:title and og:description be?

og:title: 60-70 characters maximum. Longer titles get truncated. Place important keywords first. og:description: 150-200 characters maximum. Cut off after ~200 characters on most platforms. Put key information within first 150 characters.

How do I clear Facebook's cache for my URL?

Use Facebook Sharing Debugger (developers.facebook.com/tools/debug/). Enter your URL, click "Debug", then click "Scrape Again". This forces Facebook to re-crawl your page and clear the cached preview. Do this after any OG tag changes to see updates immediately.

Does Open Graph affect SEO rankings?

Open Graph tags do not directly affect Google rankings. However, they dramatically improve social media engagement, which can indirectly boost SEO through increased traffic, brand signals, and backlinks from shares. Better social previews = more clicks = more traffic = potential SEO benefits.

Does this tool work on mobile devices?

Yes! The Open Graph preview tool is fully responsive and works on phones, tablets, and desktops. Enter any URL to see how your content appears when shared on mobile devices — where most social sharing happens.

Is this Open Graph preview tool really free?

Yes, completely free! No sign-up, no credit card, no hidden fees. No limits on how many URLs you test. We keep it free through non-intrusive advertising that respects your privacy. Your data never leaves your browser — we don't store or log anything. Use it for Facebook, LinkedIn, Twitter, or any social platform.

Test Your Social Media Previews Now

Free Open Graph preview tool for social media managers and marketers. See how your content appears before sharing.

Explore Social Tools