Optimizing your pagination component for SEO and UX

One of the most overlooked yet critical components of ecommerce and content-heavy websites is the pagination system. Done poorly, it can obstruct SEO. Done well, it strengthens crawlability, usability, and conversions.

Below is a real-world example of how a shop optimized its pagination component to improve both SEO and user experience.

Before: limited pagination and parameter-based URLs

Old setup:

• Pagination only displayed: Previous | X of Y | Next
• URLs were non-descriptive and parameter-based (e.g., /shop?cat=acme-products&page=3)
• No direct access to specific page numbers

Problems:

• Poor crawl path: search engines had limited entry points to deeper pages
• Lack of contextual links (no anchor links to deeper paginated content)
• Unfriendly user experience with limited navigation control
• Parameters discouraged indexing or canonical signals could cause dilution

After: semantic URLs and dynamic pagination depth

URL structure:

• Pages now use clean, crawlable URLs:
  /shop/acme-producst/p/2, /shop/acme-products/p/3, etc.
• Fully accessible anchor-based pagination

Pagination logic:

✅ 1 page only

• No pagination block shown

✅ 2–10 pages

• Always show full range of pages
  • 2 pages: [1] [2]
  • 5 pages: [Prev] [1] [2] [3] of 5 [4] [5] [Next]
  • 10 pages: [Prev] [1] [2] [3] [4] [5] [6] of 10 [7] [8] [9] [10] [Next]

✅ 11+ pages

• Use ellipsis to avoid overload, while maintaining crawlable structure
  • 11 pages: [Prev] [1] [2] [3] of 11 [4] [5] … [11] [Next]
  • 22 pages (middle): [Prev] [1] … [13] [14] [15] of 22 [16] [17] … [22] [Next]
  • 22 pages (end): [Prev] [1] … [18] [19] [20] of 22 [21] [22] [Next]

Why these changes matter

• SEO benefit: Clean URLs + anchor links = fully crawlable architecture
• UX benefit: Predictable and consistent structure allows easy navigation
• Scalability: Efficient for both small categories (2–10 pages) and large catalogs (20+ pages)
• Indexation control: Direct access to every page means better distributed link equity and higher chance of deeper product pages ranking

Best practices summary

• ❌ Avoid JavaScript-only “Load More” buttons
• ✅ Use clean, descriptive URLs (avoid parameters)
• ✅ Always use <a href> links for pagination items
• ✅ Expose as many pages as possible within reason
• ✅ Include rel=”next” and rel=”prev” where applicable
• ✅ Use internal links or sitemaps to help index deeper pages

Fun fact about rel=”next” and rel=”prev”

Around 2010 we hear Matt Cutts from Google saying:

“If you’ve got paginated content — like page 1, page 2, page 3 of a forum thread or article — it’s generally fine. We try to group those pages together and treat them as a logical whole. But it’s still good practice to use rel="next" and rel="prev" so we can better understand that relationship.”

Matt Cutts

In the same era, he also mentioned (in blog posts and conferences) that:

“We’d rather see one strong page than a bunch of thin paginated ones, especially if each page has only a small bit of unique content.”

Matt Cutts

The emphasis was on:

• Using rel="prev" and rel="next" to help Google understand sequence.
• Avoiding duplicate titles/meta descriptions across pages.
• And not blocking paginated URLs in robots.txt, because Google can’t then see the full structure.

What makes this quote highly amusing in hindsight is that in 2021 — nearly a decade later — Google casually revealed that they never actually used rel="next" and rel="prev" as indexing signals at all. This admission came via a tweet from Google SearchLiaison, stating that they had stopped using those hints “for several years” and that their systems were now “good at figuring out the relationship between pages on their own.” So all that time, SEOs were meticulously implementing pagination markup based on official guidance — only to find out it had no real impact. It’s a funny reminder that even well-meant advice from Google can age awkwardly.