Open Graph & Twitter Cards: Social Previews
When someone shares your URL on Facebook, LinkedIn, WhatsApp, Slack, Discord, or X (Twitter), the platform doesn't show the raw link — it renders a rich "link preview card" with a title, a description, and a large image. Open Graph and Twitter Card meta tags are how you, not the platform, decide exactly what that card looks like. This guide covers every essential tag, the image specs that matter, how the fallback chain works, and how to validate everything before you hit publish.
1. What Is Open Graph?
The Open Graph protocol (often abbreviated as "OG") was introduced by Facebook in 2010 to
turn any web page into a rich object within a social graph. In practice, it's a small set of
<meta> tags placed in your page's <head> that describe the page:
its title, type, a representative image, and a canonical URL.
When a link is pasted into a social app, that platform's crawler fetches your HTML, reads these tags, and uses them to build the link preview card. What started as a Facebook-only standard is now respected by nearly every major platform — LinkedIn, WhatsApp, Slack, Discord, iMessage, Pinterest, and even X (which layers its own Twitter Card tags on top of OG).
Is Open Graph an SEO factor? Not directly. Google has repeatedly stated that OG tags are not a ranking signal. However, they are firmly SEO-adjacent: compelling preview cards drive a higher click-through rate (CTR) from social feeds, and the resulting shares, clicks, and engagement generate the social signals and referral traffic that indirectly support your visibility, brand authority, and link-earning potential.
2. Why It Matters
Without Open Graph tags, social platforms are left to guess. They'll scrape whatever they can — a random in-page image, the first paragraph they find, or nothing at all — and the result is often an ugly, broken, or off-brand card that nobody clicks. Defining your tags explicitly gives you:
- Controlled branding: You decide the exact headline, copy, and hero image that represents your content — not an algorithm picking a stray logo or sidebar thumbnail.
- Higher social CTR: A large, crisp image with a punchy title occupies far more real estate in a feed than a bare link, dramatically increasing the odds of a click.
- Consistent previews everywhere: The same tags produce coherent cards across Facebook, LinkedIn, WhatsApp, Slack, and Discord, so your brand looks polished no matter where the link travels.
- Trust and click confidence: A complete, professional preview signals legitimacy. Broken or empty cards make users hesitate to click an unknown link.
3. Essential Open Graph Tags
Open Graph tags use the property attribute (not name) and live inside the
<head>. The four required properties are og:title, og:type,
og:image, and og:url. The rest are strongly recommended for a complete card.
- og:title — The headline of the card. Often the same as your title tag, but can be optimized for social rather than search.
- og:type — The kind of object, e.g.
website,article,product, orvideo.movie. Usearticlefor blog posts. - og:image — The preview image. The single most important tag for visual impact (see the next section).
- og:url — The canonical URL of the page. This consolidates all shares and engagement to one address, even if the link is shared with tracking parameters.
- og:description — A short summary shown beneath the title on the card.
- og:site_name — The overall name of your site (e.g. "Rank-O-Saur").
- og:locale — The language/territory, e.g.
en_USorde_DE.
Here is a complete, well-formed <head> example:
<head>
<meta charset="UTF-8">
<title>Best Running Shoes for Beginners in 2026 - ShoeStore</title>
<meta name="description" content="Our hand-picked guide to the 10 best beginner running shoes.">
<!-- Open Graph -->
<meta property="og:title" content="Best Running Shoes for Beginners in 2026">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.shoestore.com/blog/best-beginner-running-shoes">
<meta property="og:image" content="https://www.shoestore.com/images/og/beginner-shoes-1200x630.jpg">
<meta property="og:image:alt" content="A lineup of ten beginner running shoes on a wooden floor">
<meta property="og:description" content="We tested 40+ pairs to find the 10 best beginner running shoes of 2026.">
<meta property="og:site_name" content="ShoeStore">
<meta property="og:locale" content="en_US">
</head>4. The og:image — Specs & Best Practices
The image is what makes a card stop the scroll, so it deserves special attention. Get the dimensions wrong and platforms may crop it awkwardly, shrink it to a tiny thumbnail, or skip it entirely.
- Recommended size: 1200 × 630 pixels. This hits the 1.91:1 aspect ratio that Facebook, LinkedIn, and the large Twitter card all display at full width.
- Minimum size: at least 600 × 315. Anything smaller than 300 px on a side may render as a small square thumbnail instead of a large banner.
- File size: keep it under 5 MB (some crawlers cap lower). Aim for a well-compressed JPG or PNG — large files may be silently ignored.
- Absolute URLs only: the
contentmust be a fullhttps://URL. Relative paths like/images/og.jpgwill not resolve for an external crawler. - Always add og:image:alt: a plain-text description of the image for accessibility and for platforms that surface alt text.
- Keep critical content centered: different platforms crop the edges differently, so don't place text or logos right at the borders.
Pro Tip: Rank-O-Saur shows you the Open Graph title, description, and image detected on the current page — plus the Twitter Card type — right in the panel, so you can preview your social card without ever leaving the browser or pasting the link into a third-party debugger.
5. Twitter (X) Cards
X uses its own family of twitter: tags (declared with the name attribute) to
fine-tune previews. The key tag is twitter:card, which selects the card layout:
- summary — A small square thumbnail next to the title and description.
- summary_large_image — A large, full-width banner image above the title. This is what you want for most articles and landing pages.
- app and player — Specialized cards for mobile apps and audio/video players, respectively.
The good news: X falls back to your Open Graph tags for anything you don't explicitly set. So if you
already have og:title, og:description, and og:image, you often
only need to add twitter:card (and optionally twitter:site) to get a great
X card.
<!-- Twitter (X) Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@shoestore">
<meta name="twitter:title" content="Best Running Shoes for Beginners in 2026">
<meta name="twitter:description" content="We tested 40+ pairs to find the 10 best beginner running shoes of 2026.">
<meta name="twitter:image" content="https://www.shoestore.com/images/og/beginner-shoes-1200x630.jpg">
<meta name="twitter:image:alt" content="A lineup of ten beginner running shoes on a wooden floor">6. How Tags Interact & Fallbacks
Platforms read your tags in a predictable order of precedence, falling back gracefully when a preferred tag is missing. Understanding this chain lets you avoid duplicating tags you don't need:
- Platform-specific tags win first. On X, a
twitter:titleoverridesog:title. Set these only when you want X to differ from everywhere else. - Open Graph tags are the universal layer. If no platform-specific tag exists, the
platform uses
og:title,og:description, andog:image. These are honored by Facebook, LinkedIn, WhatsApp, Slack, Discord, and X alike. - Standard HTML is the last resort. With no OG tags at all, platforms fall back to
the
<title>element and the<meta name="description">, and they'll attempt to scrape an image from the page body — with unpredictable results.
The practical takeaway: define a solid set of Open Graph tags as your foundation, then add only the
twitter: tags you genuinely need to override.
7. Best Practices & Validation
- Make every tag unique per page. Just like title tags, each URL should have its own
og:title,og:description, and ideally a tailoredog:image. Duplicating one site-wide image across every page wastes the format's biggest advantage. - Use absolute HTTPS URLs for both
og:urlandog:image. Mixed-content (http) images may be blocked on secure platforms. - Respect length limits. Keep
og:titlearound 60 characters andog:descriptionaround 110–160 characters so nothing gets truncated mid-sentence. - Validate and re-scrape before launch. Platforms aggressively cache previews. Use
the official debuggers to confirm your card renders correctly and to force a fresh fetch:
- Facebook Sharing Debugger — previews the card and offers a "Scrape Again" button to clear Facebook's cache.
- LinkedIn Post Inspector — shows how LinkedIn will render the link and refreshes its cached copy.
- Match the card to the page. The preview should honestly reflect the destination content — misleading cards spike bounce rates and erode trust.
Caution: Social platforms cache your link preview for days or even weeks. If you
update an og:image or og:title after a page has already been shared, the
old card will keep appearing until you force a refresh through the Facebook Sharing Debugger or
LinkedIn Post Inspector. Always re-scrape after any change to your social tags.
8. Common Mistakes to Avoid
- Relative image URLs:
content="/og.jpg"won't resolve for an external crawler. Always use the fullhttps://www.example.com/og.jpgpath. - Missing og:image entirely: a card with no image is a card almost nobody clicks. It is the highest-impact tag, so never ship a shareable page without one.
- Mismatched title vs. content: a clickbait
og:titlethat the page doesn't deliver on drives bounces and damages credibility. - Cached old previews: forgetting to re-scrape after an update means everyone keeps seeing your outdated headline or image.
- Using
nameinstead ofpropertyfor OG tags: Open Graph requiresproperty="og:...". Twitter tags usename="twitter:...". Mixing them up causes the tags to be silently ignored. - Wrong image dimensions: an image that's too small or oddly shaped gets cropped to a tiny thumbnail instead of a full-width banner.
