Работающая карта сайта: 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-канале.
Привет! Я — Ашифин Фёдор, full-stack разработчик и автор собственных тем и плагинов.
Разрабатываю сайты без использования конструкторов — только чистый, валидный код. Это обеспечивает высокую скорость загрузки и отличные показатели в Google PageSpeed, а значит — стоимость клика в рекламе в 2–3 раза ниже.
Нужен сайт с нуля, оптимизация существующего проекта или доработка функционала?
📩 Пишите в любой мессенджер — обсудим ваш проект!
Разрабатываю сайты без использования конструкторов — только чистый, валидный код. Это обеспечивает высокую скорость загрузки и отличные показатели в Google PageSpeed, а значит — стоимость клика в рекламе в 2–3 раза ниже.
Нужен сайт с нуля, оптимизация существующего проекта или доработка функционала?
📩 Пишите в любой мессенджер — обсудим ваш проект!
| Вопрос | Ответ |
|---|---|
| Зачем нужны обе карты — XML и HTML? | XML sitemap помогает поисковым роботам находить и индексировать страницы, а HTML-карта «Все статьи блога» облегчает навигацию для людей и улучшает поведенческие факторы. Лучше использовать обе. |
| Как быстро сделать HTML-карту сайта? | Самый быстрый способ — установить плагин WP Sitemap Page, создать страницу «Все статьи блога» и вставить шорткод [wp_sitemap_page]. |
| Как добавить XML-карту в Google? | Войдите в Google Search Console → «Sitemaps» и отправьте URL вашей карты, например https://site.com/sitemap_index.xml. Также добавьте строку Sitemap: https://site.com/sitemap_index.xml в robots.txt. |
| Можно ли сделать карту сайта без плагинов? | Да. Добавьте шорткод в functions.php (пример в статье). Он выводит список страниц и постов по категориям, работает быстрее и даёт полный контроль. |
| Какие ошибки чаще всего делают при настройке карты? | Частые ошибки: включение ненужных архивов в XML, отсутствие HTML-карты для людей, слишком длинные списки без пагинации и медленная загрузка страницы. |
Здравствуйте, Федор!
Спасибо за интересный материал.
Кое-что подобное я сделал на своем сайте, но меня мучили сомнения в правильности моих действий. Благодаря Вашей статье я получил дополнительный стимул переделать всю карту сайта в формате 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
?
Интересная статья. Больше всего мне понравилось, что желательно сделать на сайте отдельные страницы с ссылками на лучшие статьи и видео. Хотя у автора ссылка лучшие видеоуроки ведет на страницу лучшие статьи…. Отдельной страницы лучшие видеоуроки, нет. Почему?