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 дні безкоштовного пробного періоду.