Пошук уроків, статей та іншого контенту
Сформуєте sitemap.xml зі списком індексованих URL і підключите його до пошукових систем.
sitemap.xml — це XML-файл зі списком сторінок сайту, які пошукові системи мають просканувати та проіндексувати.
Карта сайту допомагає пошуковим роботам:
швидше знаходити сторінки;
бачити важливі URL;
дізнаватися, коли сторінка змінювалася;
індексувати сторінки, на які ще немає багато внутрішніх посилань.
sitemap.xml не змушує пошукову систему індексувати сторінку. Він лише повідомляє, які URL існують і можуть бути проіндексовані.
У Next.js з App Router карту сайту можна створити спеціальним файлом:
app/sitemap.tsNext.js автоматично перетворить цей файл на маршрут:
/sitemap.xmlДля опису структури sitemap використовується тип MetadataRoute.Sitemap.
Припустімо, що застосунок має такі сторінки:
/
/about
/blog
/contactСтворіть файл app/sitemap.ts:
import type { MetadataRoute } from 'next'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: siteUrl,
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 1,
},
{
url: `${siteUrl}/about`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
{
url: `${siteUrl}/blog`,
lastModified: new Date(),
changeFrequency: 'daily',
priority: 0.9,
},
{
url: `${siteUrl}/contact`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.5,
},
]
}Після запуску застосунку відкрийте:
https://example.com/sitemap.xmlNext.js сформує XML-представлення приблизно такого змісту:
<urlset>
<url>
<loc>https://example.com</loc>
<lastmod>2026-08-17T00:00:00.000Z</lastmod>
<changefreq>weekly</changefreq>
<priority>1</priority>
</url>
</urlset>Фактичний формат і додаткові XML-простори імен генерує Next.js автоматично.
URL у sitemap мають бути абсолютними, тобто містити протокол і домен:
https://example.com/blogНе використовуйте лише відносні шляхи:
/blogЩоб не дублювати домен у коді, збережіть адресу сайту в змінній середовища:
NEXT_PUBLIC_SITE_URL=https://example.comДля локальної перевірки можна тимчасово використовувати значення за замовчуванням:
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000'У production обов’язково вкажіть справжній домен, інакше пошукові системи отримають неправильні URL.
Кожен об’єкт у масиві описує одну сторінку.
urlОбов’язковий абсолютний URL сторінки:
{
url: 'https://example.com/blog'
}lastModifiedДата останньої зміни сторінки:
{
url: 'https://example.com/blog',
lastModified: new Date()
}Можна передати також рядок із датою:
{
url: 'https://example.com/blog',
lastModified: '2026-08-17'
}Вказуйте реальну дату зміни. Не потрібно змінювати її під час кожної генерації sitemap, якщо сама сторінка не змінювалася.
changeFrequencyОрієнтовна частота змінення сторінки:
{
url: 'https://example.com/blog',
changeFrequency: 'daily'
}Можливі значення:
'always'
'hourly'
'daily'
'weekly'
'monthly'
'yearly'
'never'
Це лише рекомендація для пошукових роботів, а не гарантія частоти сканування.
priorityВідносна важливість сторінки в межах цього сайту:
{
url: 'https://example.com',
priority: 1
}Значення зазвичай задають у діапазоні від 0 до 1. Вища пріоритетність не гарантує кращої позиції в результатах пошуку.
До sitemap варто додавати публічні сторінки, які:
доступні без авторизації;
мають унікальний корисний вміст;
можуть з’являтися в результатах пошуку;
не заборонені для індексації.
Наприклад:
/
/about
/blog
/blog/nextjs-sitemap
/contactНе додавайте сторінки:
входу та реєстрації;
особистого кабінету;
адміністративної панелі;
кошика й технічних сторінок;
сторінки-помилки;
дублікати інших URL;
приватний або незавершений вміст.
Sitemap має містити лише ті URL, які ви справді хочете бачити в пошуку.
Якщо блог містить сторінки, що створюються з даних бази, список URL можна сформувати під час виконання функції.
Наприклад:
import type { MetadataRoute } from 'next'
type Post = {
slug: string
updatedAt: string
}
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com'
async function getPosts(): Promise<Post[]> {
const response = await fetch('https://api.example.com/posts', {
next: {
revalidate: 3600,
},
})
if (!response.ok) {
throw new Error('Не вдалося отримати список публікацій')
}
return response.json()
}
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await getPosts()
const staticPages: MetadataRoute.Sitemap = [
{
url: siteUrl,
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 1,
},
{
url: `${siteUrl}/blog`,
changeFrequency: 'daily',
priority: 0.9,
},
]
const postPages: MetadataRoute.Sitemap = posts.map((post) => ({
url: `${siteUrl}/blog/${post.slug}`,
lastModified: post.updatedAt,
changeFrequency: 'monthly',
priority: 0.7,
}))
return [...staticPages, ...postPages]
}У цьому прикладі:
getPosts отримує публікації з API.
Для кожної публікації створюється окремий URL.
slug використовується для формування адреси сторінки.
updatedAt передається як дата останньої зміни.
Статичні та динамічні URL об’єднуються в один масив.
Під час використання власної бази даних замість fetch можна викликати функцію доступу до бази.
Після запуску проєкту перевірте карту сайту у браузері:
http://localhost:3000/sitemap.xmlПереконайтеся, що:
маршрут відповідає статусу 200;
XML відкривається без помилок;
усі URL містять правильний домен;
у списку немає приватних або технічних сторінок;
адреси відповідають реальним сторінкам застосунку.
Після розгортання перевірте production-адресу:
https://your-domain.com/sitemap.xmlПісля розгортання сайту передайте адресу sitemap у панелі вебмайстра пошукової системи.
Загальний порядок дій:
Підтвердьте право власності на сайт.
Відкрийте розділ для керування sitemap.
Додайте шлях sitemap.xml або повну адресу https://your-domain.com/sitemap.xml.
Надішліть sitemap на перевірку.
Переглядайте статус обробки та можливі помилки.
Пошукова система зможе самостійно знайти sitemap під час обходу сайту, але ручне надсилання допомагає швидше повідомити про його існування.
Після додавання нових сторінок зазвичай не потрібно вручну створювати новий XML-файл. Next.js сформує актуальну карту відповідно до коду та даних застосунку.
У sitemap залишився домен локального середовища:
http://localhost:3000/blogУ production усі URL повинні вести на справжній домен сайту.
Неправильно:
{
url: '/blog'
}Правильно:
{
url: 'https://example.com/blog'
}Не додавайте в sitemap сторінки, які не повинні потрапляти до пошуку, наприклад /login або /admin.
Кожна адреса з sitemap повинна відкриватися на сайті. Якщо URL повертає помилку 404, його потрібно видалити або виправити.
lastModifiedНе встановлюйте поточну дату для всіх сторінок без потреби. Це створює враження, що весь сайт змінюється під час кожної генерації sitemap.
Наявність URL у sitemap не означає, що сторінка одразу з’явиться в пошуку. Пошукова система самостійно вирішує, коли просканувати та проіндексувати сторінку.
У Next.js sitemap створюється у файлі app/sitemap.ts.
Next.js автоматично доступний за адресою /sitemap.xml.
Кожен URL має бути абсолютним і вести на реальну публічну сторінку.
До sitemap додають лише сторінки, які потрібно індексувати.
Динамічні URL можна сформувати з даних API або бази даних.
Адресу sitemap можна передати в панелі вебмайстра пошукової системи.
Sitemap допомагає пошуковим роботам знаходити сторінки, але не гарантує їх індексацію.