CODE

Variable‑Length Web Page Titles

ESTIMATE 2-MINUTE READ

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.

Trim Shopify Titles

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.

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.

Code samples include hidden formatting characters that might interfere with operation. You may need to paste into a text editor and reveal invisibles before pasting into Shopify theme. Replace non-breaking spaces (&nbsp;) with regular space. Remove HTML line breaks (<br />). You may also need to replace HTML less-than (&lt;) and greater-than (&gt;) with actual characters.

Are you interested in more tips like this? Please indicate so within the comment field.

Join Discussion