Back to Docs

Ecommerce

Shopify OG Image Integration

Add automatic Open Graph images to Shopify product, collection, blog, and page URLs with a Liquid theme snippet.

Prerequisites

  • A Shopify Online Store theme you can edit
  • A MyOG.social account with your store domain added
  • Access to Edit code or a developer who can update the theme

How MyOG fits Shopify

Shopify themes normally render Open Graph tags from a shared Liquid snippet such as social-meta-tags.liquid or meta-tags.liquid.

The best MyOG setup is a Liquid snippet that uses Shopify's canonical_url value, so product, collection, article, blog, and page URLs all resolve to the shared page URL crawlers will fetch.

A Shopify app is possible later through theme app extensions, but a guide is still valuable because themes often already emit og:image and duplicate tags need manual handling.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the Shopify code

Liquid snippet

Use this inside your social meta tag snippet or directly above </head> in theme.liquid.

{%- assign myog_page_url = canonical_url | url_encode -%}
<meta property="og:image" content="https://api.myog.social/og?url={{ myog_page_url }}&template=screenshot-right" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://api.myog.social/og?url={{ myog_page_url }}&template=screenshot-right" />

If your theme already emits twitter:image from the same image source, replace that block too.

3

Place it correctly

  1. In Shopify admin, open Online Store, Themes, then Edit code.
  2. Find the snippet that outputs social tags, commonly snippets/social-meta-tags.liquid, snippets/meta-tags.liquid, or a render call in layout/theme.liquid.
  3. Place the MyOG tags near the existing og:image tags, ideally replacing the old image block when you want MyOG to control every social image.
  4. Save, publish the theme if needed, then test a product URL and a blog article URL.

Avoid duplicate og:image tags

Shopify themes often output og:image from product.featured_image, article.image, or settings.share_image. If you add MyOG without removing the old block, social crawlers may keep using the first og:image they see. Replace the existing og:image block for a full rollout, or wrap MyOG in a condition only for pages that lack a native image.

Dynamic pages

Use canonical_url in Liquid. It gives the current canonical URL across product, collection, page, article, and blog templates, which is exactly what MyOG needs in its url parameter.

Test the result

  • View source on a product page and confirm there is one preferred og:image tag.
  • Paste the same URL into the MyOG Open Graph Checker.
  • Use Facebook Sharing Debugger or LinkedIn Post Inspector if a platform keeps showing a cached old image.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

Theme updates can overwrite manual theme edits if the theme is replaced.
Theme app extensions can add app embeds, but merchants still activate them and duplicate theme OG tags remain a real issue.
Password-protected stores and preview themes cannot be fetched by social crawlers or MyOG like a public URL.

Sources

Ready to get started?

Sign up for free and give every Shopify product and article a generated social image.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f