Open Graph Tags: Everything You Need to Know

Every time someone shares a link on Facebook, LinkedIn, Slack, or WhatsApp, the platform generates a rich preview card with an image, title, and description. Open Graph tags are the HTML meta tags that control exactly what appears in that preview. Without them, platforms are left guessing — and the results are rarely what you want.

In this guide, we'll cover what Open Graph is, which tags are essential, image best practices, common mistakes, and how to test your OG tags to make sure they're working properly.

What Is Open Graph?

Open Graph is a protocol originally created by Facebook in 2010 that turns web pages into rich objects in a social graph. In practical terms, it's a set of meta tags you add to your page's HTML that tells social platforms how to display your content when it's shared.

The protocol has been widely adopted beyond Facebook. LinkedIn, Slack, Discord, WhatsApp, Telegram, and many other platforms all read Open Graph tags to generate link previews. Getting your OG tags right means your content looks professional everywhere it's shared.

Essential Open Graph Tags

There are four OG tags that every page should have. Without these, you're leaving your social presence to chance.

og:title

The title that appears in the social preview. This can (and often should) differ from your HTML title tag. While your title tag might include brand suffixes like "| Company Name" for SEO, your OG title should be clean and compelling — focused on making someone want to click.

Tip: Keep it under 60 characters to avoid truncation on most platforms.

og:description

The description text shown below the title in the social preview. This is your chance to provide context and entice the reader. Think of it as a social media elevator pitch for the page.

Tip: Aim for 55-200 characters. Facebook typically displays about 65-70 characters on mobile and slightly more on desktop, but other platforms vary.

og:image

This is arguably the most important Open Graph tag. Posts with images receive dramatically more engagement than those without — studies consistently show 2-3 times more clicks and shares. The og:image tag specifies the URL of the image to display in the social preview.

Tip: Use an absolute URL (starting with https://), not a relative path. The image must be publicly accessible.

og:url

The canonical URL for the page. This tells social platforms which URL should be associated with the shared content, similar to how the canonical link tag works for search engines. All shares of the page will be consolidated under this URL.

Recommended Open Graph Tags

Beyond the four essential tags, these additional OG tags are worth including:

• og:type — defines the type of content. Common values include website (for homepages), article (for blog posts), and product (for product pages). Defaults to website if not specified.
• og:site_name — your website's name. This appears separately from the title on some platforms, providing brand recognition.
• og:locale — the language and territory of the content (e.g. en_AU for Australian English). Helps platforms serve the content to the right audience.

Image Best Practices

The og:image tag deserves special attention because it has the biggest visual impact on how your shared links appear. Here are the key guidelines:

• Recommended size: 1200 x 630 pixels. This is the standard aspect ratio (1.91:1) that works well across Facebook, LinkedIn, and Twitter. Images smaller than 600 x 315 pixels may not display as a large preview on some platforms.
• File format: JPEG or PNG. Avoid SVG, WebP, and animated GIFs — not all platforms support them in previews.
• File size: Keep images under 5MB (under 1MB is ideal for fast loading). Facebook recommends no larger than 8MB.
• Text on images: If your image contains text, ensure it's readable on mobile screens. Keep text centred, as some platforms crop the edges.
• Always use HTTPS: Some platforms will not display images served over HTTP.

Common Open Graph Mistakes

Even experienced developers make these mistakes with OG tags. Here are the most frequent issues we see when analysing sites with Meta Tag Checker:

• Missing og:image entirely. Without an image, your shared links look like plain text — easy to scroll past. Always include an image, even if it's a branded fallback.
• Using relative image URLs. OG image URLs must be absolute (starting with https://). Relative paths like /images/hero.jpg won't work because social platforms can't resolve them.
• Using the same OG tags site-wide. Every page should have its own unique og:title, og:description, and ideally og:image. Sharing your About page shouldn't display the same preview as your homepage.
• Forgetting to update cached previews. Facebook and LinkedIn cache OG data aggressively. After updating your tags, use Facebook's Sharing Debugger or LinkedIn's Post Inspector to clear the cache and verify your changes.
• Ignoring og:type. While it defaults to website, setting the correct type (especially article for blog posts) gives platforms additional context about your content and may affect how the preview is rendered.

Testing Your Open Graph Tags

Before sharing important content, you should always verify that your OG tags are working correctly. Here's how:

1. Use Meta Tag Checker to get a quick overview of all your OG tags and see if any essential ones are missing.
2. Facebook Sharing Debugger (developers.facebook.com/tools/debug/) — shows exactly how Facebook will render your link and lets you clear its cache.
3. LinkedIn Post Inspector (linkedin.com/post-inspector/) — preview how your link will look on LinkedIn.
4. Twitter Card Validator (cards-dev.twitter.com/validator) — check your Twitter Card and OG tag rendering for X/Twitter.

We recommend checking OG tags whenever you publish or significantly update a page. It takes just a few seconds and prevents embarrassing social previews that can hurt engagement and click-through rates.

Conclusion

Open Graph tags are a small investment of time that pays off every time your content is shared. By including at least og:title, og:description, og:image, and og:url on every page, you ensure your content always looks polished and professional on social platforms.

Not sure if your OG tags are set up correctly? Run your URL through our free Meta Tag Checker and you'll see exactly what's present, what's missing, and how to fix any issues — all in seconds.