An OpenGraph tag is a <meta> element in a page's <head> that tells Facebook, LinkedIn, Slack, Discord, X and every other link unfurler how to render a preview card. This cheatsheet covers every tag you'll actually use, the recommended image sizes per platform, and a copyable template you can drop into any page.
Essential OpenGraph Tags
Set these on every page. Missing any of them degrades the preview on at least one major platform.
| Tag | Purpose | Example / Notes |
|---|---|---|
| og:title | Headline shown in the preview card. | Keep under 60 characters. Facebook truncates at ~70. |
| og:description | Subtitle/body text under the title. | Aim for 100–200 characters. LinkedIn shows ~200, X ~125. |
| og:image | Absolute URL of the preview image. | Must be absolute (https://...), publicly fetchable, and under 5 MB. |
| og:url | Canonical URL of the page. | Set explicitly — unfurlers use this to dedupe previews across tracking params. |
| og:type | Object type. | website, article, profile, video.other. Defaults to website. |
| og:site_name | Name of the parent site. | Shown above the card on Facebook and LinkedIn. |
| og:locale | Content locale. | Format is language_TERRITORY, e.g. en_US, sv_SE, de_DE. |
OpenGraph Image Tags
Declaring dimensions lets Discord, Slack, and some proxies render the preview without fetching the image first.
| Tag | Purpose | Example / Notes |
|---|---|---|
| og:image:width | Image width in pixels. | 1200 |
| og:image:height | Image height in pixels. | 630 |
| og:image:alt | Alt text for screen readers and fallback. | A descriptive sentence. Max ~420 characters. |
| og:image:type | MIME type of the image. | image/png, image/jpeg. Helps strict parsers. |
| og:image:secure_url | HTTPS URL of the image. | Historical; most modern sites can omit and rely on og:image. |
Recommended Image Sizes Per Platform
Universal safe default: 1200×630. Use it unless a specific platform is your primary channel.
| Platform | Size (px) | Aspect | Max file | Notes |
|---|---|---|---|---|
| 1200×630 | 1.91:1 | 8 MB | Rejects < 200×200. Warns < 600×315. | |
| 1200×627 | 1.91:1 | 5 MB | Caches 7 days. Use Post Inspector to force re-scrape. | |
| X (summary_large_image) | 1200×675 | 16:9 | 5 MB | Crops top/bottom if given 1200×630. |
| X (summary) | 144×144 min | 1:1 | 5 MB | Small thumbnail next to the text. |
| Slack | 1200×630 | 1.91:1 | 5 MB | Caches 24h. Requires valid Content-Type on the image. |
| Discord | 1280×640 | 2:1 | 8 MB | Accepts og:image; width/height help preview sizing. |
| iMessage | 1200×630 | 1.91:1 | 5 MB | Square-crops on iOS lock screen. |
| 1200×630 | 1.91:1 | 300 KB soft | Aggressive size cap — larger images are sometimes skipped. | |
| Telegram | 1200×630 | 1.91:1 | 5 MB | Respects og:image:width and og:image:height. |
Twitter Card Tags
X reads OpenGraph as a fallback, but twitter:card must be set for a rich preview. Use summary_large_image for most content.
| Tag | Purpose | Example / Notes |
|---|---|---|
| twitter:card | Card type. | summary, summary_large_image, player, app. summary_large_image is the best default. |
| twitter:site | Owner @handle. | @envdev |
| twitter:creator | Author @handle. | @ersimsdev |
| twitter:title | Override og:title for X. | Optional — falls back to og:title. |
| twitter:description | Override og:description for X. | Optional — falls back to og:description. |
| twitter:image | Override og:image for X. | Optional — falls back to og:image. |
| twitter:image:alt | Alt text for the image. | Max 420 characters. |
Article-Specific Tags
Set og:type="article" and add these to unlock richer rendering on Facebook and LinkedIn.
| Tag | Purpose | Example / Notes |
|---|---|---|
| article:published_time | ISO 8601 publish date. | 2026-04-22T10:00:00Z |
| article:modified_time | ISO 8601 last update. | Update on every edit — improves freshness signals. |
| article:author | Author URL or name. | https://example.com/authors/alice |
| article:section | Top-level category. | Engineering, Product, Tutorials |
| article:tag | Tag/keyword (repeatable). | One tag per meta element. Repeat for multiple. |
Validation Tools
Paste your URL into these to see exactly how each platform renders it.
| Platform | Tool / Method |
|---|---|
| developers.facebook.com/tools/debug/ | |
| linkedin.com/post-inspector/ | |
| X | Card Validator retired in 2023. Post the URL to a test account to preview. |
| Slack | No validator. Paste the URL in a DM to yourself. |
| Discord | No validator. Paste into a private channel. |
| WhatsApp / iMessage / Telegram | No validator. Send the link to yourself. |
Quick Copyable Template
Drop this into the <head> of any page and replace the values.
<!-- OpenGraph -->
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A 100–200 character summary.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive alt text.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="Your page title">
<meta name="twitter:description" content="A 100–200 character summary.">
<meta name="twitter:image" content="https://example.com/og.png">Common Mistakes
og:image must be an absolute URL (https://...). Relative paths break on every unfurler because the crawler fetches the page, not your site.
Without og:url, previews can vary based on redirects and tracking params. Always pin the canonical URL explicitly.
Facebook rejects images smaller than 200×200. Discord and Slack favour 1.91:1 or 2:1. Use 1200×630 unless you have a specific reason not to.
If the image URL requires a session cookie or is behind hotlink protection, the unfurler sees a 403 and shows no image. Test with curl from a clean IP.
Some Slack and Discord clients reject WebP. Stick to PNG or JPEG for maximum compatibility.
Generate a full tag set with your values using the Meta Tag Generator or read the Open Graph Protocol guide for the full story.