The Ultimate Guide to Shopify SEO (2022)

The rise of Shopify

Shopify has had quite the rise over the last 10 years, outpacing many popular e-commerce CMS platforms. This 10-year Google Trends graph shows the rise and fall of many of these platforms, from Joomla through to Shopify.

Even the mighty WordPress has taken somewhat of a fall in recent years, certainly based on this trend data over the same period.

The rise of Shopify looks to be in large part down to the lack of complexity in the setup of the platform for retailers. Shopify has also aligned its success with the success of its customers by way of the subscription and revenue share business models that are in place.

It’s clear that Shopify is the favourite of many vendors thanks to its ease of use, and for those who are looking to migrate their site to a more user-friendly CMS, Shopify is perfect. However, with everything available to you out of the box, it can be easy for technical SEO to fall by the wayside, which can significantly impact sales. So, it’s vital that you keep your Shopify SEO at the forefront of your mind at each stage.

Tori Atkinson, Lead Digital Strategist at our partner Land Digital, said it best:

“Your website’s existing equity — from inbound links to traffic-driving keyword rankings — is among your online business’s most valuable assets, and it should be protected at all costs. The migration journey understandably presents various risks to this equity if key SEO-focused steps aren’t taken.

“From exhaustive URL redirection (to retain page link equity and keyword ranking positions) to comprehensive page canonicalisation and content migration, a scrupulous approach ensures your website’s many SEO assets are protected in the immediate and the long term.

“With the internal signposting taken care of by Shopify, best-practice on-page SEO (including user-focused metadata, main content and URL optimisation) will help your new Shopify website thrive in organic search and attract users primed to become customers — with your successful SEO migration providing the catalyst for growth.”

Even with your initial SEO practices in place, it’s beneficial to continue to review and refine your techniques, especially as Google brings out new updates. As Anthony McMaster, Sales and Partnership Manager at Alt Labs explains, good SEO can be a continuous process.

“SEO should be a key component of any website migration, including Shopify,” explains Anthony. “Great functioning SEO is a powerful tool for web traffic generation but, like all marketing efforts, it must be diligently maintained in order to reap the most benefits.

“The migration phase can also be a great opportunity to review your strategy. A change of platform can often mean the business is in an exciting new growth phase and could be reaching into new sectors. This means exploring new keywords and content to help your organic traffic as well as your paid SEO efforts.

“Why take the risk of losing SEO efforts? Migrating platform and especially migrating your SEO can be problematic, but it doesn’t have to be, so I would encourage anyone to ensure your data and content is set up properly and built into your project.”

Whether you’re a new Shopify site or you’ve been using the platform a while for a while, you may have found that your site so far doesn’t seem to be attracting the right customers. If so, look no further, because we can tell you how to improve SEO for your Shopify store. In this guide, we’ll help you identify and solve any technical issues that could be impacting your SEO performance. Let’s get started.

The issue

Product URL canonicals

This common SEO issue relates to Shopify including the name of the collection a product is in within a product URL. For example, an out-of-the-box Shopify install for our fictitious brand Glass Digital Homeware (catchy, we know!) might have a product such as this:

https://www.glass-digital-homeware.com/collections/tumblers/products/crystal-150ml-tumbler

If this product is in multiple collections, then there will be multiple variations of the product URL. Let’s say as well as being in the ‘tumblers’ collection, because the product is made from crystal, it is also in the ‘crystal tumblers’ collection. That URL would look like this:

https://www.glass-digital-homeware.com/collections/crystal-tumblers/products/crystal-150ml-tumbler

Same product, two different URLs. This isn’t the issue however as Shopify puts canonical tags on these URLs that point to the actual indexable product URL that Google will rank, which in this example is:

https://www.glass-digital-homeware.com/products/crystal-150-ml-tumbler

Product URL canonicals: Why is this a problem?

Now you might be thinking, Google recommends canonical tags for situations just like this so why is this a problem?

Crawl budget inefficiencies

It’s a reasonable question, however when we look at the nature of a canonical tag we realise that, in order for Google to continue to understand that these URLs have canonical tags pointing elsewhere, it will need to continue to crawl them.

This can end up being a complete waste of crawl budget, or the time Google spends crawling your website every day, especially if you have a large collection and product set. And if you’re wasting crawl budget on unnecessary pages, you’re going to end up with important pages not being indexed.

Let’s say you have 1,200 products with the following split of categorisation:

• 100% of products have 1 collection
• 40% of products have 2 collections
• 10% of products have 3 collections

