linkutm Logo
Glossary Term

Open Graph Tags

glossary open graph tags featured

Open Graph tags are HTML meta tags that control how a URL appears when shared on social media and messaging apps. They set the title, description, and image shown in the link preview. Facebook created the Open Graph protocol in 2010, and platforms like LinkedIn, Slack, WhatsApp, and Discord now read the same tags.

Why Open Graph Tags Matter

Without Open Graph tags, platforms guess what to show in a link preview. The result is often a broken layout: no image, a truncated title, or the wrong text pulled from the page. OG tags remove the guesswork and let you control the preview.

A strong preview raises click-through rates. A post with a clear image and headline stands out in a crowded feed. The same link with no image or a stretched thumbnail gets scrolled past. Since the preview is cached, a missing OG image at share time can follow a URL around for days.

The Core Open Graph Tags

Four tags cover most needs. Each is a element placed in the page’s :

  • og:title, the headline shown in the preview. Keep it under 60 characters.
  • og:description, the summary text below the title. Aim for 55 to 200 characters.
  • og:image, the preview image. The single most important tag for engagement.
  • og:url, the canonical URL of the page being shared.
  • og:type, the content type, such as website, article, or product.

A basic implementation looks like this:

og:image Size and Best Practices

Use 1200 x 630 pixels for og:image. That is a 1.91:1 aspect ratio, and it fills the feed preview on Facebook, LinkedIn, Slack, WhatsApp, and most other platforms without cropping.

Keep these rules in mind:

  • File format: JPG or PNG. Use JPG for photos, PNG for logos and sharp text.
  • File size: Under 1MB is ideal. Facebook caps images at 8MB.
  • Safe zone: Keep headlines and faces inside the center to avoid mobile cropping.
  • Absolute URLs: The og:image value must be a full URL, not a relative path.

X (Twitter) uses its own Twitter Card tags but falls back to Open Graph when they are missing. For a large X image, 1200 x 675 (16:9) works well.

How to Check Open Graph Tags

Test the preview before you share the link publicly. Each major platform has a debugger: Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, and X’s Card Validator. These tools show the rendered preview and force a re-scrape if you updated the tags after the first share.

If you shorten links for campaigns, confirm the short URL passes the preview through correctly. A link preview tool shows exactly how a shared link renders across platforms, so you can catch a missing image before it goes live.

Common Open Graph Mistakes

The most frequent error is a relative og:image path. Platforms require an absolute URL, so /images/og.png fails while https://example.com/images/og.png works. Another common issue is stale caching: platforms store the first preview they scrape, so changes need a manual re-scrape through the debugger. Missing og:image entirely is also widespread, which leaves previews looking bare.

Frequently Asked Questions

What are Open Graph tags?

Open Graph tags are meta tags in a page’s HTML that tell social platforms how to display the link in a preview. They set the title, description, and image. Facebook introduced the Open Graph protocol in 2010, and most platforms now support it.

What is the difference between OG tags and meta tags?

OG tags are a specific type of meta tag focused on social sharing. Standard meta tags like the meta description influence search engine snippets. Open Graph tags control the preview shown on Facebook, LinkedIn, and messaging apps.

What size should an og:image be?

The recommended og:image size is 1200 x 630 pixels at a 1.91:1 aspect ratio. This fits Facebook, LinkedIn, Slack, and WhatsApp previews without cropping. Keep the file under 1MB and use an absolute URL.

Do Open Graph tags help SEO?

Not directly. OG tags do not influence Google rankings. They improve click-through rates from social media, which can drive traffic and indirect SEO value through engagement and shares.

To see how your shared links render before you post them, check the link preview feature at linkutm.

Back to Glossary