Open Graph (OG)
A protocol that allows any web page to become a rich object in a social graph.
Detailed Explanation
Open Graph tags (like `og:title`, `og:image`) define what content is displayed when a URL is shared on Facebook, LinkedIn, or Slack. High-quality OG images are essential for social media marketing. Without these tags, platforms will guess which image to show, often leading to poorly cropped or irrelevant visuals that hurt engagement.
Quick Summary
Open Graph (created by Facebook in 2010) is a set of `<meta>` tags that controls how your link looks when shared on Facebook, LinkedIn, Slack, Discord, iMessage, and most messaging apps. Without OG tags, you get an ugly default, with them, you get a polished card with image, title, and description.
Key Takeaways
- Required tags: `og:title`, `og:description`, `og:image`, `og:url`, `og:type`.
- OG image should be 1200x630px (1.91:1 ratio) for best display across platforms.
- Image must be absolute URL (https://...), relative paths break.
- Most platforms cache OG data, use Facebook's debugger to force a refresh.
- Twitter Cards (see [[twitter-cards]]) extend OG with X-specific fields.
When to use it
- Marketing landing pages, branded social previews drive higher click-through.
- Blog posts, auto-generated OG images with article title overlay.
- Product pages, show product image, name, price in shared links.
- Documentation, branded OG images establish recognition across channels.
Common Mistakes
- Using a relative path for `og:image`, must be absolute https URL.
- Image too small (<200x200px), many platforms refuse to display it.
- Forgetting `og:url`, required for canonical link tracking.
- Not testing in Facebook/LinkedIn debuggers before launch.
- Different titles in `<title>` vs `og:title`, confusing for users.
Open Graph (OG), Frequently Asked
What's the ideal OG image size?
1200x630 pixels at a 1.91:1 ratio. Anything smaller may be cropped or rejected by Facebook and LinkedIn.
Why isn't my OG image updating after I change it?
Platforms cache aggressively. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-fetch.
Do I need both Open Graph and Twitter Cards?
Twitter falls back to OG if Twitter Cards aren't present, but defining both explicitly gives you maximum control.