Почему сайты на Next.js не попадают в топ Яндекса — и что с этим реально делать

Разобрал 11 проектов клиентов за год. Вот что убивает SEO у современных JS-сайтов — и как я это чиню

Когда клиент приходит ко мне с вопросом «почему сайт не индексируется», я уже знаю: скорее всего дело не в контенте. Дело в архитектуре.

За последний год я разобрал больше 10 проектов на Next.js и React. Везде одни и те же грабли. Собрал их в одном месте — чтобы вы не наступали.

Google давно научился рендерить JS. Яндекс — значительно хуже.

Если ваш сайт на чистом React (CRA или Vite) без SSR — Яндекс видит пустую страницу. Буквально. Открываете кэш в Яндексе, а там белый лист с одним <div id="root"></div> .

Я проверял это на реальном проекте: клиент три месяца ждал индексации. Переехали на Next.js с SSR — через две недели страницы начали появляться в поиске.

Что делать: Если продвигаетесь в Яндексе — только SSR или SSG. Никакого CSR без пререндера.

Это убивает примерно каждый второй проект.

Разработчик подключает React Helmet или аналог, прописывает title и description — и думает, что всё готово. Но краулер видит мету до того, как JavaScript выполнился. То есть не видит ничего.

В Next.js 16 с App Router это решается через generateMetadata() — метаданные отдаются прямо в HTML, до любого JS.

export async function generateMetadata({ params }) { return { title: 'Конкретный заголовок страницы', description: 'Описание, которое увидит и Яндекс, и пользователь', } }

Звучит очевидно. Но я до сих пор встречаю проекты, где мета в useEffect. Это просто выброшенные позиции.

Об этом я уже писал на конкретном примере с Яндекс.Метрикой — когда одна строчка кода породила 33 дубля.

Но это не единственный сценарий. Дубли появляются из-за:

?utm_source= и других utm-меток без канонических URL
Trailing slash: /about и /about/ — две разные страницы для краулера
www и без www — если нет редиректа
Фильтры в каталоге: /catalog?sort=price&order=asc

И канонический URL на каждой странице:

export const metadata = { alternates: { canonical: 'https://yoursite.ru/about', }, }

Яндекс Картинки — отдельный источник трафика, который большинство игнорирует.

Типичная картина: файл называется IMG_20240315_112847.jpg, alt пустой, размер 4 МБ.

Три правила, которые я внедряю на каждом проекте:

Имя файла — транслитерацией или по-английски, описывает содержимое: steklyannaya-dushevaya-sochi.jpg
Alt — короткое описание для человека, не для робота: «Стеклянная душевая на заказ в Сочи»
Компонент <Image> из Next.js — автоматически сжимает, конвертирует в WebP, проставляет размеры

Это не только SEO — это скорость сайта, а скорость влияет на позиции напрямую.

Я видел рабочие сайты без sitemap. Видел sitemap, в котором перечислены страницы с noindex. Видел robots.txt, который закрывал от индексации весь сайт — потому что скопировали из примера для разработки и забыли поменять.

В Next.js 16 sitemap генерируется автоматически:

// app/sitemap.js export default function sitemap() { return [ { url: 'https://yoursite.ru', lastModified: new Date(), changeFrequency: 'weekly', priority: 1, }, ] }

Добавьте его в Яндекс.Вебмастер и Google Search Console сразу после запуска. Не через месяц.

Почему сайты на Next.js не попадают в топ Яндекса — и что с этим реально делать

Проблема №1. Яндекс плохо рендерит JavaScript

Проблема №2. Метатеги генерируются на клиенте

Проблема №3. Дубли страниц из-за параметров URL

Проблема №4. Изображения без alt и с неправильными именами файлов

Проблема №5. Robots.txt и sitemap — про них вспоминают в последний момент