Creating SEO-Friendly Pagination Links

Google recommends that paginated webpages should have rel="next" and rel="prev" links in the <head> section, to help search engines better understand the content.

The {% paginate %} tag makes this extremely easy to do.

Let’s say you have a base layout template with the following code:

<!DOCTYPE html>
<html xmlns="" lang="en-US">
  {% block head %}
    <title>{% block title %}{{ siteName }}{% endblock %}</title>
  {% endblock %}
  {% block body %}
    <h1>{{ siteName }}</h1>
  {% endblock %}

Our goal is to add rel="next" and rel="prev" links within the head block, and your normal paginated content and user-facing navigation within the body block, from an extended template.

To do that, start by adding your {% paginate %} tag at the top of your extended template, outside any {% block %} tags:

{% extends "_layout" %}

{# Set the pagination variables #}
{% paginate craft.entries().section('news').limit(10) as pageInfo, pageEntries %}

Now you will be able to access those pageInfo and pageEntries variables anywhere within your template, including within your blocks. So let’s extend the head block to append our SEO-friendly pagination links to it:

{% block head %}
  {{ parent() }}

  {# SEO-friendly pagination links #}
  {% if pageInfo.prevUrl %}<link rel="prev" href="{{ pageInfo.prevUrl }}">{% endif %}
  {% if pageInfo.nextUrl %}<link rel="next" href="{{ pageInfo.nextUrl }}">{% endif %}
{% endblock %}

And then we can extend the body block and loop through pageEntries as usual:

{% block body %}
  {{ parent() }}

  {# Paginated entries #}
  {% for entry in pageEntries %}
      <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1>
      {{ entry.excerpt }}
      <a href="{{ entry.url }}">Continue reading</a>
  {% endfor %}

  {# Pagination nav #}
    {% if pageInfo.prevUrl %}<a href="{{ pageInfo.prevUrl }}">Previous Page</a>{% endif %}
    {% if pageInfo.nextUrl %}<a href="{{ pageInfo.nextUrl }}">Next Page</a>{% endif %}
{% endblock %}

Applies to Craft CMS 3.