⭐ Beginner — No coding experience needed
Open Graph: Why Your Facebook and LinkedIn Previews Look Wrong
Learn what Open Graph tags do, how to set them correctly, and how to fix the "ugly preview" problem when your link is shared on Facebook, LinkedIn, Discord and Slack.
What you will learn in this guide
- What Open Graph (OG) tags are
- The five OG tags that matter most
- Twitter Card tags and how they differ
- Image size and aspect ratio rules
- How to clear cached previews on Facebook and LinkedIn
1 What Open Graph does
Open Graph is a meta tag standard originally from Facebook, now used by almost every social platform to determine how your link appears when shared. Without OG tags, social platforms guess from your HTML — usually badly.
Common symptom:Your link shared in Slack or LinkedIn shows a tiny logo, wrong title, no description. The fix is almost always adding or correcting OG tags.
2 The 5 OG tags that matter most
| Tag | Purpose | Example |
|---|---|---|
| og:title | Title shown in preview | "5 Ways to Improve Page Speed" |
| og:description | Description text | One-sentence summary of the page |
| og:image | Preview image | Absolute URL to a 1200x630 image |
| og:url | Canonical URL | Full https URL of the page |
| og:type | Content type | "article" for blog posts, "website" for pages |
<meta property="og:title" content="5 Ways to Improve Page Speed" />
<meta property="og:description" content="Page speed is now a confirmed Google ranking signal. Here are five proven fixes..." />
<meta property="og:image" content="https://yoursite.com/og/page-speed.png" />
<meta property="og:url" content="https://yoursite.com/blog/page-speed" />
<meta property="og:type" content="article" />
3 Twitter Card tags
Twitter has its own card tags. Modern Twitter respects OG tags as fallback, but for the best preview add explicit twitter:* tags:
| Tag | Purpose |
|---|---|
| twitter:card | "summary_large_image" or "summary" |
| twitter:title | Title for Twitter preview |
| twitter:description | Description for Twitter preview |
| twitter:image | Image (Twitter accepts up to 4096x4096; 1200x675 is safe) |
| twitter:site | @yourtwitterhandle |
4 Image rules
- 1Use 1200x630 pixelsThis works for Facebook, LinkedIn, Discord, Slack and most other platforms.
- 2Keep file under 1MBMost platforms will refuse larger files.
- 3Avoid text near edgesSome platforms crop the edges differently. Keep important elements in the centre 1000x500.
- 4Use a CDNOG images need to load fast for social platforms. Use a fast CDN or your image host (Cloudinary, Bunny, etc.).
Cache busting:When you change an OG image, Facebook and LinkedIn cache the old version for 30 days. Use Facebook's Sharing Debugger and LinkedIn's Post Inspector to force a refresh.