Cara Optimasi Pagination untuk SEO

Page 1 | Page 2 | Page 3 | ... | Page 10

URL structure:
/blog/
/blog/page/2/
/blog/page/3/

Standard navigation numbers.

Halaman awal load 10 items
Click "Load More" → tambah 10 items
Content stays on same URL

URL tidak berubah.

Scroll down → auto load more content
No user action needed
Popular di social media

Challenging for SEO.

Old implementation:
<link rel="prev" href="/page/1/">
<link rel="next" href="/page/3/">

Status: Google ignored since 2019.
No longer necessary, but not harmful.

Google now:
- Crawls paginated pages individually
- Treats each as standalone page
- Uses internal links to discover

Focus on good internal linking.

<!-- Good: Standard links -->
<a href="/blog/page/2/">2</a>

<!-- Bad: JavaScript-only navigation -->
<span onclick="loadPage(2)">2</span>

Google needs HTML links to crawl.

<!-- Page 2 canonical -->
<link rel="canonical" href="https://example.com/blog/page/2/" />

Each paginated page = own canonical. Don't all point to page 1.

<!-- Page 1 -->
<title>Blog - My Site</title>

<!-- Page 2 -->
<title>Blog - Page 2 - My Site</title>

Prevent duplicate title issues.

<!-- Page 1 -->
<meta name="description" content="Latest blog posts..." />

<!-- Page 2 -->
<meta name="description" content="Blog posts - Page 2..." />

Or use dynamic descriptions.

<nav aria-label="Blog pagination">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="/blog/">1</a>
    </li>
    <li class="page-item active">
      <span class="page-link">2</span>
    </li>
    <li class="page-item">
      <a class="page-link" href="/blog/page/3/">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="/blog/page/4/">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Pagination">
  <a href="/blog/">« First</a>
  <a href="/blog/page/4/">‹ Previous</a>
  <span>Page 5 of 20</span>
  <a href="/blog/page/6/">Next ›</a>
  <a href="/blog/page/20/">Last »</a>
</nav>

Issues dengan infinite scroll:
- No page URLs untuk Google
- Can't access content directly
- JavaScript dependency
- No crawlable links

Bad for SEO out of the box.

// Update URL saat scroll
window.addEventListener("scroll", function () {
  if (userScrolledToNewSection) {
    history.pushState(null, null, "/page/2/");
  }
});

Implement:
1. Infinite scroll for JS users
2. Traditional pagination for crawlers
3. <noscript> fallback

Google gets traditional pages.

<!-- For users: infinite scroll -->
<div id="posts-container" data-infinite-scroll>
  <!-- Posts load here -->
</div>

<!-- For crawlers: pagination links -->
<noscript>
  <nav class="pagination">
    <a href="/page/2/">Page 2</a>
    <a href="/page/3/">Page 3</a>
  </nav>
</noscript>

<div id="posts">
  <!-- Initial posts -->
</div>

<button id="load-more" data-page="2">Load More</button>

<noscript>
  <a href="/page/2/">View More Posts</a>
</noscript>

// Load more with pushState
document.getElementById("load-more").addEventListener("click", function () {
  const page = this.dataset.page;

  // Fetch new content
  fetch(`/api/posts?page=${page}`)
    .then((response) => response.json())
    .then((data) => {
      // Append content
      appendPosts(data.posts);

      // Update URL
      history.pushState(null, null, `/page/${page}/`);

      // Update button for next page
      this.dataset.page = parseInt(page) + 1;
    });
});

Options:
1. Index all paginated pages
2. Index only page 1, noindex rest
3. View-all page (if manageable)

Recommendation:
Index all if content is unique on each.

Single page with all items:
/products/all/

Considerations:
- Page size (don't exceed 2MB)
- Load time
- User experience

Only for smaller collections.

Problem:
Page 1, 2, 3 have similar meta descriptions

Solution:
- Unique titles per page
- Unique descriptions
- Self-referencing canonicals

Problem:
Deep paginated pages not linked

Solution:
- Link to first/last pages
- Show range (1, 2, 3... 8, 9, 10)
- XML sitemap inclusion

Bad: /blog/?page=2
Good: /blog/page/2/

Clean URLs are better for:
- Users
- Sharing
- Crawling

<?php the_posts_pagination(array(
    'mid_size' => 2,
    'prev_text' => '‹ Previous',
    'next_text' => 'Next ›',
)); ?>

function custom_pagination($pages = '', $range = 2) {
    global $paged;

    if (empty($paged)) $paged = 1;

    echo '<nav class="pagination">';

    if ($paged > 1) {
        echo '<a href="' . get_pagenum_link($paged - 1) . '">Previous</a>';
    }

    for ($i = 1; $i <= $pages; $i++) {
        if ($i == $paged) {
            echo '<span class="current">' . $i . '</span>';
        } else {
            echo '<a href="' . get_pagenum_link($i) . '">' . $i . '</a>';
        }
    }

    if ($paged < $pages) {
        echo '<a href="' . get_pagenum_link($paged + 1) . '">Next</a>';
    }

    echo '</nav>';
}

Structure:
☐ Clean URLs (/page/2/, not ?page=2)
☐ Crawlable HTML links
☐ First/Last page links
☐ Reasonable number per page

SEO:
☐ Self-referencing canonicals
☐ Unique titles per page
☐ Unique meta descriptions
☐ Include in XML sitemap

Infinite Scroll/Load More:
☐ Fallback for crawlers
☐ pushState URL updates
☐ Static URLs accessible
☐ noscript alternative

Testing:
☐ Test with JS disabled
☐ Check crawlability (Screaming Frog)
☐ Verify in GSC Coverage
☐ Test deep page access