SEO TIP: Easy pagination fix

Solved
demib
Shopify Partner
116 12 57

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 :-)
0 Likes
demib
Shopify Partner
116 12 57

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 :-)