Пошук уроків, статей та іншого контенту
Ознайомитеся з принципами технічного SEO та можливостями Next.js для оптимізації сторінок у пошукових системах.
SEO — це набір практик, які допомагають пошуковим системам:
знайти сторінку;
завантажити її вміст;
зрозуміти структуру та тему;
вирішити, чи варто показувати сторінку у результатах пошуку.
Технічне SEO стосується не якості самого тексту, а технічних умов для його доступності та правильного розуміння. Серед таких умов:
доступність сторінки для сканування;
коректні HTTP-відповіді;
унікальний заголовок і опис;
зрозуміла структура HTML;
адаптивність для мобільних пристроїв;
швидке завантаження;
відсутність дубльованих URL;
правильні robots.txt і sitemap.
SEO не гарантує певну позицію у пошуковій видачі. Next.js лише надає інструменти, які спрощують технічну оптимізацію.
У звичайному клієнтському JavaScript-застосунку браузер спочатку отримує мінімальний HTML, а потім JavaScript формує вміст сторінки. Це може ускладнювати сканування та сповільнювати появу основного вмісту.
Next.js може створювати HTML на сервері або під час збирання проєкту. У результаті пошуковий робот отримує сторінку з уже доступним вмістом.
Це корисно для SEO, але сам факт використання серверного рендерингу не робить сторінку автоматично оптимізованою. Важливо також:
додати коректні метадані;
забезпечити доступність маршруту;
використовувати зрозумілу HTML-структуру;
не приховувати основний вміст за обов’язковим виконанням дій у браузері.
Маршрути Next.js мають зрозумілі URL, наприклад:
/about
/blog
/blog/nextjs-seoТакі адреси легше читати користувачам і пошуковим системам, ніж URL із великою кількістю незрозумілих параметрів.
Для кожної важливої сторінки варто визначити:
стабільну адресу;
зрозумілу назву;
одне основне призначення;
спосіб переходу на неї з інших сторінок.
Метадані не є основним вмістом сторінки, але вони описують її для браузерів, соціальних мереж і пошукових систем.
Найважливіші елементи:
title — назва сторінки;
description — короткий опис;
canonical — основна URL-адреса сторінки серед можливих дублікатів;
Open Graph-метадані — інформація для попереднього перегляду під час поширення посилання.
У Next.js з App Router метадані можна оголошувати через експорт metadata з layout.tsx або page.tsx.
Структура мінімального прикладу:
app/
layout.tsx
page.tsx
robots.ts
sitemap.tsapp/layout.tsx:
import type { Metadata } from "next";
import type { ReactNode } from "react";
export const metadata: Metadata = {
metadataBase: new URL("https://example.com"),
title: {
default: "Frontend Academy",
template: "%s | Frontend Academy",
},
description: "Навчальні матеріали для веброзробників.",
alternates: {
canonical: "/",
},
openGraph: {
title: "Frontend Academy",
description: "Навчальні матеріали для веброзробників.",
url: "https://example.com",
siteName: "Frontend Academy",
type: "website",
},
};
export default function RootLayout({
children,
}: {
children: ReactNode;
}) {
return (
<html lang="uk">
<body>{children}</body>
</html>
);
}app/page.tsx:
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Головна",
description: "Курси та практичні уроки з веброзробки.",
alternates: {
canonical: "/",
},
};
export default function HomePage() {
return (
<main>
<h1>Вивчайте веброзробку</h1>
<p>
Практичні уроки допоможуть створювати сучасні вебзастосунки.
</p>
</main>
);
}У цьому прикладі:
metadataBase є базовою адресою для відносних URL;
title.template додає назву сайту до заголовків вкладених сторінок;
page.tsx визначає метадані саме для головної сторінки;
lang="uk" повідомляє мову документа;
h1 описує основний вміст сторінки.
Значення https://example.com потрібно замінити на справжній домен проєкту.
Кожна важлива сторінка повинна мати власні:
заголовок;
опис;
основну URL-адресу.
Погано:
Усі сторінки мають title "Мій сайт"Краще:
Головна | Мій сайт
Курс Next.js | Мій сайт
SEO у Next.js | Мій сайтЗаголовок має коротко пояснювати зміст сторінки. Опис має бути зрозумілим і відповідати видимому вмісту, а не складатися з випадкового набору ключових слів.
Для сторінок із динамічним маршрутом метадані можна створювати на основі параметрів або даних сторінки за допомогою generateMetadata.
import type { Metadata } from "next";
type ArticlePageProps = {
params: Promise<{ slug: string }>;
};
const articles: Record<string, string> = {
"nextjs-seo": "SEO у Next.js",
"html-basics": "Основи HTML",
};
export async function generateMetadata({
params,
}: ArticlePageProps): Promise<Metadata> {
const { slug } = await params;
const articleTitle = articles[slug] ?? "Стаття";
return {
title: articleTitle,
description: `Навчальна стаття: ${articleTitle}.`,
alternates: {
canonical: `/articles/${slug}`,
},
};
}
export default async function ArticlePage({
params,
}: ArticlePageProps) {
const { slug } = await params;
const articleTitle = articles[slug] ?? "Стаття";
return (
<main>
<article>
<h1>{articleTitle}</h1>
<p>Це вміст навчальної статті.</p>
</article>
</main>
);
}Назва сторінки та її опис повинні формуватися з тих самих даних, що й основний вміст. Це зменшує ризик ситуації, коли метадані описують одну тему, а сторінка містить іншу.
Пошукові системи аналізують не лише текст, а й структуру документа. Використовуйте HTML-елементи за їхнім призначенням:
<main> — основний вміст сторінки;
<header> — вступна частина або заголовок;
<nav> — навігація;
<article> — самостійний матеріал;
<section> — тематичний розділ;
<h1> — основний заголовок;
<h2> і <h3> — підзаголовки;
<footer> — нижня частина сторінки.
На сторінці зазвичай має бути один основний <h1>, який описує її тему. Не варто використовувати заголовки лише для зміни розміру шрифту. Для візуального оформлення застосовують CSS.
Посилання між сторінками повинні бути звичайними HTML-посиланнями:
import Link from "next/link";
export default function Navigation() {
return (
<nav aria-label="Основна навігація">
<Link href="/">Головна</Link>
<Link href="/articles">Статті</Link>
<Link href="/about">Про сайт</Link>
</nav>
);
}Такі посилання допомагають користувачам і пошуковим роботам переходити між сторінками.
robots.txt і sitemaprobots.txtrobots.txt містить правила для пошукових роботів. У Next.js його можна створити як app/robots.ts.
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
},
sitemap: "https://example.com/sitemap.xml",
};
}Цей файл дозволяє сканування всіх маршрутів і вказує адресу sitemap.
robots.txt не захищає приватні дані. Якщо інформація не повинна бути доступною, її потрібно захищати засобами автентифікації та авторизації.
Sitemap містить список важливих URL-адрес сайту. У Next.js її можна створити у файлі app/sitemap.ts.
import type { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: "https://example.com",
lastModified: new Date("2026-01-10"),
},
{
url: "https://example.com/articles",
lastModified: new Date("2026-01-10"),
},
{
url: "https://example.com/about",
lastModified: new Date("2026-01-05"),
},
];
}У sitemap варто додавати доступні та важливі сторінки, які потрібно показувати пошуковим системам. Не потрібно додавати маршрути помилок, приватні сторінки або сторінки, які навмисно не повинні індексуватися.
Next.js допомагає реалізувати технічне SEO завдяки:
серверному формуванню HTML;
статичній генерації сторінок;
API для метаданих;
підтримці robots.txt і sitemap як спеціальних маршрутів;
компоненту next/link для внутрішньої навігації;
оптимізації завантаження сторінок у межах можливостей фреймворку.
Водночас Next.js не вирішує автоматично такі завдання:
написання корисного контенту;
вибір правильної структури сайту;
перевірку унікальності сторінок;
створення якісних внутрішніх посилань;
виправлення неправильних статусів або доступів;
гарантування високої позиції у пошуку.
SEO є результатом поєднання технічної реалізації, якості вмісту та зручності сайту.
Якщо всі сторінки мають один title і description, пошуковій системі складніше зрозуміти їхні відмінності.
Як виправити: задавайте метадані на рівні конкретного page.tsx або використовуйте generateMetadata.
Сторінка може виглядати правильно в браузері, але без <h1> її тема буде менш очевидною.
Як виправити: додайте один змістовний <h1> і будуйте інші заголовки ієрархічно.
Canonical, який вказує на іншу сторінку, може повідомити пошуковій системі, що поточна сторінка не є основною.
Як виправити: перевіряйте, щоб canonical відповідав фактичній основній URL-адресі сторінки.
robots.txt як захистуЗаборона в robots.txt не є механізмом безпеки. Робот може не дотримуватися цього правила, а адреса все одно може стати відомою.
Як виправити: приватні дані захищайте на сервері, а не лише правилами для роботів.
У Next.js метадані експортуються з серверних компонентів. Компонент із директивою "use client" не може експортувати metadata або generateMetadata.
Як виправити: залишайте метадані в layout.tsx чи серверному page.tsx, а клієнтські компоненти використовуйте всередині сторінки.
Якщо title обіцяє одну тему, а текст сторінки присвячений іншій, це погіршує зрозумілість сторінки для користувачів і пошукових систем.
Як виправити: створюйте метадані на основі фактичних даних сторінки.
Для кожної важливої сторінки перевірте:
Чи має вона стабільний і зрозумілий URL?
Чи віддається основний вміст у HTML?
Чи є унікальний title?
Чи є змістовний description?
Чи присутній один основний <h1>?
Чи працюють внутрішні посилання?
Чи не заборонено сканування потрібного маршруту?
Чи є сторінка в sitemap?
Чи відповідає canonical фактичній URL-адресі?
Чи доступна сторінка на мобільному пристрої?
Next.js спрощує створення сторінок, доступних для пошукових роботів.
Серверний і статичний рендеринг допомагають віддавати HTML із готовим вмістом.
Metadata API використовується для title, description, canonical та Open Graph-даних.
Семантичний HTML і зрозуміла навігація покращують структуру сторінки.
robots.txt керує правилами для роботів, а sitemap описує важливі URL.
Next.js не гарантує позицію в пошуку: фреймворк забезпечує технічні можливості, але якість сторінки залежить від її вмісту та правильної реалізації.