How can I fix the pagination error on my Shopify theme?

Solved

How can I fix the pagination error on my Shopify theme?

demib
Shopify Partner
135 13 65

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 Group

Was your question answered? Kindly mark it as an Accepted Solution 🙂
Accepted Solution (1)

demib
Shopify Partner
135 13 65

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?

SEO Geek since 1996, consultant author and public speaker. Admin of the Shopify SEO Facebook Group

Was your question answered? Kindly mark it as an Accepted Solution 🙂

View solution in original post

Replies 3 (3)

demib
Shopify Partner
135 13 65

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?

SEO Geek since 1996, consultant author and public speaker. Admin of the Shopify SEO Facebook Group

Was your question answered? Kindly mark it as an Accepted Solution 🙂
sufyan29814
Shopify Partner
2 0 0

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 

 

 

kaygod
Shopify Partner
4 1 1