Пошук уроків, статей та іншого контенту
Як Next.js генерує теги <title>/<meta> і чому серверний рендеринг важливий для пошукових систем.
Пошукові системи й соціальні мережі (при показі прев'ю посилання) читають <title>, <meta name="description">, Open Graph-теги з HTML-відповіді сервера — якщо ці теги встановлює JavaScript у браузері вже після завантаження (як у класичному client-side-only SPA), частина сканерів може їх просто не побачити. Server Components в Next.js рендерять ці теги одразу в HTML-відповіді, без залежності від виконання JS у клієнта.
Для сторінок із фіксованим вмістом метадані задаються простим експортом об'єкта:
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Про нас — fullstack.org.ua",
description: "Українська освітня платформа для розробників.",
};
export default function AboutPage() {
return <h1>Про нас</h1>;
}Коли метадані залежать від даних (наприклад, заголовок сторінки статті — це заголовок самої статті з бази даних), використовують функцію generateMetadata замість статичного об'єкта:
// app/articles/[slug]/page.tsx
export async function generateMetadata({
params,
}: {
params: Promise<{ slug: string }>;
}): Promise<Metadata> {
const { slug } = await params;
const article = await getArticle(slug);
return {
title: `${article.title} — fullstack.org.ua`,
description: article.excerpt,
openGraph: { title: article.title, description: article.excerpt },
};
}Метадані layout.tsx і page.tsx об'єднуються (поля page.tsx перекривають однойменні поля layout.tsx) — типовий патерн: кореневий layout задає загальний title.template (наприклад, «%s — fullstack.org.ua») і опис за замовчуванням, а кожна сторінка перевизначає лише те, що для неї специфічне.
Використання статичного metadata-об'єкта там, де заголовок насправді залежить від даних сторінки — усі сторінки такого маршруту отримають однаковий title замість персонального.
Забути Open Graph-поля — посилання, надіслані в месенджерах чи соцмережах, показуватимуть непривабливе чи порожнє прев'ю замість заголовка й опису статті.
Дублювати опис у description на кожній сторінці однаковим текстом — пошукові системи це трактують як ознаку низької якості сторінки.
Метадані в Next.js рендеряться на сервері разом з HTML-відповіддю, тому доступні пошуковим сканерам одразу, без залежності від виконання JavaScript. Статичний export const metadata підходить для фіксованого вмісту; generateMetadata — для сторінок, чиї title/description залежать від даних; метадані layout і page об'єднуються, з пріоритетом сторінки.