By default BigCommerce adds some basic meta tags to each page of a store to provide Facebook, Twitter and Pinterest some structured information about the page. For Pinterest it can also include some information about a product.

This article shows you how to add some more advanced meta tags that are supported by Facebook, Twitter and Pinterest. In most cases the meta tags use Open Graph (og) properties which are supported by all the channels.

  • Open Graph url, type, title and site_name on the Home, Category, Brand and Blog post pages.
  • Open Graph description on the Home and Category pages.
  • Open Graph logo on the home page
  • Open Graph image on the Category, Blog post and Brand pages
  • Open Graph author and published_time for Blog posts in a format the channels accept.
  • Product properties for availability, condition, price, currency, retailer_item_id, item_group_id
  • Facebook app_id and page id
  • Twitter card type, site and creator

Switch Off BigCommerces Pinterest Rich Pins

If you add this code you should switch of the built in Pinterest Rich Pins feature as it gets product:price:amount and availability wrong. This solution corrects that.

You can find the setting in Store Setup->Store Settings->Share where you need to expand the “more options” link.

BigCommerce Pinterest Rich Pins option

BigCommerce then adds a pinterest:richpins meta tag set to disabled. Don’t worry, it does not mean anything to Pinterest.

Blog Post Published Date

Open Graph requires dates to be formatted in a certain way (ISO 8601).The code attempts to format a blog post published data as required, however it needs the original date format to be parseable. You control the display date Store Setup->Store Settings->Date & Timezone. One format for Display Date Format that works is “M d, Y”.

BigCommerce Display Date Format setting

The Code

You will need to place the following code into the templates/layout/base.html file of your Stencil theme, somewhere in the <head> section.

<!-- 
Web Site Advantage: Advanced Social Meta Tags [v2.0] 
https://bigcommerce.websiteadvantage.com.au/rich-snippets/articles/advanced-social-meta-tags-for-bigcommerce/
Copyright (C) 2020 Web Site Advantage
-->
{{~!-- Variable Definitions Start --}}

