How to set an OG image in Shopify

Shopify storefronts share like any other site: crawlers read Open Graph tags in the HTML. Themes and apps usually inject those tags, but product photos are often the wrong aspect ratio for a link card. This guide covers a practical setup, verification, and cache refresh—without confusing it with WordPress plugin UI (WordPress guide).

How Shopify emits Open Graph

On a typical Online Store 2.0 theme, the theme (or an SEO app) prints og:title, og:description, and og:image for products, collections, and pages. The image often comes from:

• The product’s primary media
• A theme “social sharing image” / default OG image setting
• An SEO app’s per-resource social image field

Your job is to make sure exactly one absolute og:image appears in View Source for the URL customers share.

Recommended workflow

1. Design a 1200×630 card in the OG Image Generator (or crop with the Image Resizer).
2. Upload to Shopify Files or product media; copy the full https CDN URL.
3. Assign it in theme settings or your SEO app’s social image field for that product/page. Prefer an explicit social image over a cropped square gallery shot when the preview matters.
4. Verify with View Source and the Link Preview Checker.
5. Re-scrape after changes (Facebook Sharing Debugger, LinkedIn Post Inspector).

Validate file fitness with the Social Image Checker. Pixel defaults: OG image size.

Theme settings vs apps

• Theme settings: Many themes include a default social sharing image used when a resource has none. Set a brand-safe default, then override important products.
• SEO apps: Useful for per-URL control. Disable overlapping Open Graph output if the theme already prints a complete set—duplicates cause crawlers to pick the wrong file.
• Custom Liquid: Only add og:image in theme.liquid (or a snippet) if you accept ownership of the full tag set. Do not append a second image tag beside the theme’s.

Products, collections, and pages

Resource	Typical image source	Tip
Product	Featured media	Add a landscape social asset for campaigns
Collection	Collection image	Avoid tiny logos
Page / blog	Page / article image	Set explicitly in SEO fields when available
Homepage	Theme default social image	Required for brand shares

Troubleshooting Shopify previews

Work in order:

1. Count og:image tags in View Source. More than one → disable an app or custom snippet.
2. Open the image URL logged out. Admin-only or broken CDN paths fail crawlers.
3. Purge Shopify cache / CDN as your stack requires, then re-check HTML.
4. Password-protected storefronts block anonymous crawlers—previews fail until the store is public (or you use a reachable preview strategy your platform supports).
5. Heavy files break WhatsApp even when Facebook passes—see WhatsApp link preview not working.
6. Stale platform cache after a real HTML fix—rename the file or re-scrape.

Universal checklist: og:image not showing.

Common mistakes

• Using a 1024×1024 product photo as the only social image
• Leaving the sales channel unpublished while testing public scrapers
• Installing two SEO apps that both inject Open Graph
• Relative protocol URLs or mismatched www/apex hosts in tags

Checklist

• One absolute og:image in View Source
• ~1200×630 PNG/JPG for key URLs
• Theme or single app owns tags—not both fighting
• Storefront reachable anonymously
• Checker + platform re-scrape after edits

Webflow teams: OG image in Webflow. Design habits: OG image best practices.

Apps, markets, and multiple storefronts

Stores with several sales channels should confirm which storefront URL customers actually share. A product might be reachable on a custom domain and a myshopify.com host; tags can differ if themes diverge. Standardize on the primary domain in packaging, emails, and ads.

App ecosystems change often. After installing or removing an SEO app, re-count og:image tags on a sample product, collection, and blog post. Merchants frequently accumulate three layers of social meta over years. Schedule a quarterly HTML audit the same way you schedule theme upgrades.

For paid ads that scrape the landing URL, treat OG tags as part of creative QA. A mismatch between ad creative and the unfurl confuses buyers even when the ad itself is approved. Keep campaign landing templates on a checklist: absolute image, lean file, published theme, password disabled.

Field notes from real share failures

Most broken previews are boring: a relative URL, a duplicate plugin tag, a cache that nobody re-scraped, or a file that is fine in Chrome but too heavy for a messenger. Resist the urge to rewrite the entire brand system until those basics are proven in View Source and a private window.

Write down the exact URL string you tested, including trailing slash and query parameters. Support threads go sideways when one person scrapes example.com/page and another shares example.com/page/. Treat the share string as part of the specification.

When you finally change artwork, change the path. Overwriting og.png in place is the most common reason a “fixed” card never appears. Pair the new file with a short note in your changelog so the next person knows which version is live.

Verification habits worth repeating

After every deploy that touches templates or SEO plugins, spot-check three URLs: the homepage, one article or product, and one utility page. Look for a single absolute og:image and open that file logged out. This ten-minute habit catches more regressions than redesigning share cards.

Document the owner of social tags for your stack—theme, plugin, or layout component—in the repository README. When something breaks, people should know which lever to pull first. Ambiguous ownership is how duplicate tags accumulate.

Finally, separate “works in our browser” from “works for crawlers.” If you only validate inside an authenticated preview session, you will ship failures to Facebook, LinkedIn, Slack, Discord, WhatsApp, and X without noticing until a campaign is live.