When someone shares your website on Twitter, Facebook, LinkedIn, Slack, or Discord, the platform pulls information from your page to create a preview card. That preview — the title, description, and image — is controlled by Open Graph meta tags.
Without them, platforms either show nothing or guess (badly). Your link becomes a bare URL instead of an inviting card with a title, description, and image.
↑ With OG tags: clear title, description, branded preview
↑ Without OG tags: bare URL, no context, nobody clicks
See exactly what social platforms see when someone shares your URL.
Run Free AuditEvery page on your site should have these five tags in the <head> section:
<meta property="og:title" content="Your Page Title"> <meta property="og:description" content="A compelling 1-2 sentence description"> <meta property="og:image" content="https://yoursite.com/og-image-1200x630.png"> <meta property="og:url" content="https://yoursite.com/this-page"> <meta property="og:type" content="website">
The title shown in the preview card. Keep it under 60 characters. Don’t duplicate your <title> tag — the OG title can be shorter or more punchy since it’s for social sharing, not search engines.
One or two sentences that make people want to click. 120–160 characters is ideal. Think of it as your elevator pitch for the page.
The single most important tag for engagement. Posts with images get 2–3x more clicks. The recommended size is 1200×630 pixels (1.91:1 ratio). Use a real image — not a tiny logo, not a generic stock photo.
The canonical URL of the page. This tells platforms which URL to use in the preview, even if the page was accessed via a different URL (tracking parameters, www vs. non-www, etc.).
Usually website for pages or article for blog posts. Facebook supports many types, but website and article cover 99% of cases.
Twitter (X) uses its own set of meta tags, though it falls back to OG tags when Twitter-specific ones are missing. For the best results on Twitter, add:
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your Title"> <meta name="twitter:description" content="Your description"> <meta name="twitter:image" content="https://yoursite.com/twitter-card.png">
The twitter:card tag is required. Use summary_large_image for a large image preview or summary for a smaller thumbnail. Large images get significantly more engagement.
| Platform | Recommended Size | Ratio |
|---|---|---|
| 1200 × 630 | 1.91:1 | |
| Twitter (large image) | 1200 × 628 | 1.91:1 |
| Twitter (summary) | 120 × 120 min | 1:1 |
| 1200 × 627 | 1.91:1 | |
| Discord | 1200 × 630 | 1.91:1 |
| Slack | 1200 × 630 | 1.91:1 |
The universal safe size is 1200×630. It works well everywhere.
A 100×100 logo looks terrible stretched to fill a 1200×630 preview card. Create a proper OG image with your title overlaid on a background. Tools like Canva make this easy.
Without an image tag, most platforms show a gray box or nothing. This kills click-through rates. Even a simple colored background with text is better than no image.
OG tags need absolute URLs: https://yoursite.com/image.png, not /image.png. Relative URLs don’t work because the crawlers don’t know your domain.
Each page should have unique OG tags. If every page shows the same title and image when shared, users can’t tell which link goes where.
Platforms cache previews aggressively. After updating your OG tags, use the platform debuggers (see below) to force a re-fetch.
Use the free website audit to see all your OG tags at a glance, along with Twitter Cards, Schema.org, and 18 other checks:
curl -s "https://snap.michaelcli.com/api/audit?url=https://yoursite.com"
Or use the OG Tag Checker for a focused view of just your Open Graph data.
Right-click your page → View Source → search for og:. You should see all five required tags.
When your preview looks wrong after updating tags, the platform is showing a cached version. Force a refresh:
For Slack and Discord, there’s no official tool — they re-fetch after their cache expires (usually 30–60 minutes).
Copy this template and fill in your values:
<!-- Open Graph --> <meta property="og:title" content="Page Title — Site Name"> <meta property="og:description" content="Compelling description under 160 chars"> <meta property="og:image" content="https://yoursite.com/og-1200x630.png"> <meta property="og:url" content="https://yoursite.com/this-page"> <meta property="og:type" content="website"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Page Title — Site Name"> <meta name="twitter:description" content="Same or different description"> <meta name="twitter:image" content="https://yoursite.com/og-1200x630.png">
See what social platforms see when someone shares your URL. Free, instant, no signup.
Run Free Audit