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.

Thanks to some changes to the {% paginate %} tag in Craft 2.5, this is extremely easy to do.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
    {% block head %}
    <title>{% block title %}{{ siteName }}{% endblock %}</title>
    {% endblock %}
</head>
<body>
    {% block body %}
    <h1>{{ siteName }}</h1>
    {% endblock %}
</body>
</html>

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 %}
        <article>
            <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1>
            {{ entry.excerpt }}
            <a href="{{ entry.url }}">Continue reading</a>
        </article>
    {% endfor %}

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