WooCommerce OG Image Not Showing: Fix Product Preview Images

Fix missing or wrong OG images on WooCommerce product pages — Yoast SEO, RankMath, Woo product image settings, and Facebook/Twitter debugger steps.

Why WooCommerce product OG images break

WooCommerce product pages rely on WordPress + an SEO plugin (Yoast, RankMath, or AIOSEO) to output correct Open Graph tags. When the og:image is missing or wrong, the cause is almost always one of four things:

  1. No featured image set on the product
  2. SEO plugin not configured to use the product image
  3. Caching plugin serving stale HTML without OG tags
  4. Platform scraper caching the old preview

Fix 1: Set a product featured image

WooCommerce reads the WordPress Featured Image as the OG image for product pages. Go to Products → Edit product → Product image (right sidebar) and set a 1200×630px image (or at minimum 600×315px). Without this, your SEO plugin may fall back to your site logo or output no og:image at all.

Fix 2: Configure Yoast SEO for WooCommerce

With Yoast SEO active:

  1. Go to Yoast SEO → Social → Facebook and enable Open Graph metadata.
  2. Edit your product page → scroll to the Yoast meta box → Social tab → upload a custom og:image if you want to override the featured image.
  3. If you have Yoast WooCommerce SEO plugin, it auto-maps product gallery images to og:image more accurately.

Check the generated HTML by viewing page source and searching for og:image. If it's missing, Yoast either has Open Graph disabled or can't find a suitable image.

Fix 3: Configure RankMath for WooCommerce

  1. RankMath → Titles & Meta → Products → ensure "Use Thumbnail as OG Image" is toggled ON.
  2. Edit the product → RankMath meta box → Social tab → verify or override the og:image.

Fix 4: Clear your caching plugin

If you're running WP Super Cache, W3 Total Cache, WP Rocket, or Cloudflare in front of your site, those caches may serve old HTML that was captured before you added OG tags. Clear the entire page/object cache after making changes.

  • WP Rocket: WP Rocket → Clear Cache → Clear All
  • W3 Total Cache: Performance → Purge All Caches
  • Cloudflare: Caching → Configuration → Purge Everything

Fix 5: Force social platform cache refresh

Even after fixing the HTML, Facebook, Twitter, and Slack cache the old preview. You must manually invalidate each:

Verify your WooCommerce OG tags are correct

After making fixes, paste your product URL into OGFixer to instantly preview how Twitter, Slack, Discord, and LinkedIn will render your product link.

Related guides