How to Fix Missing Open Graph Tags on Shopify & WooCommerce

errorThe Problem

Your page is missing Open Graph (OG) meta tags — the HTML tags that control how your page looks when shared on Facebook, Twitter, LinkedIn, and other social platforms. Without them, social platforms show a random image, wrong title, or broken preview when someone shares your product.

trending_upWhy It Matters for SEO

Social sharing is free marketing. When a customer shares your product on Facebook or Pinterest, a rich preview with the product image, title, and price gets significantly more clicks than a broken or generic preview. OG tags also help messaging apps like iMessage and WhatsApp generate link previews. Missing OG tags means your shared links look unprofessional and get fewer clicks.

buildHow to Fix It

1
Most modern Shopify themes include OG tags by default. Check by viewing page source and searching for 'og:title'.
2
If OG tags are missing, go to Online Store → Themes → Edit Code.
3
Open layout/theme.liquid and find the <head> section.
4
Add the OG meta tags code below before the closing </head> tag.
5
Save and test by sharing a product URL on Facebook's Sharing Debugger (developers.facebook.com/tools/debug/).
6
For Twitter Cards, also add Twitter meta tags (twitter:card, twitter:title, etc.).

folderlayout/theme.liquid

{%- comment -%} Open Graph tags — add to theme.liquid <head> {%- 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="https:{{ product.featured_image | image_url: width: 1200 }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="628">
  <meta property="product:price:amount" content="{{ product.price | money_without_currency }}">
  <meta property="product:price:currency" content="{{ cart.currency.iso_code }}">
{%- 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="https:{{ page_image | image_url: width: 1200 }}">
  {%- endif -%}
{%- endif -%}

menu_bookRead Google's official documentationopen_in_new

Related Fix Guides

build

How to Fix Missing Meta Descriptions on Shopify & WooCommerce

Fix missing meta descriptions on your Shopify or WooCommerce store. Learn how to write compelling descriptions that boost click-through rates from Google.

build

How to Fix Missing Canonical Tags on Shopify & WooCommerce

Fix missing canonical tags on your Shopify or WooCommerce store. Copy-paste code included. Prevent duplicate content from tanking your SEO rankings.

build

How to Fix Missing Image Alt Text on Shopify & WooCommerce

Fix missing image alt text on your ecommerce store. Boost Google Image search traffic and accessibility with proper alt attributes on product images.

Want to check if YOUR store has this issue?

Scan your site for free — get copy-paste fixes in 60 seconds.

searchScan Now — It's Free