SEO для Next.js: рендеринг, метаданные, карты сайта и блог, который ранжируется

SEO для Next.js сводится к правильному выбору для каждого маршрута: что рендерится на сервере, что кешируется и что попадает в HTML до запуска любого скрипта. Google объясняет в основах SEO для JavaScript, что обрабатывает JavaScript-приложения в три этапа (сканирование, рендеринг, индексирование) и что рендеринг на сервере или предварительный рендеринг «по-прежнему отличная идея». Next.js делает это по умолчанию. Руководство посвящено App Router (Next.js 13 и новее), с пояснениями для старого Pages Router.

Подходит ли Next.js для SEO?

Да. Обычное React-приложение с рендерингом на стороне клиента отдает почти пустой HTML-файл и собирает страницу в браузере; поисковикам нужно ее отрендерить, а многие боты этого не делают вовсе. Next.js рендерит React на сервере, поэтому HTML-ответ уже содержит заголовки, текст, ссылки и метаданные. Наше руководство по SEO для JavaScript объясняет, почему эта разница важна для индексирования.

В App Router компоненты по умолчанию являются Server Components. Даже компоненты с пометкой 'use client' пререндерятся в HTML на сервере. Слабое место: данные. Все, что вы загружаете внутри useEffect или только после клика, отсутствует в исходном HTML. Получайте контент в Server Components, а клиентские компоненты оставьте для интерактивности.

SSG, SSR, ISR или CSR: какой режим рендеринга выбрать?

Next.js позволяет сочетать режимы для разных маршрутов. Выбор влияет на свежесть, скорость и то, что получают роботы.

Документация Next.js по ISR перечисляет преимущества: обновлять статический контент «без пересборки всего сайта» и обслуживать большое число страниц без долгой сборки. Маршрут с export const revalidate = 3600 перегенерируется не чаще раза в час; для точного контроля вызывайте revalidatePath или revalidateTag при изменении контента. ISR не работает со статическим экспортом (output: 'export'). Для приложений, которые должны оставаться с клиентским рендерингом, наше руководство по SEO для одностраничных приложений описывает обходные пути.

Как задать заголовки, описания и canonical через Metadata API?

Metadata API заменяет next/head в App Router. Согласно документации Next.js по метаданным, вы экспортируете статический объект metadata из layout или страницы либо функцию generateMetadata, если значения зависят от данных, и Next.js генерирует теги head. Оба варианта поддерживаются только в Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Пять правил, которые предотвращают большинство проблем:

• Задайте metadataBase в корневом layout (ваш боевой домен), чтобы относительные canonical и адреса Open Graph стали абсолютными.
• Используйте шаблон заголовка в корневом layout, например '%s | Бренд', чтобы у каждой страницы был уникальный заголовок с брендом один раз.
• Дайте каждой индексируемой странице canonical на саму себя через alternates.canonical: он защищает от дублей из-за параметров URL и слеша в конце. Наша статья глоссария о теге canonical собирает правила.
• Пишите описание для каждой страницы, генерируя его из контента в generateMetadata, а не одно значение по умолчанию для всего сайта.
• Добавьте изображения Open Graph файлом opengraph-image в папке маршрута и проверьте результат в инструменте предпросмотра Open Graph.

На динамических страницах Next.js передает метаданные потоком после первых байтов, чтобы ускорить рендеринг. Документация уточняет, что потоковая передача отключена для ботов, которые ждут метаданные в head и определяются по user agent (среди примеров Bingbot, Twitterbot и Slackbot), а опция htmlLimitedBots позволяет изменить список. Если важного для вас краулера в нем нет, добавьте его. В Pages Router аналог: компонент Head из next/head с атрибутом key против дублирующихся тегов.

Как сгенерировать sitemap.xml и robots.txt в Next.js?

Оба файла специальные и лежат в папке app. Файл sitemap.ts, экспортирующий функцию со списком URL, превращается в /sitemap.xml; файл robots.ts превращается в /robots.txt. Справочник по карте сайта отмечает, что файл по умолчанию кешируется, а лимит Google составляет 50 000 URL на одну карту сайта; сверх него generateSitemaps делит ее на несколько файлов.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Включайте только канонические, индексируемые URL с ответом 200 и указывайте в lastModified реальную дату обновления. Для многоязычных сайтов карта сайта принимает и alternates.languages. В robots.ts укажите карту сайта и решите, каким ботам ИИ разрешено сканирование; наша статья о robots.txt для краулеров ИИ перечисляет их. Подробнее о формате в статье глоссария о XML-карте сайта.

