## **The Problem with Traditional Pagination** Pagination is one of the most overlooked SEO challenges for large websites. ### **Why?** * **Search engines struggle with deep crawlability** – Traditional pagination structures often bury important content, making deep pages hard to reach. * **Users get frustrated** – Clicking through endless "Next" buttons or dealing with poorly designed pagination UI isn't user-friendly. We built an SEO-friendly pagination solution on our Strapi-powered blog at [Deploi.ca/blog](https://deploi.ca/blog), which has: * 4,100+ blog posts * 83 paginated listing pages This pagination system keeps deep content crawlable while providing a clean and intuitive user experience. ## **The Smart, SEO-Optimized Pagination Solution** Our pagination ensures that any listing page is reachable in just two clicks from the blog landing page while keeping the UI uncluttered. ### **How It Works** We use anchor pages and dynamic pagination updates instead of showing dozens of individual page links. When a user or search engine lands on a paginated page, they see a progressive pagination structure that adapts dynamically. ### **Pagination Structure Example** On the **Deploi** blog, here’s the pagination you see on the first page: ![001.webp](https://delicate-dawn-ac25646e6d.media.strapiapp.com/001_693e129325.webp) Users can navigate to the next page by clicking the second links. If we expand the ellipsis, here are the rendered links available to both users and search engines: ![002.webp](https://delicate-dawn-ac25646e6d.media.strapiapp.com/002_8768bfa097.webp) Google has access to all the pagination links within the current range (1-9), as well as anchor pages, which we defined in increments of ten. In this example, let’s say Google follows anchor page 30, the pagination will dynamically update to look like this: ![003.webp](https://delicate-dawn-ac25646e6d.media.strapiapp.com/003_4758d58e2a.webp) As you can see in the screenshot above, both users and Google have access to the previous page, the next page, the first page and the last page. But that’s not all, let’s reveal the first ellipsis by the left: ![004.webp](https://delicate-dawn-ac25646e6d.media.strapiapp.com/004_baa464efcb.webp) Now we can easily access all the previous anchor pages, which are pages 20 and 10\. By expanding the second ellipsis, we see that Google can crawl all the pages within the current range (30-39) and also access all the remaining anchor pages (40, 50, 60, 70, and 80): ![005.webp](https://delicate-dawn-ac25646e6d.media.strapiapp.com/005_23376b5d74.webp) If we click on page 37 for example, which is in the current range, pagination will update accordingly: ![006.webp](https://delicate-dawn-ac25646e6d.media.strapiapp.com/006_63faeb095b.webp) The shows that Google could reach the deepest listing page with only two link follows from the blog landng page and access any of the 4100+ blog posts with just three follows. ## **The Code Behind It** Our smart pagination system dynamically reveals relevant pages while keeping the UI intuitive. Let’s break down the key components of our React-based Pagination component. ### **Understanding the Props** Our Pagination component uses the following props: * `pageCount` – Total number of pages. * `gotoPage` – Callback function to navigate to a different page. * `searchString` – Optional search query parameter. * `startUrl` – Base URL for page navigation. * `pageInde` – Current active page. ### **Managing State** We use React’s `useState` and `useEffect` hooks to handle page changes and dynamic visibility: ```javascript const [activePage, setActivePage] = useState(pageIndex); const [showLeftPages, setShowLeftPages] = useState(false); const [showRightPages, setShowRightPages] = useState(false); useEffect(() => { setActivePage(pageIndex); setShowLeftPages(false); setShowRightPages(false); }, [pageIndex]); ``` * `activePage`: Keeps track of the currently selected page. * `showLeftPages` / `showRightPages`: Controls visibility of hidden anchor pages. * `useEffect` resets visibility states when the page index updates. ### **Generating Page Numbers** To create an SEO-friendly pagination structure, we generate page numbers dynamically: ```javascript ``` This ensures: * The first and last pages are always visible. * The current page and its neighbors (previous/next) are included. * Anchor pages at every 10th interval are displayed. ### **Handling Visibility** To avoid clutter, we only show pages based on specific conditions: ```javascript const isVisible = (page) => { if (page === 1 || page === pageCount) return true; if (page === activePage - 1 || page === activePage || page === activePage + 1) return true; if (showLeftPages && page < activePage) return true; if (showRightPages && page > activePage) return true; return false; }; ``` * First and last pages are always visible. * Previous, current, and next pages are always included. * Clicking the left/right ellipsis reveals hidden anchor and current range pages. ### **Handling Page Clicks** When a user selects a page, we update the state and trigger the `gotoPage` function: ```javascript const handlePageChange = (page) => { if (page >= 1 && page <= pageCount) { setShowLeftPages(false); setShowRightPages(false); gotoPage && gotoPage(page); } }; ``` For ellipsis clicks: ```javascript const handleLeftEllipsisClick = () => { setShowLeftPages(true); setShowRightPages(false); }; const handleRightEllipsisClick = () => { setShowRightPages(true); setShowLeftPages(false); }; ``` * Clicking the left ellipsis expands previous anchor pages. * Clicking the right ellipsis expands future anchor pages. ### **Rendering the Pagination UI** Each page number is displayed dynamically: ```javascript const renderPageNumbers = () => { const pages = generatePageNumbers(); let lastRenderedPage = 0; return (

{shouldShowLeftEllipsis && (

...

)}

{page < 10 ? `0${page}` : page}

{shouldShowRightEllipsis && (

...

)}

); }; ``` * If needed, the left ellipsis (`...`) is displayed before hidden pages. * If needed, the right ellipsis (`...`) is displayed after the current range. * Page links dynamically update based on visibility logic. ### **Wrapping Everything Together** Finally, the component renders the pagination UI: ```javascript return (

{renderPageNumbers()}

); ``` This ensures our pagination works across different screen sizes. By structuring pagination this way, we ensure: * Efficient crawling for search engines (deep content remains discoverable). * User-friendly navigation is retained by hiding crawler-foucsed links behind ellipsis. * Scalability for any large website (whether a blog, eCommerce store, or content-heavy platform). This approach solves pagination SEO issues while maintaining a great user experience. Want to implement this on your site? Get in touch with us at [Deploi.ca](https://deploi.ca).