Developers & Technical · Guide · Developer Utilities
How to set up Open Graph tags
Required and optional OG tags, image specs for every platform, article/product/video variants, Twitter Card compat, platform quirks.
Open Graph tags control how your links look when shared — a single headline, a single image, a blurb. Good OG setup turns a URL paste into a little ad. Bad OG setup turns it into a bare link that nobody clicks. OG is the reason a well-set-up blog post shared to LinkedIn looks professional and a poorly-configured one looks broken. This guide covers the full OG spec (what each tag does, which are required), image specifications for every major platform, the type-specific variants (article, product, video), how to test your setup with each platform’s debugger, and the quirks of LinkedIn, Discord, Slack, and iMessage parsing that trip everyone up.
Advertisement
What Open Graph is
Open Graph is a protocol Facebook introduced in 2010 to let web pages declare their own metadata for rich previews. Now used by every major social and messaging platform — Facebook, Instagram (via Facebook), LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Signal.
OG tags live in <head> as meta tags withproperty="og:*":
<meta property="og:title" content="Page Title"><meta property="og:description" content="Description"><meta property="og:image" content="https://example.com/img.jpg"><meta property="og:url" content="https://example.com/page"><meta property="og:type" content="article">
Note: OG uses property=, not name=. Required for Facebook’s parser.
Required tags
og:title — headline for the preview card. Differs from <title> in that it’s specifically for sharing (can be shorter/punchier). If missing, falls back to <title>.
og:url — canonical URL for this resource. Shared preview links to this URL, not the current one. Useful when multiple URLs lead to the same content.
og:image — preview image. Single most impactful OG tag for CTR.
og:type — content category. Defaults to website if absent.
og:description — blurb under the title. Optional but heavily used; skipping it leaves the preview sparse.
og:image specs
Recommended size: 1200×630 pixels (1.91:1 aspect). Works for all platforms. Facebook displays as 1200×630; Twitter crops to 2:1 (centered); LinkedIn crops to 1200×627; Slack keeps 1200×630.
Minimum size: 600×315. Below that, Facebook and LinkedIn sometimes refuse to render it as a large card, fall back to a small thumbnail.
File size: under 8MB for Facebook, under 5MB for most others. Practically, under 300KB is smart for load speed.
Format: PNG, JPG, or WebP. Avoid SVG — most parsers don’t render it.
Text on image: include the title again as image text. Users scan faster visually, and if the title renders below, the reinforcement raises click-through.
Safe zone: keep critical content in the center 1000×500 area. Different platforms crop differently around the edges.
Optional-but-useful tags
og:image:alt — alt text for the image. Accessibility + small SEO bump.
og:image:width, og:image:height — explicit dimensions. Lets some parsers render faster, prevents fallback to small cards.
og:image:type — MIME type. Rarely needed.
og:locale — en_US, fr_FR, etc. Defaults to en_US.
og:locale:alternate — list of other available locales. Useful for multilingual sites.
og:site_name — your brand name. Rendered above or below the card depending on platform.
Article-specific tags
When og:type="article", add these for richer previews:
article:published_time (ISO 8601)article:modified_timearticle:author (URL to author page)article:section (topic category)article:tag (one per tag; repeatable)
Product-specific tags
When og:type="product":
product:price:amount, product:price:currency, product:availability (in stock, out of stock, preorder), product:condition (new, used, refurbished).
These feed into Facebook Shop integrations and commerce previews.
Video-specific tags
For video embeds in OG previews:
og:video (URL to player)og:video:type (video/mp4, text/html for embeds)og:video:width, og:video:height
Only Facebook fully plays OG videos in the feed. Twitter uses its own video tags. Most platforms fall back to the image.
Twitter Card compatibility
X reads twitter:* tags, falling back to OG. Minimal Twitter tag set:
<meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@yourbrand">
summary_large_image uses the big 2:1 preview. summary uses a small square thumbnail.
If your OG is complete, this is all you need on the Twitter side.
Platform quirks
LinkedIn: caches aggressively. Once LinkedIn has your card, changes don’t appear for days. Use the Post Inspector tool to force a refresh.
Slack: renders quickly but strict about dimensions. Include explicit og:image:width andog:image:height.
Discord: aggressive caching by channel. Clearing requires server-admin tools. Re-post in a different channel to test changes.
iMessage: Apple does its own parsing with lots of fallbacks. Usually works out of the box but fragile with dynamic content.
WhatsApp: caches for the duration of a conversation. Small previews only.
Bluesky, Mastodon: both respect OG. Bluesky supports larger images (up to 4MB).
Dynamic OG images
Modern frameworks (Next.js, Vercel Edge, Cloudflare Workers) can generate OG images per page — title overlay, author photo, gradient background. Vercel’s @vercel/og ships images as SVG-rendered-to-PNG at request time.
Benefits: every page gets a unique, branded preview. Cost: one edge-function invocation per first share. Cache headers amortize this.
Testing before shipping
Facebook Sharing Debugger: developers.facebook.com/tools/debug. Paste URL, see what Facebook sees. “Scrape Again” forces a re-fetch.
LinkedIn Post Inspector: linkedin.com/post-inspector. Required after any OG change — LinkedIn caches for ~7 days otherwise.
Twitter Card Validator: deprecated but X still renders OG; use Facebook debugger as proxy.
Manual test: DM a link to yourself on each platform. Screenshot the preview. Compare to your intent.
Common mistakes
Using relative URLs for og:image or og:url. Must be absolute with protocol (https://).
Shipping OG tags set by JavaScript. Most parsers don’t run JS. SSR or prerender.
Wrong image dimensions. 800×800 square images get cropped to strips on most platforms. Use 1.91:1.
Identical OG tags across pages. Every page needs unique og:title, og:description, og:image. Auto-generating from page content is standard practice.
Skipping og:url. Canonicalization suffers. When links re-share, they lose attribution.
Using property= and name= interchangeably. OG wants property=. Twitter wants name=. They’re different.
Large og:image files. 4MB OG images slow previews on mobile carriers. Keep under 300KB when possible.
Run the numbers
Generate a complete OG tag block with the Open Graph generator. Pair with the meta tag generator for the broader SEO meta stack, and the image resizer to get your OG image to exactly 1200×630.
Advertisement