Метаданные и SEO
metadata, generateMetadata, Open Graph, sitemap и robots.
Обновлено
Что такое метаданные
Метаданные — информация о странице в <head>: заголовок во вкладке, описание в Google, картинка, которая появляется, когда вы делитесь ссылкой. На странице их не видно, но они определяют, как сайт выглядит в поиске и соцсетях.
SEO (Search Engine Optimization) = всё, что вы делаете, чтобы поисковики понимали и хорошо показывали ваши страницы.
Виды метаданных
| Вид | Где появляется | Поле в Next |
|---|---|---|
| заголовок | вкладка, результат в Google | title |
| описание | под заголовком в Google | description |
| Open Graph | превью при публикации ссылки (Facebook, LinkedIn, Telegram) | openGraph |
| canonical | какой URL — «оригинал» (против дублей) | alternates.canonical |
| robots | индексировать / не индексировать | robots |
| иконка | иконка вкладки | файл icon.png |
Статические метаданные
// app/layout.tsx
export const metadata: Metadata = {
title: { default: 'learn.js', template: '%s · learn.js' }, // дочерние: «Функции · learn.js»
description: 'Короткие уроки по HTML, JS и Next.js.',
metadataBase: new URL('https://learn-js.vercel.app'), // для абсолютных URL в OG
}Динамические метаданные
Для страниц, зависящих от данных:
export async function generateMetadata({ params }: PageProps<'/blog/[slug]'>): Promise<Metadata> {
const post = await getPost((await params).slug) // та же кэшированная функция, что и в странице
return {
title: post.title,
description: post.excerpt,
openGraph: { title: post.title, images: [post.cover] },
alternates: { canonical: `/blog/${post.slug}` },
}
}Специальные файлы метаданных
| Файл | Генерирует |
|---|---|
app/sitemap.ts |
/sitemap.xml — список всех страниц для краулера |
app/robots.ts |
/robots.txt — что краулеру можно индексировать |
opengraph-image.tsx |
OG-картинку, сгенерированную через ImageResponse |
icon.png, favicon.ico, apple-icon.png |
иконки |
// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await getPosts()
return posts.map(p => ({ url: `https://site.ru/blog/${p.slug}`, lastModified: p.updatedAt }))
}SEO — что действительно важно
Полная тема — как работает Google, техническое SEO, ключевые слова, Analytics, аудит — в SEO.
| Фактор | Как решить |
|---|---|
| контент, отрендеренный на сервере | Server Components — краулер видит полный HTML |
| структура | семантический HTML, один <h1>, правильный lang |
| уникальные заголовок + описание на каждой странице | generateMetadata |
| скорость (Core Web Vitals) | next/image, next/font, мало JS — см. Как браузер отрисовывает страницу |
| расширенные результаты (звёзды, цены) | JSON-LD |
| чистые стабильные URL | /blog/nazvanie-stati, а не ?id=123 |
Коротко
- Метаданные = заголовок, описание, OG, canonical — в
<head>, на странице не видны. - Статический
metadataилиgenerateMetadataиз данных;sitemap.ts,robots.ts. - SEO = контент на сервере + семантический HTML + уникальные метаданные + скорость.