Во многих проектах на Next.js возможности для SEO остаются неиспользованными: страницы индексируются не полностью, структурированные элементы отсутствуют, а ссылки в соцсетях отображаются неправильно. Чтобы этого избежать, существуют проверенные инструменты и подходы, которые помогают сделать SEO понятным, полным и эффективным.
В данной статье рассмотрены ключевые аспекты настройки SEO в проектах на Next.js: работа с метаданными, генерация sitemap и robots.txt, оптимизация изображений и внедрение структурированных данных.
Введение
SEO (Search Engine Optimization) представляет собой совокупность методов, направленных на повышение видимости веб-ресурса в поисковых системах. Улучшение позиций в выдаче напрямую влияет на рост органического трафика и, как следствие, на эффективность цифровых продуктов.
Next.js умеет отдавать страницы сервером, заранее их генерировать и обновлять по мере необходимости — благодаря этому сайт работает быстрее и понятнее для поисковиков.
Плюс к этому, в Next.js удобно управлять маршрутизацией и метаданными, поэтому каждую страницу можно настроить так, как нужно. Всё это делает фреймворк хорошим выбором для проектов, которым важна видимость в поиске и стабильный органический трафик.
Стратегии рендеринга и их влияние на SEO
Одним из ключевых преимуществ Next.js является гибкость в выборе стратегии рендеринга, который напрямую влияет на индексацию и Core Web Vitals. Правильный выбор способа генерации страниц определяет, насколько быстро и качественно поисковые системы смогут обработать ваш контент.
Next.js предлагает три основные стратегии:
SSG (Static Site Generation) — статическая генерация
Идеально для: маркетинговых страниц, блогов, документации, каталогов товаров. Влияние на SEO: Идеальное. HTML генерируется на этапе сборки проекта и готов к индексации сразу. Максимальная скорость загрузки, минимальное время ответа сервера, отличные показатели Core Web Vitals.
SSR (Server-Side Rendering) — серверный рендеринг
Идеально для: персонализированных лент, профилей пользователей, страниц с динамическими данными в реальном времени (актуальные цены, наличие товаров, курсы валют). Влияние на SEO: Отличное. HTML генерируется при каждом запросе, содержит актуальные данные и легко индексируется поисковыми системами. Немного медленнее SSG, но всё ещё SEO-friendly.
CSR (Client-Side Rendering) — клиентский рендеринг
Идеально для: закрытых дашбордов, админ-панелей, личных кабинетов, где SEO не требуется. Влияние на SEO: Плохое. Контент генерируется в браузере пользователя с помощью JavaScript. Поисковые боты могут не увидеть содержимое или увидеть его с задержкой, что негативно влияет на индексацию.
Для SEO предпочтительнее использовать SSG или SSR. Next.js позволяет гибко комбинировать эти стратегии в одном проекте: применяйте SSG для статичных разделов (главная страница, информация о компании, блог) и SSR — для динамических страниц (каталоги с актуальными ценами, пользовательские профили). Избегайте CSR для общедоступных страниц, которые должны индексироваться поисковыми системами.
ISR (Incremental Static Regeneration) — это гибридный подход, сочетающий преимущества SSG и SSR. Страницы создаются на этапе сборки, но могут обновляться с заданной периодичностью без полной пересборки проекта.
Метаданные и их роль в SEO
Метаданные содержат информацию о странице, которая не отображается пользователю напрямую, но играет важную роль для поисковых систем и социальных платформ. Эти данные размещаются в блоке <head> HTML-документа и помогают поисковым роботам корректно интерпретировать содержимое страницы.
1.1. Установка пакета
Для начала установите пакет next-seo в ваш проект Next.js:
bash
npm install next-seo
#или
yarn add next-seoВ проектах на Next.js 13+ рекомендуется использовать App Router, так как он предоставляет встроенный механизм для управления метаданными через Metadata API. Это обеспечивает более строгую типизацию, удобную конфигурацию и нативную поддержку SEO-инструментов без внешних зависимостей.
Пример настройки метаданных в app/layout.tsx:
export const metadata = {
title: {
default: 'Мой сайт',
template: '%s | Мой сайт',
},
description: 'Описание сайта по умолчанию',
metadataBase: new URL('https://my-site.com'),
openGraph: {
title: 'Мой сайт',
description: 'Описание для социальных сетей',
images: ['/og-image.jpg'],
},
twitter: {
card: 'summary_large_image',
title: 'Мой сайт',
description: 'Описание для Twitter',
images: ['/twitter-image.jpg'],
},
};Если проект работает на Pages Router, используйте библиотеку next-seo — это наиболее удобное и проверенное решение для таких проектов.
1.2. Базовая конфигурация
Создайте файл next-seo.config.js в корне вашего проекта для хранения общих настроек SEO
import { NextSeoProps } from 'next-seo';
export default {
title: 'Онлайн-магазин — товары и аксессуары',
titleTemplate: '%s | Онлайн-магазин',
defaultTitle: 'Онлайн-магазин — товары и аксессуары',
description:
'Демонстрационный интернет-магазин с широким выбором товаров и аксессуаров. Удобный поиск, актуальные предложения и быстрая доставка по всему миру.',
canonical: 'https://example-shop.com/',
openGraph: {
url: 'https://example-shop.com/',
title: 'Онлайн-магазин — товары и аксессуары',
description:
'Выбирайте товары и аксессуары в демонстрационном интернет-магазине. Все предложения обновляются регулярно и сопровождаются подробными описаниями.',
images: [
{
url: 'https://example-shop.com/images/og-image-1.jpg',
width: 1200,
height: 630,
alt: 'Демонстрационное изображение товара',
},
{
url: 'https://example-shop.com/images/og-image-2.jpg',
width: 800,
height: 600,
alt: 'Пример акций и предложений',
},
],
site_name: 'Онлайн-магазин',
},
twitter: {
handle: '@example_shop',
site: '@example_shop',
cardType: 'summary_large_image',
},
} as NextSeoProps;1.3. Типы метаданных
Заголовок (Title): Отображается во вкладке браузера и является ключевым фактором для SEO.
html
<title>Заголовок страницы</title>Описание (Description): Краткое описание содержимого страницы, которое часто отображается в поисковой выдаче.
html
<meta name="description" content="Описание содержимого страницы." />Ключевые слова (Keywords): Устаревший, но все еще используемый тег для указания ключевых слов, связанных с контентом (полностью игнорируются поисковыми системами).
Open Graph (OG): Метатеги, которые контролируют то, как контент выглядит при публикации в социальных сетях, таких как Facebook или LinkedIn.
html
<meta property="og:title" content="Заголовок для соцсетей" />
<meta property="og:description" content="Описание для соцсетей" />
<meta property="og:image" content="URL_изображения" />Favicon: Небольшая иконка, отображаемая во вкладке сбраузера или адресной строке.
1.4. Интеграция в приложение
При работе с Next.js 13+ и App Router можно определять метаданные непосредственно в app/layout.tsx через встроенный API:
export const metadata = {
title: {
default: 'Заголовок сайта по умолчанию',
template: '%s | Название сайта',
},
description: 'Описание сайта по умолчанию',
metadataBase: new URL('https://your-domain.com'),
openGraph: {
title: 'Заголовок для соцсетей',
description: 'Описание для соцсетей',
images: ['/og-image.jpg'],
},
};Для проектов, использующих Pages Router, можно по-прежнему подключать глобальные настройки через _app.tsx с помощью next-seo:
import { NextSeo } from 'next-seo';
import defaultSEOConfig from '../next-seo.config';
export function MyApp({ Component, pageProps }) {
return (
<>
<NextSeo {...defaultSEOConfig} />
<Component {...pageProps} />
</>
);
}Использование NextSeo на страницах
После настройки базовой конфигурации важно уметь управлять SEO-параметрами на уровне отдельных страниц. Это позволяет задавать уникальные метаданные, контролировать индексацию и добавлять структурированные данные в зависимости от содержания конкретного маршрута.
Ниже рассмотрены ключевые возможности работы с NextSeo в реальных сценариях.
2.1. Динамические метаданные
Для каждой страницы вы можете импортировать и использовать компонент NextSeo для переопределения или дополнения глобальных настроек:
const seoTitle = `Купить ${productName} по выгодной цене`;
const seoDescription = `На нашем сайте можно купить ${productName} с гарантией качества. Доставка по удобным условиям: ${deliveryLocation}.`;
const seoCanonical = `${process.env.NEXT_PUBLIC_SITE_URL}/products/${productId}`;
return (
<>
<NextSeo
title={seoTitle}
description={seoDescription}
canonical={seoCanonical}
openGraph={{
title: seoTitle,
url: seoCanonical,
description: seoDescription,
}}
/>
<YourComponent />
</>
);2.2. Расширенные опции
NextSeo предоставляет множество опций для тонкой настройки:
noindex и nofollow:Управление индексацией страниц.titleTemplate:Шаблон для заголовков страниц (например, %s | Название сайта).additionalMetaTagsиadditionalLinkTags:Добавление произвольных метатегов и ссылок.
Управление индексацией: robots.txt и sitemap.xml
Для эффективного взаимодействия с поисковыми роботами необходимо правильно настроить файлы robots.txt и sitemap.xml.
Файл robots.txt — Инструкция для роботов “Что сканировать нельзя”
Файл robots.txt — это текстовый документ, который размещается в корне сайта (например, https://example.com/robots.txt) и сообщает поисковым роботам, какие разделы ресурса можно сканировать, а какие — нет.
При работе с Next.js 13+ и App Router правила для robots.txt определяются в файле app/robots.ts, без необходимости создавать файл вручную.
import { MetadataRoute } from 'next';
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
disallow: ['/admin/', '/api/'],
},
sitemap: 'https://example.com/sitemap.xml',
};
}Файл выполняет рекомендательную функцию: поисковые роботы придерживаются его правил добровольно. Корректные поисковики (Google, Яндекс и др.) учитывают указанные ограничения, но вредоносные или нестандартные боты могут их полностью игнорировать.
Поэтому robots.txt не подходит для сокрытия конфиденциальной информации — такие данные следует защищать другими инструментами.
Базовая структура и директивы:
User-agent: [Имя_робота]
Disallow: [Путь_к_запрещенной_области]
Allow: [Путь_к_разрешенной_области_внутри_запрещенной]
Sitemap: [URL_вашей_карты_сайта]User-agent: Определяет, для какого поискового робота предназначены правила. * означает “все роботы”.
Disallow: Указывает путь или папку, которую нельзя сканировать. Пустая строка Disallow: означает “разрешено все”.
Allow: Используется, чтобы сделать исключение внутри запрещенной директории. Особенно полезно для робота Яндекс.
Sitemap: Указывает полный URL на ваш файл sitemap. Рекомендуется всегда добавлять.
Примеры:
1. Стандартный разрешающий файл (для большинства сайтов):
User-agent: *
Disallow: /admin/
Disallow: /private/
Disallow: /tmp/
Allow: /public/assets/
Sitemap: https://example.com/sitemap.xml2. Полный запрет сканирования (для сайта в разработке):
User-agent: *
Disallow: /3. Запрет сканирования для определенного робота:
User-agent: Yandex
Disallow: /cgi-bin
Disallow: /?sort=
User-agent: *
Disallow: /admin/
Sitemap: https://example.com/sitemap.xmlЗдесь роботу Яндекса запрещены дополнительные пути, включая URL с параметрами ?sort=.
Чего НЕЛЬЗЯ блокировать через robots.txt:
Конфиденциальные данные (используйте пароль или noindex).
Важные для SEO страницы (CSS, JS). Современные роботы Google умеют их интерпретировать.
Файл sitemap.xml — Приглашение для роботов “Вот самые важные страницы”
Это XML-файл, который содержит список всех важных URL вашего сайта вместе с дополнительной мета-информацией (дата последнего изменения, частота обновления, приоритет).
Его цель — помочь роботам обнаружить и быстрее проиндексировать ваш контент.
Базовая структура:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2023-10-25</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/about</loc>
<lastmod>2023-10-20</lastmod>
<changefreq>yearly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://example.com/blog/post-1</loc>
<lastmod>2023-10-26</lastmod>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
</urlset><loc>: Полный URL страницы (обязательный тег).
<lastmod>: Дата последнего изменения в формате ГГГГ-ММ-ДД (рекомендуется).
<changefreq>: Примерная частота изменений.
<priority>: Приоритетность URL относительно других.
Практические советы по sitemap:
Включайте только канонические URL.
Размер: не более 50 000 URL или 50 МБ.
Используйте индекс sitemap, если URL больше лимита:
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://example.com/sitemap-posts.xml</loc>
<lastmod>2023-10-26</lastmod>
</sitemap>
<sitemap>
<loc>https://example.com/sitemap-pages.xml</loc>
<lastmod>2023-10-25</lastmod>
</sitemap>
</sitemapindex>Генерируйте автоматически.
При использовании App Router в Next.js 13+ sitemap можно создавать нативно, определив соответствующую конфигурацию в файле app/sitemap.ts, без необходимости подключать сторонние библиотеки.
import { MetadataRoute } from 'next';
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://example.com',
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 1,
},
{
url: 'https://example.com/about',
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 0.8,
},
];
}Для проектов, использующих Pages Router, удобно применять пакет next-sitemap.
1 - Установка next-sitemap:
npm install next-sitemap
2 - Создание файла конфигурации:
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: process.env.SITE_URL || 'https://example.com',
generateRobotsTxt: true,
changefreq: 'daily',
priority: 0.7,
sitemapSize: 7000,
outDir: 'public',
}3 - Добавьте скрипт в package.json:
{
"build": "next build",
"postbuild": "next-sitemap"
}Синергия: Как robots.txt и sitemap.xml работают вместе
Нужно указать расположение sitemap прямо в robots.txt.
User-agent: *
Disallow: /admin/
Disallow: /cart/
Sitemap: https://example.com/sitemap.xmlЧто делать после настройки?
Проверьте файлы через Google Search Console и Яндекс.Вебмастер.
Добавьте sitemap вручную в панели вебмастеров.
Обновляйте sitemap регулярно, если публикуете контент.
Итог:
robots.txt — “сторож”, контролирующий зону доступа.
sitemap.xml — “гид”, показывающий важные страницы.
Корректно настроенные robots.txt и sitemap.xml помогают поисковым системам быстрее ориентироваться на сайте и индексировать его ровно так, как вам нужно.
Работа с JSON-LD для структурированных данных
Структурированные данные помогают поисковым системам лучше понять содержание вашей страницы и могут привести к появлению расширенных результатов поиска (rich snippets). next-seo предоставляет компоненты для генерации JSON-LD.
3.1. Использование JSON-LD в App Router
При использовании App Router JSON-LD интегрируется напрямую в страницу через встроенный <script type="application/ld+json">. Такой подход даёт полный контроль над структурой данных и не требует дополнительных пакетов.
Пример внедрения в app/blog/[slug]/page.tsx:
export default function BlogPost({ params }) {
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: 'Заголовок статьи',
description: 'Описание статьи',
image: 'https://your-site.com/image.jpg',
datePublished: '2023-01-01T00:00:00Z',
author: {
'@type': 'Person',
name: 'Автор статьи',
},
};
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
{/* Остальное содержимое страницы */}
</>
);
}3.2. Использование ArticleJsonLd в Pages Router
Для проектов на Pages Router next-seo остаётся удобным инструментом: библиотека предоставляет готовые компоненты для генерации JSON-LD, такие как ArticleJsonLd, ProductJsonLd, FAQPageJsonLd и другие.
jsx
import { ArticleJsonLd } from 'next-seo';
const BlogPostPage = ({ post }) => {
return (
<>
<ArticleJsonLd
useAppDir={true} // Если используете Next.js 13+ с директорией app
url={`https://your-site.com/blog/${post.slug}`}
title={post.title}
description={post.excerpt}
datePublished={post.publishedAt}
authorName={post.author.name}
publisherName="Название вашего сайта"
publisherLogo="https://your-site.com/logo.png"
images={[post.image]}
/>
{/* Остальная часть страницы */}
</>
);
};3.3. Пример использования FAQPageJsonLd
Для страниц с часто задаваемыми вопросами:
jsx
import { FAQPageJsonLd } from 'next-seo';
const FAQPage = () => {
return (
<>
<FAQPageJsonLd
mainEntity={[
{
questionName: "Как начать работу?",
acceptedAnswer: "Чтобы начать, зарегистрируйтесь на нашем сайте.",
},
{
questionName: "Какие методы оплаты вы принимаете?",
acceptedAnswer: "Мы принимаем кредитные карты и PayPal.",
},
]}
/>
{/* Содержимое страницы */}
</>
);
};Оптимизация для социальных сетей
Корректная настройка метаданных для социальных платформ обеспечивает привлекательное отображение ссылок при публикации и повышает вовлечённость пользователей.
В зависимости от того, используется ли App Router или Pages Router, подход к интеграции Open Graph и Twitter Cards будет отличаться. Ниже приведены необходимые элементы настройки и их практическое применение.
4.1. Open Graph протокол
Протокол Open Graph используется социальными сетями, такими как Facebook и LinkedIn, для форматирования контента при публикации ссылок. next-seo упрощает добавление Open Graph тегов через проп openGraph:
jsx
<NextSeo
openGraph={{
title: "Заголовок для соцсетей",
description: "Описание для соцсетей",
url: "https://your-site.com/page",
type: "article",
article: {
publishedTime: "2023-01-01T00:00:00Z",
modifiedTime: "2023-01-02T00:00:00Z",
authors: ["https://your-site.com/author/john-doe"],
tags: ["тег1", "тег2"],
},
images: [
{
url: "https://your-site.com/og-image.jpg",
width: 800,
height: 600,
alt: "Описание изображения",
},
],
}}
/>4.2. Twitter Cards
В App Router метаданные Twitter задаются непосредственно через объект metadata в layout.tsx или page.tsx:
jsx
<NextSeo
twitter={{
handle: "@handle",
site: "@site",
cardType: "summary_large_image",
}}
/>Для Pages Router настройки выполняются через NextSeo, где рекомендуется явно указывать Twitter-specific параметры:
<NextSeo
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
// Явно указываем Twitter данные
title="Заголовок"
description="Описание"
openGraph={{
images: [
{
url: 'https://your-site.com/image.jpg',
width: 800,
height: 600,
alt: 'Alt текст',
},
],
}}
/>Важно: всегда указывайте twitter:image, twitter:title и twitter:description явно. Это обеспечивает корректное отображение карточек, снижает зависимость от обработки Open Graph-тегов со стороны Twitter и помогает избежать возможных проблем с кешированием.
Дополнительные возможности
Помимо основных SEO-настроек, next-seo позволяет добавлять расширенные элементы, которые делают страницу более понятной для поисковых систем. Они не обязательны для каждого проекта, но в ряде случаев заметно повышают качество представления сайта в выдаче.
5.1. Хлебные крошки (Breadcrumbs)
next-seo предоставляет компонент BreadcrumbJsonLd для добавления структурированных данных о навигационной цепочке:
jsx
import { BreadcrumbJsonLd } from 'next-seo';
const ProductPage = ({ product }) => {
return (
<>
<BreadcrumbJsonLd
itemListElements={[
{
position: 1,
name: "Главная",
item: "https://your-site.com",
},
{
position: 2,
name: "Категория",
item: "https://your-site.com/category",
},
{
position: 3,
name: product.name,
item: `https://your-site.com/product/${product.id}`,
},
]}
/>
{/* Содержимое страницы */}
</>
);
};5.2. Поиск сайтлинков (Sitelinks SearchBox)
Если на вашем сайте есть поиск, вы можете помочь Google понять его с помощью SiteLinksSearchBoxJsonLd:
jsx
import { SiteLinksSearchBoxJsonLd } from 'next-seo';
const HomePage = () => {
return (
<>
<SiteLinksSearchBoxJsonLd
url="https://your-site.com"
potentialActions={[
{
target: "https://your-site.com/search?q",
queryInput: "search_term_string",
},
]}
/>
{/* Содержимое страницы */}
</>
);
};5.3. Канонические URL и борьба с дублированием контента
App Router:
// В layout.tsx или page.tsx
export const metadata = {
metadataBase: new URL('https://your-domain.com'),
alternates: {
canonical: '/',
languages: {
'en-US': '/en-US',
'ru-RU': '/ru-RU',
},
},
};
// Для динамических страниц
export async function generateMetadata({ params }) {
return {
title: 'Заголовок страницы',
alternates: {
canonical: `/blog/${params.slug}`,
},
};
}
Pages Router:<NextSeo
canonical="https://your-site.com/canonical-url"
languageAlternates={[
{
hrefLang: 'ru',
href: 'https://your-site.com/ru',
},
]}
/>Лучшие практики и распространенные ошибки
Эффективная SEO-оптимизация требует не только правильной настройки инструментов, но и понимания принципов, которые позволяют добиться устойчивых результатов.
6.1. Лучшие практики
Используйте Metadata API в App Router — это официальное, стабильное и наиболее эффективное решение для работы с метаданными в Next.js 13+.
Всегда указывайте metadataBase — это предотвращает ошибки в формировании абсолютных URL для Open Graph, Twitter и canonical-ссылок.
Явно задавайте Twitter Cards — не стоит полагаться на автоматическую интерпретацию Open Graph-тегов.
Используйте канонические URL — помогает бороться с дублирующимся контентом и улучшает качество индексации.
Оптимизируйте Core Web Vitals — скорость и стабильность сайта напрямую влияют на ранжирование.
Регулярно проверяйте проект в Search Console и тестируйте структурированные данные с помощью Rich Results Test, чтобы убедиться в корректной разметке.
Answer Engine Optimization (AEO) — добавляйте FAQ-блоки с FAQPageJsonLd разметкой для повышения шансов попадания в ответы AI-ассистентов (ChatGPT, Gemini).
Мониторинг Core Web Vitals — отслеживайте LCP, CLS и INP как прямые факторы ранжирования. Next.js оптимизирован для их достижения "из коробки", но регулярная проверка через PageSpeed Insights выявит узкие места.
6.2. Распространенные ошибки
Дублирование метатегов: Избегайте одновременного использования next-seo и встроенного Head из Next.js для одних и тех же тегов.
Неполные данные: Убедитесь, что вы предоставляете все обязательные поля для выбранного типа структурированных данных.
Игнорирование социальных сетей: Не забывайте настраивать Open Graph и Twitter карточки для улучшения шаринга в соцсетях.
Заключение
Правильная настройка SEO в Next.js обеспечивает быструю индексацию, корректное отображение в поисковой выдаче и социальных сетях.
Ключевые преимущества next-seo:
Next.js 13+ (App Router): используйте встроенный Metadata API — он полностью покрывает работу с метатегами, Open Graph, Twitter Cards и каноническими URL. Структурированные данные (JSON-LD) внедряйте напрямую через <script type="application/ld+json">.
Next.js Pages Router: используйте next-seo — библиотека предоставляет готовые компоненты для всех SEO-задач.
Выбор подхода
- Минимум шаблонного кода благодаря встроенным API
- Гибкий выбор стратегий рендеринга (SSG, SSR, ISR)
- Простая интеграция с социальными платформами
- Удобное добавление структурированных данных
- Высокие показатели Core Web Vitals "из коробки"
Правильное использование возможностей Next.js вместе с современными SEO-практиками помогает сайту быстрее появляться в поиске, привлекать больше трафика и работать эффективнее.