Open Graph Tags in Shopify
Shopify generates Open Graph tags automatically through its theme system. This guide covers what Shopify outputs by default, how to customize it, and how to handle product and collection pages.
If you have ever shared a Shopify product link on Facebook or WhatsApp and seen a broken preview — missing image, wrong title, or a generic store description — the problem was almost certainly missing or misconfigured Open Graph tags in your theme.
Most Shopify themes include OG tags out of the box, but the coverage varies significantly between themes. Understanding what your theme outputs and how to customize it gives you full control over how every page in your store appears when shared.
Shopify's Built-in OG Tags
Most Shopify themes include OG tags via a snippet (typically snippets/social-meta-tags.liquid or inline in theme.liquid). The default output covers the basics.
The exact tags depend on your theme. Dawn (Shopify's default theme) outputs comprehensive OG and Twitter Card tags. Older or custom themes may output fewer tags.
To check what your theme outputs, view the page source of any page in your store and search for og:.
<!-- Default Shopify OG output (varies by theme) -->
<meta property="og:site_name" content="Your Store Name" />
<meta property="og:url" content="https://yourstore.com/products/example-product" />
<meta property="og:title" content="Example Product" />
<meta property="og:type" content="product" />
<meta property="og:description" content="Product description text..." />
<meta property="og:image" content="https://cdn.shopify.com/s/.../product-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />Customizing theme.liquid
To modify or add OG tags, edit the theme.liquid file or the social meta tags snippet.
In your Shopify admin: Go to Online Store > Themes. Click Actions > Edit code on your active theme. Find theme.liquid or search for social-meta-tags in the snippets folder.
Overriding the default OG image: Add a fallback OG image for pages that have no featured image. Upload og-default.jpg to Settings > Files in your Shopify admin, or reference it from your theme assets.
Adding missing tags: If your theme does not output certain OG tags like og:locale or article metadata, add them directly to theme.liquid inside the <head> tag.
Full control: If you want complete control, create a new snippet (snippets/custom-og-tags.liquid) and include it in theme.liquid with {%- render 'custom-og-tags' -%}. This lets you define different OG output per template type — product, article, collection, and default pages.
Fallback OG Image in theme.liquid
{% unless page_image %}
<meta property="og:image" content="{{ 'og-default.jpg' | asset_url }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
{% endunless %}Adding Article Metadata
<head>
<!-- Existing head content -->
{%- comment -%} Custom OG tags {%- endcomment -%}
<meta property="og:locale" content="{{ request.locale.iso_code | replace: '-', '_' }}" />
{% if template contains 'article' %}
<meta property="article:published_time" content="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}" />
<meta property="article:author" content="{{ article.author }}" />
{% for tag in article.tags %}
<meta property="article:tag" content="{{ tag }}" />
{% endfor %}
{% endif %}
</head>Complete Custom Social Meta Tags Snippet
{%- comment -%} snippets/custom-og-tags.liquid {%- endcomment -%}
<meta property="og:site_name" content="{{ shop.name }}" />
<meta property="og:url" content="{{ canonical_url }}" />
{% if template contains 'product' %}
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ product.title }}" />
<meta property="og:description" content="{{ product.description | strip_html | truncate: 200 }}" />
<meta property="og:image" content="{{ product.featured_image | image_url: width: 1200 }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:alt" content="{{ product.featured_image.alt | escape }}" />
<meta property="product:price:amount" content="{{ product.price | money_without_currency }}" />
<meta property="product:price:currency" content="{{ shop.currency }}" />
{% if product.available %}
<meta property="product:availability" content="in stock" />
{% else %}
<meta property="product:availability" content="out of stock" />
{% endif %}
{% elsif template contains 'article' %}
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ article.title }}" />
<meta property="og:description" content="{{ article.excerpt_or_content | strip_html | truncate: 200 }}" />
<meta property="og:image" content="{{ article.image | image_url: width: 1200 }}" />
<meta property="article:published_time" content="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}" />
{% elsif template contains 'collection' %}
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ collection.title }}" />
<meta property="og:description" content="{{ collection.description | strip_html | truncate: 200 }}" />
{% if collection.image %}
<meta property="og:image" content="{{ collection.image | image_url: width: 1200 }}" />
{% elsif collection.products.first.featured_image %}
<meta property="og:image" content="{{ collection.products.first.featured_image | image_url: width: 1200 }}" />
{% endif %}
{% else %}
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ page_title }}" />
<meta property="og:description" content="{{ page_description | escape }}" />
{% if page_image %}
<meta property="og:image" content="{{ page_image | image_url: width: 1200 }}" />
{% else %}
<meta property="og:image" content="{{ 'og-default.jpg' | asset_url }}" />
{% endif %}
{% endif %}
<meta name="twitter:card" content="summary_large_image" />Product Page OG Tags
Shopify product pages should use og:type set to product and include product-specific properties like price, currency, and availability.
Use product.selected_or_first_available_variant.price instead of product.price to get the correct price for the default variant.
Product Page OG Tags in Liquid
{% if template contains 'product' %}
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ product.title }}" />
<meta property="og:description" content="{{ product.description | strip_html | truncate: 200 }}" />
<meta property="og:image" content="{{ product.featured_image | image_url: width: 1200 }}" />
<meta property="product:price:amount" content="{{ product.selected_or_first_available_variant.price | money_without_currency }}" />
<meta property="product:price:currency" content="{{ shop.currency }}" />
{% if product.available %}
<meta property="product:availability" content="in stock" />
{% else %}
<meta property="product:availability" content="out of stock" />
{% endif %}
{% endif %}Collection Page OG Tags
Collection pages should use og:type set to website (there is no collection type in the OG protocol). For the image, use the collection image if one is set, otherwise fall back to the first product's image.
Set collection images in Products > Collections > [Collection Name] and upload an image in the collection details.
Collection Page OG Tags in Liquid
{% if template contains 'collection' %}
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ collection.title }}" />
<meta property="og:description" content="{{ collection.description | strip_html | truncate: 200 }}" />
{% if collection.image %}
<meta property="og:image" content="{{ collection.image | image_url: width: 1200 }}" />
{% elsif collection.products.first.featured_image %}
<meta property="og:image" content="{{ collection.products.first.featured_image | image_url: width: 1200 }}" />
{% else %}
<meta property="og:image" content="{{ 'og-default.jpg' | asset_url }}" />
{% endif %}
{% endif %}Shopify Apps for OG Management
For stores that need per-page OG control without editing theme code, several Shopify apps provide a UI for managing social meta tags:
SEO Manager — Adds OG and Twitter Card fields to the product/page editor with preview.
Smart SEO — Auto-generates meta tags from templates with manual override options.
SEO King — Includes social media preview and bulk editing of meta tags.
Before installing an app, check what your current theme already outputs. Many modern themes (Dawn, Refresh, etc.) include comprehensive OG tags. An app is only necessary if you need per-page overrides beyond what the theme provides or if you want a visual preview in the editor.
Important: Ensure the app does not duplicate OG tags already output by your theme. Check the page source after installation to verify there are no duplicate og:title or og:image tags.
Image Sizing Considerations
Shopify serves images through its CDN with automatic resizing via the image_url filter. Use this to request the right dimensions for OG images.
Shopify's CDN automatically converts images to WebP for browsers that support it, but crawlers receive the original format (JPEG/PNG).
The crop: 'center' parameter ensures the image is cropped to the exact dimensions rather than scaled.
Product images uploaded at less than 1200px wide cannot be upscaled. Upload source images at a minimum of 1200px wide.
Shopify's maximum image dimension is 4472 x 4472 pixels. Larger uploads are automatically resized.
For the best social preview, use images with a 1.91:1 aspect ratio (1200 x 628). Product photos are often square (1:1) — consider creating separate OG images for important product pages.
Shopify Image URL Filter
<!-- Request 1200px wide image for OG -->
{{ product.featured_image | image_url: width: 1200 }}
<!-- Request specific dimensions -->
{{ product.featured_image | image_url: width: 1200, height: 630, crop: 'center' }}Testing Shopify OG Tags
Before sharing any Shopify store link, verify that your OG tags are correct:
1. View page source. Visit your Shopify store page, right-click, and select "View Page Source." Search for og: to see all OG tags. Check for duplicates.
2. Facebook Sharing Debugger. Go to developers.facebook.com/tools/debug/ and enter your Shopify page URL. Click "Scrape Again" if you have recently made changes.
3. Twitter Card Validator. Go to cards-dev.x.com/validator and enter your URL. Check the log output.
4. Check password-protected stores. If your store is password-protected (common during development), social crawlers cannot access your pages. OG tags will not work until you remove the password. Disable it at Online Store > Preferences > Password protection.
5. Check custom domains. If you recently connected a custom domain, ensure the SSL certificate is active. Social crawlers will fail on invalid HTTPS connections.
Quick Reference
Homepage: og:type is website. Image from theme setting or default. Set in theme customizer.
Product: og:type is product. Image from product.featured_image. Add price and availability tags.
Collection: og:type is website. Image from collection.image or first product. No collection OG type exists.
Blog article: og:type is article. Image from article.image. Add published_time and author.
Static page: og:type is website. Image from page.image or default fallback.
Key Liquid variables: {{ shop.name }} for store name, {{ canonical_url }} for page URL, {{ page_title }} for title, {{ page_description }} for meta description, {{ page_image }} for featured image, {{ product.featured_image | image_url: width: 1200 }} for product image at 1200px.
FAQ
Most Shopify themes include OG tags by default, but the coverage varies. Dawn and other modern themes output comprehensive tags including og:title, og:description, og:image, og:url, og:type, and twitter:card. Older or heavily customized themes may be missing some tags. Always check your page source to verify.
Duplicate tags usually come from having both a theme snippet and a Shopify app outputting OG tags. Check your page source for duplicate og:title or og:image entries. Either remove the app or delete the theme's built-in social meta tags snippet (usually in snippets/social-meta-tags.liquid). Do not run both.
Yes. By default, Shopify uses the product's featured image as og:image. You can change this by using metafields to store a custom OG image per product and referencing the metafield in your theme's Liquid template. Create a metafield with namespace custom and key og_image, then reference it as {{ product.metafields.custom.og_image | image_url: width: 1200 }}.
Your product image is likely square (1:1 ratio). Facebook uses a large card layout only for images that meet the minimum width for the landscape format (600 x 315 pixels at 1.91:1). Square images get displayed as small thumbnails. Use the crop parameter in the image_url filter to serve a cropped landscape version, or upload a separate OG image.
Yes. Blog articles on Shopify are frequently shared on social media. Make sure your theme outputs og:type as article for blog posts, includes article:published_time, and uses the article's featured image. Most modern themes handle this automatically.