Jekyll and SEO friendly pagination

161 Views Asked by At

When I audit a website with free or paid tools such as Screaming Frog SEO Spider I get the following issues:

  • Pagination: Pagination URL Not in Anchor Tag
  • Pagination: Sequence Error

I am using Jekyll SEO tag (version release 2.8.0)

I did not find any fix on the developer's page (https://github.com/jekyll/jekyll-seo-tag) and the available documentation does not cover the matter. How can I resolve these issues?

1

There are 1 best solutions below

0
Goemon Code On

DESCRIPTION OF THE PROBLEM

This problem occurs because with Jekyll SEO tag URLs contained in either, or both, the rel="next" and rel="prev" attributes of the page are not found as a hyperlink in an HTML anchor element on the page itself. Paginated pages should be linked to within regular links to allow users to click and navigate to the next page in the series. They also allow Google and other search engines to crawl from page to page, and PageRank/Page Authority to flow between pages in the series.

With Jekyll SEO tag paginated URLs are not linked to within <a> tags. According to SEO documentation, this does not facilitate them to be crawled and indexed, and pass PageRank/Page Authority onto any URLs they link to.

RESOLUTION

  1. Open the Command Line Interface
  2. Enter the following command: gem info jekyll

An output similar to the following result would be shown:

*** LOCAL GEMS ***

jekyll (4.x.x)
    Authors: Tom Preston-Werner, Parker Moore, Matt Rogers
    Homepage: https://jekyllrb.com
    License: MIT
    Installed at: <PATH>/ruby/3.2.0

Prerequisites: In the Jekyll folder _includes create the file seo-paginator.html

Steps:

From within the folder 3.2.0

  1. Open the gems folder
  2. Open the jekyll-seo-tag-2.8.0
  3. Open the folder lib
  4. Make a backup of the template.html file
  5. Open the template.html file
  6. Cut the following strings:
{% if paginator.previous_page %}
<link rel="prev" href="{{ paginator.previous_page_path | absolute_url }}">
{% endif %}
{% if paginator.next_page %}
<link rel="next" href="{{ paginator.next_page_path | absolute_url }}">
{% endif %}

And paste them in the seo-paginator.html file.

  1. From within the seo-paginator.html file, replace the following strings:
<link rel="prev" href="{{ paginator.previous_page_path | absolute_url }}">
<link rel="next" href="{{ paginator.next_page_path | absolute_url }}">

With the following strings:

<a rel="prev" href="{{ paginator.previous_page_path | absolute_url}}"></a>
<a rel="next" href="{{ paginator.next_page_path | absolute_url}}"></a>
  1. From within the Jekyll folder _layouts open the default.html file, and insert somewhere in the body element the following string:
{% include paginator.html %}
  1. Save the amended template.html, seo-paginator.html, and the default.html files.

Rebuild the website with Jekyll, and review the page source of the HTML page from the Web browser. Now you would notice that <a> tags are present.


I am not affiliated to any of the mentioned software or brands.