Open Graph and Twitter Cards: Controlling How Shares Look on Social

OG and Twitter Card tags control how shares render on Facebook, LinkedIn, WhatsApp, and Twitter. Without them, every share looks flat.

The og:title, og:description, og:image, og:url and twitter:card, twitter:image tags govern how a link looks when shared. Without them, platforms guess - and usually serve a flat, image-less preview.

Why this matters

A Facebook share with a large image (1200x630), customized title, and description earns roughly 5x the clicks of a plain text share. On LinkedIn the gap is even wider - posts with rich previews see up to 7x engagement. On WhatsApp, a share without a preview is a dry text link users skip past.

Business impact: every dollar spent on social promotion, paid campaigns, and newsletters is wasted if shares look bad. Shares that should have gone viral stay invisible.

Indirect SEO impact: shares produce backlinks and traffic. Traffic and engagement are signals Google considers (not directly, but they feed other ranking signals). A share that earns no clicks generates none of those signals.

iMessage / Apple Messages impact: sharing a link on iPhone shows a large preview with image, title, and description - if og: tags exist. Without them, only text.

How to detect

View source on a page and search for property="og:. You should see at least four lines:

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Short description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

If any basic tag is missing (especially og:image), there is a problem. Also check name="twitter: for at least twitter:card and twitter:image.

Complementary check: official validators:

  • Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) - shows what Facebook sees.
  • LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/) - LinkedIn's view.
  • opengraph.xyz - cross-platform preview.

How to fix

Easiest setup: an SEO plugin. All emit og: and twitter: tags automatically:

  • Yoast SEO - SEO > Search Appearance > Social. Enable both Facebook and Twitter.
  • Rank Math - Titles & Meta > Social Meta. Enable "Add Open Graph Meta" and "Add Twitter Card Meta".
  • RankPlus - emits automatically.
  • SEOPress - PRO under SEO > Social Networks.

When editing a post or page, scroll to the SEO box and check the Social or Facebook/Twitter tab. If you want a different image specifically for sharing (different from Featured Image), upload it there.

Set a default fallback image in plugin settings - in case a post has no Featured Image. Dimensions: 1200x630px, JPG or PNG (not WebP - Facebook does not fully support it), under 8MB.

Make sure og:image points at a full URL (https://example.com/image.jpg) not relative (/image.jpg) - some platforms do not resolve relative URLs.

Common mistakes

First mistake: og:image with the wrong aspect ratio. Facebook crops to 1.91:1 (1200x630). A square (1:1) or portrait (4:5) image gets cropped, often losing critical text. Design hero images at 1200x630 from the start.

Second mistake: og:image on HTTP under an HTTPS site. Mixed content - some browsers block the image. Always use https://.

Third mistake: forgetting to refresh Facebook's cache after fixing. Even after correcting, Facebook continues showing the old version for days. Always run the URL through Sharing Debugger and click "Scrape Again".

Fourth mistake: invalid twitter:card values. Valid values: summary, summary_large_image, app, player. "summary_large_image" is the most common and effective - it shows a big image.

Fifth mistake: wrong og:type. Blog posts should be "article". Product pages "product". The homepage "website". SEO plugins handle this automatically, but if you write tags manually, use the right value.

Verifying the fix

Run the URL through Facebook Sharing Debugger and confirm every value is right with no warnings. Click "Scrape Again" to refresh the cache. Run LinkedIn Post Inspector to validate. Share in a private WhatsApp chat and verify the preview matches expectation. After a week, in Google Analytics > Acquisition > Social - watch for an uplift in social-referral traffic.

Tip: Design hero images so critical text sits in the center (1200x630 with text in a centered 800x500 area). Different platforms crop differently - WhatsApp sometimes square, Facebook 1.91:1, Twitter wide rectangle. Centered text survives every crop.