OG
OGProof
Tutorial8 min read

Shopify Open Graph Tags: How to Set Up and Validate OG Tags on Your Store

How Shopify handles Open Graph tags for product pages, collections, and the homepage — with Liquid theme code, app options, and how to validate OG tags on your Shopify store.

When a customer shares a Shopify product link on Twitter, Facebook, LinkedIn, or Discord, the preview card is controlled by Open Graph meta tags. Shopify includes basic OG tag support in its default themes, but the defaults are often incomplete, use wrong image dimensions, or miss the twitter:card tag entirely — meaning shared links display a plain text card with no image instead of a compelling product preview.

How Shopify Handles Open Graph Tags by Default

Most Shopify themes output some Open Graph tags automatically using Liquid variables. Dawn (the default theme since 2021) includes og:title, og:description, og:url, and og:image on product pages. However, the default implementation has gaps:

  • —og:image:width and og:image:height are often missing, causing some crawlers to render incorrectly-sized cards
  • —twitter:card is absent in many themes, so Twitter may show a small square thumbnail instead of a large image card
  • —Collection pages and blog post pages may fall back to the store logo instead of a relevant image
  • —The homepage og:image is typically the store logo rather than a hero product image
TipCheck your current OG tags first. In your Shopify admin, go to Online Store → Themes → Edit Code and search for og:image in your theme.liquid or snippets/head-tag.liquid file to see what your theme already outputs.

OG Tags for Shopify Product Pages

Product pages are the most important pages to get right — they are the most-shared URLs in any Shopify store. The ideal OG implementation for a product page uses the product's featured image, title, and description:

{%- comment -%} In theme.liquid or snippets/head-tag.liquid {%- endcomment -%}

{%- if template.name == 'product' -%}
  {%- assign og_image = product.featured_image | img_url: '1200x630', crop: 'center' -%}
  <meta property="og:type" content="product" />
  <meta property="og:title" content="{{ product.title | escape }}" />
  <meta property="og:description" content="{{ product.description | strip_html | truncate: 200 | escape }}" />
  <meta property="og:url" content="{{ canonical_url }}" />
  <meta property="og:image" content="https:{{ og_image }}" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="{{ product.featured_image.alt | escape }}" />
  <meta property="og:site_name" content="{{ shop.name | escape }}" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="{{ product.title | escape }}" />
  <meta name="twitter:description" content="{{ product.description | strip_html | truncate: 200 | escape }}" />
  <meta name="twitter:image" content="https:{{ og_image }}" />
{%- endif -%}

Two Liquid details to note: Shopify image URLs start with // (protocol-relative), so you must prepend https: to get the absolute HTTPS URL that Twitter and iMessage require. The img_url filter with '1200x630' crops the image to exactly the dimensions crawlers expect.

OG Tags for Shopify Collection Pages

Collection pages often have no specific featured image. Use the collection image if set, falling back to the first product image in the collection:

{%- if template.name == 'collection' -%}
  {%- if collection.image -%}
    {%- assign og_image = collection.image | img_url: '1200x630', crop: 'center' -%}
  {%- elsif collection.products.first.featured_image -%}
    {%- assign og_image = collection.products.first.featured_image | img_url: '1200x630', crop: 'center' -%}
  {%- else -%}
    {%- assign og_image = settings.share_image | img_url: '1200x630', crop: 'center' -%}
  {%- endif -%}
  <meta property="og:type" content="website" />
  <meta property="og:title" content="{{ collection.title | escape }} — {{ shop.name | escape }}" />
  <meta property="og:description" content="{{ collection.description | strip_html | truncate: 200 | escape }}" />
  <meta property="og:url" content="{{ canonical_url }}" />
  <meta property="og:image" content="https:{{ og_image }}" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:site_name" content="{{ shop.name | escape }}" />
  <meta name="twitter:card" content="summary_large_image" />
{%- endif -%}

OG Tags for the Shopify Homepage

The homepage og:image should be a hero image that represents your brand, not the store logo. In Shopify, you can configure a global sharing image in Theme Settings and reference it with settings.share_image:

{%- comment -%} Global fallback — add to the top of your OG tag snippet {%- endcomment -%}
{%- assign og_image = page_image | default: settings.share_image -%}

{%- if og_image -%}
  <meta property="og:image" content="https:{{ og_image | img_url: '1200x630', crop: 'center' }}" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
{%- endif -%}

<meta property="og:title" content="{{ page_title | escape }}" />
<meta property="og:description" content="{{ page_description | escape }}" />
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:site_name" content="{{ shop.name | escape }}" />
<meta name="twitter:card" content="summary_large_image" />

In Shopify admin, upload your share image under Online Store → Preferences → Social sharing image. This sets settings.share_image globally and acts as the fallback OG image for any page that does not have its own image.

OG Tags in Shopify Blog Posts

Shopify has a built-in blogging feature. Blog post OG tags should use the article's featured image and excerpt:

{%- if template.name == 'article' -%}
  {%- if article.image -%}
    {%- assign og_image = article.image | img_url: '1200x630', crop: 'center' -%}
    <meta property="og:image" content="https:{{ og_image }}" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
  {%- endif -%}
  <meta property="og:type" content="article" />
  <meta property="article:published_time" content="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}" />
  <meta property="og:title" content="{{ article.title | escape }}" />
  <meta property="og:description" content="{{ article.excerpt | strip_html | truncate: 200 | escape }}" />
  <meta property="og:url" content="{{ canonical_url }}" />
  <meta name="twitter:card" content="summary_large_image" />
{%- endif -%}

Using a Shopify App for OG Tags

If editing Liquid code is not an option, several Shopify apps manage Open Graph tags through the admin UI:

  • —TinyIMG SEO & Image Optimizer — manages meta tags and OG tags via the admin, no code editing required
  • —SEO Manager — includes Open Graph configuration for all page types
  • —Plug in SEO — checks your OG tags and suggests fixes for common issues
  • —JSON-LD for SEO — focuses on structured data but also manages basic OG tags

The tradeoff with apps: they add JavaScript or Liquid snippets to your theme, which can conflict with existing OG tags from your theme or another app. Always check for duplicate og:title or og:image tags after installing an SEO app.

OG Image Requirements for Shopify

  • —Use 1200×630px — works on Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage. Shopify img_url with dimensions handles the crop automatically.
  • —Always use https: prefix — Shopify image URLs are protocol-relative (//cdn.shopify.com/...). Prepend https: in your Liquid template.
  • —Include og:image:width and og:image:height — prevents platforms from guessing dimensions, which can cause incorrect card sizes.
  • —Set a Social sharing image in Preferences — this is your fallback for any page without a product or article image.
  • —Keep product images at 1:1 in your catalog but generate 1.91:1 versions for OG — use img_url with crop center to reframe square product photos into a 1200×630 crop automatically.

Common Shopify OG Tag Issues

1. Protocol-Relative Image URL (Missing https:)

Shopify CDN image URLs look like //cdn.shopify.com/s/files/... — without the protocol. If you output this directly in og:image, Twitter, iMessage, and Facebook will reject the image (they require absolute HTTPS URLs). Fix: always prepend https: in Liquid:

{%- comment -%} ❌ Wrong — relative protocol {%- endcomment -%}
<meta property="og:image" content="{{ product.featured_image | img_url: '1200x630' }}" />

{%- comment -%} ✅ Correct — absolute HTTPS {%- endcomment -%}
<meta property="og:image" content="https:{{ product.featured_image | img_url: '1200x630', crop: 'center' }}" />

2. Duplicate OG Tags from Theme + App

If your theme already outputs og:title and you install an SEO app that also outputs og:title, the page will contain duplicates. Crawlers usually use the first occurrence — but duplicate tags are a red flag in validation tools and can cause unexpected behavior. View source on your product page and search for og:title to detect duplicates. Remove or disable OG output from whichever source you are not using.

3. Wrong Image Dimensions for Twitter

If you omit the crop parameter or use img_url without specifying dimensions, Shopify returns the original product image at its native size and ratio. Most product photos are square (1:1). When a square image is set in og:image and twitter:card is summary_large_image, Twitter crops it to 2:1 — cutting off the top and bottom. Fix: use img_url: '1200x630', crop: 'center' to get a landscape crop.

4. Missing twitter:card Tag

Many Shopify themes do not include twitter:card. Without it, X (Twitter) may not render a card at all — even if your og:image is correct. Adding the single tag <meta name="twitter:card" content="summary_large_image" /> fixes this and also enables large images in Slack.

How to Edit OG Tags in Shopify

  1. 1.In your Shopify admin, go to Online Store → Themes.
  2. 2.Click the three-dot menu on your active theme and select 'Edit code'.
  3. 3.Find theme.liquid in the Layout folder or look for an existing head-tag snippet.
  4. 4.Search for og:image or og:title to locate any existing OG tag output.
  5. 5.Add or update the Liquid code using the templates above.
  6. 6.Click Save and test on a product page with curl or OGProof to confirm the output.
TipAlways duplicate your theme before editing code. Go to Actions → Duplicate in the Themes page to create a backup. Theme edits can break your store if a Liquid syntax error is introduced.

Validating Shopify OG Tags

After making changes to your Shopify theme, do not test by sharing the link on social media — platforms cache OG data aggressively and may show old data for up to 7 days. Instead, fetch the page server-side to see the raw HTML that crawlers receive:

# Fetch your Shopify product page as Twitterbot
curl -s -A "Twitterbot/1.0" "https://yourstore.myshopify.com/products/your-product" \
  | grep -i '<meta.*og:\|<meta.*twitter:'

# Confirm the image URL starts with https://
curl -s -A "LinkedInBot/1.0" "https://yourstore.myshopify.com/products/your-product" \
  | grep 'og:image'

The og:image value should start with https://cdn.shopify.com/... — if it starts with // it means you forgot to prepend https: in your Liquid template. If og:image is missing entirely, the featured image is not being recognized or the code is in the wrong template file.

OGProof does this automatically for all six platforms at once: paste your Shopify product URL and it fetches server-side with each crawler's user-agent, parses every OG tag, and renders accurate preview cards for Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage. It flags protocol-relative image URLs, missing twitter:card, images below platform minimums, and descriptions that will be truncated.

Shopify OG Tags Checklist

  • —og:title — set to product title (escaped), under 70 characters for Twitter
  • —og:description — product description, truncated to 200 characters, HTML stripped
  • —og:image — absolute https://cdn.shopify.com/... URL, 1200×630px crop
  • —og:image:width and og:image:height — always include (1200 and 630)
  • —og:url — canonical_url Liquid variable
  • —og:type — "product" for product pages, "website" for collections and homepage, "article" for blog posts
  • —og:site_name — shop.name
  • —twitter:card — summary_large_image (add this even if no other twitter: tags present)
  • —Social sharing image — uploaded in Online Store → Preferences as a fallback for pages without images

Validate your OG tags now

Paste any URL and see exactly how it renders on Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage — in seconds.

Try OGProof free →
← All articles