Open Graph Checker: Debug Social Sharing

What Is Open Graph?

Open Graph is a protocol that controls how your web pages appear when shared on social media platforms. When someone pastes a URL into Facebook, LinkedIn, Twitter/X, Slack, Discord, or iMessage, the platform fetches the page and looks for Open Graph meta tags in the HTML head section. These tags specify the title, description, image, and type of content that should appear in the link preview.

Without Open Graph tags, platforms attempt to generate a preview by guessing — they might use the page title from the <title> tag, grab the first paragraph as a description, and pick a random image from the page. The results are usually poor: a tiny logo instead of a hero image, a truncated navigation menu as the description, or the wrong title entirely. Open Graph lets you control exactly what users see.

The protocol was created by Facebook in 2010 and has since been adopted by virtually every platform that renders link previews. Twitter has its own variation called Twitter Cards (using twitter: meta tags), but most platforms fall back to Open Graph tags when Twitter-specific tags are absent. In practice, implementing Open Graph covers most social sharing scenarios.

Required and Recommended Tags

og:title — The title displayed in the preview card. Keep it under 60 characters to avoid truncation. This does not have to match your HTML <title> tag — you can craft a more compelling, share-optimized title specifically for social previews.

og:description — A brief summary shown below the title, typically 2-3 sentences. Aim for 100-200 characters. Write it as a hook — the description should make someone want to click the link. Avoid keyword stuffing; this is a human-facing preview, not a search engine signal.

og:image — The image displayed in the preview card. This single tag has the greatest impact on click-through rates. A compelling image transforms a text-heavy link preview into a visual card that stands out in a feed. Use an absolute URL (including protocol and domain), not a relative path.

og:url — The canonical URL of the page. This helps platforms consolidate share counts when the same page is accessible through multiple URLs (with/without www, with tracking parameters, etc.).

og:type — The content type: website, article, product, video, etc. For most pages, website is appropriate. Blog posts should use article, which supports additional tags like article:published_time and article:author.

Getting the Image Right

The Open Graph image is where most mistakes happen. Different platforms have different display sizes, aspect ratios, and minimum dimensions. Getting a single image to work well everywhere requires understanding each platform's requirements.

Recommended size: 1200×630 pixels is the widely accepted sweet spot. This aspect ratio (approximately 1.91:1) works well on Facebook, LinkedIn, and Twitter's summary_large_image card. Some platforms crop the image to different ratios in different contexts (feed vs. message vs. notification), so keep important content centered and away from edges.

Minimum size: Facebook requires at least 200×200 pixels, but images below 600×315 pixels will display as small thumbnails instead of large cards. LinkedIn requires at least 1200×627 pixels for the large preview format. Always use the larger size to get the best display across all platforms.

File size and format: Keep images under 8 MB (Facebook's limit). JPEG and PNG are universally supported. WebP works on most platforms now but some older crawlers may not handle it. Animated GIFs are not displayed as previews — only the first frame is shown.

Text on images: If your preview image includes text (article title overlay, promotional text), ensure the text is large enough to read at the smallest display size. Test at 600×315 pixels — if the text is illegible at that size, it will not be readable in some preview contexts.

Common Open Graph Mistakes

Missing og:image: The single most impactful mistake. Links without preview images get dramatically lower engagement. Every shareable page needs an image — even if it is a branded template with the article title overlaid on a background.

Relative image URLs: Using /images/preview.jpg instead of https://example.com/images/preview.jpg. Social media crawlers need absolute URLs because they fetch the image independently of the page. A relative URL results in no image being displayed.

Cached old previews: Platforms cache link previews aggressively. After updating your Open Graph tags, the old preview continues to appear until the cache expires. Facebook provides a Sharing Debugger that lets you scrape a URL to refresh its cache. LinkedIn has a Post Inspector for the same purpose.

Duplicate tags: Having multiple og:title or og:image tags on the same page — often caused by CMS plugins injecting tags without checking if they already exist. Platforms typically use the first tag they encounter, so duplicate tags at best do nothing and at worst show the wrong content.

Dynamic rendering issues: Open Graph tags must be present in the initial HTML response. If your site is a client-side JavaScript application that renders Open Graph tags after JavaScript execution, social media crawlers will not see them. Facebook's crawler does not execute JavaScript. Use server-side rendering or prerendering for pages that need social sharing previews.

Check Your Open Graph Tags

Our Open Graph Checker analyzes any URL and displays all detected Open Graph and Twitter Card tags. It shows a preview of how the link will appear on major social platforms, flags missing required tags, warns about image size issues, and validates that URLs are absolute and accessible.

Use it before publishing new content or after updating existing pages to verify that your social sharing previews look correct. Catch missing images, truncated titles, and metadata errors before your audience sees them.