Переход с 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,
];
}
Практический блок EvaLogic: SEO-чеклист для Next.js App Router
В Next.js App Router SEO ломается не только из-за мета-тегов. Частые проблемы: клиентский контент без нормального HTML, неправильные canonical, мягкие 404, дубли маршрутов и sitemap, который не отражает реальные страницы.
| Зона | Что проверить | Почему важно | |---|---|---| | Metadata API | title, description, canonical, OG, Twitter | Управляет сниппетом и ссылками | | Статический HTML | Видимый H1, первый абзац, FAQ | Роботы должны видеть важный контент | | 404 | Несуществующие URL возвращают HTTP 404 | Иначе Яндекс видит мягкие дубли | | Sitemap | Все важные страницы в XML | Ускоряет обнаружение страниц | | Robots | Закрыты только служебные маршруты | Не блокирует полезный контент |
Мини-аудит
Проверьте сайт через аудит сайта и вручную откройте несколько 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.
- Рекомендации Vercel по SEO на Next.js — лучшие практики от авторов фреймворка.
