Shopify Liquid OG Image: Custom Open Graph Tags for Every Page

How to customize og:image, og:title, og:description in Shopify Liquid templates — covering theme.liquid, product pages, collection pages, and blog posts with exact Liquid code.

Where OG tags live in Shopify themes

All Shopify OG tags are rendered in layout/theme.liquid inside the <head> section. Many themes use a snippet to keep things organized. You can also override them in individual template files.

Full OG tag block for theme.liquid

Replace or augment the OG section in your theme's layout/theme.liquid with this comprehensive block:

{% comment %} Open Graph meta tags {% endcomment %}

{% if template == 'index' %}
  <meta property="og:title"       content="{{ shop.name }}" />
  <meta property="og:description" content="{{ shop.description | strip_html | truncate: 160 }}" />
  <meta property="og:url"         content="{{ shop.url }}" />
  <meta property="og:type"        content="website" />
  {% if settings.share_image %}
    <meta property="og:image" content="https:{{ settings.share_image | img_url: '1200x630', crop: 'center' }}" />
  {% endif %}

{% elsif template == 'product' %}
  <meta property="og:title"       content="{{ product.title | escape }}" />
  <meta property="og:description" content="{{ product.description | strip_html | truncate: 160 | escape }}" />
  <meta property="og:url"         content="{{ shop.url }}{{ product.url }}" />
  <meta property="og:type"        content="product" />
  {% if product.featured_image %}
    <meta property="og:image" content="https:{{ product.featured_image | img_url: '1200x630', crop: 'center' }}" />
    <meta property="og:image:width"  content="1200" />
    <meta property="og:image:height" content="630" />
  {% endif %}
  <meta property="product:price:amount"   content="{{ product.price | money_without_currency }}" />
  <meta property="product:price:currency" content="{{ shop.currency }}" />

{% elsif template == 'collection' %}
  <meta property="og:title"       content="{{ collection.title | escape }}" />
  <meta property="og:description" content="{{ collection.description | strip_html | truncate: 160 | escape }}" />
  <meta property="og:url"         content="{{ shop.url }}{{ collection.url }}" />
  <meta property="og:type"        content="website" />
  {% if collection.image %}
    <meta property="og:image" content="https:{{ collection.image | img_url: '1200x630', crop: 'center' }}" />
  {% elsif collection.products.first.featured_image %}
    <meta property="og:image" content="https:{{ collection.products.first.featured_image | img_url: '1200x630', crop: 'center' }}" />
  {% endif %}

{% elsif template contains 'article' %}
  <meta property="og:title"       content="{{ article.title | escape }}" />
  <meta property="og:description" content="{{ article.excerpt_or_content | strip_html | truncate: 160 | escape }}" />
  <meta property="og:url"         content="{{ shop.url }}{{ article.url }}" />
  <meta property="og:type"        content="article" />
  {% if article.image %}
    <meta property="og:image" content="https:{{ article.image | img_url: '1200x630', crop: 'center' }}" />
  {% endif %}
  <meta property="article:published_time" content="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}" />

{% elsif template == 'page' %}
  <meta property="og:title"       content="{{ page.title | escape }}" />
  <meta property="og:description" content="{{ page.content | strip_html | truncate: 160 | escape }}" />
  <meta property="og:url"         content="{{ shop.url }}{{ page.url }}" />
  <meta property="og:type"        content="website" />

{% else %}
  <meta property="og:title"       content="{{ shop.name }}" />
  <meta property="og:url"         content="{{ shop.url }}{{ request.path }}" />
  <meta property="og:type"        content="website" />
{% endif %}

<meta property="og:site_name" content="{{ shop.name }}" />

<!-- Twitter / X -->
<meta name="twitter:card"  content="summary_large_image" />
{% if template == 'product' and product.featured_image %}
  <meta name="twitter:image" content="https:{{ product.featured_image | img_url: '1200x630', crop: 'center' }}" />
{% elsif template contains 'article' and article.image %}
  <meta name="twitter:image" content="https:{{ article.image | img_url: '1200x630', crop: 'center' }}" />
{% elsif settings.share_image %}
  <meta name="twitter:image" content="https:{{ settings.share_image | img_url: '1200x630', crop: 'center' }}" />
{% endif %}

Setting a default share image

In your Shopify theme settings, you can add a "Social sharing image" option that maps to settings.share_image in Liquid. This image is used as the fallback OG image for pages without their own images (homepage, about page, etc.).

Upload a 1200×630px image in Online Store → Themes → Customize → Theme settings → Social media.

Shopify Liquid OG image URL pitfalls

Missing https: prefix — Shopify's img_url filter returns protocol-relative URLs like //cdn.shopify.com/.... Always prepend https:.
Image cropped badly — use img_url: '1200x630', crop: 'center' to prevent distortion. Without crop, Shopify letterboxes images.
Product without featured image — always wrap image tags in {% if product.featured_image %} to avoid empty og:image tags.
Theme override by Shopify Markets — if you use Shopify Markets, check that hreflang doesn't override canonical tags on localized pages.

Verify your Shopify OG tags

After editing your theme, paste your Shopify store URL (product, collection, or homepage) into OGFixer to instantly see what Twitter, LinkedIn, Slack, and Discord will show when someone shares your Shopify store.