As a relatively new optimizer on Shopify solutions - byt a really old school geeky SEO 🙂 I am have been going through a long list of things that I KNOW is better for SEO but Shopify is (depending on theme) not doing by default. Most of my current work is based on the new Dawn theme that I do like because of the full SO2.0 support/structure and the great initial speed. .
Today I got to the the annoying pagination "error" Shopify makes.
In both the previous link and the page one link in pagination ?page=1 is used. This way we end up with two identical URL's for the first page in a paginated series. That is not good. And to top it up, the default CANONICAl is self-referencing, so the page=1 page get a CANONICAL to this! Argh!
I guess you already know that is really bad for SEO. But how do you fix it?
After trying different things - first a few conditional scripts, I came up with this super simple solution. After all - the simplest solutions are often best. KISS.
I edit the pagination.liquid file and insert this filter on both previous link (<) and the numbered links
| remove: "?page=1"
You do not even need to make it conditional because it only removes ?page=1 which is only present on the relevant links. For the other the filter do nothing. Not using a condition makes it faster to execute.
So my full pagination.liquid file end up like this - and it works great 🙂
{% comment %}
Renders a set of links for paginated results. Must be used within paginate tags.
Usage:
{% paginate results by 2 %}
{% render 'pagination', paginate: paginate, anchor: '#yourID' %}
{% endpaginate %}
Accepts:
- paginate: {Object}
- anchor: {String} (optional) This can be added so that on page reload it takes you to wherever you've placed your anchor tag.
{% endcomment %}
<link rel="stylesheet" href="{{ 'component-pagination.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-pagination.css' | asset_url | stylesheet_tag }}</noscript>
{%- if paginate.parts.size > 0 -%}
<div class="pagination-wrapper">
<nav class="pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
<ul class="pagination__list list-unstyled" role="list">
{%- if paginate.previous -%}
<li>
<a href="{{ paginate.previous.url | remove: "?page=1"}}{{ anchor }}" class="pagination__item pagination__item--next pagination__item-arrow link motion-reduce" aria-label="{{ 'general.pagination.previous' | t }}">
{% render 'icon-caret' %}
</a>
</li>
{%- endif -%}
{%- for part in paginate.parts -%}
<li>
{%- if part.is_link -%}
<a href="{{ part.url | remove: "?page=1"}}{{ anchor }}" class="pagination__item link" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</a>
{%- else -%}
{%- if part.title == paginate.current_page -%}
<span class="pagination__item pagination__item--current" aria-current="page" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</span>
{%- else -%}
<span class="pagination__item">{{ part.title }}</span>
{%- endif -%}
{%- endif -%}
</li>
{%- endfor -%}
{%- if paginate.next -%}
<li>
<a href="{{ paginate.next.url }}{{ anchor }}" class="pagination__item pagination__item--prev pagination__item-arrow link motion-reduce" aria-label="{{ 'general.pagination.next' | t }}" >
{%- render 'icon-caret' -%}
</a>
</li>
{%- endif -%}
</ul>
</nav>
</div>
{%- endif -%}
I hope you can use this 🙂
SEO Geek since 1996, consultant author and public speaker. Admin of the
Shopify SEO Facebook GroupWas your question answered? Kindly mark it as an Accepted Solution
🙂
