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

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