Какие технические детали чаще всего ломают SEO сайта на Next.js?

Все эти проблемы снижают сканируемость: краулер должен находить каждый URL по ссылкам и получать чистый код ответа.

Как добавить структурированные данные в Next.js?

Документация Next.js рекомендует рендерить JSON-LD в теге script с типом application/ld+json прямо в компоненте страницы или layout, на основе тех же данных, что и страница, и экранировать символ < в сериализованном JSON, чтобы исключить инъекции. Поскольку разметка рендерится на сервере, Google и краулеры ИИ видят ее в исходном HTML. Используйте Article (или BlogPosting) для статей, Organization в корневом layout, BreadcrumbList для глубоких страниц и Product для интернет-магазина. Генератор schema даст корректный стартовый блок, а затем проверьте страницу инструментом проверки расширенных результатов Google.

Как сделать сайт на Next.js достаточно быстрым для Core Web Vitals?

В Next.js есть компоненты, которые устраняют типичные причины плохих Core Web Vitals:

• next/image: масштабирует изображения, отдает современные форматы, по умолчанию загружает их лениво и требует размеры, что предотвращает сдвиги макета. Отметьте главное изображение на первом экране как приоритетное, чтобы оно не загружалось лениво (обычно это элемент Largest Contentful Paint).
• next/font: размещает шрифты на вашем домене и убирает сдвиг из-за поздней подмены шрифта.
• next/script: загружает сторонние скрипты по стратегии (afterInteractive, lazyOnload), не блокируя страницу.
• Меньше клиентского JavaScript: каждая граница 'use client' добавляет код для загрузки и гидратации, что ухудшает Interaction to Next Paint на мобильных.

Измеряйте полевые данные, а не только лабораторный балл: наше руководство по PageSpeed Insights показывает, как читать и то и другое.

Как вести блог на Next.js, который ранжируется?

Блог на Next.js обычно устроен одним из трех способов: файлы MDX или Markdown в репозитории (просто, но каждая статья требует коммита и деплоя), headless CMS (Sanity, Contentful, Strapi, Payload), к которой обращаются из Server Components, или webhook публикации, принимающий статьи из внешнего инструмента. Во всех трех случаях SEO-схема одинакова: динамический маршрут app/blog/[slug] с generateStaticParams, generateMetadata и ISR, карта сайта из того же источника и страница-список со ссылками на все статьи.

Webhook отделяет публикацию от цикла деплоя. Route Handler принимает статью, сохраняет ее и затем ревалидирует нужные страницы:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Как SEO для Next.js помогает получать цитирования от ИИ-ассистентов?

Рендеринг на сервере является первым условием GEO (оптимизации для генеративных систем). Анализ Vercel от декабря 2024 года, The rise of the AI crawler, показал, что «ни один из крупных краулеров ИИ в настоящее время не рендерит JavaScript», назвал GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot и PerplexityBot и насчитал за месяц в своей сети 569 миллионов запросов GPTBot и 370 миллионов запросов Claude. Страница на Next.js, которая пререндерит текст, заголовки и JSON-LD, читается всеми ими; страница с клиентским рендерингом нет.

Второе условие: контент, который стоит цитировать. Это статьи, где каждый раздел отвечает на один вопрос, с источниками, цифрами и четкими определениями, опубликованные регулярно. Эту часть автоматизирует Sorank, наш продукт. Sorank: программа для SEO и GEO в режиме autopilot. Она находит ваши ключевые слова, а Генератор статей для блога пишет 20, 60 или 120 статей в месяц с источниками, внутренними ссылками и изображениями. К сайту на Next.js она подключается через пользовательский webhook, описанный на странице установки: ваш Route Handler принимает каждую статью, сохраняет ее и ревалидирует блог. Затем Отслеживание упоминаний в ИИ каждую неделю проверяет, цитируют ли ваш бренд ChatGPT, Claude и Gemini.

Итог: пререндерьте каждую страницу, которую должны находить, задавайте метаданные на сервере и наполняйте карту сайта из того же источника, что и контент. Next.js дает инструменты, а позиции и цитирования в ИИ зависят от того, что вы с их помощью публикуете. Чтобы регулярно наполнять блог на Next.js статьями, посмотрите тарифы Sorank: от 49 долларов в месяц и 3 дня бесплатного пробного периода.