By default Shopify have a small error in how pagination works. Most users will not notice this but as it can lead to problems with SEO we encourage you to fix it. We will show you how.
What is the pagination problem in Shopify?
If you have more products in a category than can be showed on one page you will automatically get pagination links. In most shops it will look something like this:
When you click forward a page-parameter will be added to the URL. This is an example from one of my shops:
- https://www.demib.com/collections/pitfire
- https://www.demib.com/collections/pitfire?page=2
- https://www.demib.com/collections/pitfire?page=3
This all fine. But then, if you are on anything but the first page and click back to it you will notice that a ?page=1 paramter will be added to the URL – like this.
- https://www.demib.com/collections/pitfire?page=1
This is not good! Because now you have the same page with two different URL’s – with and without the ?page=1 is the very same page.
Shopify do automatically add a CANONICAL-tag to the first pages without any parameter.
But there are two problems with this approach:
- The CANONICAL that is just a “signal” not a “directive”. In other words, even though Google will listen to this signal they may not always respect it nor do they promise to do so
- The CANONICAL-tag is a band-aid solution. It does not actually fix the problem (Duplicate URLs)
It is a much better and a more secure SEO-solution to get rid of that page=1 version. So lets go ahead and do that …
Step one: Fix the visual pagination links
First we want to fix the pagination on your pages. To do this you need to edit some code.
Go to Online store -> Actions -> Edit code
In there you have to find the pagination snippet file. For most themes it should be called pagination.liquid
In this file you should look for the section that display the link back to previous pages
The highlighted link is what you need to change.
Add the following filter:
| remove: “?page=1”
It should look like this when you are done:
Save your liquid file and that’s it. Now the ?page=1 parameter will be filtered out.
Step two: Fix the header code
Step two is a bit more tricky. Because on top of the visual pagination links the pagination is also added in the header code. This is automatically done by Shopify and included in the “content_for_header” object. This object is not editable so in theory you can’t change what comes out of it.
As default the pagination links in the header looks like this:
So even though we have just removed the ?page=1 parameter in the visual pagination links Google will still find the link in the header. We do not want that.
After you implement our fix (see below) it will look like this:
This is much better. Exactly what we want.
So how did we do this when the “content_for_header” object can’t be edited?
Well, there is a little known trick that can be used to alter the “content_for_header” object. But be very carful when you do this. If you do anything wrong you could completely wreck your site!
Go to Online store -> Actions -> Edit code and open the theme.liquid file.
Here you should find the line where {{ content_for_header }} is and change it to this:
{%- comment -%}
{{ content_for_header }}
{%- endcomment -%}
{% capture custom_content_for_header %}
{{ content_for_header | remove: '?page=1'}}
{% endcapture %}
{{ custom_content_for_header }}That’s it. Now the header will be fixed too so there are no links on your site to with the ?page=1 parameter. This is a safe SEO-solution.