• The four core tags are og:title, og:type, og:image and og:url.
• Use an image of 1200 by 630 pixels with an absolute https URL.
• Open Graph tags use the property attribute, not name.
• Platforms cache previews, so use their debugger tools to refresh after changes.
• X falls back to Open Graph when its own card tags are missing.

The Open Graph protocol was created by Facebook in 2010 and has become the standard way to describe a page for sharing. When someone pastes your link into LinkedIn, WhatsApp, Slack, iMessage, Discord or Facebook, the preview card is built from these tags. Without them the platform guesses, usually badly.

The essential tags

 <meta property="og:title" content="Canonical Tags: The Complete Guide" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://www.example.com/images/canonical-tags-og.png" />
<meta property="og:url" content="https://www.example.com/guides/canonical-tags" />
<meta property="og:description" content="What canonical tags do, how to implement them and the mistakes to avoid." />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_GB" /> 

• og:title: the headline for the card. It can differ from the title tag, and usually should not include the brand name.
• og:type: the kind of object. Use website for general pages and article for editorial content. Others include product, profile and video types.
• og:image: the preview image. The single biggest factor in whether a shared link is noticed.
• og:url: the canonical URL for the page. Shares and reactions are aggregated against it.
• og:description: one or two sentences of supporting copy.
• og:site_name: the name of the overall site.
• og:locale: language and territory in the format language_TERRITORY.

Getting the image right

• Size: 1200 by 630 pixels, a ratio of 1.91 to 1, works across the major platforms.
• Format: JPG or PNG is safest. WebP support is improving but not universal. Avoid SVG.
• File size: keep it comfortably under 5 MB, and smaller is better. WhatsApp is particularly fussy and works best with images under about 300 KB.
• Absolute https URL that is publicly accessible and not blocked by robots.txt.
• Keep important content central, since some platforms crop to a square.

Helping platforms render the card before they have fetched the image:

 <meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagram showing duplicate URLs pointing to one canonical page" /> 

Article tags

For og:type article you can add further detail:

 <meta property="article:published_time" content="2026-10-07T09:00:00+01:00" />
<meta property="article:modified_time" content="2026-10-07T09:00:00+01:00" />
<meta property="article:author" content="https://www.example.com/about" />
<meta property="article:section" content="Technical SEO" /> 

Do Open Graph tags affect SEO?

Not directly. Google does not use them for ranking. They do have indirect effects: better previews earn more clicks and shares, Google can use og:title as one of the sources when generating title links, and Google Discover may use the og:image when choosing a thumbnail.

Common mistakes

• Using name instead of property. Some parsers are forgiving and some are not.
• Relative image URLs.
• The same generic image on every page.
• og:url pointing to the homepage on every page, which merges all shares into one object.
• og:url that disagrees with the canonical tag.
• Tags injected by JavaScript. Most social scrapers do not render it.
• Images too small, which results in a tiny thumbnail instead of a large card.
• Forgetting to refresh the cache after an update.

How to test

• Facebook Sharing Debugger shows what was scraped and lets you force a refresh.
• LinkedIn Post Inspector does the same for LinkedIn.
• Paste the link into a private message in WhatsApp or Slack to see a real preview.
• Crawl the site to check coverage and find missing or duplicated values.

The GEO angle

AI assistants that browse the web read the head of a page along with the body, and Open Graph tags are clean, well-labelled metadata. Tags such as og:site_name, og:type and the article timestamps help confirm who published something and when. Some AI interfaces also use og:image for the thumbnail beside a cited source.

Add your title here

This is a paragraph. Writing in paragraphs lets visitors find what they are looking for quickly and easily. Make sure the title suits the content of this text.