Without the standard product URL structure, there would simply be 1,200 product URLs that Google would need to crawl on a regular basis, however with this structure, in the above configuration, Google has to crawl …. wait for it….

• 2,880 product URLs to index 1,200 actual product URLs

This is something you can check within Google Search Console to see roughly how much crawl budget is being used up crawling these URLs.

To do this:

1. Log into Search Console, navigate to settings, and open the Crawl Stats report.
   

2. Once in this report select the host with the most crawl activity (this will be your main domain)
   

3. Narrow the crawl stats down further by selecting the File Type “HTML”
   

4. Export these results
   

5. In Excel navigate to the “Table” tab and filter the URL column to contain both /collections/ and /products/
   

6. Divide this number against the number of rows in the table to get your percentage.

If you’re interested in learning more about crawl budget, then be sure to read our beginner’s guide to technical SEO.

Product URL internal links and anchor text

The second issue at play here is the fact that the actual product URLs are only discoverable via these canonical tags and via the product XML sitemap. We are taught as SEOs that internal links are vital to a strong SEO strategy. They increase the relevancy of a page and align a page with a set of keywords we would like that page to rank for, which is good advice. However, with little to no internal linking and therefore no anchor text pointing to our actual product URLs, we’re failing to provide product pages with this relevance.

Our actual product URLs become quasi-orphan URLs.

The solution

Product URL canonicals

Thankfully, there is a relatively simple fix to this issue and it involves getting your hands dirty within the Shopify theme editor. Within the theme editor and specifically within a file called product-grid-item.liquid, we will be asking Shopify to no longer reference the collection as part of the link to the product URL. Here’s how to do this:

1. Navigate to Online Store > Themes > Customize > Theme Actions > Edit Code > Snippets > product-grid-item.liquid
   • {/} product-gallery-zoom.liquid
   • {/} product-grid-item.liquid
   • {/} product-grid-showby.liquid
2. CTRL+F for "within : collection" and remove this section.
3. Press Save once all instances of the above are removed.

A word of warning here, depending on your theme, use of apps etc. there may be multiple instances of this, so you want to make sure you pick them all up. Also, it is worth consulting your developer(s) beforehand so that they can run any risk assessments for completing this job.

Product URL canonicals: Mitigating breadcrumb removal

This change will mean that breadcrumbs on product pages will change and simply go from the homepage to the product, rather than following the collection path that the user has come from.

There are a number of ways to handle this.

Firstly, if losing breadcrumb structure is a UX concern, we would first recommend that you deploy event tracking on breadcrumb links to gain an understanding of how often they are actually used. We have tested this on numerous occasions and found that breadcrumbs are very rarely interacted with by users so in those instances there was no need to find an alternative solution.

Another concern might be that you are technically losing a set of anchor text-rich internal links back through to collection pages. Again, this is a valid concern, and if you feel this is something you can’t afford to lose then you might want to look at the following solution:

Building breadcrumb META fields

A metafield is a feature in Shopify that lets you save pieces of information that aren’t usually captured and then use that information within the structure of your site. In this example, we will be setting the links within a breadcrumb individually for each product. This can be quite a mammoth task depending on the number of products you have, and in our experience, the lack of breadcrumbs is not make or break for SEO success. However, if you want to pursue this option then you can use an app like Metafields Guru.

The issue

Product variant canonicals

This Shopify SEO issue is related to the previous issue but with a different set of URL structures. Most retailers stock products that have variants, which are usually colour and size. Within Shopify you can create individual products to cover these variants, and many retailers do this, however this can create an issue similar to what we see with product URL canonicals, only this time with what is called a variant parameter.

Here is the issue:

We’ll use a real-world example instead of Glass Digital Homeware. The URL below is from Bellfield Clothing:

https://www.bellfieldclothing.com/collections/mens-jackets/products/naota-mens-funnel-neck-quilted-puffer-jacket-navy?variant=39593265922108

We can see that the website has not resolved the previous issue around product URL canonical tags however you can see that this product URL has a variant parameter at the end. Looking at the product page we can see that this variant parameter changes when we select different sizes.

These product URLs have canonical tags on them, so the URL mentioned above has a canonical tag pointing to the indexable product URL below:

https://www.bellfieldclothing.com/products/naota-mens-funnel-neck-quilted-puffer-jacket-navy

Product variant canonicals: Why is this a problem?

Hopefully by now you can see why this might be a problem when we start looking at the implications on overall site size and the impact on crawl budget.

The Bellfield website looks to have, as of writing, 244 products. If each of these products have on average four sizing options, then rather than Google having to crawl 244 product URLs it currently has to crawl 4x that just from the size variations.

