Open Graph and Social Meta Tags

Last updated

Open Graph is a protocol introduced by Facebook in 2010 that lets any webpage define how it should appear when shared as a link. A page with Open Graph tags controls its own preview: title, image, description, and content type. Without them, platforms infer what to show, with inconsistent results.

Why Open Graph matters for SEO

Open Graph has no direct effect on Google search rankings. It matters for three reasons that still affect organic performance.

Click-through rate from social. A well-formed social preview generates more clicks than a blank or auto-generated one. Social shares drive traffic, and that traffic contributes to brand signals and potential link acquisition over time.

AI retrieval systems read OG metadata. When AI search tools process a page, og:description is one fallback for page context when the meta description is absent or too short. It is not the primary signal, but it is read.

Messaging and non-search channels. WhatsApp, Slack, Discord, iMessage, and LinkedIn all render Open Graph previews. A broken preview in a Slack channel is a missed opportunity for branded referral traffic.

The essential Open Graph tags

Every public page should have these four:

og:title The title shown in the preview. Can differ from the <title> tag. Social copy sometimes benefits from a slightly different phrasing, though most implementations use the same value.

<meta property="og:title" content="Open Graph and Social Meta Tags">

og:description A short description shown beneath the title. Aim for 100–150 characters. Platforms truncate at different lengths, so front-load the key information.

<meta property="og:description" content="How og:title, og:image, and Twitter cards control social link previews, and what breaks them.">

og:image The image shown in the preview. The most impactful tag for click-through rate. Must be an absolute URL: a relative path like /images/og.jpg fails completely.

<meta property="og:image" content="https://example.com/images/open-graph-og.jpg">

og:url The canonical URL for the page. Ensures all shares, likes, and comment counts consolidate to one URL rather than splitting across URL variants (with and without trailing slashes, with query parameters, etc.).

<meta property="og:url" content="https://example.com/on-page-seo/open-graph/">

Additional tags worth including

og:type The content type. Use article for blog posts and documentation pages, website for the homepage and category pages. Defaults to website if omitted.

<meta property="og:type" content="article">

og:site_name Your brand name, shown separately from the page title in many previews.

<meta property="og:site_name" content="SEO Handbook">

article:published_time and article:modified_time For pages with og:type: article. Machine-readable timestamps that some platforms display alongside the preview.

<meta property="article:published_time" content="2026-05-07T00:00:00Z">
<meta property="article:modified_time" content="2026-05-07T00:00:00Z">

Twitter/X cards

X (formerly Twitter) has its own meta tag system running in parallel with Open Graph. Where both exist, X prefers its own tags; where X tags are absent, it falls back to OG.

The minimum implementation:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph and Social Meta Tags">
<meta name="twitter:description" content="How og:title, og:image, and Twitter cards control social link previews.">
<meta name="twitter:image" content="https://example.com/images/open-graph-og.jpg">

twitter:card accepts summary (small square image) or summary_large_image (full-width image). Use summary_large_image for content pages. Without this tag, X defaults to a small summary card regardless of image dimensions.

Image specifications

Image quality has the largest visible effect on preview click-through. Requirements:

  • Dimensions: 1200×630 px is the standard. Major platforms render a 1.91:1 ratio without cropping. Images of different proportions are letterboxed or cropped unpredictably.
  • Format: JPG or PNG. WebP is accepted by most platforms but not universally.
  • File size: keep under 1 MB. Some platforms reject larger files without showing an error.
  • Absolute URL: the URL must include the protocol and domain. Relative paths fail.
  • Unique per page: a single sitewide default image produces a generic preview for every page. Individual page images perform significantly better.

Missing og:image or a relative image URL. The most common cause of a blank or broken preview.

Cached stale data. Platforms cache OG data aggressively. After updating a preview image or title, use the platform’s debugger tool to force a re-fetch.

Bot access blocked. If the page requires authentication or is blocked in robots.txt, crawlers cannot read the OG tags and the preview falls back to nothing.

Image URL returns a 404. The image URL must be reachable by an external crawler, not by authenticated users alone.

og:url pointing to a redirect. Platforms follow the URL you specify. If it redirects, some platforms display the final destination URL rather than the canonical you intended.

Testing and auditing

  • Facebook / Meta Sharing Debugger. The most complete debugger. Shows exactly what OG tags Facebook reads, with a “Scrape Again” button to clear the cache.
  • LinkedIn Post Inspector. Inspects OG tags as LinkedIn reads them.
  • X Card Validator. Validates Twitter card tags and shows a preview.
  • OpenGraph.xyz. A neutral third-party previewer. Useful for checking without a platform login.

For site-wide audits, Screaming Frog and Ahrefs site audit both flag missing or duplicate OG tags across a crawl.

Frequently asked questions

Does Open Graph affect Google rankings? No, not directly. Google does not use og: tags as ranking signals. Googlebot reads them but treats them as supplementary metadata. Their value is in social sharing performance and secondary AI retrieval contexts.

Should og:title match the <title> tag? They can differ. The <title> tag is optimised for SERPs; og:title is optimised for social sharing. In practice, most implementations use the same value unless there is a specific reason to differentiate.

Do I need Twitter card tags if I already have Open Graph? Technically no. X falls back to OG tags if its own are absent. But twitter:card is required to activate a large image preview: without it, X defaults to summary regardless of image dimensions. Adding the minimum twitter:card tag is worthwhile.