Метаданные страницы — заголовок (title), мета-теги и мета-описание (meta description) — критичны для SEO. Они первые, что видит пользователь в результатах поиска, и от них зависит, кликнет ли он на вашу страницу. В Next.js эти элементы добавляются через компонент Head. Ниже — практическое руководство, примеры, чек-листы и рекомендации.

Добавление глобального тега Head для всех страниц Next.js

Next.js использует файл _app.js для инициализации страниц. Вы можете поместить там теги, общие для всего приложения.

import '../styles/globals.css'  
import Head from 'next/head'  
  
function MyApp({ Component, pageProps }) {  
  return <>  
      
        
      
      
    
}  
  
export default MyApp  

Размещая мета-теги в _app.js, вы гарантируете, что все страницы приложения получат эти значения по умолчанию. Если на странице есть собственный компонент Head, Next.js объединит теги и приоритет отдаст более специфичным (страничным) значениям там, где это применимо.

Важно: глобальные теги удобны для общих настроек (автор, общий viewport, базовые Open Graph), но уникальные страницы должны иметь свои заголовки и описания для лучшего SEO.

Добавление мета-тегов и описания на конкретной странице

Статические мета-теги подходят для страниц с постоянным содержимым, например домашней страницы.

import Head from "next/head";  
  
const Home= () => {  
  return (  
    <>  
      
        
        
        
      
    
  
      
Welcome to my blog!
  
    
  
      
  );  
};  
  
export default Home;  

Компонент Head добавляет элементы в секцию HTML-документа. Размещение это компонента на уровне страницы делает её метаданные уникальными для этой страницы.

Динамические мета-заголовки и описания

Если страница содержит динамический контент (посты блога, товары и т.д.), используйте getStaticProps, getStaticPaths или getServerSideProps, чтобы получить данные и подставить их в метатеги.

import { getAllPosts, getSinglePost } from "../../utils/mdx";  
import Head from "next/head";  
  
const Post = ({ title, description, content }) => {  
  return (  
    <>  
        
          
          
        
      
{/* page content */}
  
      
  );  
};  
  
export const getStaticProps = async ({ params }) => {  
  // get a single post  
  const post = await getSinglePost(params.id, "posts");  
  
  return {  
    props: { ...post },  
  };  
};  
  
export const getStaticPaths = async () => {  
  // Retrieve all posts  
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } }));  
  
  return {  
    paths,  
    fallback: false,  
  };  
};  
  
export default Post;  

Динамические заголовки повышают релевантность страниц в результатах поиска и улучшают CTR (процент кликов).

Что ещё стоит добавить в метаданные

• Open Graph (og:title, og:description, og:image) для социальных сетей;
• Twitter Card теги для Twitter-картинок и превью;
• rel=”canonical” для избежания дублей контента;
• hreflang для мультирегиональных / многоязычных сайтов.

Когда подход через Head может не сработать

• Если ваш проект рендерится полностью на клиенте и поисковый бот не индексирует JS — серверный рендеринг или использование prerendering обязательны.
• Если вы полагаетесь на JavaScript для регистрации динамических метаданных после загрузки страницы, некоторые боты могут не увидеть изменения.
• Для сложных SEO-правил (автоматическое формирование title с учетом структуры, шаблоны для e-commerce) может потребоваться более продвинутое решение, чем простые теговые вставки.

Альтернативные подходы и инструменты

• next-seo — удобная библиотека для управления SEO (ограничивает рутинную работу и добавляет шаблоны);
• Использование серверного рендеринга (getServerSideProps) для страниц, где метаданные зависят от частых изменений;
• CMS-интеграция: храните метаданные в CMS (Strapi, Contentful) и подтягивайте их в getStaticProps;
• Генерация sitemap.xml и robots.txt вместе с мета-тегами для комплексной SEO-оптимизации.

Мини-методология: как внедрить корректно (шаги)

1. Определите шаблоны title/description для типов страниц (главная, раздел, статья, товар).
2. Добавьте базовые теги в _app.js: viewport, базовые OG-теги, charset.
3. Реализуйте уникальные метатеги на уровне страниц и динамических маршрутов.
4. Добавьте Open Graph и Twitter Card, а также rel=”canonical”.
5. Протестируйте страницы в режиме SSR/SSG и через инструменты для проверки метатегов (View Source, curl, инструменты разработчика браузера).
6. Проверьте результат в Google Search Console: сканирование, индексирование, отображение фрагмента.

Чек-лист по ролям

• Разработчик:
  • Убедиться, что Head импортирован из “next/head”;
  • Разместить глобальные теги в _app.js;
  • Подготовить динамическую подмену метаданных через getStaticProps/getServerSideProps.
• SEO-специалист:
  • Определить шаблоны title/description;
  • Указать правила canonical и hreflang;
  • Проверить Open Graph и Twitter Card.
• Контент-менеджер:
  • Заполнить поля title/description в CMS;
  • Контролировать длину и релевантность описаний.
• QA:
  • Проверить наличие метатегов в исходном HTML (server-side).
  • Проверить корректность OG/Twitter в превьюшках.

Критерии приёмки

• Для каждой страницы присутствует title и meta description в исходном HTML.
• Open Graph теги добавлены и корректно показывают превью в социальных сетях.
• canonical указан для страниц с дублированным контентом.
• Динамические страницы подставляют корректные значения при сборке/рендере.

Примеры тестов и критериев

• Acceptance: При загрузке /posts/abc в исходном HTML заголовок равен ожидаемому “Заголовок поста” и meta description содержит описание из CMS.
• Edge: При отсутствии description генерируется fallback шаблон “Название — сайт”.

Безопасность и конфиденциальность

Мета-теги не должны содержать чувствительных данных (ключи, приватные идентификаторы). Храните и передавайте публичные метаданные отдельно от приватных API-ключей.

FAQ

Q: Нужно ли дублировать метаданные в _document.js?
A: Обычно нет. _document.js используется для начальной структуры HTML; метаданные удобнее управлять через _app.js и компоненты страниц. Используйте _document.js только для глобальных неизменяемых вставок.

Q: Как проверить, что бот видит мои мета-теги?
A: Посмотрите исходный HTML ответа сервера (curl или View Source). В Google Search Console используйте “Просмотреть как Google” или инструмент проверки URL.

Q: Стоит ли использовать next-seo?
A: Да, если нужно централизованно управлять шаблонами SEO и OG-метаданными — это упрощает поддержку.

Краткое резюме

• Используйте Head из “next/head” для добавления title и description.
• Глобальные теги в _app.js, уникальные — на уровне страницы.
• Для динамических страниц подставляйте значения из getStaticProps/getServerSideProps.
• Не забудьте Open Graph, canonical и инструменты тестирования.

Ключевые рекомендации: поддерживайте консистентные шаблоны, тестируйте исходный HTML и проверяйте превью в социальных сетях.