That is 1,220 URLs to recognise that only 244 are viable for indexing. Not to mention the issue around product URL canonicals. We can see that the product above is in the following collections:

• Men’s coats & jackets
• Men’s puffer jackets
• Men’s winter coats & jackets
• Mens clothing

This means that a single product has the following URLs, only one of which is indexable, yet all of them will be crawled.

Therefore, a single product requires 25 URLs to be crawled, for one to be identified as the preferred option. If we assume this is the average per product and there are 244 products, then the total number of crawlable product URLs is a whopping 6,100 instead of 244.

The solution

Product variant canonicals

The solution here depends on the products you sell and how search worthy the variants in the products are. There are four potential solutions and each one depends on the search viability of the variants. The first step in this process is to see whether or not variants have search volume. In our Bellfield example we would see if size, alongside the product name, has search volume, if we find that there is search volume around product name + size then there are a few options.

Option #1: Optimise ?variant URLs

This solution will require some changes to your theme code however the basic premise is that you change your theme so that when a variant is selected, the title tag and product description changes to match the variant selected. As part of this, you will also need to remove the canonical tag that is placed on variant URLs. The Shopify community link below details how a variant title tag change is possible.

https://community.shopify.com/c/shopify-design/different-product-titles-for-different-variants-for-the-same/td-p/620113

The drawback of this approach is that it will apply to all variants and, of course, it is entirely possible that not all product variants will have search volume.

Option #2: Optimise main product URL for variants

Rather than opening up variant URLs as described above, you could optimise the main product URL for the variants by covering variant options in your product description. The benefit of this approach is that you are creating more relevant content which will likely help with relevance and ranking, and therefore SEO. The drawback is that variants won’t be as optimised as they would be with a dedicated URL.

Option #3: Disallow ?variant parameter

If you find that variants have no search volume opportunity then a simple fix is to simply stop Google from crawling them by adding the ?variant parameter to your robots.txt file.

By stopping Google from crawling any URL with ?variant= you will save a large portion of your crawl budget. As of July 2021 you can now edit your robots.txt file in Shopify, so by adding the following line into the robots.txt you can stop Google crawling URLs that contain ?variant=

Disallow: ?variant=

There are instances where Shopify websites link to product URLs that have variant parameters and again, we would encourage shop owners to ensure that they are linking directly to the indexable version of a product URL and not variant IDs. If your store has this behaviour, then we would recommend consulting your developer or development agency to look at changing this. It is likely they will need to make changes within the product-grid-item.liquid file.

Option #4: Individual products per variant

We see a lot of stores creating individual products where the only difference is the colour of the product.

Here is a good example from Gym Shark.

Each of the products shown in the green square are different product URLs:

• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-top-grey-print-ss22
• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-t-shirt-black-aw21
• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-t-shirt-white-aw21
• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-top-tuscan-teal-ss22
• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-t-shirt-blue-aw21
• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-t-shirt-burgundy-aw21
• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-t-shirt-dark-green-aw21
• https://uk.gymshark.com/products/gymshark-element-baselayer-long-sleeve-t-shirt-charcoal-aw21

The content on these pages is very similar with subtle differences for colour within title tags etc. This approach lets you target the variants very specifically, however one of the drawbacks is if you have a large product set with a large set of variants you will end up with a significant increase in products to manage. If this is not a concern, then this approach could be viable.

With this Gym Shark example we can’t see much difference between the product URLs outside of a few mentions of colour in the title tag. Ideally, we would like to see more of a differentiation in content, however it can be a struggle to describe a product in a unique way when the only difference is a colour or a size.

Which leads us to the main drawback of this approach: similar content. Google may decide that the content across these different URLs is too similar which can cause issues with Google Core Updates and general Page Quality.

Individual product colours: Summary

In summary, the main lesson here is to get your keyword research done prior to setting up your Shopify store. Knowing where the search volume opportunities are prior to building out your store can help you make the right decisions when it comes to site structure and Shopify SEO. With this specific issue there isn’t an ideal solution as it depends on the nature of the products.

The issue

Faceted navigation

An example of a relatively well-optimised, although not perfect, faceted navigation system would be either House of Fraser or Sports Direct (both Frasers Group). Below we are in the “men’s polo shirts” category:

If we select “AllSaints” from the faceted menu on the left, we are taken to the following URL:

https://www.houseoffraser.co.uk/men/mens-polo-shirts/allsaints#dcp=1&dppp=36&OrderBy=rank&Filter=none

We can see that the following has all been optimised for “men’s AllSaints polo shirts”

• Title tag
• H1 tag
• Content

