Open Graph tags: what each one controls in a share
Open Graph is the set of og: meta tags (title, description, image, url) that controls how a link looks when it is shared. What each tag does.
Open Graph is a set of og: meta properties, such as og:title, og:description, og:image and og:url, that controls how a link to a page previews when someone shares it in a social app, a chat or a messaging client.
The protocol at ogp.me lists four properties as required on every page: og:title, og:type, og:image and og:url. The tags use the property attribute, while X (Twitter) card tags such as twitter:card use name. Share clients read the HTML the server sends without running JavaScript, so tags injected in the browser are not there for them.
Category: Social Media
Why it matters
The preview is the page’s first impression wherever it is shared. With no og:image the card is plain text, and with no title the platform has to pick text from the page itself. og:url is what platforms use to deduplicate shares. When it disagrees with the canonical URL, usually over www, the scheme or a trailing slash, shares can be counted against two addresses. A stale template that leaves some pages with an old default image or favicon is easy to miss, because each page looks fine on its own.
How squirrelscan checks it
core/og-tags warns on a missing og:title, og:description or og:image and notes a missing og:type. It checks presence only, so an image URL that answers 404 passes. social/og-image-size reads the declared og:image:width and og:image:height and warns below 1200 by 630. It never fetches the image, so it trusts the numbers. social/og-url-match compares og:url with the canonical after resolving both and dropping a trailing slash. core/twitter-cards checks the card type and the image a summary_large_image card needs, and notes when a page relies on the Open Graph fallback. social/asset-divergence compares the default og:image, favicon and theme-color across the site, once 10 pages agree at 70%, and reports the pages that differ. Articles, products and other page types that carry their own share image are exempt from the image comparison, not from the favicon and color ones.
| Rule | What it flags | Severity |
|---|---|---|
| Missing og:image: the Open Graph tags squirrel checks | A page missing og:title, og:description or og:image, so shares render without a preview. squirrel checks four tags per page. | warning |
| og:image size: the 1200 by 630 recommendation | A share image below the recommended size is cropped or upscaled in the preview card. squirrel reads og:image and its declared dimensions. | warning |
| og:url versus canonical: why they should be the same URL | When og:url and the canonical disagree, share counts split across two addresses. squirrel normalises both and compares them. | warning |
| Favicon and theme-color that differ across the site | Site chrome comes from one layout, so a page carrying a different favicon is running a different template. squirrel finds the minority. | warning |
| twitter:card: the card types and the Open Graph fallback | A page with no twitter:card, an unrecognised type, or a large-image card with no image. squirrel checks the type and the fallback. | info |
How to fix it
Render the tags in the shared layout, with absolute URLs and declared image dimensions:
<meta property="og:title" content="Configuring the build cache" />
<meta property="og:description" content="How the build cache stores compiled output between runs." />
<meta property="og:image" content="https://example.com/og/build-cache.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/guides/build-cache" />
<meta name="twitter:card" content="summary_large_image" />Generate a 1200 by 630 image per page or template, and keep the important part away from the edges (the image size fix). Render og:url and the canonical from the same value (the URL match fix). Fix divergent assets in the shared head partial, not page by page (the divergence fix).
Run the check
squirrel audit https://example.com --rule-include core/og-tags,social/og-image-size,social/og-url-match,social/asset-divergence,core/twitter-cardsA signed-out local audit costs nothing.
Related terms
- Canonical URL: The URL a page declares, with
<link rel="canonical">or a Link header, as the preferred address for its content.