Open Graph Generator
Contact Us
Shopify Implementation

Open Graph Meta Tags in Shopify Themes (theme.liquid Snippet)

Shopify themes use Liquid templates (`theme.liquid` or `snippets/social-meta-tags.liquid`) to generate product images, prices, and canonical links for social platforms.

Implementation Best Practices

  • ✓Prepend https: to Shopify image URLs since liquid returns protocol-relative paths (//cdn.shopify.com/...).
  • ✓Use product.featured_media for product page og:image tags.
  • ✓Test product pages with Open Graph Inspector to verify live price and image outputs.

Shopify Code Example

<!-- snippets/social-meta-tags.liquid -->
{% assign og_title = page_title %}
{% assign og_url = canonical_url %}
{% assign og_type = 'website' %}

{% if template contains 'product' %}
  {% assign og_type = 'product' %}
  {% assign og_image = product.featured_media | image_url: width: 1200 %}
{% elsif template contains 'article' %}
  {% assign og_type = 'article' %}
  {% assign og_image = article.image | image_url: width: 1200 %}
{% endif %}

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title }}">
<meta property="og:type" content="{{ og_type }}">
{% if og_image %}
  <meta property="og:image" content="https:{{ og_image }}">
{% endif %}
<meta name="twitter:card" content="summary_large_image">

Audit & Verify Your Implementation

Open Graph Inspector →Open Graph Generator →