SEO, AdWords, affiliates, advertising, and promotions
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 🙂
Solved! Go to the solution
This is an accepted solution.
There is actually one more thing that have to be fixed - that I first overlooked. That is the link prev/next property in the header.
<link rel="prev" href="/collections/vases?page=1">
<link rel="next" href="/collections/vases?page=3">
With this code in place Google still see the link to pages=1 and therefore increase the risk of DC-issues. So I need to get that fixed as well. However, I have still not found where this header code is actually generated, so I can adjust it. Maybe you know?
This is an accepted solution.
There is actually one more thing that have to be fixed - that I first overlooked. That is the link prev/next property in the header.
<link rel="prev" href="/collections/vases?page=1">
<link rel="next" href="/collections/vases?page=3">
With this code in place Google still see the link to pages=1 and therefore increase the risk of DC-issues. So I need to get that fixed as well. However, I have still not found where this header code is actually generated, so I can adjust it. Maybe you know?
Hey Demib,
I have tried the same solution, my store has a flow theme but that does not fix my problem, Let me explain.
We use the infinite scroll (I think which is a default option ) but scrolling to the bottom to reload new pages causes the URL to change to the page 2 URL. I don't want that. I have tried scripts to of removing URL parameters (| split"?"| first )but it didn't work (I have tried it on all the pages using "paginate").
Moreover, Screaming fog is giving the error of canonical page. 1 and home page. I have tried the same solution but it didn't help me. Kindly tell me what to do
Here is a solution
https://elevateapps.io/how-to-fix-the-pagination-error-in-shopify/amp/
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024