Wednesday, July 20, 2022
HomeMobile MarketingShopify: How To Program Dynamic Theme Titles and Meta Descriptions for search...

Shopify: How To Program Dynamic Theme Titles and Meta Descriptions for search engine optimization utilizing Liquid

In the event you’ve been studying my articles over the previous few months, you’ll discover that I’ve been sharing much more about ecommerce, particularly with regard to Shopify. My agency has been constructing out a extremely personalized and built-in Shopify Plus website for a consumer. Fairly than spending months and tens of hundreds of {dollars} on constructing a theme from scratch, we talked the consumer into permitting us to make use of a well-built and supported theme that was tried and examined. We went with Wokiee, a multipurpose Shopify Theme that has a ton of capabilities.

It nonetheless required months of growth to include the flexibleness we would have liked based mostly on market analysis and our consumer’s suggestions. On the core of the implementation was that Closet52 is a direct-to-consumer ecommerce website the place ladies would be capable to simply purchase clothes on-line.

As a result of Wokiee is a multipurpose theme, one space we’re extremely centered on is search engine marketing. Over time, we consider that natural search would be the lowest price per acquisition and consumers with the best intent to buy. In our analysis, we recognized that girls store for clothes with 5 key resolution influencers:

  • Kinds of clothes
  • Colours of clothes
  • Costs of clothes
  • Free Delivery
  • No-hassle Returns

Titles and meta descriptions are vital at getting your content material listed and displayed correctly. So, after all, we wish a title tag and meta descriptions which have these key components!

  • The title tag in your web page heading is vital to make sure your pages are listed correctly for the searches of relevance.
  • The meta description is displayed in search engine outcome pages (SERPs) that present further info that entices the search consumer to click on by.

The problem is that Shopify usually shares titles and meta descriptions throughout completely different web page templates – dwelling, collections, merchandise, and many others. So, I needed to write some logic to dynamically populate the titles and meta descriptions correctly.

Optimize Your Shopify Web page Title

Shopify’s theme language is liquid and it’s fairly good. I gained’t get into all the particulars of the syntax, however you’ll be able to dynamically generate a web page title fairly simply. One factor you’ve gotten to remember right here is that merchandise have variants … so incorporating variants into your web page title implies that you must loop by the choices and dynamically construct the string when the template is a product template.

Right here’s an instance of a title for a plaid sweater gown.

<title>Plaid Sweater Gown on sale at the moment for $78.00 » Multi Knee-Size » Closet52</title>

And right here’s the code that produces that outcome:

{%- seize seo_title -%}
    {%- if template == "assortment" -%}{{ "Order " }}{%- endif -%}
    {{- page_title -}}
    {%- if template == "assortment" -%}{{ " On-line" }}{%- endif -%}
    {% assign my_separator = " » " %}
    {%- if current_tags -%} be part of: ', ' -%
      {%- if template == 'weblog' -%} 
      {{ " Articles" }} {%- if current_tags -%}{ take away: "&quot;" -}{%- endif -%}
      {%- else -%}
      {{ my_separator }}{ t: tags: meta_tags -}
      {%- endif -%}
    {%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{ t: web page: current_page }{%- endif -%}
    {%- if template == "product" -%}{{ " solely " }}{ cash }{{ my_separator }}{% for product_option in product.options_with_values %}{% if product_option.title == 'Shade' %}{ be part of: ', ' }{% endif %}{% endfor %}{% if product.metafields.my_fields.dress_length != clean %} {{ product.metafields.my_fields.dress_length }}{%- endif -%}{%- endif -%}
    {% if template == "assortment" %}{{ my_separator }}Free Delivery, No-Trouble Returns{% endif %}{{ my_separator }}{{ store.title }}
  {%- endcapture -%}

<title>{ strip_newlines }</title>

The code breaks down like this:

  • Web page Title – incorporate the precise web page title first… whatever the template.
  • Tags – incorporate tags by becoming a member of tags related to a web page.
  • Product Colours – loop by the colour choices and construct a comma-separated string.
  • Metafields – this Shopify occasion has the gown size as a metafield that we want to embrace.
  • Worth – embrace the primary variant’s worth.
  • Store Identify – add the store’s title on the finish of the title.
  • Separator – fairly than repeating the separator, we simply make it a string task and repeat it. That manner, if we resolve to alter that image sooner or later, it’s solely in a single place.

Optimize Your Shopify Web page Meta Description

After we crawled the location, we observed that any theme template web page that was known as was repeating the house web page search engine optimization settings. We wished so as to add a unique meta description relying on whether or not the web page was a house web page, collections web page, or precise product web page.

In the event you’re undecided what your template title is, simply add an HTML be aware in your theme.liquid file and you may view the supply of the web page to establish it.

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

This allowed us to establish all of the templates that used the location’s meta description in order that we may modify the meta description based mostly on the template.

Right here’s the meta description we wish on the above product web page:

<meta title="description" content material="Flip heads on this traditional hunter inexperienced plaid sweater gown. Trendy updates make it a must have: the stand-up neckline, three-quarter sleeves and the proper size. On sale at the moment for $78.00! All the time FREE 2-day delivery and no-hassle returns at Closet52.">

Right here’s that code:

  {%- seize seo_metadesc -%}
  	{%- if page_description -%}
  	  {%- if template == 'list-collections' -%}
  			{ strip }
      {%- else -%}
          { strip } 
          {%- if template == 'weblog' -%}
          {{ " Listed here are our articles" }} {%- if current_tags -%}{ take away: "&quot;" -}{%- endif -%}.
          {%- endif -%}
          {%- if template == 'product' -%}
  			{{ " Solely " }}{ cash }!
  		  {%- endif -%}
      {%- endif -%}   	
  	{%- endif -%}
    {%- if template == 'assortment' -%}
            { strip }
    {%- endif -%}
    {{ " All the time FREE 2-day delivery and no-hassle returns at " }}{ strip }.
  {%- endcapture -%}

<meta title="description" content material="{ strip_newlines }">

The result’s a dynamic, complete set of titles and meta descriptions for any kind of template or the detailed product web page. Transferring ahead, I’ll most definitely refactor the code utilizing case statements and arrange it somewhat higher. However for now, it’s producing a a lot nicer presence in search engine outcome pages.

By the way in which, if you happen to’d like an incredible low cost… we’d love you to check out the location with a 30% off coupon, use code HIGHBRIDGE when testing.

Store For Attire Now

Disclosure: I’m an affiliate for Shopify and Themeforest and I’m utilizing these hyperlinks on this article. Closet52 is a consumer of my agency, Highbridge. In the event you’d like help in creating your ecommerce presence utilizing Shopify, please contact us.

Supply hyperlink



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments