Open Graph Tags: How to Control Social Media Previews and Boost SEO
Open Graph Tags: How to Control Social Media Previews and Boost SEO
Social previews are the new homepage. When links are shared on LinkedIn, X, Facebook, or Slack, the Open Graph (OG) tags decide the image, title, and description people see. This guide shows how to implement OG correctly, avoid broken previews, and use them to strengthen SEO.
1. What Open Graph does
OG tags describe your page to social platforms. The correct tags ensure consistent previews, better click-through rates, and accurate link unfurling across clients.
2. Essential OG tags
Include these in the <head> of every shareable page:
<meta property="og:title" content="Page title" /> <meta property="og:description" content="Compelling summary" /> <meta property="og:image" content="https://example.com/og-image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="article" /> <meta name="twitter:card" content="summary_large_image" />
Add og:locale (en_US, de_DE) and og:site_name for brand consistency.
3. Crafting titles and descriptions
- Keep titles under ~60 characters; front-load keywords.
- Descriptions: 140–180 characters with a clear benefit.
- Avoid quotes and unusual punctuation that some clients truncate.
- Match metadata to on-page content to avoid clickbait and improve relevance signals.
4. Designing OG images
- Recommended: 1200×630 px (1.91:1) in JPG or PNG; keep under ~2 MB.
- Include product name, short headline, and brand mark; avoid tiny text.
- Ensure good contrast; test light/dark backgrounds.
- Localize images for multilingual pages when possible.
5. Handling multiple locales
- Set
og:localeandog:locale:alternatefor translations. - Ensure
og:urlpoints to the canonical URL for each language. - Localize titles/descriptions; avoid mixing languages in one preview.
6. Canonical URLs and duplicates
Use <link rel="canonical"> to point social crawlers and search engines to the primary URL. This prevents split engagement metrics when the same content exists under tracking parameters or regional domains.
7. Testing and debugging
- Facebook Sharing Debugger and LinkedIn Post Inspector show how crawlers read your tags.
- Clear caches by scraping again after updates.
- Use the
opengraph-previewtool to verify titles, descriptions, and images before publishing.
8. Performance and delivery
- Host OG images on a CDN for fast, cacheable delivery.
- Avoid blocking crawlers with authentication or robots.txt on shareable pages.
- Ensure your server returns the full HTML for crawlers (no JS-only metadata).
9. Common pitfalls
- Missing
og:imageor images smaller than 200×200 px. - Relative URLs in metadata instead of absolute HTTPS links.
- Stale previews due to cached images after redesigns.
- Using the same OG image for every page, reducing relevance.
10. Workflow for reliable previews
- Define title/description/image alongside page copy.
- Generate localized OG images from a template.
- Add meta tags to the page head; keep URLs absolute.
- Test with
opengraph-previewand platform debuggers. - Re-scrape after deployment to refresh caches.
Related tool: Opengraph-preview
Use opengraph-preview to render and validate your OG tags before you share a link. Catch missing fields, wrong aspect ratios, and caching issues early to ensure every share looks intentional.
Frequently Asked Questions
What are Open Graph tags?
Open Graph (OG) tags are HTML meta tags that control how your content appears when shared on social media platforms like Facebook, LinkedIn, Twitter/X, and Slack. They define the title, description, image, and other metadata shown in link previews.
What's the difference between og:title and the HTML title?
og:title is specifically for social media previews and can be different from your page's HTML <title>. However, they should be related. OG titles are often optimized for social sharing (shorter, more compelling), while HTML titles focus on SEO.
What size should OG images be?
Recommended: 1200×630 pixels (1.91:1 aspect ratio) in JPG or PNG format, under 2MB. Minimum: 200×200 pixels. Some platforms accept different sizes, but 1200×630 works universally across all major platforms.
Do I need separate OG tags for each page?
Yes, each shareable page should have unique OG tags. Using the same image and description for every page reduces relevance and click-through rates. Customize OG tags to match each page's content.
How do I test my OG tags?
Use Facebook Sharing Debugger, LinkedIn Post Inspector, or Twitter Card Validator. Our Open Graph Preview tool lets you preview how your tags will appear before sharing.
Why aren't my OG images showing up?
Common causes: images too small (<200×200px), relative URLs instead of absolute HTTPS, images blocked by robots.txt or authentication, or cached previews. Clear platform caches by re-scraping your URL.
What's the difference between og:image and twitter:image?
og:image is the standard Open Graph tag used by Facebook, LinkedIn, and most platforms. twitter:image is Twitter-specific. Use both for maximum compatibility. Twitter will fall back to og:image if twitter:image is missing.
How often should I update OG tags?
Update OG tags whenever you change page content, titles, or descriptions. Also update when redesigning to ensure preview images match your current brand. Remember to re-scrape URLs after updates to clear platform caches.
