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

JefferyHus commented May 31, 2017

Thanks

@JasperMeurs

This comment has been minimized.

Copy link

JasperMeurs commented Jun 12, 2017

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

@zawzawzaw

This comment has been minimized.

Copy link

zawzawzaw commented Aug 14, 2017

Thanks!

@RayKoren

This comment has been minimized.

Copy link

RayKoren commented Aug 17, 2017

Thanks!

@dou9las

This comment has been minimized.

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

@bizinbarefeet

This comment has been minimized.

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

@SaintThomasAquinas

This comment has been minimized.

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?

@JavierPiedra

This comment has been minimized.

Copy link

JavierPiedra 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

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

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
Mauro

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.