GrowthGPT
GrowthGPT
AI community platform for modern work

Open Graph Preview

See exactly how your links will look on Facebook, Twitter, LinkedIn, Slack, Discord, and Google before publishing.

100% client-side - no data leaves your browser

Enter OG Properties

Fill in the Open Graph and Twitter Card fields to preview your link cards.

Recommended: 1200x630px

Twitter / X Overrides

Leave blank to use the og: values as fallbacks.

Validation Warnings

  • Missing og:title - required for social sharing
  • Missing og:description - required for social sharing
  • Missing og:image - posts without images get significantly less engagement
  • Missing og:url - recommended for canonical URL on social platforms

Privacy note

  • All processing runs entirely in your browser.
  • No data is sent to any server or stored anywhere.
Live Preview
f

Facebook / LinkedIn

EXAMPLE.COM

Page Title

Page description will appear here.

X

Twitter / X

example.com

Page Title

Page description will appear here.

Google SERP

example.com

https://example.com

Page Title

Your meta description will appear here. Write a compelling summary to improve click-through rates.

#

Slack

example.com

Page Title

Page description will appear here.

D

Discord

example.com

Page Title

Page description will appear here.

What Is the Open Graph Protocol?

The Open Graph protocol is a standard created by Facebook that lets you control how your web pages appear when shared on social media platforms. By adding specific meta tags to your HTML head section, you define the title, description, image, and URL that platforms display in link preview cards.

Without Open Graph tags, social platforms will try to guess what to show by scraping your page content. This often results in missing images, truncated titles, or irrelevant descriptions. Adding proper OG tags ensures your content looks professional and compelling every time it gets shared.

How Social Media Platforms Use OG Tags

Each platform reads Open Graph tags slightly differently. Facebook and LinkedIn use og:title, og:description, og:image, and og:url to build their link preview cards. Twitter uses its own twitter:card, twitter:title, and twitter:description tags, but falls back to OG tags when Twitter-specific tags are missing.

Slack renders a compact card with the site name, title, description, and a thumbnail image. Discord displays a rich embed with a colored sidebar, title link, description, and full-width image. Google does not use OG tags for search rankings, but the title and description in your meta tags directly affect how your page appears in search results.

Best Practices for Open Graph Tags

Use images that are at least 1200 by 630 pixels for the best display across all platforms. Smaller images may appear as thumbnails instead of large cards. Keep your og:title under 60 characters and og:description under 155 characters to avoid truncation.

Always include og:title, og:description, og:image, and og:url as the minimum required tags. Add og:type (usually "website" or "article") and og:site_name for better platform compatibility. For Twitter, set twitter:card to "summary_large_image" to get the full-width image card format instead of the smaller summary card.

Debugging Open Graph Issues

If your link previews look wrong after updating OG tags, the most common cause is platform caching. Facebook, Twitter, and LinkedIn all cache link previews aggressively. Use Facebook's Sharing Debugger, Twitter's Card Validator, and LinkedIn's Post Inspector to force a cache refresh.

Another common issue is relative image URLs. Always use absolute URLs starting with https:// for your og:image tag. Relative paths will not resolve correctly when platforms try to fetch the image from their servers. Also verify that your images are publicly accessible and not blocked by authentication or robots.txt.

Frequently Asked Questions

What are the required Open Graph meta tags?

The four essential Open Graph tags are og:title, og:description, og:image, and og:url. These are the minimum needed for social platforms to display a proper link preview card. Additional tags like og:type, og:site_name, and og:locale provide more context but are optional.

What image size should I use for Open Graph?

The recommended image size is 1200 by 630 pixels with a 1.91:1 aspect ratio. This works well across Facebook, Twitter, LinkedIn, Slack, and Discord. Keep important content centered since some platforms may crop the edges. Use JPEG or PNG format and keep the file size under 8MB.

Why does my link preview show the wrong image?

Social platforms cache link previews for hours or days. After updating your OG tags, use each platform's debugging tool to force a refresh: Facebook Sharing Debugger, Twitter Card Validator, or LinkedIn Post Inspector. Also make sure your og:image URL is an absolute path starting with https:// and the image is publicly accessible.

Do I need separate Twitter Card tags if I have Open Graph tags?

Twitter will fall back to Open Graph tags when Twitter-specific tags are missing. However, setting twitter:card is recommended because it controls the card format (summary vs summary_large_image). You can add twitter:title and twitter:description if you want different text on Twitter than on Facebook and LinkedIn.

Does this tool fetch my actual webpage?

No. This tool runs entirely in your browser and does not make any external requests. You paste your meta tags or enter the OG properties manually, and the tool renders realistic previews locally. No data is sent to any server.

Related Tools

Meta Tag Generator

Generate AI-optimized meta titles, descriptions, and OG tags for any page.

Schema Markup Builder

Generate JSON-LD structured data markup for better search visibility.

UTM Builder

Create UTM-tagged URLs for tracking campaign performance in analytics.