How to Add Open Graph Metadata to a Shopify Product Page

To add Open Graph metadata to a Shopify product page, first check whether your active theme already prints Open Graph tags in the document <head>. Edit that existing metadata snippet if it does; add product-aware tags there if it does not. The essential tags are og:title, og:description, og:url, og:type, and og:image. For a product page, use product-specific values and an absolute, publicly accessible image URL. Shopify’s theme documentation places SEO metadata in the head, and its current Horizon theme includes a reusable snippet that emits Open Graph metadata. Shopify theme SEO documentation · Horizon metadata snippet.

1. Inspect the active theme before editing

1. In Shopify admin, go to Online Store > Themes. Identify the published theme. Duplicate it before changing code so you can restore the original if needed.
2. Open the duplicated theme’s code editor and inspect layout/theme.liquid and snippets that it renders inside <head>. Common names include meta-tags.liquid, social-meta-tags.liquid, or an SEO snippet, but filenames and theme structure vary.
3. Search for og:title, og:description, og:url, og:type, and og:image. Also look for a rendered snippet that contains those tags.
4. If the theme already outputs them, change its existing logic instead of adding a second set. Duplicate tags can make crawlers choose an unexpected title, image, or description.

Shopify’s current Horizon theme uses page_title, page_description, and canonical_url as general metadata inputs, and changes the Open Graph type to product for product pages. That is a useful example, not a promise that every installed theme has the same structure.

2. Add product-aware tags in Liquid

If your theme has no suitable Open Graph tags, add a snippet inside the document head or adapt its existing metadata snippet. The following is a teaching pattern: check the variable names and surrounding logic in your theme, and avoid printing another copy of tags already present.

{%- assign og_title = page_title | default: shop.name -%}
{%- assign og_url = canonical_url | default: request.origin -%}
{%- assign og_type = 'website' -%}
{%- assign og_description = page_description | default: shop.description | default: shop.name -%}
{%- if request.page_type == 'product' -%}
  {%- assign og_title = product.title | strip_html -%}
  {%- assign og_type = 'product' -%}
  {%- assign og_description = product.description | strip_html | strip_newlines | truncate: 200 | default: page_description | default: shop.description | default: shop.name -%}
{%- endif -%}

<meta property="og:url" content="{{ og_url | escape }}">
<meta property="og:title" content="{{ og_title | escape }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description | escape }}">
{%- if page_image -%}
  <meta property="og:image" content="https:{{ page_image | image_url }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}

This uses Shopify Liquid objects and filters. In your rendered source, confirm the image URL starts with https:// and loads without a login. If your theme already builds a complete image URL, preserve its established method rather than adding a second protocol. The Horizon snippet is an example of generating image metadata from page_image; inspect its current output before adapting it.

Choose the product description deliberately

The example uses the product description as the product-page description, stripped of HTML and shortened for a compact preview. You might instead prefer the SEO description entered for the product. Shopify themes differ in how they expose and prioritize those values, so inspect the product editor and theme output. If a dedicated SEO description is available as a theme variable, use it with a product description fallback. Avoid outputting raw HTML in a meta attribute; escape the final value.

Use the right URL and type

canonical_url gives the page’s canonical URL in the theme context. Check that it identifies the intended product URL, especially if visitors reach the product through a collection path or a URL with query parameters. Set og:type to product on product pages; use the theme’s normal value for other page types. Do not hard-code one product URL into a shared theme snippet.

3. Pick the image source and fallback

For a product page, the product’s featured image is generally the page image used for sharing. Shopify documents that its free themes show the featured image for product, collection, and blog pages; its global page_image can supply Open Graph image tags where the theme does not define them. A store-wide social sharing image is a fallback for pages without a featured image, not usually a replacement for a product’s own image. Shopify: Choosing a social media image.

• Set the intended product image as the product’s featured image in the product admin.
• For a general fallback, go to Online Store > Preferences and update the Social sharing image and SEO section.
• Check theme settings for a social sharing image too. Shopify notes that some themes use images configured in theme settings; a Preferences image may not appear if the theme expects its own setting.
• When the rendered tags point to the wrong image, inspect the theme’s code and settings. Shopify documents this priority as theme-code images, then theme-settings images, then the Online Store Preferences fallback.

Include an image only when one is available. An empty og:image URL is worse than omitting the tag. Confirm the final URL is publicly fetchable and corresponds to the expected product image.

4. Check the rendered product page

1. Open the product’s public URL in a browser and view the page source, not only the live DOM inspector. Find the Open Graph tags in the head.
2. Confirm there is one intended value for each tag. Check title, description, canonical URL, type, and image URL; verify special characters render correctly.
3. Open the image URL directly in a private browser window or another unauthenticated context. Confirm it loads successfully.
4. Preview the product URL with a platform inspector, such as Facebook Sharing Debugger or LinkedIn Post Inspector. Shopify lists these along with Twitter’s Card Validator as preview tools.
5. If Facebook shows a former image, use Facebook Sharing Debugger to refresh the saved information for the page. Shopify says Facebook retains image information for a number of days. Other services have their own crawlers and caches, so previews may differ or update on a different schedule.

5. Common problems and fixes

Symptom	Likely cause	What to check
The old image still appears	The social platform has cached its earlier preview.	Refresh the page link with that platform’s supported inspector. For Facebook, use Sharing Debugger. Check the live og:image first.
The store-wide image appears on a product	The product has no usable featured image, or theme code/settings override the expected source.	Check the product’s featured image, theme social image settings, Preferences fallback, and the rendered og:image.
Two different titles or images appear in source	The theme already emits Open Graph tags and a second block was added.	Find all metadata snippets rendered in theme.liquid; update the existing source and remove the duplicate output.
The image tag has a malformed or relative URL	The theme’s image filter or protocol handling differs from the example.	Inspect the rendered value. Ensure it is an absolute HTTPS URL that loads publicly; follow the URL-building convention already used by the theme.
Product tags show on every page	The product logic is not scoped to product pages, or the snippet assumes a product object everywhere.	Guard product-specific assignments with request.page_type == 'product' or the theme’s equivalent.
Description is blank or includes markup	The page has no SEO description, or description HTML is output directly.	Set a deliberate fallback, strip HTML where appropriate, and escape the final attribute value.
Preview tool cannot fetch the page	The URL is not publicly accessible, redirects unexpectedly, or the crawler cannot retrieve the page.	Test the canonical URL without an admin session, check redirects and access restrictions, then retry the inspector.

6. Performance, reliability, and maintenance

Open Graph tags are small server-rendered HTML values; this change does not require client-side JavaScript. Keep the metadata snippet simple and rely on product data already available to the Liquid template. For reliability, make sure fallbacks exist when product descriptions or images are missing, escape text for attributes, and verify the page after theme updates. Theme architectures can change, so re-check the active theme’s head and rendered source after replacing or upgrading it.

There is no separate Shopify charge for these theme tags described in the cited documentation. The practical maintenance cost is the time to make and validate a theme change. You can edit theme code yourself, or seek Shopify Partner help when a theme or metafield setup requires it; Shopify notes that vintage themes or unsupported metafield types may need code changes or Partner assistance. Shopify guidance on connecting metafields to themes.

Or skip the browser setup

If the goal is to inspect a product page’s rendered output or save a screenshot of its social preview, ScreenshotNeo is a website screenshot API and MCP server. It can capture a URL as PNG, JPEG, WebP, or PDF. One GET request is enough; see the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-store.com/products/your-product -o product.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://your-store.com/products/your-product",
    },
    timeout=90,
)
r.raise_for_status()
with open("product.webp", "wb") as image:
    image.write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://your-store.com/products/your-product'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('product.webp', res);

ScreenshotNeo accepts cookie and consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Every feature is on every plan. Sign up for 1,000 free screenshots a month, no card required.

FAQ

Do I need an Open Graph app?

Not for the core metadata when your theme already exposes product data and lets you edit or configure its head markup. First inspect the active theme; the admin’s social image is a fallback setting.

Should every product use a different image?

Use the product’s featured image when that is the image you want shared. A store-wide sharing image is intended as a fallback for pages without their own featured image.

Will every social network show the exact same preview?

No guarantee is implied. Each platform can crawl, cache, and display page metadata differently. Validate the URL with the platform where the link will be shared.

Can I use metafields for custom social copy?

Potentially, if your theme can access and render the relevant metafield. Theme compatibility and supported metafield types vary; check Shopify’s theme guidance or ask a Shopify Partner if the theme needs code work.