Open Graph vs Twitter Cards: what actually matters for previews

By ShareScan ยท EngineeringPublished 3 min readCategory Open Graph

Open Graph and Twitter Card metadata overlap, but platforms do not read them equally. Here is what matters for reliable previews.

Open GraphTwitter CardsSocial PreviewSEOTechnicalMonitoringCMSSlack
Generated comparison illustration for Open Graph and Twitter Card preview metadata

Open Graph and Twitter Cards are easy to blur together because they describe similar things: title, description, image, and URL. But they are not equivalent. Different platforms prioritize different fields, and conflicting metadata can make previews unpredictable.

The practical rule is simple: Open Graph is the broad social preview baseline. Twitter Cards are the platform-specific layer for X/Twitter. Most teams should make Open Graph correct first, then add Twitter Card tags that intentionally mirror or refine the same preview.

What each standard controls

Metadata typeCommon fieldsPrimary use
Open Graph`og:title`, `og:description`, `og:image`, `og:url`Broad social previews across LinkedIn, Slack, Facebook-style consumers, and many messaging tools
Twitter Cards`twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`X/Twitter-specific preview behavior
Standard meta`<title>`, `meta description`, canonicalSearch, browser UI, and fallback preview behavior

Open Graph usually matters most because it is read by many preview consumers. Twitter Cards matter when the link is shared on X/Twitter and you want explicit control over card type and image behavior.

The fields to get right first

Start with the fields that most preview systems understand:

  • og:title
  • og:description
  • og:image
  • og:url
  • canonical URL
  • standard page title and meta description

Then add Twitter Card fields:

  • twitter:card
  • twitter:title
  • twitter:description
  • twitter:image

For many pages, the Twitter title, description, and image should match the Open Graph values. The exception is when the platform format truly needs different copy or a different image crop.

Common mistakes

  • Adding Twitter Cards but forgetting Open Graph.
  • Using different images without a clear reason.
  • Updating CMS Open Graph fields while Twitter Card fallbacks stay stale.
  • Pointing og:url at one URL and canonical at another.
  • Using a Twitter image that is not publicly reachable.
  • Relying on standard meta description to fix every social preview.

Build a reliable preview metadata set

Use this as the baseline for blog posts, campaign pages, and product pages.

  1. Set canonical identity

    Make the canonical URL and `og:url` agree on the public page.

  2. Set Open Graph first

    Add title, description, image, and image dimensions.

  3. Add Twitter Cards second

    Mirror the same title, description, and image unless there is a specific platform reason not to.

  4. Validate both paths

    Check the page as a generic Open Graph preview and as a Twitter Card preview.

  5. Monitor after changes

    Re-scan after deploys and CMS publishes so fields do not drift apart.

What actually matters

What matters is not whether every possible tag exists. What matters is whether the tags that platforms read are complete, consistent, and reachable. A smaller metadata set with a stable image and consistent URLs is better than a large set of stale, conflicting fields.

Use Open Graph as the source of truth for broad previews. Use Twitter Cards as a platform-specific compatibility layer. Then test the public URL, not only the CMS preview or local development page.

FAQ

You can, but many non-Twitter platforms rely on Open Graph. For broad preview reliability, Open Graph should come first.

Usually yes. Diverge only when you intentionally need a different image or copy for X/Twitter.

No. Standard title, description, and canonical tags are useful fallbacks, but explicit Open Graph and Twitter Card fields give better control.

Related articles

TRY SHARESCAN

Run a free 10-URL scan on your pages

Paste a few URLs (or a domain/sitemap) and run the same metadata checks we use for social preview QA and regression monitoring.

See a sample report

No signup for your first scan. Open the report, review issues, then connect Slack if you want alerts.

After scan completion, connect Slack and send a test report.

Up to 10 URLs. We will dedupe and validate automatically. Prepared 0 / 10 unique URLs.