Notes

Shopify SEO problems & how to fix them.

Shopify is a popular eCommerce platform that enables businesses to sell online. Today, nearly four million websites from around the world use Shopify. Unfortunately, Shopify has several common technical SEO problems that can hamper a website's ability to rank well in search engines. In this article, our Head of Search Engine Optimisation in Melbourne at Spicy Web discusses common Shopify SEO problems and how to fix them.

Posted by
29.03.2024
Shopify technical seo

What is Technical SEO?

Technical SEO is the process of optimising a website for search engines. It is a subset of broader search engine optimisation (SEO) that focuses on improving a website's technical aspects to improve its ranking in search engines.

Why does Shopify have technical SEO problems?

Shopify is a world-leading e-commerce CMS and is a common choice for online retailers for its remarketing features and ease of use. So why does Shopify have several technical SEO problems?

First and foremost, Shopify is a closed-circuit hosted platform. This means that businesses using Shopify do not have access to the server-side code, which limits the ability to make certain technical SEO optimisations. Additionally, because Shopify is a closed platform, it can be difficult to integrate with third-party tools that can help with technical SEO. Finally, Shopify uses its own URL structure, which can create duplicate content issues. Many Shopify themes are what we call "out of the box" or have been developed with aesthetics first, potentially compromising search engine readability. Our Search Engine Optimisation agency in Melbourne will show you how to check if your Shopify store has technical SEO problems.

Common technical SEO problems with Shopify and how to fix them

While Shopify may have several common technical SEO problems, there are also several ways to fix them. Below, we'll discuss some of the most common technical SEO problems with Shopify and how to fix them.

How to conduct a technical SEO audit for Shopify stores?

If you want to do a technical SEO audit for your Shopify store, here are some tools that we use at Spicy Web.

1. Crawl your website with Screaming Frog.

2. Manually check your live website and theme code.

3. Use Search Console and check for errors.

Shopify site structure does not allow parent & child pages in collections

One of the most common technical SEO problems with Shopify is that its site structure does not allow for parent & child pages in collections. This can be problematic if you want to create subcategories for products or locations you ship to. For example, most content management systems such as Craft CMS will allow a site structure /mens-wear/formal-wear/suit-jackets whereas with Shopify you will only be able to make /collections/mens-formal-suit-jackets. Shopify lacks the ability to create a content hub for SEO.

Suggested workaround for creating collections hierarchy💡

A suggested workaround for creating /collections subcategories is to leverage internal linking to create collection content hubs. You can write custom HMTL code to add to the collections description text area or use Metafeilds build your internal linking structure. Learn more about metafields.

Below product grid example:

Above the fold example:

Shopify Metafields:


Shopify URL structure problems

Another common technical SEO problem with Shopify is its URL structure. By default, Shopify uses a /collections/collection-name/products/product-name URL structure, which creates duplicate content issues. To fix this, you can change your Shopify URL structure to use the /products/product-name URL structure when clicking a product from a /collection/collection-name. If you are experienced with editing .liquid code in your Shopify theme head to Online Store > Themes > Customise > Theme Actions > Edit Code > Snippets > product-grid-item.liquid:

Then remove the text that says "within: collection":

This will break your Themes breadcrumbs so you will need to rebuild these as you will need them for SEO.

Suggested breadcrumb fix💡

Products can be featured in multiple collections so we suggest that when you click a product from a collection the breadcrumb should link back to the vendor:

{% if template contains 'product' %}
<span class="spera">/</span>
{% assign product_vendor_handle = product.vendor | handleize %}
{% assign vendor_collection_object = shop.metaobjects.vendor_collections[product_vendor_handle] %}
{% if vendor_collection_object %}
<span>
{{ vendor_collection_object.vendor_collection | metafield_tag }}
</span>
{% else %}
<span>{{ product.vendor | link_to_vendor }}</span>
{% endif %}

Product & Blog Tag duplicate content issues

