Next.js App Router для SEO-оптимизации крупных проектов

Переход с Pages Router на App Router в Next.js открыл новые горизонты для веб-разработки, но вместе с тем принес и новые вызовы для SEO-специалистов. Новые концепции Server Components, структуры директорий и встроенный механизм управления метаданными требуют пересмотра привычных подходов к оптимизации.

Разберем, как правильно настроить SEO для крупного корпоративного сайта или интернет-магазина на базе Next.js App Router.

1. Использование встроенного Metadata API

В App Router больше не нужно использовать библиотеку next/head. Next.js предоставляет мощный и типизированный Metadata API, который можно экспортировать как статический объект или генерировать динамически.

Статические метаданные

Для статических страниц достаточно экспортировать константу metadata из файла page.tsx или layout.tsx:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Разработка сайтов на Next.js под ключ | EvaLogic',
  description: 'Профессиональная разработка быстрых веб-приложений с поддержкой SEO.',
  alternates: {
    canonical: 'https://evalogic.ru/services/web-systems',
  },
};

Динамические метаданные

Для страниц товаров, услуг или статей в блоге метаданные должны формироваться на основе динамических параметров. Для этого используется функция generateMetadata:

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.id);
  
  return {
    title: `${product.name} - Купить по выгодной цене | EvaLogic`,
    description: product.description,
    openGraph: {
      images: [{ url: product.imageUrl }],
    },
  };
}

2. Оптимизация Canonical и Hreflang тегов

Дублирование контента — частая проблема крупных сайтов. Чтобы поисковые роботы правильно индексировали страницы, необходимо указывать канонические ссылки.

В layout.tsx на самом верхнем уровне настройте свойство metadataBase, чтобы Next.js автоматически разрешал относительные ссылки в абсолютные:

export const metadata: Metadata = {
  metadataBase: new URL('https://evalogic.ru'),
  alternates: {
    canonical: './',
    languages: {
      'ru-RU': './',
    },
  },
};

3. Динамическая генерация Sitemap и Robots

Вместо статических файлов в папке public в App Router рекомендуется использовать динамические файлы маршрутов sitemap.ts и robots.ts прямо внутри директории app.

Пример структуры app/sitemap.ts:

import { MetadataRoute } from 'next';
import { getProducts } from '@/lib/products';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await getProducts();
  const productUrls = products.map((p) => ({
    url: `https://evalogic.ru/products/${p.slug}`,
    lastModified: new Date(p.updatedAt),
  }));

  return [
    {
      url: 'https://evalogic.ru',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    ...productUrls,
  ];
}

Резюме

Next.js App Router предоставляет встроенные инструменты для решения любых SEO-задач. Использование Metadata API, правильная настройка рендеринга (SSR/ISR) и динамическая генерация служебных файлов позволяют достичь максимальной видимости в поисковых системах Яндекс и Google.