iSocialWeb

Open Graph

The tags that decide how your link looks when it is shared

Open Graph is a meta tag protocol that tells social networks and messaging apps which title, description and image to show when someone shares a URL. Without these tags, each platform guesses on its own, and the result is usually a weak card or one with no image at all.

Where Open Graph comes from

Facebook created the protocol so that any web page could be represented as a rich object inside its network. The specification is public and lives at ogp.me. Today almost every platform that builds link previews reads it, not just Facebook.

The basic Open Graph tags

They go in the <head> of each page. The specification treats og:title, og:type, og:image and og:url as required; og:description is optional, but you should always include it:

<meta property="og:title" content="Women's Trail Running Shoe Guide">
<meta property="og:description" content="How to choose cushioning, drop and grip for your terrain.">
<meta property="og:image" content="https://www.example.com/img/trail-guide-1200x630.jpg">
<meta property="og:url" content="https://www.example.com/trail-shoe-guide/">
<meta property="og:type" content="article">
  • og:title: the card headline. It can differ from the meta title, written for social feeds rather than for Google.
  • og:description: one or two sentences under the title. It can match the meta description or adopt a more social tone.
  • og:image: the card image, always as an absolute URL.
  • og:url: the page's canonical address. It should match your canonical URL so that shares and reactions add up on a single address.
  • og:type: the object type. Typically website for the home page and general pages, and article for blog posts and news.

Image size

Meta's webmaster documentation recommends images of at least 1200 × 630 pixels, with an aspect ratio close to 1.91:1. Keep important text away from the edges, because some platforms crop the image to a square or narrower shape.

Who reads Open Graph tags

  • Facebook and Messenger.
  • LinkedIn, in both posts and messages.
  • WhatsApp, Telegram and Slack when they build a link preview.
  • X (Twitter), which uses its own twitter: tags but falls back to Open Graph when they are missing. The one tag worth adding is <meta name="twitter:card" content="summary_large_image"> so it shows the large image.

Why it matters

Every time someone shares your page, the card works as a free ad. A sharp image and a clear title make the link stand out in a feed or a WhatsApp group; a card with no image or a pixelated logo gets scrolled past. This matters most for content that lives on social distribution: articles, launches, campaign landing pages and pages you expect to be shared in posts and ads.

Open Graph is not a ranking factor in Google. Its effect is indirect: more clicks from social, more visits and more chances that someone links to or mentions the page.

How to test your Open Graph tags

  1. Check the page source (not the element inspector, which can show changes made by JavaScript) and confirm the tags are in the HTML <head>.
  2. Run the URL through Facebook's Sharing Debugger. It shows the preview and any warnings, and lets you force a fresh scrape.
  3. Do the same in LinkedIn's Post Inspector, which also refreshes its cache.
  4. Send the link to a test chat in WhatsApp or Slack to see the real result.

For a quick check, the free SEO audit also reviews your page's social tags alongside the other on-page elements.

Common mistakes

  • No og:image: the platform grabs any image on the page (an icon, a banner) or shows none.
  • Relative URLs: /img/cover.jpg does not work; the image and the URL must be complete, with https:// and the domain.
  • Old previews stuck in cache: you change the image and the old one keeps appearing. Force a refresh with the debugging tools.
  • The same tags across the whole site: the template repeats the home page title and image on every page, so every shared link looks identical.
  • Tags injected only with JavaScript: many social crawlers do not run JavaScript and will not see them.
  • Blocked images because of robots.txt, authentication or an oversized file.

Frequently Asked Questions

  • It is a protocol created by Facebook that uses meta tags in your HTML to define which title, description and image should appear when someone shares a URL on social networks or messaging apps.

  • Meta recommends images of at least 1200 × 630 pixels, with an aspect ratio close to 1.91:1, so they display well on high-resolution screens without being cropped.

  • It is not a Google ranking factor. Its value lies in making your shared links look good and get more clicks, which can lead to more visits and mentions.

  • Because they cache the preview the first time someone shares the URL. Run the URL through Facebook's Sharing Debugger or LinkedIn's Post Inspector so they read the tags again.