Open Graph & Social Meta Tags
10 min read
Open Graphog:titleog:imageTwitter CardsSocial Sharingog:type
Open Graph: Controlling Your Social Media Presence
When someone shares your URL on Facebook, Twitter, LinkedIn, or Slack, these platforms read Open Graph meta tags to generate the preview card.
Essential OG Tags
| Tag | Purpose | Recommendation |
|---|---|---|
| og:title | Share card title | Max 60 chars |
| og:description | Description below title | Max 155 chars |
| og:image | Preview image | 1200x630px minimum |
| og:url | Canonical URL | Full absolute URL |
| og:type | Content type | website, article, product |
Twitter Cards
Twitter uses its own meta tags but falls back to OG. Use twitter:card to control the card size (summary, summary_large_image).
Common Mistakes
- Using relative URLs (must be absolute)
- Image too small (minimum 1200x630 for large cards)
- Not testing with Facebook Debugger / Twitter Card Validator
- Caching: Social platforms cache previews. Use their debug tools to force a re-scrape after changes.