Ecommerce and RetailSearch Marketing

Shopify: How To Program Dynamic Theme Titles and Meta Descriptions for SEO using Liquid

If you’ve been reading my articles over the last few months, you’ll notice that I’ve been sharing a lot more about ecommerce, especially with regard to Shopify. My firm has been building out a highly customized and integrated Shopify Plus site for a client. Rather than spending months and tens of thousands of dollars on building a theme from scratch, we talked the client into allowing us to use a well-built and supported theme that was tried and tested. We went with Wokiee, a multipurpose Shopify Theme that has a ton of capabilities.

It still required months of development to incorporate the flexibility we needed based on market research and our client’s feedback. At the core of the implementation was a fashion manufacturer who wanted to build out a direct-to-consumer e-commerce site where women would be able to easily buy dresses online.

Because Wokiee is a multipurpose theme, one area we’re highly focused on is search engine optimization. Over time, we believe that organic search will be the lowest cost per acquisition and shoppers with the highest intent to purchase. In our research, we identified that women shop for dresses with 5 key decision influencers:

  • Styles of dresses
  • Colors of dresses
  • Prices of dresses
  • Free Shipping
  • No-hassle Returns

Titles and meta descriptions are critical at getting your content indexed and displayed properly. So, of course, we want a title tag and meta descriptions that have those key elements!

  • The title tag in your page heading is critical to ensure your pages are indexed properly for searches of relevance.
  • The meta description is displayed in search engine result pages (SERPs) that provide additional information that entices the search user to click through.

The challenge is that Shopify often shares titles and meta descriptions across different page templates – home, collections, products, etc. So, I had to write some logic to dynamically populate the titles and meta descriptions properly.

Optimize Your Shopify Page Title

Shopify’s theme language is liquid and it’s quite good. I won’t get into all of the details of the syntax, but you can dynamically generate a page title pretty easily. One thing you have to keep in mind here is that products have variants … so incorporating variants into your page title means that you have to loop through the options and dynamically build the string when the template is a product template.

Here’s an example of a title for a plaid sweater dress.

<title>Plaid Sweater Dress on sale today for $78.00 » Multi Knee-Length » Closet52</title>

And here’s the code that produces that result:

{%- capture seo_title -%}
    {%- if template == "collection" -%}{{ "Order " }}{%- endif -%}
    {{- page_title -}}
    {%- if template == "collection" -%}{{ " Online" }}{%- endif -%}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}
      {%- if template == 'blog' -%} 
      {{ " Articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | capitalize | remove: "&quot;" -}}{%- endif -%}
      {%- else -%}
      {{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}
      {%- endif -%}
    {%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " only " }}{{ product.variants[0].price | money }}{{ my_separator }}{% for product_option in product.options_with_values %}{% if product_option.name == 'Color' %}{{ product_option.values | join: ', ' }}{% endif %}{% endfor %}{% if product.metafields.my_fields.dress_length != blank %} {{ product.metafields.my_fields.dress_length }}{%- endif -%}{%- endif -%}
    {% if template == "collection" %}{{ my_separator }}Free Shipping, No-Hassle Returns{% endif %}{{ my_separator }}{{ shop.name }}
  {%- endcapture -%}

<title>{{ seo_title | strip_newlines }}</title>

The code breaks down like this:

  • Page Title – incorporate the actual page title first… regardless of the template.
  • Tags – incorporate tags by joining tags associated with a page.
  • Product Colors – loop through the color options and build a comma-separated string.
  • Metafields – this Shopify instance has the dress length as a metafield that we wish to include.
  • Price – include the first variant’s price.
  • Shop Name – add the shop’s name at the end of the title.
  • Separator – rather than repeating the separator, we just make it a string assignment and repeat it. That way, if we decide to change that symbol in the future, it’s only in one place.

Optimize Your Shopify Page Meta Description

When we crawled the site, we noticed that any theme template page that was called was repeating the home page SEO settings. We wanted to add a different meta description depending on whether the page was a home page, collections page, or the actual product page.

If you’re not sure what your template name is, just add an HTML note in your theme.liquid file and you can view the source of the page to identify it.

<!-- Template: {{ template }} -->

This allowed us to identify all the templates that used the site’s meta description so that we could modify the meta description based on the template.

Here’s the meta description we want on the above product page:

<meta name="description" content="Turn heads in this classic hunter green plaid sweater dress. Modern updates make it a must-have: the stand-up neckline, three-quarter sleeves and the perfect length. On sale today for $78.00! Always FREE 2-day shipping and no-hassle returns at Closet52.">

Here’s that code:

  {%- capture seo_metadesc -%}
  	{%- if page_description -%}
  	  {%- if template == 'list-collections' -%}
  			{{ "Find a beautiful dress for your next occasion. Here are all of our beautiful dress collections." | strip }}
      {%- else -%}
          {{- page_description | strip | escape -}} 
          {%- if template == 'blog' -%}
          {{ " Here are our articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | downcase | remove: "&quot;" -}}{%- endif -%}.
          {%- endif -%}
          {%- if template == 'product' -%}
  			{{ " Only " }}{{ product.variants[0].price | money }}!
  		  {%- endif -%}
      {%- endif -%}   	
  	{%- endif -%}
    {%- if template == 'collection' -%}
            {{ "Find a beautiful dress for your next occasion by color, length, or size." | strip }}
    {%- endif -%}
    {{ " Always FREE 2-day shipping and no-hassle returns at " }}{{ shop.name | strip }}.
  {%- endcapture -%}

<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

The result is a dynamic, comprehensive set of titles and meta descriptions for any type of template or detailed product page. Moving forward, I’ll most likely refactor the code using case statements and organize it a little better. But for now, it’s producing a much nicer presence on search engine result pages.

Disclosure: I’m an affiliate for Shopify and Themeforest and I’m using those links in this article. Closet52 was a client of my firm, DK New Media. If you’d like assistance in developing your e-commerce presence using Shopify, please contact us.

Douglas Karr

Douglas Karr is CMO of OpenINSIGHTS and the founder of the Martech Zone. Douglas has helped dozens of successful MarTech startups, has assisted in the due diligence of over $5 bil in Martech acquisitions and investments, and continues to assist companies in implementing and automating their sales and marketing strategies. Douglas is an internationally recognized digital transformation and MarTech expert and speaker. Douglas is also a published author of a Dummie's guide and a business leadership book.

Related Articles

Back to top button
Close

Adblock Detected

Martech Zone is able to provide you this content at no cost because we monetize our site through ad revenue, affiliate links, and sponsorships. We would appreciate if you would remove your ad blocker as you view our site.