Shopify OG Image Not Showing? How to Fix Social Preview Issues

How Shopify handles OG tags

Shopify themes automatically generate Open Graph tags for all page types (home, product, collection, blog post, article). The og:image is pulled from your product's featured image, collection image, or a default store image — depending on the page type and your theme's logic.

Most Shopify OG issues come from one of three sources: the theme outputting the wrong image, the image being too small, or the platform cache serving stale data.

Quick fix checklist

1. Set a featured image on every product: Shopify uses the first product image as the og:image. If no product image is set, the theme may fall back to your store's logo or leave the tag empty.
2. Check image dimensions: Shopify CDN resizes images, but your original should be at least 1200×630 px. Very small source images (under 500 px) may result in blurry or rejected OG images on platforms.
3. Verify what the theme outputs: view your product page source (right-click → View Page Source) and search for og:image. Confirm it points to the image you expect.
4. Set a default social sharing image in theme settings: most Shopify themes have a Social media → Default sharing image setting in the theme customizer. Set a 1200×630 px image here as the fallback for pages without their own image.
5. Check the theme's Liquid templates: open your theme code editor → layout/theme.liquid → search forog:image. If the logic is using page_image or a variable that is empty, add a fallback.
6. Clear platform cache: after updating your images, use Facebook Sharing Debugger (Scrape Again), LinkedIn Post Inspector (Scrape Again), or Twitter Card Validator to force a re-fetch.

Fix the OG image in Shopify Liquid (theme.liquid)

Here is the standard pattern for setting the OG image in layout/theme.liquid:

{% if page_image %}
  {% assign og_image_url = page_image | img_url: '1200x630', crop: 'center' %}
{% elsif settings.share_image %}
  {% assign og_image_url = settings.share_image | img_url: '1200x630', crop: 'center' %}
{% endif %}

{% if og_image_url %}
  <meta property="og:image" content="https:{{ og_image_url }}" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
{% endif %}

Note the https: prefix — Shopify's img_url filter returns a protocol-relative URL (starting with //). Without the explicithttps: prefix, some crawlers reject it.

OG image correct for products but wrong for homepage

Your homepage OG image comes from Online Store → Preferences → Social sharing image in the Shopify admin. This is the global fallback. Make sure this is set to a 1200×630 px image representing your brand.

Common Shopify OG image mistakes

• Protocol-relative URLs without https prefix: Shopify img_url returns //cdn.shopify.com/... — crawlers on HTTP will fail; always prepend https:.
• Image cropped to wrong dimensions: use img_url: '1200x630', crop: 'center' to force the correct dimensions and avoid letter-boxing.
• Third-party apps injecting duplicate OG tags: some SEO or social apps (like Vitals or SEO Booster) add their own OG tags, creating duplicates. Check your page source and disable conflicting apps.
• Variant images not used: Shopify always uses the first product image (not the selected variant image) for OG. If your variants have very different appearances, consider using a product-level composite image for social sharing.