Зачем важны заголовки, meta-теги и описания

Заголовок страницы (title) и мета-описание — это то, что пользователь видит в результатах поиска (SERP). Они влияют на CTR и на первое впечатление о странице. Правильно оформленные мета-данные помогают поисковикам и социальным сетям понять, о чём страница, и улучшают видимость.

Важно: не дублируйте title и description на всех страницах, если контент отличается. Уникальные, релевантные мета-теги повышают качество страницы в глазах поисковых систем.

Основы: где добавлять мета-теги в Next.js

Next.js предоставляет компонент Head из пакета next/head. Этот компонент добавляет элементы в тег HTML-документа. Вы можете:

• Поместить Head в _app.js, чтобы задать общие мета-данные для всего приложения.
• Добавлять Head в отдельные страницы, чтобы переопределять или дополнять глобальные мета-теги.

Пример: глобальные мета-теги в _app.js

import '../styles/globals.css'
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return (
    <>
      
        
      
      
    
  )
}

export default MyApp

Если нужно, отдельная страница может добавить собственный Head, и Next.js объединит их, а на пересечении будет использоваться наиболее близко расположенный (страничный) Head.

Статические мета-теги для конкретной страницы

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

Откройте файл /pages/index.js и задайте title и description:

import Head from "next/head"

const Home = () => {
  return (
    <>
      
        
        
        
      
      

        
Welcome to my blog!
      
    
  )
}

export default Home

Ключевая мысль: Head добавляет элементы в страницы. Размещайте общие теги в _app.js, а уникальные — в страницах.

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

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

Пример динамической страницы поста:

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

Совет: валидируйте и очищайте значения title и description (удаляйте лишние переносы и теги), чтобы не допустить XSS или некорректного отображения в SERP.

Когда статические мета-теги не подходят

• Страница с пользовательским контентом (профили, корзины, поисковые результаты). В таких случаях нужны динамические мета-данные.
• Страницы, где содержимое часто меняется и важно показывать актуальную информацию в предпросмотре социальных сетей.

В этих сценариях используйте getServerSideProps или ISR (incremental static regeneration) для обновления мета-полей.

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

• Использовать библиотеки типа next-seo для упрощённой генерации Open Graph и Twitter Card тегов.
• Генерировать JSON-LD вручную и вставлять его через