Skip to content

Instantly share code, notes, and snippets.

Embed
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="{{ shop.name }}">
@JefferyHus

This comment has been minimized.

Copy link

commented May 31, 2017

Thanks

@JasperMeurs

This comment has been minimized.

Copy link

commented Jun 12, 2017

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

@zawzawzaw

This comment has been minimized.

Copy link

commented Aug 14, 2017

Thanks!

@RayKoren

This comment has been minimized.

Copy link

commented Aug 17, 2017

Thanks!

@dou9las

This comment has been minimized.

Copy link

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

@bizinbarefeet

This comment has been minimized.

Copy link

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'.

@SaintThomasAquinas

This comment has been minimized.

Copy link

commented Feb 8, 2018

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

@JavierPiedra

This comment has been minimized.

Copy link

commented Sep 4, 2018

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

@The-Don-Himself

This comment has been minimized.

Copy link

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
https://developers.facebook.com/docs/reference/opengraph/object-type/product/

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 https://developers.facebook.com/tools/debug/sharing/

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

@maurosls88

This comment has been minimized.

Copy link

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
Mauro

@elendee

This comment has been minimized.

Copy link

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
https://developers.facebook.com/docs/marketing-api/product-catalog/update-options#microdata-tags

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.