Open Graph Preview

Free Open Graph Preview Tool — See Exactly How Your Page Looks on Facebook and LinkedIn

Picture this scenario: your content team just published an in-depth article that took three weeks to research, write, and format. Your social media manager shares the link on your company Facebook page, and instead of the polished, professional card with a compelling headline and clean description that you envisioned, the post displays a random image pulled from an ad unit halfway down the page, a truncated title that cuts off mid-sentence, and a description that reads like boilerplate database text. The post gets ignored, the engagement is negligible, and three weeks of excellent content investment fails to generate the social traffic it deserved — all because of five lines of missing HTML in the document head.

This scenario plays out thousands of times every day across the web, and it is entirely preventable. Open Graph meta tags are the mechanism that allows you to explicitly control how your content appears when shared across social media platforms including Facebook, LinkedIn, Slack, WhatsApp, and dozens of other applications that support the Open Graph protocol. Our free online Open Graph preview tool lets you test exactly how that card will render before your content ever goes live, so you can fix issues proactively rather than discover them in the wild after the share is already circulating.

What Is the Open Graph Protocol and Why Was It Created?

The Open Graph protocol was developed and published by Facebook in 2010 as a standardized system for embedding structured metadata within web pages that social platforms could read and use to generate rich content previews. Before Open Graph, when someone shared a link on a social network, the platform had to guess which image, title, and description were most appropriate to display — often with poor results. Open Graph eliminated that guesswork by giving website owners a direct channel to specify exactly what metadata social platforms should use.

The protocol takes its name from Facebook's social graph — the interconnected web of people, pages, and content on the platform. By marking up your web pages with og: meta tags in the HTML head section, you are essentially telling Facebook (and any other platform that respects the standard) "this is how I want my content represented when it enters your social graph." The tags are simple HTML meta elements with property and content attributes, but their impact on social sharing performance can be substantial.

Today the Open Graph protocol has been adopted far beyond Facebook. LinkedIn, Pinterest, Slack, Discord, iMessage link previews, WhatsApp web previews, and many other platforms all read og: meta tags to generate their link cards. Getting these tags right means your content looks professional and compelling everywhere it gets shared, not just in Google search results.

The Four Essential Open Graph Tags Every Page Needs

While the Open Graph specification includes dozens of optional property types, four tags are absolutely essential for consistent, professional social sharing across all major platforms.

The og:title tag defines the headline that appears in the social share card. This is not required to be identical to your HTML title tag or your H1 heading — and in many cases it should not be. Your SEO title is optimized for search engine result display; your og:title should be optimized for social engagement. Social media audiences respond differently than search audiences. They appreciate more emotive, curiosity-driven, or benefit-focused language because they are browsing a feed rather than actively searching for information. Using our preview tool, you can craft and test og:title variations to find the phrasing that feels most compelling in a social card context.

The og:description tag provides the supporting copy beneath the title. Think of it as the ad copy that has to convert a passive scroll into an active click. It should expand on the title's promise, address a specific pain point or curiosity, and ideally end with an implicit or explicit call to action. Facebook displays roughly 300 characters of og:description before truncating, though this varies by device and platform. Our preview renders the display at realistic dimensions so you can see exactly where truncation occurs and adjust accordingly.

The og:image tag is often the most impactful of all the Open Graph tags. Visual content dominates social feeds, and a compelling, correctly sized og:image can increase click-through rates dramatically compared to a page with no image tag (which leads to the platform guessing an image) or a broken image tag (which often results in the link being shared as plain text with no visual component at all). The recommended og:image size for Facebook is 1200 x 630 pixels at minimum, though some platforms scale differently. Our tool shows you how the image integrates with the title and description in the preview card.

The og:url tag explicitly specifies the canonical URL that social platforms should associate with your content. This is important for tracking purposes and for ensuring that engagement metrics (likes, shares, comments) consolidate onto a single URL rather than being split across variations like HTTP vs HTTPS or www vs non-www versions.

Open Graph Optimization for Facebook — Character Limits and Best Practices

Facebook is the largest and most mature Open Graph implementation, and understanding its specific rendering conventions helps you optimize your tags most effectively. Facebook's link preview card appears in News Feed in several different formats depending on context and platform version, but the standard format that most users will encounter when someone shares a link shows the og:image at the top, the og:title in bold below it, the og:description in regular weight beneath that, and the domain in small text at the bottom.

For og:title, Facebook currently renders up to approximately 100 characters in the News Feed card, but this can vary. A safer target is 60-70 characters to ensure the full title always displays without truncation across devices. Shorter, punchier titles often perform better on social platforms anyway — social audiences respond to clarity and immediacy more than comprehensiveness.

For og:description, around 200-300 characters is the practical display limit, though again this varies by context. The description should not simply restate the title — it should complement it by adding context, social proof, or a specific hook. Use active verbs and address the reader directly to create a sense of personal relevance.

LinkedIn-Specific Open Graph Considerations

LinkedIn reads and renders Open Graph tags with some differences from Facebook worth noting. LinkedIn's link preview card is more compact, often displaying a smaller thumbnail image to the left with title and description to the right in a horizontal layout. This means images designed specifically for the large Facebook card format may not display optimally on LinkedIn.

LinkedIn is also known to cache Open Graph data aggressively. After you publish a page and fix or update its og: tags, LinkedIn may continue showing the old preview for a period. LinkedIn provides a Post Inspector tool similar to Facebook's Sharing Debugger that lets you force a cache refresh for a specific URL. It is good practice to check your og: tags through both these platform-specific debuggers after launch, in addition to using our preview tool during the creation phase.

From a tone perspective, LinkedIn's professional audience tends to respond better to slightly more formal og:title and og:description language compared to the more casual register that often performs well on Facebook. If you are publishing content that will be shared across both platforms, consider which audience represents your primary social channel and optimize for that, while ensuring the card looks acceptable on both.

Testing Open Graph Tags Before and After Publication

There are two distinct phases where Open Graph preview checking is most valuable, and our tool serves both equally well. The pre-publication phase is where you draft and refine your og: metadata before the page exists publicly. By entering your intended title, description, and URL into the preview tool, you can evaluate how the card will look and make adjustments without waiting for the page to go live.

The post-publication audit phase is equally important. After a page is live and Open Graph tags are implemented in the actual HTML, platforms like Facebook and LinkedIn cache the first preview they generate and may not automatically refresh it even when you make changes. Both Facebook (via the Sharing Debugger) and LinkedIn (via the Post Inspector) provide cache-clearing utilities, but these require the page to be publicly accessible. Our tool gives you a reliable quick visual check of how your og: metadata reads before you bother with platform-specific debugging workflows.

For teams managing content at scale — publishing dozens or hundreds of pages per month — integrating an Open Graph check into the final pre-publish content checklist is a simple process improvement that prevents the embarrassment and wasted traffic of professionally written content being shared with broken or missing social preview cards.

Common Open Graph Mistakes and How to Fix Them

Missing og:image is the most damaging Open Graph error in practice. When no image tag is present, Facebook either displays no image (making the share card visually weak and easy to ignore) or pulls a random image from the page that may be totally irrelevant — an icon, an ad image, or a decorative element. Always include an explicitly defined og:image on every page you intend to share socially.

Wrong image dimensions cause a different problem — the image displays but is cropped, distorted, or displayed in an unexpected aspect ratio. Always verify that your og:image dimensions match platform requirements before publishing. Using our preview tool alongside an image that meets the 1200x630 pixel standard provides the most accurate rendering simulation.

Duplicate og:title and page title is a missed optimization opportunity. Many developers simply populate og:title with the same value as the HTML title tag. While this is technically fine, it misses the chance to craft social-specific copy optimized for feed engagement rather than search click-through. Treat your og:title as a separate piece of copy with its own audience and optimization goal.