When someone shares a link on Facebook, Twitter/X, LinkedIn, or Discord, the platform generates a visual preview card with a title, description, and image. These previews are not pulled from your page content randomly — they're controlled by Open Graph (OG) meta tags and Twitter Card tags embedded in your HTML. Without them, platforms guess, and the results are almost always wrong: missing images, truncated titles, or generic descriptions that discourage clicks.
What Is Open Graph?
Open Graph is a protocol originally created by Facebook in 2010 that turns any web page into a rich object in a social graph. By adding a few <meta> tags to your page's <head>, you tell social platforms exactly how your content should appear when shared. The protocol has since been adopted by LinkedIn, Discord, Pinterest, WhatsApp, Telegram, Slack, and many other services.
Without OG tags, platforms attempt to scrape your page title, find a suitable image, and extract a description — a process that frequently produces awkward or broken previews. With OG tags, you get full control over the social presentation of every page on your site.
Essential Open Graph Tags
Six OG tags form the foundation of every social preview. All are placed inside the <head> element using <meta property="og:..."> syntax.
- og:title — The title displayed in the preview card. Keep it under 60 characters to avoid truncation. It does not have to match your page
<title>tag. - og:description — A 1–2 sentence summary shown below the title. Aim for 100–150 characters. Write it for social audiences, not search engines.
- og:image — The URL of the preview image. This is the most visually prominent element of any social card. Use absolute URLs only.
- og:url — The canonical URL of your page. This ensures all shares consolidate engagement metrics to a single URL, regardless of tracking parameters or URL variations.
- og:type — The type of content. Use
articlefor blog posts and guides,websitefor home pages, andproductfor e-commerce items. - og:site_name — Your website's brand name. Displayed as secondary text on some platforms, helping users identify the source.
Twitter Card Tags
Twitter (now X) uses its own set of meta tags prefixed with twitter:. If Twitter-specific tags are missing, Twitter falls back to OG tags — but providing both gives you maximum control.
- twitter:card — Defines the card type. Use
summary_large_imagefor articles with hero images (large horizontal image above text) orsummaryfor a compact card with a small square thumbnail. - twitter:title — The title shown in the tweet card. Limited to 70 characters on display.
- twitter:description — The card description. Kept shorter on Twitter — aim for 125 characters maximum.
- twitter:image — The image URL for the card. Must be at least 300×157 pixels for
summary_large_image. - twitter:site — Your brand's Twitter handle (e.g.,
@SarvKit). Attributed on the card for credibility.
Image Dimensions by Platform
Each platform has preferred image dimensions. Using the wrong size results in cropping, letterboxing, or blurriness.
| Platform | Recommended Size | Aspect Ratio | Min Size | Max File Size |
|---|---|---|---|---|
| 1200 × 630 px | 1.91:1 | 200 × 200 px | 8 MB | |
| Twitter/X | 1200 × 600 px | 2:1 | 300 × 157 px | 5 MB |
| 1200 × 627 px | 1.91:1 | 200 × 200 px | 5 MB | |
| Discord | 1200 × 630 px | 1.91:1 | Any | 8 MB |
| 1200 × 630 px | 1.91:1 | 300 × 200 px | 5 MB |
A single 1200×630 image works well across all platforms. If you can only create one size, use that.
Platform-Specific Behavior
Facebook aggressively caches OG data. Once Facebook scrapes your page, it stores the preview and won't automatically re-fetch it — even if you update your tags. You must use the Sharing Debugger to manually clear the cache. Facebook also requires images to be at least 200×200 pixels; anything smaller triggers the "no image" fallback.
Twitter/X checks for twitter: tags first, then falls back to OG tags. Twitter cards must be validated before they start working on a new domain — use the Card Validator to trigger the first scrape. Twitter crops images to a 2:1 ratio for summary_large_image cards, so keep important content centered.
LinkedIn uses OG tags exclusively and does not recognize Twitter-specific tags. LinkedIn updates previews within a few hours after tag changes, but you can also use the Post Inspector tool to force a re-scrape. LinkedIn truncates og:description at about 100 characters on desktop.
Discord reads OG tags and optionally respects a theme-color meta tag to customize the embed border color. Discord embeds display og:title, og:description, og:image, and og:site_name. Animated GIFs are supported as og:image on Discord but not on most other platforms.
WhatsApp reads OG tags and caches previews per device. There is no centralized cache-clearing mechanism — each user's device scrapes the URL independently. WhatsApp displays a smaller image thumbnail compared to Facebook or Twitter.
Debugging Tools
Always validate your OG tags before publishing or sharing a new page. These free tools show you exactly what each platform sees:
- Facebook Sharing Debugger (developers.facebook.com/tools/debug/) — Scrapes your URL and shows the parsed OG data, image preview, and any warnings. The "Scrape Again" button clears Facebook's cache for that URL.
- Twitter Card Validator (cards-dev.twitter.com/validator) — Validates your Twitter Card markup and shows a live preview. Required for activating cards on new domains.
- LinkedIn Post Inspector (linkedin.com/post-inspector/) — Shows how a link will appear when shared on LinkedIn and lets you refresh the cached preview.
- OpenGraph.xyz — A third-party tool that previews your OG tags across multiple platforms simultaneously, saving time when checking all platforms at once.
Common Mistakes
- Missing og:image entirely. Sharing a link without an image dramatically reduces engagement. Social posts with images receive 2–3× more clicks than text-only previews.
- Wrong image dimensions. Images smaller than the minimum size get ignored or displayed as tiny thumbnails. Images with the wrong aspect ratio get cropped unpredictably, cutting off text or important visuals.
- Using relative URLs for og:image. OG image URLs must be absolute (starting with
https://). Relative paths like/images/og.pngwill not be resolved by social platform crawlers. - Not clearing the cache after updates. Facebook and LinkedIn cache aggressively. After changing OG tags, you must manually scrape the URL again using each platform's debugging tool — changes won't appear automatically for hours or even days.
- Identical OG and page titles. Your og:title doesn't need SEO keywords; it should be optimized for social engagement. A clickable, curiosity-driven social title often outperforms a keyword-heavy SEO title.
- Forgetting og:url. Without a canonical OG URL, shares of the same page with different query parameters (UTM codes, session IDs) are treated as separate items, fragmenting your engagement data.
Try It Yourself
Preview exactly how your page will appear on Facebook, Twitter/X, LinkedIn, and Discord — before you share it.
OG Preview →