Open Graph & Twitter Cards: The Complete Setup Guide
What Are Open Graph and Twitter Cards?
When someone shares your URL on Facebook, LinkedIn, Slack, WhatsApp, or X, the platform generates a preview card with an image, title, and description. It does not guess this content from your page. It reads dedicated meta tags in your <head>:
- Open Graph (OG) — a protocol created by Facebook and now used by almost every platform. Tags use the
og:prefix. - Twitter Cards — X's own tags, using the
twitter:prefix. They fall back to Open Graph tags when a specifictwitter:tag is missing.
Without these tags you surrender control of the preview, and platforms may show a blank card, the wrong image, or nothing at all, which quietly kills your click-through from social.
The Required Open Graph Tags
Four tags are the minimum for a valid, useful card:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary." />
<meta property="og:image" content="https://example.com/cover.png" />
<meta property="og:url" content="https://example.com/page" />
Two more are strongly recommended:
og:type— usuallywebsiteorarticle.og:site_name— your brand name, shown above or below the card on some platforms.
Note that Open Graph uses the property attribute, whereas standard SEO meta tags and Twitter tags use name. Mixing these up is a common reason cards fail to render.
Twitter Card Types
Set the card type with twitter:card. The two you will use most:
| Type | Appearance |
|---|---|
summary |
Small square thumbnail beside the title and description |
summary_large_image |
Large, full-width image above the title, the modern default |
A typical Twitter block looks like this:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short, compelling summary." />
<meta name="twitter:image" content="https://example.com/cover.png" />
<meta name="twitter:site" content="@yourhandle" />
If you omit twitter:title, twitter:description, or twitter:image, X falls back to the matching og: tags, so you often only need to declare twitter:card and twitter:site explicitly.
The Correct Image Size
Image dimensions are where most cards break. Use these specs:
- Recommended size: 1200 x 630 pixels (a 1.91:1 ratio). This is the sweet spot for
summary_large_imageand looks crisp on high-density screens. - Minimum: 600 x 315 pixels. Below this, platforms downgrade to a small card or drop the image.
- Keep the file under ~5 MB and use an absolute HTTPS URL for
og:image. - Add
og:image:widthandog:image:heightso platforms can lay out the card before downloading the image.
Fallbacks and Good Defaults
Every page should have a sensible default so nothing ever shares as a blank card:
- Set a site-wide default
og:image(your logo or a branded banner) that individual pages can override. - Ensure
og:titleandog:descriptionfall back to your regular title tag and meta description. - Always provide absolute URLs for images and the canonical URL. Relative paths silently fail on most platforms.
Debugging Your Cards
Platforms cache your tags aggressively, so after any change you must force a refresh:
- Facebook Sharing Debugger — scrapes your URL, shows what OG tags it found, and lets you re-scrape.
- LinkedIn Post Inspector — clears LinkedIn's cache for the URL.
- X (Twitter) — the classic Card Validator is deprecated; post the link in a draft to preview, and the card updates once the crawler refetches.
Build Them Quickly
Rather than hand-writing every tag, generate them and paste the block into your <head>:
- Use an Open Graph Generator for the full set of
og:tags. - Use a Twitter Card Generator to add the matching
twitter:tags and choose the card type.
Conclusion
Open Graph and Twitter Cards are the difference between a link that spreads and one that looks broken. Declare the four required OG tags, choose summary_large_image, ship a 1200 x 630 image over HTTPS, set a site-wide fallback, and always re-scrape with each platform's debugger after you publish.
FAHAQ runs no ads and keeps everything free — donations are the only thing keeping the servers on. Even a couple of dollars helps.