Optimization Guide

Shopify Open Graph Meta Tags for AI Agents: OG Protocol & Social Metadata

Q: Do AI shopping agents read Open Graph meta tags?

Yes. AI shopping agents and LLM crawlers (GPTBot, PerplexityBot, Google-Extended, ClaudeBot) all parse HTML head meta tags during page fetch, including Open Graph (og:) tags. Many crawlers use og: tags as a fast, reliable fallback when JSON-LD is absent or malformed. og:title, og:description, og:image, og:price:amount, og:availability, and og:type product all contribute to the AI agent's product understanding — especially for scrapers that parse social meta before structured data.

Q: What Open Graph tags does Shopify output by default on product pages?

Shopify's Dawn and most modern themes output: og:title (product title), og:description (product description), og:type (set to 'product'), og:url (canonical product URL), og:image (first product image), og:site_name (store name). Most themes do NOT output: og:price:amount, og:price:currency, og:availability, or product:retailer_item_id (the product SKU). These missing tags are the biggest Open Graph gap for AI agent product recognition.

Q: How do I add og:price:amount and og:availability to Shopify product pages?

Edit your theme's product template (product.liquid or the head section of the layout). Add: , , . The 'product:' namespace is the Open Graph Commerce extension used by Facebook, Pinterest, and AI crawlers parsing social commerce signals.

Q: Does og:image quality affect AI shopping agent product discovery?

Yes. AI agents that use multimodal processing (including ChatGPT and Google Gemini-powered shopping) fetch og:image to visually verify product identity and surface visual search results. Shopify's default og:image uses the first product image without size optimization. Recommended: use a 1200×630px primary product image on a clean or white background. Set og:image:width and og:image:height meta tags so crawlers don't have to fetch the image to get its dimensions. Avoid lifestyle-only images as og:image — the primary product shot converts better in AI-generated product cards.

AI crawlers parse your HTML <head> top-to-bottom. Open Graph tags — og:title, og:price:amount, og:availability — are often processed before JSON-LD and serve as a fast, reliable fallback when structured data is missing or malformed. Shopify themes skip the most important ones by default.

TL;DR Shopify outputs og:title, og:description, og:image, and og:type on product pages. Missing by default: product:price:amount, product:price:currency, product:availability, and product:retailer_item_id. Add these four tags to your theme's product template. Also add Twitter Card tags (twitter:card, twitter:title, twitter:image) as a secondary AI-crawler signal layer.

Why Open Graph Matters for AI Agent Product Discovery

The Open Graph Protocol (OGP) was designed for social sharing but has become a de-facto product metadata standard across the web. Facebook's commerce extensions added product:price:amount, product:availability, and product:condition — and AI shopping crawlers adopted these same tags because they are simple, reliable, and universally present on commerce pages.

LLM crawlers (GPTBot for ChatGPT, PerplexityBot, Google-Extended, ClaudeBot) all fetch HTML including the full <head>. When these crawlers index product pages, they extract:

JSON-LD structured data (highest specificity)
Open Graph meta tags (fast fallback, high reliability)
Microdata (infrequent on modern Shopify themes)
Body text parsing (lowest confidence)

If your JSON-LD is present, OG tags reinforce it. If JSON-LD is malformed or missing for a template variant, OG tags provide the safety net that keeps the product in the AI agent's index.

Shopify's Default OG Output vs. What AI Agents Need

OG Tag	Shopify default	AI agent value
`og:type`	✅ "product"	Signals this is a purchasable item, not an article
`og:title`	✅ product.title	Primary product name for AI indexing
`og:description`	✅ product description (truncated)	Short description for AI product cards
`og:image`	✅ first product image	Visual product identity; used in multimodal AI results
`og:url`	✅ canonical product URL	Deduplication across crawl visits
`og:site_name`	✅ store name	Brand attribution in AI citations
`product:price:amount`	❌ missing on most themes	Price signal for budget-filter queries
`product:price:currency`	❌ missing on most themes	Multi-currency store disambiguation
`product:availability`	❌ missing on most themes	Stock filter — AI agents exclude OOS products from "buy now" queries
`product:retailer_item_id`	❌ missing	Product identity across channels (Google Merchant, Meta Catalog)
`og:image:width` / `og:image:height`	❌ missing	Prevents crawlers fetching image just to get dimensions

Implementation: Adding Missing OG Tags to Shopify

Edit your theme's snippets/ directory or layout/theme.liquid. Locate the existing OG block (search for og:type) and add the missing tags immediately after.

Complete product page OG block

{% if template == 'product' %}
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title | escape }}">
  <meta property="og:description" content="{{ product.description | strip_html | truncatewords: 50 | escape }}">
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:image" content="{{ product.featured_image | image_url: width: 1200 }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="{{ shop.name | escape }}">

  <!-- Open Graph Commerce extension — critical for AI agent price filtering -->
  <meta property="product:price:amount" content="{{ product.price | money_without_currency }}">
  <meta property="product:price:currency" content="{{ cart.currency.iso_code }}">
  <meta property="product:availability" content="{% if product.available %}instock{% else %}oos{% endif %}">
  <meta property="product:condition" content="new">
  <meta property="product:retailer_item_id" content="{{ product.variants.first.sku }}">
  <meta property="product:brand" content="{{ product.vendor | escape }}">

  <!-- Twitter Card tags -->
  <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 | truncatewords: 30 | escape }}">
  <meta name="twitter:image" content="{{ product.featured_image | image_url: width: 1200 }}">
{% endif %}

