Technical SEO for Shopify: A Guide to Optimizing Your Store for Search Engines

SEO October 11, 2024

0 4 3 minutes read

Shopify’s platform offers an easy way for new store owners to set up their e-commerce sites. However, this simplicity often means that many technical aspects of the site are predefined, which can lead to specific challenges with site architecture, URL structure, and JavaScript optimization.

Shopify store owners can refer to our main Shopify SEO guide for basic search optimizations. In this guide, we delve deeper into fine-tuning the technical SEO of Shopify sites to ensure search engines can effectively crawl and index the pages.

Tackle Duplicate Pages

Shopify uses collections to group products categorically, which aids customer navigation but can also result in duplicate URLs for the same product. These collections structure URLs by attaching products via semantic conventions, rather than by ID, leading to an array of URLs. Here is a basic example of this setup:

resources :products do
  collection do
    get ‘collections’
  end
end

When a product is linked to a collection page, Shopify typically creates a second URL for that product, such as:

/collections/shirts-collection/products/blue-shirt
/products/blue-shirt

Duplicate content is problematic as it makes it difficult for search engines to know which URL to index and can split link-building efforts. While Shopify sets collection page canonical tags pointing to the product page to manage URL preference in search results, this does not mitigate the issue of dispersed link power.

Eliminating Alternative URLs: There is a known solution within your templates using an output filter “within: collection” that can help resolve this issue. While the specifics vary based on the theme, generally this entails editing your site’s code.

To begin, access your Shopify account and navigate to the theme by selecting Online Store and then Themes. Click Customize in the Current theme section. On the next page, go to Theme actions to Edit code. A new window will display templates where you can find the section generating collection links, usually under the Snippets folder within “product-card.liquid.”

Edit the line:

<a href="{{ product.url | within: collection }}" class="product-card">

To:

<a href="{{ product.url }}" class="product-card">

Removing “| within: collection” ensures that product links default to canonical URLs.

Overcome Site Architecture Limitations

Shopify’s CMS architecture can be less flexible compared to other platforms like WordPress, limiting easy optimizations. For example, Shopify generates a standard URL structure that store owners can only customize at the end part of the URL. Removing subdirectories like “/products” is not directly possible, though a more manageable and authoritative URL could offer SEO benefits.

Typical system frameworks leverage request strings for organizational logic, directing resource access for constructing dynamic content. Shopify’s Ruby on Rails routes “/products/:id” to product resources. For non-trivial fixes, a developer versed in JavaScript and Ruby is often needed.

Customizing Site Architecture with Cloud Workers: Cloud Workers can alter content delivery paths and mask Shopify URL paths. Using JavaScript Workers, you gain request/response cycle control, allowing for URL refinement and enhanced SEO capabilities. Setup requires reconfiguring your domain to direct through Cloudflare, enabling access to the Workers API.

After signing up for Cloudflare, set DNS A records and obtain Cloudflare nameserver addresses from your DNS settings. This allows Cloudflare to redirect through their servers, where Cloud Workers can manage custom URL paths.

JavaScript Cloudflare Workers: Configuring Workers routes enables custom script management with editable HTTP requests. These scripts facilitate solutions ranging from header customization to serving alternate content, providing significant SEO and migration possibilities.

An example scenario might conditionally serve a different page for specific paths, enabling flexible manipulation of URL structures and site content.

Cloudflare’s enterprise team collaborates directly with Shopify merchants for these setups, with broader availability anticipated after initial tests.