Skip to content

Instantly share code, notes, and snippets.

@joe-dempsey
Created September 12, 2018 13:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save joe-dempsey/a3e18282c907f69d0d70efffe95ed31b to your computer and use it in GitHub Desktop.
Save joe-dempsey/a3e18282c907f69d0d70efffe95ed31b to your computer and use it in GitHub Desktop.
social meta shopify example
{%- assign og_title = page_title -%}
{%- assign og_url = canonical_url -%}
{%- assign og_type = 'website' -%}
{%- assign og_description = page_description | default: shop.description | default: shop.name -%}
{% comment %}
Template specific overides
{% endcomment %}
{%- if template.name == 'product' -%}
{%- assign og_title = product.title | strip_html -%}
{%- assign og_type = 'product' -%}
{%- capture og_image_tags -%}
{%- for image in product.images limit: 3 -%}
<meta property="og:image" content="http:{{ image.src | product_img_url: '1024x1024' }}">
{%- endfor -%}
{%- endcapture -%}
{%- capture og_image_secure_url_tags -%}
{%- for image in product.images limit: 3 -%}
<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: '1024x1024' }}">
{%- endfor -%}
{%- endcapture -%}
{%- capture twitter_image -%}
<meta name="twitter:image" content="https:{{ product | img_url: '600x600' }}">
<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="600">
{%- endcapture -%}
{%- elsif template.name == 'article' -%}
{%- assign og_title = article.title | strip_html -%}
{%- assign og_type = 'article' -%}
{%- assign og_description = article.excerpt_or_content | strip_html -%}
{%- if article.image -%}
{%- capture og_image_tags -%}
<meta property="og:image" content="http:{{ article.image | img_url: '1024x1024' }}">
{%- endcapture -%}
{%- capture og_image_secure_url_tags -%}
<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1024x1024' }}">
{%- endcapture -%}
{%- capture twitter_image -%}
<meta property="twitter:image" content="https:{{ article.image | img_url: '1024x1024' }}">
{%- endcapture -%}
{%- endif -%}
{%- elsif template.name == 'password' -%}
{%- assign og_title = shop.name -%}
{%- assign og_url = shop.url -%}
{%- assign og_description = shop.description | default: shop.name -%}
{%- endif -%}
<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description }}">
{%- if template.name == 'product' -%}
<meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html | replace_first: ',', '' | replace_last: ',', '' | amount_no_decimals }}">
<meta property="og:price:currency" content="{{ shop.currency }}">
{%- endif -%}
{{ og_image_tags }}
{{ og_image_secure_url_tags }}
{% unless settings.social_twitter == blank %}
<meta name="twitter:site" content="@{{ settings.social_twitter | split: 'twitter.com/' | last }}">
{% endunless %}
{% if template.name == 'article' and article.image %}
<meta name="twitter:card" content="summary_large_image">
{% else %}
<meta name="twitter:card" content="summary">
{% endif %}
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">
{{ twitter_image }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment