Open Graph for eCommerce: og:product Tags, Price, and Availability

How to add og:type=product with og:price:amount, og:price:currency, og:availability, and product-specific OG tags for Shopify, WooCommerce, and custom shops.

OG tags for product pages

When shoppers share your product pages on social media or in messages, the link preview is often the deciding factor for whether their friends click through. A well-configured OG setup shows a clean product photo, the product name, and optionally the price — turning every share into a mini advertisement.

The Open Graph protocol defines an og:type=product object type with additional properties in the product: namespace. These were introduced by Facebook for product catalogs but are now also used by Pinterest and other platforms.

Complete product OG tag example

<head>
  <!-- Base OG tags (required) -->
  <meta property="og:type"        content="product" />
  <meta property="og:title"       content="Classic White Sneakers — Size 10" />
  <meta property="og:description" content="Timeless white leather sneakers with memory foam insole. Free shipping over $50." />
  <meta property="og:image"       content="https://store.example.com/images/og/classic-white-sneakers.jpg" />
  <meta property="og:url"         content="https://store.example.com/products/classic-white-sneakers" />
  <meta property="og:site_name"   content="Your Store" />

  <!-- Product-specific OG properties -->
  <meta property="product:price:amount"   content="89.99" />
  <meta property="product:price:currency" content="USD" />
  <meta property="product:availability"   content="in stock" />
  <meta property="product:condition"      content="new" />
  <meta property="product:retailer_item_id" content="SKU-12345" />
  <meta property="product:brand"          content="Your Brand" />
  <meta property="product:category"       content="Footwear > Sneakers" />

  <!-- Twitter Card -->
  <meta name="twitter:card"        content="summary_large_image" />
  <meta name="twitter:title"       content="Classic White Sneakers — $89.99" />
  <meta name="twitter:description" content="Timeless white leather sneakers. Free shipping over $50." />
  <meta name="twitter:image"       content="https://store.example.com/images/og/classic-white-sneakers.jpg" />
</head>

product:availability values

The product:availability property accepts these standard values:

<!-- In stock and ready to ship -->
<meta property="product:availability" content="in stock" />

<!-- Out of stock -->
<meta property="product:availability" content="out of stock" />

<!-- Available for preorder -->
<meta property="product:availability" content="preorder" />

<!-- Discontinued, no longer available -->
<meta property="product:availability" content="discontinued" />

<!-- Available, but pending (custom/made to order) -->
<meta property="product:availability" content="available for order" />

Shopify: adding product OG tags

Shopify automatically generates basic OG tags for product pages. To add price and availability, edit your theme's snippets/seo.liquid or the relevant section:

{%- if template contains 'product' -%}
  <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:image"   content="https:{{ product.featured_image | img_url: '1200x630', crop: 'center' }}" />
  <meta property="og:url"     content="{{ canonical_url }}" />

  {%- assign variant = product.selected_or_first_available_variant -%}
  <meta property="product:price:amount"   content="{{ variant.price | money_without_currency | remove: ',' }}" />
  <meta property="product:price:currency" content="{{ cart.currency.iso_code }}" />

  {%- if variant.available -%}
    <meta property="product:availability" content="in stock" />
  {%- else -%}
    <meta property="product:availability" content="out of stock" />
  {%- endif -%}

  <meta property="product:condition" content="new" />
  <meta property="product:retailer_item_id" content="{{ variant.sku | escape }}" />
{%- endif -%}

WooCommerce: adding product OG tags

Yoast SEO for WooCommerce adds basic OG tags automatically. For product price and availability, add a custom filter to your theme's functions.php:

// functions.php
add_action('wp_head', function() {
  if (!is_product()) return;

  global $product;
  if (!$product instanceof WC_Product) {
    $product = wc_get_product(get_the_ID());
  }

  // Get price (use sale price if on sale)
  $price = $product->is_on_sale()
    ? wc_get_price_to_display($product, ['price' => $product->get_sale_price()])
    : wc_get_price_to_display($product);

  $currency = get_woocommerce_currency();
  $in_stock = $product->is_in_stock();

  echo '<meta property="og:type" content="product">' . "\n";
  echo '<meta property="product:price:amount"   content="' . esc_attr(number_format($price, 2, '.', '')) . '">' . "\n";
  echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '">' . "\n";
  echo '<meta property="product:availability"   content="' . ($in_stock ? 'in stock' : 'out of stock') . '">' . "\n";
  echo '<meta property="product:condition"      content="new">' . "\n";
  echo '<meta property="product:retailer_item_id" content="' . esc_attr($product->get_sku()) . '">' . "\n";
}, 20); // priority 20 to run after Yoast

Custom shop with Next.js

// app/products/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const product = await getProduct(params.slug);
  const price = product.salePrice ?? product.price;

  return {
    title: `${product.name} — $${price}`,
    description: product.description.slice(0, 200),
    openGraph: {
      title: product.name,
      description: product.description.slice(0, 200),
      type: 'website', // Next.js doesn't have 'product' type; use other tags below
      url: `https://store.example.com/products/${product.slug}`,
      images: [{
        url: product.ogImage ?? product.mainImage,
        width: 1200,
        height: 630,
        alt: product.name,
      }],
    },
    other: {
      // Add product: properties not covered by Next.js Metadata API
      'product:price:amount':   price.toFixed(2),
      'product:price:currency': 'USD',
      'product:availability':   product.inStock ? 'in stock' : 'out of stock',
      'product:condition':      'new',
      'product:retailer_item_id': product.sku,
      'product:brand':          product.brand,
    },
  };
}

OG image best practices for products

  • Use the product against a white or brand-color background — it renders better across platforms than lifestyle photography.
  • Include the product name and price in the image — some platforms (iMessage, WhatsApp) show limited text metadata.
  • 1200×630 px at 2:1 ratio for Twitter summary_large_image. Use 1200×1200 px for platforms that show square crops (Pinterest, Instagram stories).
  • Keep file size under 1 MB — optimize with Sharp or Squoosh; crawlers may time out fetching large images.
  • Update og:image when variants change — use query params like?color=red to serve variant-specific images.

Test your OG tags free

Paste any URL into OGFixer to see exactly how your link previews look on Twitter, LinkedIn, Discord, and Slack.

Related Guides