Skip to content

Instantly share code, notes, and snippets.

@chrisjhoughton
Last active September 9, 2023 07:52
Show Gist options
  • Star 44 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save chrisjhoughton/e970e5259f2636606afb to your computer and use it in GitHub Desktop.
Save chrisjhoughton/e970e5259f2636606afb to your computer and use it in GitHub Desktop.
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 }}">
@Schnitzelchen
Copy link

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