{{!-- Variable Definitions End --}}
{{~#if settings.request.absolute_path '===' '/'}}
<meta property="og:url" content="{{settings.base_url}}{{settings.request.absolute_path}}">
<meta property="og:type" content="website">
<meta property="og:title" content={{{json head.title}}}>
{{~#if (getVar "homepage:og:description")}}<meta property="og:description" content={{#replace "\r\n" (json (ellipsis (sanitize (getVar "homepage:og:description")) 255))}} {{else}}{{{json (ellipsis (sanitize (getVar "homepage:og:description")) 255)}}}{{/replace}}>{{~/if}}
{{~#if settings.store_logo.image}}<meta property="og:image" content="{{getImage settings.store_logo.image}}">{{~/if}}
{{~else if page_type '===' 'category'}}
<meta property="og:url" content="{{category.url}}">
<meta property="og:type" content="website">
<meta property="og:title" content={{{json category.name}}}>
<meta property="og:description" content={{#replace "\r\n" (json (ellipsis (sanitize category.description) 255))}} {{else}}{{{json (ellipsis (sanitize category.description) 255)}}}{{/replace}}>
{{~#if category.image}}<meta property="og:image" content="{{getImage category.image}}">{{~/if}}
{{~else if page_type '===' 'brand'}}
<meta property="og:url" content="{{brand.url}}">
<meta property="og:type" content="website">
<meta property="og:title" content={{{json brand.name}}}>
{{~#if brand.image}}<meta property="og:image" content="{{getImage brand.image}}">{{~/if}}
{{~else if page_type '===' 'blog_post'}}
<meta property="og:url" content="{{blog.post.url}}">
<meta property="og:type" content="article">
<meta property="og:title" content={{{json blog.post.title}}}>
{{~#if blog.post.thumbnail}}<meta property="og:image" content="{{getImage blog.post.thumbnail}}">{{~/if}}
{{~#if blog.post.author}}<meta property="article:author" content={{{json blog.post.author}}}>{{~/if}}
<meta property="article:published_time" content="{{~#if (moment blog.post.date_published format="YYYY-MM-DD") '===' 'Invalid date'}}{{blog.post.date_published}}{{else}}{{moment blog.post.date_published format="YYYY-MM-DD"}}{{~/if}}">
{{~else if page_type '===' 'product'}}
{{~#if product.brand.name}}<meta property="og:brand" content={{{json product.brand.name}}}/>{{~/if}}
<meta property="og:availability" content="{{~#if product.pre_order}}available for order{{~else if product.out_of_stock '===' true}}out of stock{{~else if product.out_of_stock_message}}out of stock{{~else if product.can_purchase '===' false}}out of stock{{~else}}in stock{{~/if}}">
<meta property="product:availability" content="{{~#if product.pre_order}}available for order{{~else if product.out_of_stock '===' true}}out of stock{{~else if product.out_of_stock_message}}out of stock{{~else if product.can_purchase '===' false}}out of stock{{~else}}in stock{{~/if}}">
<meta property="product:condition" content="{{#if product.condition}}{{lowercase product.condition}}{{else}}new{{/if}}">
<meta property="product:price:amount" content="{{~#if product.price.with_tax.value}}{{product.price.with_tax.value}}{{~else}}{{product.price.without_tax.value}}{{~/if}}">
{{~#or product.price.rrp_with_tax.value product.price.rrp_without_tax.value}}<meta property="og:price:standard_amount" content="{{~#if product.price.rrp_with_tax.value}}{{product.price.rrp_with_tax.value}}{{~else}}{{product.price.rrp_without_tax.value}}{{~/if}}">{{~/or}}
<meta property="product:price:currency" content="{{currency_selector.active_currency_code}}">
{{~#if (getVar "product:retailer_item_id")}}<meta property="product:retailer_item_id" content={{{json (getVar "product:retailer_item_id")}}}>{{~/if}}
{{~#if (getVar "product:item_group_id")}}<meta property="product:item_group_id" content={{{json (getVar "product:item_group_id")}}}>{{~/if}}
{{~else}}
<meta property="og:type" content="article" />
{{~/if}}
{{~#if page_type '!==' 'product'}}<meta property="og:site_name" content={{{json settings.store_name}}}>{{~/if}}
{{~#if (getVar "fb:pages")}}<meta property="fb:pages" content="{{getVar "fb:pages"}}"/>{{~/if}}
<meta name="twitter:card" content="summary" />
{{~#if (getVar "twitter:site")}}<meta name="twitter:site" content="{{getVar "twitter:site"}}">{{~/if}}
{{~#if (getVar "twitter:creator")}}<meta name="twitter:creator" content="{{getVar "twitter:creator"}}">{{~/if}}
<!-- Advanced Social Meta Tags - END -->

Available on GitHub

Then you can add extra variables in the Variable Definitions section to enable extra meta tags…

Variables

The code is designed to detect certain variables and add extra meta tags using them. The following section explains each variable and provides example code on how to add them. In each case you want to change the text in red to your own values.

Important: never add a blank variable. It will kill your site. Only add variables when you have content for them.

Here’s an example of adding the variables for my own site:

<!-- 
Web Site Advantage: Advanced Social Meta Tags [v2.0] 
https://bigcommerce.websiteadvantage.com.au/advanced-social-meta-tags-for-bigcommerce/
Copyright (C) 2020 Web Site Advantage
-->
{{~!-- Variable Definitions Start --}}
{{~assignVar "homepage:og:description" "A description of my store"}}
{{~assignVar "twitter:site" "@TagRocket"}}
{{~assignVar "twitter:creator" "@TonyMcCreath"}}
{{~assignVar "fb:pages" "371196801298"}}
{{~#if product.id}}{{~assignVar "product:retailer_item_id" product.id}}{{~/if}}
{{~#if product.id}}{{~assignVar "product:item_group_id" product.id}}{{~/if}}
{{!-- Variable Definitions End --}}

And here are more details on each variable that you can add:

Home Page Description

You can add a short description for the home page by adding this variable in the Variable Definitions section.

{{~assignVar "homepage:og:description" "A description of my store"}}

Twitter Site

This is the Twitter @username for the website which will be added to the Twitter cards footer if someone tweets about the page.

{{~assignVar "twitter:site" "@TagRocket"}}

Twitter Creator

This is the Twitter @username of the person who created the pages content. The author.

{{~assignVar "twitter:creator" "@TonyMcCreath"}}

Facebook Pages

The id for your Facebook page. You can find it in the pages settings. This example is my Web Site Advantage page.

{{~assignVar "fb:pages" "371196801298"}}

Facebook Content ID

If you have a Facebook catalog, this can be set to the same value you use as the Content ID for your products in your catalog. This example assumes you have a product based catalog (not variants) and the Content ID is set to BigCommerces internal product id.

Note we include the if check to make sure we set the variable to a none blank value. If not, it will break pages.

{{~#if product.id}}{{~assignVar "product:retailer_item_id" product.id}}{{~/if}}

Facebook Item Group ID

If you have a Facebook catalog, this can be set to the same value you use as the Item group ID for your products in your catalog. This example assumes the catalogs Item group ID is set to BigCommerces internal product id.

Note we include the if check to make sure we set the variable to a none blank value. If not, it will break pages.

{{~#if product.id}}{{~assignVar "product:item_group_id" product.id}}{{~/if}}