Handling sale prices

{% if product.compare_at_price > product.price %}
  <!-- Show compare-at as original, current price as sale -->
  <meta property="product:price:amount" content="{{ product.price | money_without_currency }}">
  <meta property="product:original_price:amount" content="{{ product.compare_at_price | money_without_currency }}">
{% else %}
  <meta property="product:price:amount" content="{{ product.price | money_without_currency }}">
{% endif %}

Handling variant selection

When a user lands on a product page with a variant pre-selected (e.g. ?variant=123456), the price and availability may differ from the default. Use JavaScript to update OG tags dynamically via history.replaceState when variants change — or use Shopify's section rendering API to reload the head metadata with the correct variant context:

// Update og:price:amount when variant changes
document.addEventListener('variant-change', (event) => {
  const variant = event.detail.variant;
  if (variant) {
    document.querySelector('[property="product:price:amount"]')
      ?.setAttribute('content', (variant.price / 100).toFixed(2));
    document.querySelector('[property="product:availability"]')
      ?.setAttribute('content', variant.available ? 'instock' : 'oos');
  }
});

Note: AI crawlers fetch static HTML — dynamic OG updates via JavaScript are not seen by server-side crawlers. The initial page load values are what get indexed. Make sure the default variant (first variant, or the variant most likely to be linked to) has correct price and availability in the initial server-rendered HTML.

OG Image Best Practices for AI Product Cards

AI shopping agents that generate product cards (Google AI Mode product panels, ChatGPT Shopping) pull the og:image as the primary product thumbnail. Image quality directly affects click-through in AI-generated results.

Dimensions: 1200×630px (1.91:1 ratio) is the OG standard; 1:1 square (800×800px) works better for product shots that will be cropped
Background: White or very light background on the product image wins in AI shopping panels — it matches marketplace presentation norms
No overlay text: AI crawlers flag images with large text overlays as lower-quality product images
Separate from lifestyle images: Use a dedicated clean-background product shot for og:image, keep lifestyle images for carousel
HTTPS only: All crawlers reject non-HTTPS image URLs

OG Tags on Collection and Blog Pages

OG metadata matters beyond product pages:

Page type	og:type to use	Key tags
Collection page	`website`	og:title (collection name), og:description (collection description), og:image (collection featured image or best-selling product image)
Blog post	`article`	og:title, og:description, og:image, article:published_time, article:author, article:section (blog handle)
Homepage	`website`	og:title (store name + tagline), og:description, og:image (brand hero image)

Blog post article tags

{% if template == 'article' %}
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%S%z' }}">
  <meta property="article:modified_time" content="{{ article.updated_at | date: '%Y-%m-%dT%H:%M:%S%z' }}">
  <meta property="article:author" content="{{ article.author }}">
  <meta property="article:section" content="{{ blog.title | escape }}">
  {% for tag in article.tags %}
    <meta property="article:tag" content="{{ tag | escape }}">
  {% endfor %}
{% endif %}

Validating Your OG Tags

Facebook Sharing Debugger — developers.facebook.com/tools/debug — the canonical OG validator; shows what crawlers see and caches them
LinkedIn Post Inspector — linkedin.com/post-inspector — validates OG including commerce extensions
Twitter Card Validator — cards-dev.twitter.com/validator — confirms twitter: tags render correctly
CatalogScan scan — checks for og:type product, product:price:amount, and product:availability as part of its 18-signal AI readiness audit

CatalogScan Checks for Open Graph Coverage

CatalogScan's AI Readiness scan audits Open Graph completeness as part of its 18-signal scoring. It checks for og:type product, presence of product:price:amount, product:availability, and a valid og:image with non-zero dimensions. Stores missing product:price:amount lose visibility in price-filtered AI queries — one of the highest-frequency query patterns in AI shopping (e.g. "best [product] under $50").

FAQ

Do AI shopping agents read Open Graph meta tags?

Yes. GPTBot, PerplexityBot, Google-Extended, and ClaudeBot all parse HTML head meta including OG tags. They use og: tags as a fast, reliable fallback when JSON-LD is absent or malformed — og:title, og:price:amount, og:availability, og:type all contribute to AI product understanding.

What Open Graph tags does Shopify output by default on product pages?

Shopify themes output og:title, og:description, og:type, og:url, og:image, og:site_name. Missing by default: product:price:amount, product:price:currency, product:availability, and product:retailer_item_id — the tags most relevant to AI shopping agent price and stock filtering.

How do I add og:price:amount and og:availability to Shopify product pages?

Edit your theme's product template. Add: <meta property="product:price:amount" content="{{ product.price | money_without_currency }}"> and <meta property="product:availability" content="{% if product.available %}instock{% else %}oos{% endif %}">. These go in the <head> section inside a {% if template == 'product' %} block.

Does og:image quality affect AI shopping agent product discovery?

Yes. AI agents that generate product cards fetch og:image. Use a 1200×630px clean-background product shot. Include og:image:width and og:image:height so crawlers don't need to fetch the image just to get dimensions. Avoid lifestyle-only images as og:image.

What is Twitter Card markup and does it help with AI agent visibility?

Twitter Card meta tags (twitter:card, twitter:title, twitter:description, twitter:image) are read by X crawlers and several AI crawlers as supplementary product metadata. Use twitter:card="summary_large_image" on product pages. Implementation cost is 4 meta tags; overlap with AI indexing makes it worth adding.