How Shopify Handles Open Graph by Default
Shopify injects a basic set of Open Graph meta tags automatically through its Liquid templating engine. Every storefront running a current Dawn-based or OS 2.0 theme outputs og:title, og:description, og:image, og:url, and og:type on product, collection, blog, and homepage templates without any merchant configuration. This means a freshly launched Shopify store already produces link previews on Facebook, LinkedIn, and similar platforms out of the box.
The default behavior pulls og:title from the product title, og:description from the SEO description field (not the product body HTML), and og:image from the first image in the product's media gallery. If the SEO description field is blank, Shopify falls back to a stripped version of the body HTML — which frequently produces truncated or incoherent preview text. Merchants who leave SEO fields empty get unpredictable social previews.
Where Shopify's Default Open Graph Falls Short
The most common problem is image dimensions. Shopify's default og:image tag points to the original uploaded product image without forcing a specific crop or minimum size. Facebook and LinkedIn require at least 1200×630 pixels for a proper link preview. If a merchant uploads portrait-format product photos (taller than wide), the platform crops them arbitrarily and previews look broken.
Shopify also does not output og:image:width and og:image:height attributes by default in most themes. Without these, social crawlers have to fetch the image separately to determine dimensions before rendering the preview, which causes delays or fallback to a plain-text card. Variants present another gap: Shopify's og:image always reflects the first gallery image, not the selected variant's image, so sharing a URL with a ?variant= query string still shows the default product photo.
Collection pages receive minimal Open Graph treatment. The og:description on a collection defaults to the collection's description field, which many merchants leave blank, resulting in previews with no description at all. There is no native og:image for collections unless the theme explicitly references the collection.image Liquid object and that image has been uploaded.
Editing Open Graph Tags Directly in Shopify Themes
The Open Graph markup lives inside snippets/seo.liquid or directly in theme.liquid and the individual template files, depending on the theme. In Dawn (Shopify's reference OS 2.0 theme), Open Graph tags are rendered through snippets/head-content.liquid which calls the global og: assignments. Merchants with developer access can locate the og:image assignment and append the Shopify image URL filter — for example, | image_url: width: 1200 — to force a resized version and then add explicit og:image:width and og:image:height tags with static values.
Directly editing theme code bypasses app logic and survives theme updates only if the merchant uses a duplicated theme or tracks changes in version control. A common pattern is to add a conditional block: if a product has a metafield containing a custom social image, use that; otherwise fall back to the resized first gallery image. Shopify metafields (available natively since 2021) make this workflow cleaner without requiring a third-party app.
Apps and Tools That Extend Open Graph on Shopify
The Shopify App Store includes SEO-focused apps — such as SEO Manager, Plug in SEO, and Smart SEO — that add UI controls for editing og:title and og:description per product, collection, and page without touching code. These apps write their overrides either into metafields that the theme reads, or by injecting script tags into the storefront head. The injection method is less reliable because it depends on JavaScript executing before social crawlers read the page, and most social crawlers do not execute JavaScript.
Apps that write to metafields and require a matching theme snippet are the more durable architecture. Before installing any SEO app, check whether its Open Graph output method is metafield-based or script-injection-based — the product documentation or support team should answer this directly. Duplicate Open Graph tags (one from the theme, one from an app) cause crawlers to use the first instance encountered, which is usually the theme's default, making the app override ineffective.
For stores running headless Shopify (Hydrogen or a custom React/Next.js frontend), Open Graph tags are the developer's full responsibility. The Storefront API returns product data but does not generate meta tags. Developers must implement og: tags in the HTML head of each route using the fetched product or collection data.
Fixing Variant-Level and Dynamic Open Graph on Shopify
Shopify does not natively support variant-specific Open Graph images because og: tags are rendered server-side at page load, not updated when a user selects a variant on the client side. The URL structure for variant pages (/products/handle?variant=ID) does trigger a separate server render on Shopify's infrastructure, so the og:image tag can technically reference the variant's image if the Liquid template is written to detect the variant parameter.
The implementation requires reading the url.search Liquid object or parsing the variant parameter in the template, then looking up that variant's featured_image property and outputting it as the og:image value. This is a code-level customization not available through the Shopify admin UI. Merchants without developer resources should at minimum ensure the first product image (which becomes the default og:image) is in landscape format at 1200×630 or larger, so default previews always render correctly regardless of variant selection.
Actionable Priorities for Shopify Open Graph
Start with an audit using Facebook's Sharing Debugger tool (developers.facebook.com/tools/debug), which shows exactly what tags Shopify is serving for any URL and highlights missing or undersized images. Run the debugger on the homepage, one product page, one collection page, and one blog post to get a cross-template view of the current state.
Then prioritize in this order: fill in the SEO description field on all published products and collections (this is the single highest-return task requiring no code); ensure the first product image for every product is landscape at 1200×630 minimum; add og:image:width and og:image:height to the theme snippet; and test again with the debugger. These four steps resolve the majority of broken social previews on Shopify stores without requiring an app or headless architecture.