Shopify Social Preview App: Fixing Broken Previews on Product Links

A shopify social preview app fixes a specific, recognizable failure: someone pastes a product URL into a text message or a Facebook post, and instead of the product photo and title showing up, they get a blank card, the store's generic logo, or nothing at all. It's an easy problem to miss internally, because it only shows up when a link is pasted somewhere, not when you're browsing the store normally — which is exactly why a dedicated app or fix needs to catch it before a customer does.

Why is this specific bug so easy to miss internally?

The reason broken social previews often go unnoticed for weeks is structural: nobody on the store's own team browses the storefront by pasting product links into a chat app during a normal workday. The bug only becomes visible in a context most internal testing doesn't cover — sharing a link outside the browser, in a place that triggers an actual crawler fetch and unfurl. A store owner can browse every product page normally, confirm images load fine on the page itself, and never encounter the issue, because the page rendering correctly and the og:image tag resolving correctly are two entirely separate things. That gap between "the page looks fine" and "the shared link looks fine" is exactly why this class of bug tends to get reported by a customer or a marketing partner rather than caught internally.

The most common cause: no theme-level og:image at all

A lot of Shopify themes, especially older or heavily customized ones, simply don't output an og:image tag on product pages by default. When that's the case, there's nothing for a platform's crawler to find, so it falls back to whatever generic fallback behavior that platform has — sometimes a blank card, sometimes the site's favicon blown up, sometimes nothing renders at all. This isn't a bug in Shopify or in the platform doing the unfurling; it's simply a tag that was never added. Checking the page source of a live product page for a <meta property="og:image"> tag is the fastest way to confirm whether this is the root cause.

The second most common cause: a broken or relative image URL

Even when a theme does output an og:image tag, it sometimes points at a relative URL (/images/product.jpg instead of a full https:// address) or references an image that no longer exists because the product was updated and the image field changed. Social platform crawlers generally require an absolute URL and will silently fail to render a preview if the tag points at something relative or unreachable — there's rarely an error message anywhere visible, the preview just doesn't show up, which makes this cause easy to miss without specifically checking.

• No og:image tag present at all — the theme never added one
• A relative or malformed image URL that a crawler can't resolve
• An image that no longer exists because the product's image field changed after the tag was cached
• Duplicate og: tags from a theme default plus an app both writing to the head, causing inconsistent behavior across platforms
• An image below the platform's minimum size requirement (LinkedIn in particular rejects small images outright)

Duplicate tags: when the app and the theme fight each other

Installing an app or adding a snippet to fix the missing-tag problem introduces a second failure mode if the theme's own default og: tags (even blank or broken ones) aren't removed first. With two sets of og:image tags on the same page, different platforms resolve the conflict differently — some take the first tag they encounter, some take the last, which means Facebook and Slack can genuinely show different previews for the same link, and there's no single behavior to test against and confirm as "fixed." The reliable fix is checking the theme's head section (usually in theme.liquid) for any existing og: tags and removing them before adding a new source.

The checkout and cart-share edge case

Product pages usually get the most attention when fixing preview issues, but they're not the only Shopify URLs that get shared. Cart share links, wishlist links (if using an app that adds them), and blog posts on the storefront's built-in blog all have the same underlying requirement for a correct og:image tag, and it's common to fix product pages specifically while these other page types are left with whatever default (or absent) behavior the theme provides. Checking whether a template setup covers every URL type that customers might actually share, not just the primary product template, closes a gap that otherwise resurfaces the same broken-preview complaint on a different kind of page a few weeks later.

Why doesn't a fix show up immediately after you make it?

After fixing the tag, it's common to re-share the link and see the same broken preview — this is almost always a cache issue, not a sign the fix didn't work. Facebook, LinkedIn, and other platforms cache the metadata they scrape from a URL the first time they encounter it, and won't automatically re-check it just because the underlying tag changed. Facebook specifically has a Sharing Debugger tool that lets you force a re-scrape of a given URL; other platforms have less accessible or no public re-scrape mechanism, which means a stale preview can persist for days on some platforms even after the underlying tag is fixed.

Why does per-product testing matter more on Shopify than a typical site?

Because a Shopify store's product catalog changes constantly — new products added, images swapped, variants updated — a preview that worked correctly when first tested can silently break later if a product's image field gets cleared or a title gets edited past a length the template didn't account for. A one-time fix isn't the end of the job; the failure mode tends to recur on individual products rather than storewide, which makes it easy to miss unless something is actually checking product pages on an ongoing basis rather than relying on a single manual spot check.

A quick checklist before assuming it's fixed

• View source on the live product page and confirm exactly one og:image tag is present, with a full absolute URL
• Confirm the image URL loads directly in a browser tab and returns an actual image, not a 404
• Check the image against each platform's minimum size requirement, since LinkedIn in particular is stricter than most
• Use a debugger tool that bypasses platform caching to see what would currently be parsed, not what's already cached
• Re-check a sample of product, collection, cart, and blog URLs, not just the one page originally reported as broken

How useopengraph addresses this end to end

The Shopify integration generates a ready-to-paste Liquid snippet from a template you build in the dashboard, mapping variables like product title, description, and image to Shopify fields — solving the missing-tag problem directly, with an absolute, always-valid render URL rather than a relative path that can break. The Cache Debugger re-fetches a given URL live and shows exactly what Facebook, Twitter, LinkedIn, and other platforms would currently parse, bypassing each platform's own cache, and can force-refresh Facebook's cached version through their Sharing Debugger API directly from the dashboard — no manual trip to a separate tool required. And because Site Audits can crawl the whole storefront on a schedule, the recurring per-product failure mode gets caught automatically as new products get added or existing ones get edited, rather than depending on someone noticing a broken share after the fact.