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

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

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

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

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

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

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

import type { Metadata } from 'next';

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

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

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

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.id);

  return {
    title: `${product.name} - Купить по выгодной цене | EvaLab`,
    description: product.description,
    openGraph: {
      images: [{ url: product.imageUrl }],
    },
  };
}

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

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

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

export const metadata: Metadata = {
  metadataBase: new URL('https://evalab.site'),
  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://example.com/products/${p.slug}`,
    lastModified: new Date(p.updatedAt),
  }));

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

Практический блок EvaLab: SEO-чеклист для Next.js App Router

В Next.js App Router SEO ломается не только из-за мета-тегов. Частые проблемы: клиентский контент без нормального HTML, неправильные canonical, мягкие 404, дубли маршрутов и sitemap, который не отражает реальные страницы.

Мини-аудит

Проверьте сайт через аудит сайта и вручную откройте несколько URL из sitemap. Для коммерческих страниц важно, чтобы на каждой были краткий ответ, FAQ, structured data и внутренняя ссылка на услугу.

Резюме

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

Источники информации

В процессе подготовки материала использовались официальные спецификации:

• Раздел Metadata в документации Next.js — детальные инструкции по работе с Metadata API.
• Руководство Google для разработчиков по JavaScript SEO — особенности индексации SPA и SSR приложений поисковыми роботами Google.
• Next.js: metadata and OG images — актуальная документация фреймворка.

Проверяйте результат на собранном сайте: корректный API-код не гарантирует, что robots, canonical и метаданные попали в экспорт. Для проверки маршрутов полезен технический SEO-аудит.