Meaning this URL can now be indexed and rank for keywords like “men’s AllSaints polo shirts”.

Adding extra selections to this URL simply adds them to the end of the hash fragment, so if we selected “black” we get the following URL:

https://www.houseoffraser.co.uk/men/mens-polo-shirts/allsaints#dcp=1&dppp=36&OrderBy=rank&Filter=ACOL%5EBlack

The beauty here is that the user can make the selection, but Google will still see the original URL. I’m sure given time, and if there is search volume around “men’s black AllSaints polo shirts” they could allow for an indexable facet page optimised for this.

The reason we’re highlighting this example is because, at present, there is no way to create an SEO-friendly faceted navigation structure using Shopify SEO tools without hefty theme-specific development. And, while there are apps out there that allow for faceted navigation functionality, none of them address the optimisation element at scale.

This means that Shopify retailers and SEO experts are left to workaround solutions to take advantage of the search volume that a faceted navigation system could provide.

The solution

Faceted navigation

As mentioned, there are workarounds that are not as ideal as the system shown above but they are still viable in order to rank for mid- to long-tail category keywords and boost the SEO of your Shopify store. The solution is to simply build collections around high-value faceted keywords. We would recommend the following process:

• Keyword research: Combine all current collections alongside any relevant facets (colour, size, type, fit, weight etc.) in an Excel sheet and upload the associated keywords to either SEMRush or Ahrefs to get a breakdown of which combinations have the most volume.
• Create automated collections: Shopify allows you to create collections based on rulesets, known as automated collections. If, for example, “red midi dresses” was a keyword that you had unearthed from step #1 you will be able to create an automated collection with the following rules:
1. Product type = midi dresses
2. Product colour = red
3. Product is in stock
• Optimise automated collections: Automated collections work in the same way as normal collections so you will be able to create an optimised META title tag, description, H1, and body content. We would highly recommend you do this.
• Internal linking audit: In order to help Google discover these new collections, we would recommend conducting an internal link audit. Finding other pages that could house a link to your newly created collection, preferably with descriptive anchor text such as “red midi dresses”. This might be existing collection content or existing blog content.
• Main navigation: Building links to these new collections through navigation is an important step as it will ensure Google can quickly find these URLs on a regular basis. This might be challenging if you have lots of new collections and you do not want to clutter the navigation. In those instances, we would recommend prioritising the collections that have the highest associated search volume and being thorough with step #4 to ensure all of these collections get some form of internal linking.

The issue

Core Web Vitals

Core Web Vitals (CWV) were introduced as part of Google’s ranking algorithm in June 2021 with the aim of simplifying the diagnostics and recommended solutions around metrics that impact a website’s performance, particularly within speed and usability.

The three main metrics involved, and there look to be others in the pipeline, include:

We want to be clear here that Shopify is capable from a CWV perspective out of the box and we can see that thanks to the team over at HTTP Archive who have created a data studio report that tracks different technologies and their collective CWV metrics. We can see that Shopify websites have improved their overall % of good CWV scores over 2021 and into 2022.

Mobile in particular has gone from 17% to almost 45% over a two-year period.

That being said, there are areas for improvement and when we break the scores down to the individual CWV metrics we can see which areas Shopify merchants struggle with.

From this data we can see that only FID is consistently at the pass rate of 80% with both LCP and CLS getting close but tailing off slightly. Let’s look at some of the common issues with both LCP and CLS that merchants can look to tackle and improve their Shopify SEO.

How to check your Core Web Vitals performance on Shopify

Chrome Developer Tools/Lighthouse reports

Checking your CWV scores on an individual page basis can be done directly in Chrome using Chrome DevTools.

1. Use an incognito window that is free from Chrome plugins and navigate to the page you want to check and press CTRL+SHIFT+J (Windows) or CTRL+Option+J (Mac). This will open up Chrome DevTools.
2. At the top bar on the right hand side you will see a button for Lighthouse, if not you will need to select the >> to reveal it.
3. Ensure the “performance” option is selected and choose the device you want to test against. We would recommend mobile.
4. Press “generate report” and the Lighthouse report will begin the testing phase. Once completed you will get the results for this page.
5. Scrolling down these results you will see the individual performance issues along with a grouping of which CWV metric they relate to.

Google Search Console

You can also get a view on overall CWV performance within your Google Search Console account under the “Core Web Vitals” report. This report aims to show you groups of pages across different devices and their grouped CWV performance which can be either “poor”, “needs improvement” or “good”.

