Pagination та SEO · fullstack.org.ua

Просунутий19 хв· Fullstack Team

Pagination та SEO

Розберете вплив пагінації на індексацію та налаштуєте URL, canonical і посилання для сторінок списків.

Що таке пагінація з погляду SEO

Пагінація розділяє великий список на окремі URL:

text

/catalog
/catalog?page=2
/catalog?page=3

Кожна сторінка списку може бути окремим документом, який пошуковий робот:

знаходить через HTML-посилання;
обходить;
індексує;
показує у результатах пошуку, якщо сторінка має самостійну цінність.

Пагінація сама по собі не є проблемою для SEO. Проблеми виникають, коли:

усі сторінки мають однаковий canonical на першу сторінку;
наступні сторінки доступні лише після виконання JavaScript;

tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: {
    default: "Каталог",
    template: "%s | Example",
  },
  description: "Каталог товарів Example",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="uk">
      <body>{children}</body>
    </html>
  );
}

tsx

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";

type SearchParams = Promise<{
  page?: string;
  category?: string;
}>;

type Product = {
  id: number;
  name: string;
  category: string;
};

const products: Product[] = [
  { id: 1, name: "TypeScript для розробників", category: "books" },
  { id: 2, name: "Архітектура вебзастосунків", category: "books" },
  { id: 3, name: "Механічна клавіатура", category: "devices" },
  { id: 4, name: "Монітор 27 дюймів", category: "devices" },
  { id: 5, name: "Практика Next.js", category: "books" },
  { id: 6, name: "USB-C док-станція", category: "devices" },
  { id: 7, name: "Курс із вебдоступності", category: "books" },
];

const ITEMS_PER_PAGE = 3;

function getPage(value: string | undefined): number {
  const page = Number(value);

  if (!Number.isInteger(page) || page < 1) {
    return 1;
  }

  return page;
}

function buildCatalogUrl({
  page,
  category,
}: {
  page?: number;
  category?: string;
}): string {
  const params = new URLSearchParams();

  if (category) {
    params.set("category", category);
  }

  // Першу сторінку представляємо URL без параметра page.
  if (page && page > 1) {
    params.set("page", String(page));
  }

  const query = params.toString();
  return query ? `/catalog?${query}` : "/catalog";
}

async function getCatalogData(category: string | undefined) {
  const filteredProducts = category
    ? products.filter((product) => product.category === category)
    : products;

  const totalPages = Math.ceil(filteredProducts.length / ITEMS_PER_PAGE);

  return {
    products: filteredProducts,
    totalPages,
  };
}

export async function generateMetadata({
  searchParams,
}: {
  searchParams: SearchParams;
}): Promise<Metadata> {
  const params = await searchParams;
  const page = getPage(params.page);
  const category = params.category;

  const { totalPages } = await getCatalogData(category);

  // Некоректні сторінки не повинні отримувати індексовані метадані.
  if (page > totalPages && totalPages > 0) {
    return {
      title: "Сторінку не знайдено",
      robots: {
        index: false,
        follow: false,
      },
    };
  }

  const canonical = buildCatalogUrl({
    page,
    category,
  });

  const pageTitle = category
    ? `Каталог: ${category}${page > 1 ? ` — сторінка ${page}` : ""}`
    : `Каталог${page > 1 ? ` — сторінка ${page}` : ""}`;

  return {
    title: pageTitle,
    alternates: {
      canonical,
    },
    robots: {
      index: true,
      follow: true,
    },
  };
}

export default async function CatalogPage({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const params = await searchParams;
  const page = getPage(params.page);
  const category = params.category;

  const { products: filteredProducts, totalPages } =
    await getCatalogData(category);

  if (page > totalPages && totalPages > 0) {
    notFound();
  }

  const startIndex = (page - 1) * ITEMS_PER_PAGE;
  const visibleProducts = filteredProducts.slice(
    startIndex,
    startIndex + ITEMS_PER_PAGE,
  );

  const previousUrl =
    page > 1
      ? buildCatalogUrl({
          page: page - 1,
          category,
        })
      : null;

  const nextUrl =
    page < totalPages
      ? buildCatalogUrl({
          page: page + 1,
          category,
        })
      : null;

  return (
    <main>
      <h1>{category ? `Каталог: ${category}` : "Каталог"}</h1>

      <ul>
        {visibleProducts.map((product) => (
          <li key={product.id}>
            <article>
              <h2>{product.name}</h2>
              <p>Категорія: {product.category}</p>
            </article>
          </li>
        ))}
      </ul>

      {totalPages > 1 && (
        <nav aria-label="Пагінація каталогу">
          {previousUrl && (
            <Link href={previousUrl} rel="prev">
              Попередня
            </Link>
          )}

          <ul>
            {Array.from({ length: totalPages }, (_, index) => {
              const pageNumber = index + 1;
              const pageUrl = buildCatalogUrl({
                page: pageNumber,
                category,
              });

              return (
                <li key={pageNumber}>
                  <Link
                    href={pageUrl}
                    aria-current={pageNumber === page ? "page" : undefined}
                  >
                    {pageNumber}
                  </Link>
                </li>
              );
            })}
          </ul>

          {nextUrl && (
            <Link href={nextUrl} rel="next">
              Наступна
            </Link>
          )}
        </nav>
      )}
    </main>
  );
}

Pagination та SEO

Що таке пагінація з погляду SEO

URL для сторінок списку

Коли використовувати шлях замість query-параметра

Canonical для пагінації

`rel="next"` і `rel="prev"`

Реалізація в Next.js App Router

Конфігурація `metadataBase`

Сторінка каталогу

Чому посилання мають бути серверними

Керування недійсними сторінками

Canonical і дублікати query-параметрів

`noindex` для пагінації

Сторінка після зміни фільтра

Перевірка реалізації

Типові помилки

Один canonical для всіх сторінок

Пагінація лише через `onClick`

Відображення `page=1` як окремої сторінки

Статус `200` для будь-якого номера сторінки

Втрата фільтра під час переходу

Canonical на URL із неперевіреним доменом

Підсумок

Pagination та SEO

Що таке пагінація з погляду SEO

URL для сторінок списку

Коли використовувати шлях замість query-параметра

Canonical для пагінації

rel="next" і rel="prev"

Реалізація в Next.js App Router

Конфігурація metadataBase

Сторінка каталогу

Чому посилання мають бути серверними

Керування недійсними сторінками

Canonical і дублікати query-параметрів

noindex для пагінації

Сторінка після зміни фільтра

Перевірка реалізації

Типові помилки

Один canonical для всіх сторінок

Пагінація лише через onClick

Відображення page=1 як окремої сторінки

Статус 200 для будь-якого номера сторінки

Втрата фільтра під час переходу

Canonical на URL із неперевіреним доменом

Підсумок

`rel="next"` і `rel="prev"`

Конфігурація `metadataBase`

`noindex` для пагінації

Пагінація лише через `onClick`

Відображення `page=1` як окремої сторінки

Статус `200` для будь-якого номера сторінки