Academy of Open Graph & Link Preview

Open Graph (OG) tags are HTML meta tags that control how your links appear when shared on social media platforms like Facebook, Twitter/X, LinkedIn, WhatsApp, Discord, and Slack. They define the title, description, and image shown in link previews. Without them, platforms guess what to display — often picking the wrong image or a truncated title. Read our Complete Open Graph Guide for a full walkthrough.

The universal safe size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This works on Facebook, Twitter/X, LinkedIn, WhatsApp, Discord, and Slack. Keep the file under 1 MB (under 300 KB for WhatsApp). JPEG is the safest format. See our OG Image Guide for platform-specific specs and troubleshooting.

The most common causes are: cached old image (clear via platform debugger tools), relative URL instead of absolute HTTPS, image too small (minimum 200×200 px), or JavaScript-rendered tags that crawlers cannot see. Our OG Image Not Showing guide walks through every fix step by step.

First, add proper Facebook meta tags (og:title, og:description, og:image, og:url) to your page. Then use the Facebook Sharing Debugger to clear the cached version and force a re-scrape. Make sure your og:image uses an absolute HTTPS URL and is at least 600×315 px. See our Fix Facebook Link Preview guide for detailed steps.

Open Graph tags (og:title, og:image, etc.) were created by Facebook and are used by most platforms. Twitter Cards (twitter:card, twitter:title, twitter:image) are Twitter/X-specific. Twitter falls back to OG tags if Twitter Card tags are missing, so you should set both. The key difference is the twitter:card tag which controls the card layout (summary vs summary_large_image).

Each platform has its own approach. WordPress uses SEO plugins like Yoast or Rank Math. Shopify uses Liquid template tags in theme.liquid. Next.js uses the Metadata API or generateMetadata function. All three guides include copy-paste code snippets.

Use platform-specific debugger tools: Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector, and others. Our Open Graph Debugger guide covers all tools in one place. You can also use third-party preview tools like PreviewOG to test all platforms simultaneously before sharing.

WhatsApp is stricter than other platforms. Common causes: image file too large (keep under 300 KB), slow server response (WhatsApp timeout is ~4 seconds), missing og:image tag, or cached old preview. WhatsApp does not have a public debugger tool — you need to clear the chat or wait for cache to expire. Full fixes in our WhatsApp Link Preview guide.

Discord renders rich embeds using OG tags, supports the theme-color meta tag for embed accent color, and caches aggressively (use their /embed endpoint to refresh). Slack unfurls links using OG tags with a 3-second fetch timeout and 1-hour cache. Both platforms fall back to page title and favicon when OG tags are missing.

The essential tags are: og:title, og:description, og:image, og:url, and og:type. Additional useful tags include og:image:width, og:image:height, og:site_name, and og:locale. See our Open Graph Tags Reference for the complete list with examples and best practices.