The reporting will give you examples of where pages are failing CWV metrics and how many similar pages are failing. Selecting an individual page will take you through to a web version of the Lighthouse report that is available within Chrome DevTools.

CrUX Dashboard (Data Studio)

Google has done a lot of the hard work when it comes to viewing your overall site scores based on actual user data by creating the CrUX (Chrome UX Report) dashboard. This tool links raw CrUX data with BigQuery data, all visualised through Data Studio. Below is an example of what this report looks like and the instructions to set this up for your website can be found here.

This tool is great for monitoring performance increases/decreases across your site as well as your main competitors.

Dealing with low LCP scores in Shopify

There are common issues that impact LCP and therefore the SEO of your Shopify site. In this section we will highlight the issues and their potential solutions.

Render-blocking JavaScript & CSS

In order for a page to be rendered it needs to reference instructions within JavaScript and CSS files to load certain elements. If there are multiple JavaScript and CSS files needing to be loaded, then the loading of these files often takes precedence over anything else. This can therefore block the rendering of the page until the file is downloaded. The graphic below shows this visually:

If there are multiple JS and CSS files you can see how this might have a sustained blocking impact and therefore impact the LCP metric. There are a number of solutions to this problem.

• Preload key elements: By pre-loading elements, such as certain prominent images (like a hero-image or product image), or JS/CSS files that are critical to loading main viewport elements, you are ensuring that this is loaded first and therefore improves LCP as the content of the viewport on initial load is prioritised. There is a great guide by Tiny Img on how to do this in Shopify with their app.

• Defer or async resources: Another technique is to user either the defer or async command on JS files. While these commands have no impact on the overall time a page takes to load (the network bandwidth requirement is the same) they simply change the ordering of resource loads and crucially they limit the amount of time the main thread is render-blocked early in the load. The graphic below from Shopify’s JavaScript Performance article shows this quite well.

Within Shopify there does not look to be an app that allows you do to this which means you will likely need to edit your theme liquid files to implement. We would therefore encourage you to seek help from your developer(s) and make sure back-ups are made in case any issues arise from this.

• Lazy loading resources: Lazy loading is a term for the process of loading resources only when they are needed. A very common example of this is with images on a category page: a lazy loading method on this page type will likely be to load the images in the viewport and only load images outside of the viewport when the user scrolls down to those images. This technique improves perceived load speed, which as we know from our previous look at LCP is exactly what LCP focuses on (see below from Google)

  Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful.

There is a useful Git repository called LazySizes that allows you to add lazy loading to your images, however this needs to be done manually so might be something you want your developer(s) to look into implementing.

Large images/image formats

This is a relatively straightforward issue and highlights that you might have images that are either too large or could be better served in what are known as next-gen formats such as WebP, JPEG 2000, or JPEG XR. These formats provide a much higher level of image processing and compression compared to JPEGs and PNG filetypes, which have been around since the early 90s.

GTMetrix provide a great guide on the impact serving next-gen image formats can have on performance.

Shopify does try and convert images to WebP format however there can be instances where other formats are not converted. The guide on WebP imaging for Shopify on Tiny Img is a great resource to get your analysis going.

Dealing with low CLS scores in Shopify

There are common issues that impact CLS and, in turn, your Shopify SEO. In this section we will highlight those that are applicable to Shopify websites, along with potential solutions to them.

Identifying layout shifts

Layout shifts are usually down to space not being reserved for images in the form of heights and widths. The first step we would recommend is identifying where these layout shifts are taking place within a page load. To do this you will need to use Chrome DevTools.

1. Navigate to the URL you want to check, make sure you are in incognito mode, and press CTRL+SHIFT+J (Windows) or CTRL+OPTION+J (Mac). This will open Chrome DevTools
2. Select “performance insights” from the top navigation or >> if it isn’t in the initial menu.
3. This will open the following page where you can click “measure page load” to start the test.
4. The results will show a window that indicates layout shifts and there is also a sidebar indicating where these layout shifts occur (see below)
5. By clicking this layout shift you will be taken to the point in the loading timeline to where this layout shift occurs. The sidebar will also give you a breakdown of the elements involved in the shifts, the number of shifts, the likely root cause, and a screenshot highlighting the shifting elements.

Unsized media/setting image heights and widths

The most common issue impacting CLS is not reserving a space within the document for images, divs, and other elements. This is done by not setting a height and width for these elements via CSS. This is particularly common in Shopify with product images, hero images, product review stars, cookie notices etc. all not having dimensions set in the document, and it can have a significant impact on your Shopify SEO. We would recommend consulting with your developer(s) to get these dimensions added to your CSS file to save on layout shifts.