SEO-оптимизация Next.js: полное руководство 2025

Почему Next.js идеален для SEO

Next.js из коробки поддерживает SSR (Server-Side Rendering) и SSG (Static Site Generation) — два ключевых подхода для SEO-оптимизации. В отличие от чистого React, контент рендерится на сервере и сразу доступен поисковым роботам без выполнения JavaScript.

По нашему опыту, сайты на Next.js индексируются в 2-3 раза быстрее, чем SPA на чистом React. Это критично для бизнеса: чем быстрее страницы в индексе — тем быстрее органический трафик.

Обязательные метатеги

Каждая страница должна иметь уникальные title и description. В Next.js 14+ используйте Metadata API:

export const metadata = {
  title: 'Заголовок страницы | Бренд',
  description: 'Описание до 160 символов с ключевыми словами',
  keywords: ['ключевое слово 1', 'ключевое слово 2'],
  openGraph: {
    title: 'Заголовок для соцсетей',
    description: 'Описание для шеринга',
    images: ['/og-image.jpg'],
  },
}

JSON-LD разметка (Structured Data)

Structured data помогает поисковикам понять контент и показывать rich snippets. Добавляйте соответствующие схемы в зависимости от типа страницы:

• Organization — для главной страницы компании
• Article / BlogPosting — для статей блога
• Product — для страниц товаров
• LocalBusiness — для локального бизнеса
• FAQ — для страниц с вопросами и ответами

Core Web Vitals: LCP, FID, CLS

Google учитывает метрики производительности при ранжировании:

• LCP (Largest Contentful Paint) — должен быть менее 2.5 секунд
• FID (First Input Delay) — менее 100 миллисекунд
• CLS (Cumulative Layout Shift) — менее 0.1

Next.js 14+ с App Router показывает отличные результаты из коробки благодаря Server Components и автоматической оптимизации изображений.

Оптимизация для Яндекса

Яндекс имеет свои особенности индексации. Обязательно добавьте сайт в Яндекс.Вебмастер, создайте турбо-страницы для мобильных пользователей и настройте региональность, если работаете в конкретных городах.