Do all social platforms use Open Graph tags?

Facebook, LinkedIn, Pinterest, Slack, Discord, WhatsApp, and most major platforms use Open Graph tags for link previews. Twitter/X uses its own Twitter Card tags but falls back to og: tags when Twitter-specific tags are absent. This means properly set OG tags cover most platforms. For complete coverage, add Twitter Card tags alongside OG tags.

Why does my social share still show the wrong preview?

Social platforms cache Open Graph data. If you recently added or changed OG tags, the platform may still show the old (cached) version. Use the platform's debugger tool to force-refresh the cache: Facebook Sharing Debugger, LinkedIn Post Inspector. Changes typically take effect within 24-48 hours without manual refresh.

What dimensions should the og:image be?

Recommended: 1200×630 pixels (1.91:1 aspect ratio). Minimum: 600×315 pixels. The 1200×630 size displays well on Facebook, LinkedIn, Twitter, and most other platforms. Images should be hosted on HTTPS URLs. Facebook requires images to be at least 200×200 pixels with a maximum aspect ratio of 3:1.

Can I use different images for Facebook vs Twitter?

Yes—use og:image for Facebook/LinkedIn and twitter:image for Twitter. If both are present, each platform uses its own tag. This allows you to use the 1200×630 image for OG and a 1200×600 (2:1 ratio) image optimized for Twitter cards. For simplicity, a single 1200×630 image works acceptably on all platforms.

Open Graph Generator

Quick Examples

Basic Information

Title * (50-60 characters recommended)

30/100 characters

Description * (150-160 characters recommended)

122/200 characters

URL *

Image URL * (1200x630px recommended)

Site Name

Content Type

Twitter Card Settings

Twitter Card Type

Twitter Site Handle

Twitter Creator Handle

Social Media Preview

Facebook / LinkedIn

EXAMPLE.COM

Amazing Website | Your Company

Discover amazing products and services that will transform your business. Join thousands of satisfied customers worldwide.

Twitter

Amazing Website | Your Company

Discover amazing products and services that will transform your business. Join thousands of satisfied customers worldwide.

example.com

Generated Meta Tags

<!-- Essential Open Graph Meta Tags -->
<meta property="og:title" content="Amazing Website | Your Company" />
<meta property="og:description" content="Discover amazing products and services that will transform your business. Join thousands of satisfied customers worldwide." />
<meta property="og:url" content="https://example.com" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Company" />

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Amazing Website | Your Company" />
<meta name="twitter:description" content="Discover amazing products and services that will transform your business. Join thousands of satisfied customers worldwide." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:site" content="@yourcompany" />

<!-- Additional Recommended Meta Tags -->
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Best Practices

✓ Title: 50-60 characters for optimal display

✓ Description: 150-160 characters

✓ Image: 1200x630px (1.91:1 ratio)

✓ Image format: JPG or PNG, under 8MB

✓ Use absolute URLs for images

✓ Test with Facebook Debugger & Twitter Card Validator

About Open Graph Meta Tags

Open Graph meta tags control how your content appears when shared on social media platforms like Facebook, LinkedIn, Twitter, and more. Properly configured OG tags significantly improve click-through rates and social engagement.

Why Open Graph Matters:

Control how your links appear on social media
Increase click-through rates with compelling previews
Professional appearance builds trust and credibility
Better engagement leads to more traffic
Essential for content marketing and social sharing

Testing Your Tags:

Implementation:

Add the generated tags to the <head> section of your HTML:

Copy the generated meta tags
Paste them in your HTML <head> section
Deploy your changes
Test using the validation tools above
Share your URL to verify the preview

How It Works

Open Graph Protocol (OGP) was developed by Facebook in 2010 to allow web pages to become rich objects in the social graph. The protocol uses meta tags in the HTML section with the property attribute prefixed by "og:" to define how page content should be displayed when shared on social media platforms.

The core Open Graph tags that affect how shared links appear are: og:title (the title shown in the social card), og:description (the description shown below the title), og:image (the image displayed, ideally 1200×630px), og:url (the canonical URL), and og:type (the content type: website, article, video, etc.). When missing, social platforms use their own heuristics, often producing poor results.

This generator creates the complete HTML markup for all recommended Open Graph tags based on your inputs. It also generates Article-specific tags (published_time, author, section) for blog posts and news content, helping content appear correctly in Facebook's News Feed and LinkedIn's article sharing format.

Use Cases

1. Blog and Content Website Setup
Every page of a content site benefits from Open Graph tags. Without them, Facebook and LinkedIn display wrong titles, missing images, or generic descriptions when readers share articles. Generating consistent OG tags for all content types ensures attractive, click-worthy social cards every time.

2. E-commerce Product Pages
Product pages shared on social media should display the product name, a compelling description, and a high-quality product photo. og:type="product" along with og:title, og:image, and og:description creates professional social cards that drive click-through from social shares.

3. Event and Campaign Pages
Event landing pages need og:type="event" along with relevant event details in the title and description. A compelling event photo as og:image dramatically improves registration rates from social media traffic.

4. App Download Pages
Mobile app pages using og:type="website" with compelling screenshots or app artwork as og:image and focused, benefit-driven descriptions in og:description improve the conversion from social-referred visitors who see the shared link in their feeds.

5. Multi-language Internationalization
Sites serving multiple languages use og:locale to specify the content language and og:locale:alternate for alternate language versions. This helps social platforms show the most relevant version to each user.

Tips & Best Practices

• og:image is the most important tag: Shares without og:image display poorly on all platforms. The investment in creating proper sharing images (1200×630px) for important pages pays off significantly in click-through rates from social shares.

• og:url should be canonical: Set og:url to the canonical URL of the page, not the current request URL which may include tracking parameters. This prevents analytics fragmentation across different URL variants.

• Test with platform debuggers: After adding OG tags, test with Facebook's Sharing Debugger, LinkedIn's Post Inspector, and Twitter Card Validator to see exactly how shares will appear and to force-refresh cached previews.

• og:type affects display: "article" type enables article-specific metadata (author, publish date, section). "website" is the safe default for non-article pages. Other types (video, music, book) unlock additional platform-specific metadata fields.

• Keep og:title and og:description different from page title and meta description: Social sharing context differs from search context. You may want more conversational, attention-grabbing OG titles/descriptions versus keyword-focused SEO titles/descriptions.

Frequently Asked Questions

Related Tools

Explore more tools that might help you