Мапа сайту, що працює: 2 способи зробити XML і HTML‑мапу для людей (+ інструкції)
«Мапа сайту» — це не лише файл sitemap.xml для пошукових роботів. Щоб читачі швидко знаходили потрібне, варто мати ще й зручну HTML‑сторінку «Всі статті блогу». Нижче — два практичні способи зробити це: плагіном (швидко) та самотужки через functions.php (контроль і продуктивність). На додачу — чек‑листи, поради з продуктивності та FAQ.
Чому потрібні обидві мапи — XML і HTML
| Тип карти | Для кого | Що дає |
|---|---|---|
| XML sitemap | Пошукові роботи | Швидке знаходження та індексація URL, відстеження оновлень. |
| HTML «Всі статті блогу» | Люди | Зручна навігація, кращі поведінкові фактори, додаткова перелінковка. |
Висновок: тримайте обидві. XML відправляємо у Search Console і прописуємо в robots.txt, HTML‑сторінку виносимо в меню.
Варіант 1 (швидко): мапа сайту плагіном
1) XML‑мапа через Rank Math або Yoast SEO
- Увімкніть генерацію sitemap у Rank Math → Sitemap Settings або Yoast SEO → Settings → Sitemaps.
- Обмежте типи контенту (пости/сторінки/CPT), за потреби вимкніть теги/архіви автора.
- Перевірте URL виду
/sitemap_index.xml.
2) HTML‑мапа через плагін WP Sitemap Page
Цей плагін генерує статичний HTML‑список із постами, сторінками, категоріями — легко та швидко.
- Встановіть і активуйте WP Sitemap Page.
- Створіть сторінку «Всі статті блогу».
- Вставте шорткод:
[wp_sitemap_page]
- За потреби використайте атрибути шорткоду (виключення сторінок/категорій, порядок тощо).
- Додайте сторінку в головне меню.
![Скрін: сторінка з [wp_sitemap_page] у редакторі та приклад виводу на фронті](https://ashifin.com/wp-content/uploads/2023/08/screenshot_32-730x385.jpg)
| Коли вибрати плагін | Переваги | На що звернути увагу |
|---|---|---|
| Потрібно дуже швидко запустити HTML‑карту без коду. | Мінімум налаштувань, працює «з коробки», сумісний з блогами різних розмірів. | Стежте за часом рендеру сторінки зі списками; не додавайте важких віджетів поруч. |
Варіант 2 (контроль + швидкість): свій шорткод у functions.php
Рішення для тих, хто хоче мінімум залежностей і максимальну гнучкість. Нижче — чистий код без «кривих» лапок. Він формує HTML‑мапу: Сторінки → Категорії → Пости, додає просте кешування (transient) і скидає його при збереженні постів.
/**
* HTML-карта сайту для людей — шорткод
* [ash-sitemap exclude="10,20,30" exclude_cats=""]
* exclude id сторінок що треба виключити з карти
* exclude_cats id категорій що треба виключити з карти
* Додавайте у functions.php дочірньої теми або у власний MU‑плагін.
*/
function ash_simple_sitemap_shortcode( $atts ) {
$atts = shortcode_atts( array(
'exclude' => '',
'exclude_cats' => '',
), $atts );
$exclude_ids = array_map( 'absint', explode( ',', $atts['exclude'] ) );
$exclude_cats = array_map( 'absint', explode( ',', $atts['exclude_cats'] ) );
ob_start();
?>
<div class="ash-sitemap">
<section class="ash-sitemap-pages">
<h2><?php _e( 'Сторінки', 'ash' ); ?></h2>
<ul>
<?php
wp_list_pages( array(
'exclude' => implode( ',', $exclude_ids ),
'title_li' => '',
) );
?>
</ul>
</section>
<section class="ash-sitemap-posts">
<h2><?php _e( 'Записи', 'ash' ); ?></h2>
<div class="ash-sitemap-columns">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC',
'exclude' => $exclude_cats,
) );
foreach ( $categories as $category ) {
echo '<div class="ash-sitemap-cat">';
echo '<h3>' . esc_html( $category->name ) . '</h3>';
echo '<ul>';
$posts = get_posts( array(
'category' => $category->term_id,
'numberposts' => -1,
'post_status' => 'publish',
) );
foreach ( $posts as $post ) {
echo '<li><a href="' . esc_url( get_permalink( $post ) ) . '">' .
esc_html( get_the_title( $post ) ) . '</a></li>';
}
echo '</ul></div>';
}
?>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'ash-simple-sitemap', 'ash_simple_sitemap_shortcode' );
Як використати: створіть сторінку «Всі статті блогу» → вставте шорткод [ash-sitemap exclude=”10,20,30″ exclude_cats=”5,6″] → додайте сторінку в меню.
| Переваги свого шорткоду | Що легко додати |
|---|---|
| Мінімум залежностей, швидка робота, повний контроль над HTML. | Пагінація, виключення рубрик/постів, блок «Останні оновлення 30 днів», власні стилі. |
Щоб трохи стілізувати то додайте у стилі теми ось такий код, звичайно його добре б було підігнати під себе, але має працювати будь-де.
/* Мінімальні стилі під карту (додай у CSS теми) */
.ash-sitemap {
padding: 2rem 1rem;
display: flex;
}
.ash-sitemap h2 {
margin-bottom: 1rem;
}
.ash-sitemap-pages{
flex: 0 0 30%;
}
.ash-sitemap-pages ul,
.ash-sitemap-cat ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.ash-sitemap li::before {
content: "• ";
color: #666;
margin-right: 6px;
}
.ash-sitemap-posts .ash-sitemap-columns {
column-count: 1;
column-gap: 2rem;
}
.ash-sitemap-cat {
break-inside: avoid;
margin-bottom: 1.5rem;
}
.ash-sitemap-cat h3 {
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.ash-sitemap-posts .ash-sitemap-columns {
column-count: 2;
}
@media (max-width: 960px) {
.ash-sitemap{
flex-wrap: wrap;
}
.ash-sitemap-posts .ash-sitemap-columns {
column-count: 1;
flex: 0 0 100%;
}
}
XML‑мапа: додавання в Google та robots.txt
- Відкрийте Google Search Console → Sitemaps і надішліть URL вашої карти:
https://site.com/sitemap_index.xmlабо/sitemap.xml. - Додайте рядок у
/robots.txt:
Sitemap: https://site.com/sitemap_index.xml
- Перевіряйте статус «Success» та кількість проіндексованих URL.
Поради з продуктивності та типові помилки
- Швидкість: сторінка з дуже довгим списком може бути важкою. Додавайте пагінацію або розбивайте на секції (за роками/категоріями).
- Дублікати: не включайте в XML архіви автора/дат, якщо вони не несуть користі.
- HTML ≠ XML: HTML‑мапа створена для людей. XML — для роботів. Обидві потрібні.
- Оновлення: шорткод вище скидає кеш при збереженні поста; у плагінах переконайтеся, що мапа актуалізується.
Швидкий чек‑лист впровадження
| # | Дія | Результат |
|---|---|---|
| 1 | Увімкнути XML‑sitemap у Rank Math / Yoast | Коректна індексація нових і оновлених сторінок |
| 2 | Додати URL у GSC + прописати в robots.txt |
Швидше знаходження ботами |
| 3 | Створити HTML‑сторінку «Всі статті блогу» | Зручна навігація для людей |
| 4 | Варіант 1: вставити [wp_sitemap_page] |
Готова карта без коду |
| 5 | Варіант 2: додати шорткод у functions.php |
Легка, керована HTML‑мапа |
| 6 | Винести сторінку в головне меню | Краще утримання та перелінковка |
Висновок
Зробіть дві мапи: XML (для ботів) і HTML «Всі статті блогу» (для людей). Якщо треба швидко — використовуйте WP Sitemap Page. Якщо потрібні контроль і максимальна швидкість — шорткод у functions.php. Так ви покриєте SEO‑вимоги та поліпшите навігацію, що напряму впливає на поведінкові фактори.
Ще більше робочих прикладів і код‑снипетів — у нашому Telegram‑каналі.
Створюю сайти без використання конструкторів — лише чистий і валідний код. Це забезпечує високу швидкість завантаження та відмінні показники в Google PageSpeed, а отже — вартість кліка в рекламі зменшується в 2–3 рази.
Потрібен сайт з нуля, оптимізація існуючого проекту або доопрацювання функціоналу?
📩 Напишіть у будь-який месенджер — обговоримо ваш проект!
FAQ
| Питання | Відповідь |
|---|---|
| Чи достатньо лише XML‑sitemap? | Ні. XML — для ботів; HTML‑мапа для людей підвищує зручність і поведінкові фактори. |
| Що краще: плагін чи свій шорткод? | Плагін — швидкий старт; власний шорткод — краща продуктивність і повний контроль над HTML. |
| Де додавати карту у Google? | У Google Search Console → Sitemaps. Вкажіть /sitemap_index.xml або /sitemap.xml. |
| Чи впливає HTML‑мапа на швидкість? | Так, якщо список дуже великий. Додавайте пагінацію або розбивайте за категоріями/роками. |
| Як оновлюється карта зі шорткоду? | Кеш transient оновлюється автоматично на хук save_post. |
Здравствуйте, Федор!
Спасибо за интересный материал.
Кое-что подобное я сделал на своем сайте, но меня мучили сомнения в правильности моих действий. Благодаря Вашей статье я получил дополнительный стимул переделать всю карту сайта в формате HTML, отказавшись от плагина, который ее генерирует.
Пожалуйста рад помочь, только обязательно оставьте карту что генерируется в формате xml она нужна для поисковых пауков. ссылку на нее можно сайте не ставит только в файле robots.txt указать.
User-agent: Sitemap: //ваш сайт.com/sitemap.xml
Извините, ещё добавлю, что xml может конфликтовать с краткой записью php.
“она нужна для поисковых пауков” А у Вас код запрещает это директивой Disallow:sitemap.xml!
фёдор, уже прочитал ниже про Disallow.
Все элементарное просто! у меня не так много статей но возьму на вооружение.
Не скажу, что так просто. Вот, у меня. например, не идет постраничная организация карты. И я еще не знаю, почему.
Уж не скажите, Андрей, что с этими картами сайта всё так элементарно просто.
Уже одно то, что есть две карты для людей и для роботов, приводит к путанице.
Полностью согласен. Просто – для специалиста только.
Извините, Федор, возможно я не совсем понял Вашу мысль. т.к. строка “User-agent: * Disallow: //мой сайт.ру/sitemap.xml” блокирует доступ поисковиков к этой странице.
Или Вы считаете, что этих самостоятельно созданных страниц со ссылками на посты будет достаточно, чтобы поисковики их видели?
Буду благодарен, если поясните этот момент.
Да правильно
Sitemap: //site.com/sitemap.xml
————————————————————-
Disallow:-Затесался при копировании с другой строчки
Спасибо что поправили
Тоже задумывался о такой странице, куда можно отсылать желающих по строчке типа мои другие проекты или другие эффективные методы. А вышло как в старом фильме, всё уже украдено до нас.
Классика жанра!
Молодца Фёдор.
Спасибо за оценку.
А не подскажите ли, Федор, что нужно написать в форме robots, для того, чтобы яндексовский робот проиндексировал все страницы сайта.
Спасибо
Татьяна, нужно просто поставить звёздочку – значит “всё”.
В файле robots Вы указываете какие страницы не нужно индексировать и дело в том что и нужно закрывать много контента, чтоб не было дублей и сайт не падал в поиске..
ну и подсказываете роботу где ваш файл с картой сайта.
Я сегодня сяду напишу пост на эту тему, т.к. одним ответом в комментарии не получится объяснить.
Обязательно прочитаю эту статью про уточнения установки карты сайта с помощью файла robots.
много у него хитростей и тонкостей.
Ну, вот! А выше, Ирина, написали, что это “просто”. Оказывается, что нет.
Вот статья
А где ссылка? Я понимаю, что постепенно можно дойти до статьи. Но все же 🙁
Да, ссылки нет. Тоже интересно.
Крайне важный атрибут любого уважающего себя сайта, конечно, нормально работающая и постоянно обновляющаяся карта сайта, очень способствующая поисковым системам в их работе.
Без карты – как без названия сайта. Путь в никуда.
Карта сайта, несомненно, должна быть. Я сама ищу эту страницу, если блог меня заинтересовал и я хочу получше познакомиться с материалом.
Эта карта в корне сайта находится.
У меня работает хорошо стандартная, проблем как таких не было. Только не могу понять зачем файл sitemap.xml.gz
?
Интересная статья. Больше всего мне понравилось, что желательно сделать на сайте отдельные страницы с ссылками на лучшие статьи и видео. Хотя у автора ссылка лучшие видеоуроки ведет на страницу лучшие статьи…. Отдельной страницы лучшие видеоуроки, нет. Почему?