Open Graph Headers for Shopify

The process is:

  • Create theme settings for open graph image
  • Create your image (1200x630px) and upload it to new theme settings
  • Create or replace the ‘social-meta-tags.liquid’ snippet

Theme settings

Add this to settings_schema.json, click customise theme and upload your image

  {
    "name": "Open Graph image",
    "settings": [
      {
        "type": "header",
        "content": "Open graph"
      },
      {
        "type": "checkbox",
        "id": "opengraph_enable",
        "label": "Use custom image?"
      },
      {
        "type": "image",
        "id": "opengraph.png",
        "label": "Image",
        "info": "1200 x 630 ",
        "max-width": 1200,
        "max-height": 630
      }
    ]
  },

Social Meta Tags Snippet

Create or replace the ‘social-meta-tags.liquid‘ snippet. Include the snippet in the HTML head.

This has been modified to include the open graph image (from settings above) and a fall back for articles that do not have a featured image, but contain an image in the content field.

<!-- /snippets/social-meta-tags.liquid -->
{% comment %}
  Add Facebook and Pinterest Open Graph meta tags to product pages
  for friendly Facebook sharing and Pinterest pinning.

  More info Open Graph meta tags
    - https://developers.facebook.com/docs/opengraph/using-objects/
    - https://developers.pinterest.com/rich_pins/

  Use the Facebook Open Graph Debugger for validation (and cache clearing)
    - http://developers.facebook.com/tools/debug

  Validate your Pinterest rich pins
    - https://developers.pinterest.com/rich_pins/validator/
{% endcomment %}
{% if template contains 'product' %}
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title | strip_html | escape }}">
  {% for image in product.images limit:3 %}
  <meta property="og:image" content="https:{{ image.src | img_url: 'grande' }}">
  <meta property="og:image:secure_url" content="https:{{ image.src | img_url: 'grande' }}">
  {% endfor %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html | escape }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{% 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.image %}
    <meta property="og:image" content="http:{{ article | img_url: 'medium ' }}">
    <meta property="og:image:secure_url" content="https:{{ article | img_url: 'medium ' }}">
  {% elsif 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="https:{{ src }}">
  <meta property="og:image:secure_url" content="https:{{ src }}">
    {% endif %}
  {% endif %}
{% elsif template == 'password' %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ shop.name }}">
  <meta property="og:url" content="{{ shop.url }}">
  {% if settings.opengraph_enable %}
  <meta property="og:image" content="https:{{ 'opengraph.png' | asset_url }}">
  <meta property="og:image:secure_url" content="https:{{ 'opengraph.png' | asset_url }}">
  {% endif %}
{% else %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title | escape }}">
  {% if settings.opengraph_enable %}
  <meta property="og:image" content="https:{{ 'opengraph.png' | asset_url }}">
  <meta property="og:image:secure_url" content="https:{{ 'opengraph.png' | asset_url }}">
  {% endif %}
{% endif %}
{% if page_description %}
  <meta property="og:description" content="{{ page_description | escape }}">
{% endif %}
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:site_name" content="{{ shop.name }}">

{% comment %}
  This snippet renders meta data needed to create a Twitter card
  for products and articles.

  Your cards must be approved by Twitter to be activated
    - https://dev.twitter.com/docs/cards/validation/validator

  More information:
   - https://dev.twitter.com/docs/cards/types/product-card
   - https://dev.twitter.com/docs/cards/types/summary-card
{% endcomment %}

{% comment %}
  Twitter user name of the site, based on theme settings
{% endcomment %}
{% if settings.twittercard_handle != blank %}
  <meta name="twitter:site" content="{{ settings.twittercard_handle }}">
{% endif %}
{% if template contains 'product' %}
  <meta name="twitter:card" content="product">
  <meta name="twitter:title" content="{{ product.title }}">
  <meta name="twitter:description" content="{{ product.description | strip_html | truncatewords: 140, '' | escape }}">
  <meta name="twitter:image" content="https:{{ product.featured_image.src | img_url: 'medium' }}">
  <meta name="twitter:image:width" content="240">
  <meta name="twitter:image:height" content="240">
  <meta name="twitter:label1" content="Price">
  {% assign price = product.price | money_with_currency | strip_html | escape %}
  <meta name="twitter:data1" content="{% if product.price_varies %}{{ 'products.general.from_text_html' | t: price: price }}{% else %}{{ price }}{% endif %}">
  {% if product.vendor != blank %}
  <meta name="twitter:label2" content="Brand">
  <meta name="twitter:data2" content="{{ product.vendor | escape }}">
  {% else %}
  <meta name="twitter:label2" content="Availability">
  <meta name="twitter:data2" content="In stock">
  {% endif %}
{% elsif template contains 'article' %}
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="{{ article.title }}">
  <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 140, '' | escape }}">
  {% comment %}
    Check if content contains an image to add to the card
      - Source: http://blog.viralica.com/2013/09/twitter-product-cards-on-shopify/
  {% endcomment %}
  {% if article.content contains "<img" %}
    {% assign src = article.content | split: 'src="' %}
    {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' %}
    {% if src %}
  <meta property="twitter:image" content="{{ src }}">
    {% endif %}
  {% endif %}
{% endif %}