Social meta tags will help customers connect to your business account. In fact, social meta tag appearances on almost stores. As result, this article will help you to embed social meta tags on Shopify store.
Step By Step
Step 1: Log into Shopify Admin. Go to Online Store -> Themes and select Actions -> Edit Code
Step 2: Edit file theme.liquid in the Layout folder and paste the following code before the </head> tag.
{% assign current_url = '' %}
{% case template %}
{% when 'page' %}
{% assign current_url = page.url %}
{% when 'blog' %}
{% assign current_url = blog.url %}
{% when 'article' %}
{% assign current_url = blog.url %}
{% when 'collection' %}
{% assign current_url = collection.url %}
{% when 'product' %}
{% assign current_url = product.url %}
{% endcase %}
<!-- End Find Current URL -->
<!-- Facebook Open Graph -->
{% if template contains 'product' %}
{% 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 %}
{% endif %}
<meta property="og:url" content="{{ shop.url }}{{ current_url }}" />
{% if template contains 'product' %}
<meta property="og:description" content="{{ product.description | strip_newlines | strip_html | truncate: 300 | escape }}">
{% elsif template contains 'collection' %}
<meta name="og:description" content="{{ collection.description | strip_html | strip_newlines | escape }}" />
{% elsif template contains 'page' %}
<meta name="og:description" content="{{ page.content | strip_html | strip_newlines | escape }}" />
{% elsif template == 'index' %}
<meta name="og:description" content="{{ shop.description | strip_html | strip_newlines | escape}}" />
{% endif %}
{% if template contains 'product' %}
<meta name="og:type" content="product" />
<meta property="og:title" content="{{ product.title | strip_html | escape }}">
<meta property="og:category" content="{{ product.type }}" />
<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 %}" />
{% else %}
<meta name="og:type" content="website" />
<meta property="og:title" content="{{ page_title }}" />
{% endif %}Step 3. Click Save and refresh page cache by using Facebook developer tool:
https://developers.facebook.com/tools/debug/