What Open Graph tags are and why missing ones cost you traffic
Every time someone shares your website on social media — Facebook, LinkedIn, Twitter, iMessage, Slack — those platforms read your Open Graph (OG) tags to build the preview card.
Your OG tags determine:
- The title shown in the preview
- The description below it
- The image displayed
- The URL shown
If these tags are missing or wrong, you get a broken preview: wrong title, wrong image (or none), wrong description. People scroll past. Clicks die.
We've audited thousands of pages. 70% have at least one broken or missing OG tag. Most owners have no idea.
The 5 Open Graph tags you need on every page
1. og:title
The headline shown in social previews. Should match your page title (or be slightly rewritten for social). Keep it under 60 characters.
HTML: meta property='og:title' content='Your Page Title Here'
2. og:description
2-3 sentences shown below the title in the preview. Expand on the title, add a hook. Keep it under 160 characters.
3. og:image
The single most important OG tag. A compelling image dramatically increases click-through on social shares.
Requirements:
- Minimum 1200×630px (1.91:1 ratio)
- Under 8MB
- JPG or PNG
- Absolute URL (not relative)
- The image must actually exist at that URL
4. og:url
The canonical URL of your page. Prevents duplicate content issues when the same page is shared from different URLs.
5. og:type
Tells platforms what kind of content this is. For most pages, it's 'website'. For articles, use 'article'. For products, use 'product'.
How to add OG tags to different platforms
WordPress (with Yoast SEO)
- Install Yoast SEO if you haven't already
- Go to each page/post → Yoast SEO → Social tab
- Set the Social title, description, and image
- Alternatively: go to SEO → Social → Facebook → enable 'Add Open Graph meta data'
Yoast auto-generates OG tags from your SEO title/description. But you should set a custom OG image for important pages.
Shopify
- Go to Online Store → Preferences → scroll to Social sharing image
- Upload a 1200×630px image for the homepage
- For product pages: go to each product → scroll to 'Search engine listing preview' → edit title + description
- Note: Shopify doesn't have native per-page OG image fields — use a theme that supports it or add to your theme's head template
Webflow
- Open the page settings for each page (gear icon)
- Scroll to 'Open Graph Settings'
- Set title, description, and upload an image
- Publish
Next.js (App Router)
In Next.js 13+ with App Router, use the metadata export in your page.tsx:
export const metadata = { openGraph: { title: 'Page Title', description: 'Page description', images: [{ url: 'https://yoursite.com/og.jpg', width: 1200, height: 630 }] } }
How to test your Open Graph tags
After adding or updating OG tags, test them before sharing:
- Facebook Sharing Debugger: developers.facebook.com/tools/debug — paste your URL, see exactly how Facebook will render it. Use 'Scrape Again' to clear the cache.
- Twitter Card Validator: cards-dev.twitter.com/validator
- LinkedIn Post Inspector: linkedin.com/post-inspector
- GetMetaFix (free): getmetafix.com — checks all OG tags in one audit, tells you what's missing and what's wrong.
The most common OG image mistakes
1. Relative URLs
'/images/og.jpg' won't work. Must be 'https://yoursite.com/images/og.jpg'.
2. Image doesn't exist
The URL is set but the file isn't there. Facebook will show nothing.
3. Wrong dimensions
Images smaller than 600×315px may not display. Use 1200×630px for best results across all platforms.
4. Same image on every page
Your homepage's OG image on a blog post looks lazy and confuses people. Use relevant images per page.
5. Image has text that gets cut off
Facebook/LinkedIn crop differently on mobile vs desktop. Keep important text in the centre 80% of the image.
Fix your OG tags in 10 minutes
- Run a free audit at getmetafix.com — see exactly which OG tags are missing
- Create a 1200×630px branded image (Canva has free templates)
- Add the 5 tags above to your HTML head
- Test in Facebook Debugger
- Done
The $29 fix package at GetMetaFix generates the exact HTML you need, tailored to your page's content.