Variable-Length Web Page Titles

Occasionally, page title plus store name exceeds opti­mum length. This simple modifica­tion suppresses the addi­tion of your store name when necessary.

Publish Insights 15 January 2022

Shorten Your Shopify Title Pages

Each page on your website has a main visible H1 heading and an alternate hidden title for search engines. By default they are the same. But for better positioning on search results, the alternate title should be descriptive, unique, and concise.

An ideal length is 50 to 70 characters to avoid truncation. Most Shopify themes automatically append your store name to the the hidden title. So, depending upon the length of your store name, even a 50-character title might exceed the viewable area within search results.

Google offers great recommendations for crafting page titles. Occasionally, the page title plus store name exceeds the optimum length. This simple modification suppresses the addition of your store name when necessary.

Roll Up Your Sleeves

Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid.

Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.

Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.

Now, access the Liquid programming code with Actions: Edit code. The modifications will take place within the template called theme.liquid near the top. Locate the opening and closing <title> tags. Compare with code below to make certain you are not removing any additional page naming conditions. If it matches or is just page_title followed by store.name, replace it with the following string.

  {%- assign max-title-length = 70 | minus: shop.name.size | minus: 3 -%}
  <title>{{- page_title -}}
    {% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name or page_title.size > max-title-length %} &ndash; {{ shop.name }}{% endunless %}
  </title>

Incase you’re wondering, current_page is a standard Shopify variable. It returns the number of the page you are on when browsing through paginated content like a list of blog posts or collection of products. The code appends the page number when it isn’t page one. The key parts of the variable are the max-title-length assignment and the code between the unless tags on line 3.