Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Facebook Open Graph meta tags for Shopify. Add this as a snippet called "fb-open-graph.liquid" in your theme, and then add {% include 'fb-open-graph' %} to your theme.liquid file.
{% if template contains 'product' %}
<meta property="og:type" content="product">
<meta property="og:title" content="{{ product.title | strip_html | escape }}">
<meta property="og:category" content="{{ product.type }}" />
{% for image in product.images limit:3 %}
<meta property="og:image" content="http:{{ image.src | product_img_url: 'master' }}">
<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'master' }}">
{% endfor %}
<meta property="og:price:amount" content="{{ product.price | money_without_currency | stip_html | escape | remove: ',' }}">
<meta property="og:price:currency" content="{{ shop.currency }}">
<meta property="og:availability" content="{% if product.available %}instock{% else %}oos{% endif %}" />
<meta property="og:description" content="{{ product.description | strip_newlines | strip_html | truncate: 300 | escape }}">
{% elsif template contains 'article' %}
<meta property="og:type" content="article">
<meta property="og:title" content="{{ article.title | strip_html | escape }}">
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}">
<meta property="og:image:secure_url" content="https:{{ src }}">
{% endif %}
{% endif %}
{% else %}
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page_title | escape }}">
{% if settings.logo_use_image %}
<meta property="og:image" content="http:{{ 'logo.png' | asset_url }}">
<meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}">
{% endif %}
{% endif %}
{% if page_description and template != 'product' %}
<meta property="og:description" content="{{ page_description | escape }}">
{% endif %}
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ }}">
Copy link

JefferyHus commented May 31, 2017


Copy link

JasperMeurs commented Jun 12, 2017

Why don't you use the featured image for blog posts?

Copy link

zawzawzaw commented Aug 14, 2017


Copy link

RayKoren commented Aug 17, 2017


Copy link

dou9las commented Nov 18, 2017

I need to specify OG tags for collections, to actually use the collection image instead of defaulting to the website logo file (which throws an error and then selects a random image on page, due to logo file size being smaller than FB minimum image size.) Can anyone assist with the code for this? Would be much appreciated!!! -Doug

Copy link

bizinbarefeet commented Dec 4, 2017

Object at URL 'https://www.XXXXXXXXXXXX' of type 'product' is invalid because the given value '' for property 'og:url' could not be parsed as type 'url'.

Copy link

SaintThomasAquinas commented Feb 8, 2018

Where do I need to put the {% include 'fb-open-graph' %} on theme.liquid page? Does it matter?

Copy link

JavierPiedra commented Sep 4, 2018

Hi!!! Somebody knows why Facebook wouldn't accept the og:price:amount, og:price:currency value?

Copy link

The-Don-Himself commented Oct 1, 2018

Yes @JavierPiedra, it's because this sample has a few errors in it. Please note the correct meta properties from official Facebook documentation

There has never been og:price:amount or og:price:currency

Correct properties are product:original_price:amount and product:original_price:currency. or others listed there (note no 'og:' for product).

Then test it here

Or also Google SERPs validator if you are also interested in Google SEO.

Copy link

maurosls88 commented Feb 3, 2019

hi guys,
i need your help...
i've shopify with default prices without VAT.
i want to show on facebook prices with VAT (+22%) so i've tried to modify this social meta tag:
< meta property="og:price:amount" content="{{ product.price | times: 1.22 | money_without_currency | strip_html }}">
bu it doesn't work...:(((
i don't know how to solve this problem...
please help me guys...
thank you a lot

Copy link

elendee commented Aug 12, 2019

This seems to be a moving target as I've already come across some dead links to documentation.
Currently, I think the gist should be updated from:
og:price:x to product:price:x

Also facebook warns that fb:app_id is required, yet it still works without it (i'm waiting for it from the client)

Copy link

Schnitzelchen commented Feb 20, 2020

hi guys, can you help me? (zero knowledge on coding btw.) I just found out that my Shopify store has no og:image, fb:app_id under my website, so if we try to send the link to our customers in FB, some random images would pop up. my former developer put snippet-fb-open-graph-tags.liquid with all the codes inside, but I do not know exactly how I can specify the image to show in such a link.

thank you in advance!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment