How to Fix Open Graph Tags in Shopify
Shopify outputs OG tags automatically from product images, collection images and page content — but the defaults often miss: products without featured images, low-resolution OG images, inconsistent branding. This guide covers Shopify-specific OG workflow. Pair with OG generator guide and social previews.
Step-by-step: How to fix Shopify Open Graph tags
- Audit current OG output. View source on 5 URLs. Check og:title, og:description, og:image, og:url, og:type. Most Shopify themes output complete OG; problems are usually content (wrong image, missing description).
- Set OG image fallback. Theme settings → Social → upload default OG image (1200x630). Used when a page has no specific image (e.g., contact, about). Branded fallback ensures consistent social previews.
- Verify per-product OG image. Each product's OG image is its featured image. Audit products: every active product should have a featured image (Image tab in product editor). Products without images use the fallback — set above.
- Override per-page where needed. For special landing pages, use theme.liquid conditionals or apps to set specific OG tags. Smart SEO has per-page OG override.
- Set per-collection OG image. Collections also have an image field — used as OG image for collection page. Ensure every active collection has an image.
- Test with Facebook Sharing Debugger. developers.facebook.com/tools/debug. Paste URL. Check rendering. 'Scrape Again' button refreshes Facebook's cache after changes.
- Test Twitter Card and LinkedIn. cards-dev.twitter.com/validator, linkedin.com/post-inspector. Different platforms cache differently. Refresh each after OG changes.
Frequently Asked Questions
What's the best Shopify OG image size?
1200x630 pixels universally. Shopify CDN handles this — even if you upload 2400x1260, Shopify serves resized 1200x630. File size under 1MB. PNG or JPG (not WebP — limited preview platform support).
Why doesn't my Shopify product OG image show on Facebook?
Common causes: product has no featured image (no OG image generated, fallback or none); image too small (under 200x200); image not publicly accessible (rare on Shopify — usually accessible). Facebook caches 30 days — force refresh in Debugger.
Can I set different OG images for Facebook vs Twitter?
Usually no need — same 1200x630 image works for both. Twitter inherits og:image as fallback. Shopify themes output identical og:image and twitter:image by default. Override only for specific use cases.
How do I add custom OG tags per Shopify page?
Theme.liquid conditionals: {% if template contains 'page.landing' %}<meta property='og:image' content='custom-url.jpg'>{% endif %}. Or use an app — Smart SEO has per-page OG override via product/page metafields.
Why are WhatsApp previews missing for Shopify products?
WhatsApp requires OG tags in first 4KB of HTML, image under 300KB, exact 1.91:1 aspect ratio. Heavy Shopify head sections (analytics, multiple apps) push OG tags beyond 4KB. Solution: reduce head bloat (defer non-essential scripts, lazy-load some app code), or rely on alternative messaging platforms.