Tags are a common technical SEO problem with Shopify in that product & blog tags can create duplicate content issues. By default, Shopify creates a /products/tagged/tag-name URL for each product tag. To fix this, you can add a canonical URL to your product tag template that points to the main product page URL. Using a no-index tag will tell search engines to ignore /products/tagged/tag-name URL is not the primary URL and that they should not index this page.

{% if current_tags %}
<meta name="robots" content="noindex, follow">
{% endif %}

Pagination duplicates collection pages

Pagination is a common technical SEO problem with Shopify in that its pagination can create duplicate content issues. By default, Shopify creates a /collections/collection-name/page/x URL for each page of products in a collection. To fix this, you can add a canonical URL to your collection template that points to the main collection URL.

{% if template != 'collection' %}
<link rel="canonical" href="{{ canonical_url }}" />
{% else %}
<link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
{% endif %}

Canonicalise product variants

Product variants are a common technical SEO problem with Shopify in that product variants can create duplicate content issues. By default, Shopify creates a /products/product-name?variant=x URL for each product variant. To fix this, you can add a canonical URL to your product template that points to the main product URL.

Do not disallow them in your robots.txt as you may miss out on valuable links from other sites to your product variant.

{% if template != 'product' %}
<link rel="canonical" href="{{ canonical_url }}" />
{% else %}
<link rel="canonical" href="{{ shop.url }}{{ collection.url }}/{{ product.handle }}" />
{% endif %}

Other default pages in Shopify

Pages such as /collections or /collections/ all have little value and dilute the authority of your website. It is recommended that you add a canonical URL on these pages that point to your home page.

<link rel="canonical" href="{{ shop.url }}" />
If you want search engines to index these pages then you can add the following code:
{% if template == 'collection' and collection.handle != 'all' %}
<meta name="robots" content="index, follow">
{% endif %}

or

{% if (template contains "collection" and collection.handle == "all") or (template contains "collection" and collection.handle == "new") or (canonical_url == "https://example.com/collections") %}
<meta name="robots" content="noindex, follow">
{% endif %}

Improve your store's Interaction To Next Paint (INP) Score

Improving your Shopify store's interaction to Next Paint (INP) will enhance your website's loading speed when browsing between pages specifically focused on the time it takes for the initial content to be rendered on the screen.

Our SEO team uses Instant.page to help preload assets so that the next page you browse to loads instantly.

Instant.page uses just-in-time preloading — it preloads a page right before a user clicks on it.

On desktop

Before a user clicks on a link, they hover their mouse over that link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload. You can also preload on hover or as soon as a link is visible and trigger the click when the user starts pressing their mouse, making your pages the fastest in the world.

On mobile

A user starts touching their display before releasing it, leaving on average 90 ms for the page to preload.

Another option is to preload links as soon as they’re visible in the view port.

Put this HTML code just before </body>:

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

Here are some other strategies to improve INP

Optimise Images:

  • Compress images: Use tools like Photoshop or online compressors to reduce image file size without sacrificing quality significantly.
  • Resize images: Ensure your images are sized appropriately for your website layout to avoid unnecessary downloads.

Reduce HTTP Requests:

  • Minimise plugins and apps: Unnecessary apps can slow down your site. Consider if there are core functionalities you can achieve with built-in Shopify features or by combining apps.
  • Combine files: Reduce the number of HTTP requests by combining CSS and JavaScript files.

Leverage Browser Caching:

  • Enable browser caching: Set expiry headers on static files like images and CSS to instruct browsers to store them locally, reducing the need to download them on every visit.

Content Delivery Networks (CDNs):

  • Consider a CDN: A CDN stores your website's static content across geographically distributed servers, delivering content faster to users based on their location.

Shopify Theme Optimisation:

  • Theme adjustments: If comfortable with code, consider optimising your theme's code to remove unnecessary elements or streamline functionalities.

A final summary of Shopify technical SEO problems you should fix

If you have a Shopify store and you can't find your products on the first page of Google and other search engines in organic search results, then fixing these technical problems could lift your product-related keywords to the first page of Google and increase organic traffic to your site.

Related article: How much does SEO cost?