Open Graph for Shopify

How Shopify outputs Open Graph

Shopify themes generate Open Graph tags automatically from product and collection data. For a product page, the theme pulls og:title from the product title, og:description from the product description, and og:image from the first product image. Collection pages follow the same pattern — pulling the collection title, description, and featured image.

This works well when your product data is complete. The problems start when it is not.

Where product and collection previews break

Missing og:image. If a product has no images yet — or the first image hasn't finished uploading — the theme outputs no og:image, or outputs the tag with a blank value. The shared preview will have no image.

Relative image URLs. Some older or custom themes construct the og:image value using a relative path instead of a full https:// URL. External crawlers — Facebook, LinkedIn, Slack — fetch from their own servers, so a path like //cdn.shopify.com/… without the protocol will fail to load.

Collection pages inheriting the wrong image. Collections often have no featured image set. When that happens the theme may fall back to the store logo, a generic placeholder, or nothing. Every collection page ends up sharing the same image, which is rarely intentional.

Templated or truncated descriptions. Shopify's product description is HTML. Themes that pass it directly into og:description can produce tags filled with markup or HTML entities rather than readable text.

Image rules

The image rules for Shopify previews are the same as for Open Graph generally:

• 1200×630 pixels — the target size that renders correctly on Facebook, LinkedIn, Slack, and Discord.
• Absolute URL — must start with https://. No relative paths, no protocol-relative URLs.
• Publicly reachable — no auth, no geo-restrictions, no CDN rules that block external crawlers.

Shopify-hosted images served from cdn.shopify.com meet the public-reachability requirement. The risk is in whether your theme correctly outputs the full https:// URL and whether the product has an image assigned at all.

Checking previews across many products

A store with hundreds of products is unlikely to have consistent og:image coverage unless it was explicitly checked. Products added during busy periods, imported via CSV, or migrated from another platform often arrive without images — and therefore without og:image.

Paste individual product and collection URLs into the Open Graph Checker to confirm the tags are present, the image URL is absolute, and the image actually loads. For stores with large catalogs, checking a representative sample — newest products, oldest products, and collections — surfaces the most common gaps quickly.

Common mistakes

• No image on the product — the theme can only output what the product has. Assign an image to every product.
• Protocol-relative og:image — //cdn.shopify.com/… looks like it should work but fails for external crawlers. The tag needs https://.
• Collection pages with no featured image — set a featured image for each collection, or check whether your theme's fallback is acceptable.
• HTML in og:description — if your product descriptions include formatting, confirm the theme strips HTML before injecting the value into the meta tag.

See og:image is missing for a full fix checklist if your image is not appearing in previews.