HTML-карта сайта: зачем нужна и как её сделать

HTML-карта сайта — это обычная страница со ссылками на все важные разделы, собранными в понятную иерархию. Её главное отличие от файла sitemap.xml в том, что она сделана для людей: пользователь заходит на неё и за один экран видит, из чего вообще состоит сайт. Путаница между этими двумя картами — самая частая на теме, поэтому с неё и начнём: xml-файл читают роботы, html-страницу читают посетители, и заменить одну другой нельзя. Разберём, чем они отличаются, кому html-карта действительно нужна (а кому она бесполезна), как её собрать — с готовым кодом, который можно скопировать, — и как проверить результат.

Что такое HTML-карта сайта

Технически это ничем не примечательная страница вашего сайта: тот же шаблон, то же меню, тот же адрес вида /sitemap/ или /karta-sayta/. Особенное в ней только содержимое — структурированный список ссылок на разделы и страницы, сгруппированный так, чтобы читатель понял логику сайта с первого взгляда.

Выглядит это как оглавление книги. Сначала крупные разделы: услуги, каталог, блог, о компании. Внутри каждого — вложенные пункты: конкретные услуги, категории товаров, рубрики статей. Не свалка из трёхсот ссылок подряд, а именно иерархия, где видно, что чему подчиняется.

Смысл в том, что навигация сайта почти всегда показывает не всё. Меню ограничено шириной экрана, в него влезает пять-семь пунктов, остальное прячется в выпадающие списки, фильтры и «показать ещё». Карта сайта снимает это ограничение: у неё нет задачи быть красивой и компактной, у неё задача быть полной. Поэтому на ней оказывается то, до чего из обычного меню нужно кликать четыре раза.

Стоит сказать и о том, чем html-карта не является, потому что вокруг неё накопилось много устаревших ожиданий. Она не влияет на позиции напрямую — страница со списком ссылок не является фактором ранжирования. Она не заменяет нормальную структуру сайта. И она давно не обязательный элемент: в начале двухтысячных карту делали почти все, потому что поисковики хуже справлялись с обходом сложных сайтов, а меню часто было на Flash или картинках. Сегодня роботы обходят сайты гораздо увереннее, и необходимость в карте из правила превратилась в исключение — она нужна там, где у робота или человека действительно есть проблема с навигацией.

HTML-карта и sitemap.xml — в чём разница

Это два разных инструмента с похожими названиями, и подменять один другим — типичная ошибка. Разница принципиальная:

Главный вывод из таблицы: sitemap.xml — базовая гигиена, html-карта — необязательный инструмент. Если у вас нет xml-файла, это проблема, которую нужно решать в первую очередь; о том, как его собрать и подключить, мы писали в разборе robots.txt и sitemap.xml. Если у вас нет html-карты — это, возможно, вообще не проблема.

Нужны ли обе сразу

Короткий ответ: xml — да, html — по ситуации. Они не конкурируют и не заменяют друг друга, потому что решают разные задачи.

Робот и без html-карты прекрасно обойдёт сайт, если у него есть sitemap.xml и нормальная перелинковка. А человеку xml-файл не поможет никак: открыв его в браузере, он увидит простыню тегов и закроет вкладку.

Ошибка, которая встречается регулярно: сайт делает html-карту, гордо ставит на неё ссылку — и при этом sitemap.xml либо не сгенерирован, либо не обновлялся год. Получается, что силы потрачены на второстепенное, а базовое не сделано. Сначала xml, потом всё остальное.

Когда HTML-карта действительно нужна, а когда бесполезна

Здесь стоит быть честными: маленькому сайту с простым меню html-карта почти ничего не даёт. Если у вас лендинг, сайт-визитка или небольшой корпоративный сайт на двадцать страниц, где всё доступно из шапки в один-два клика, — карта не решит ни одной задачи. Она станет ещё одной страницей, на которую никто не заходит.

Реальная польза появляется в трёх ситуациях.

Сайт большой и глубокий. Сотни и тысячи страниц, вложенность в три-четыре уровня, до части разделов нужно долго добираться. Карта даёт короткий путь и человеку, и роботу: со страницы карты до любого раздела — один клик вместо четырёх.

Навигация сложная или технически капризная. Меню на JavaScript, бесконечная прокрутка вместо пагинации, фильтры вместо категорий, каталог, который открывается только после выбора параметров. Всё это может плохо читаться роботом и раздражать пользователя. Обычные html-ссылки на карте — надёжный обходной путь, который точно поймут все.

На сайте накопились «сироты». Так называют страницы, на которые не ведёт ни одна внутренняя ссылка: их забыли при редизайне, вынесли из меню, оставили после акции. Формально они существуют, но добраться до них можно только по прямому адресу. Для поисковика такая страница почти невидима: робот приходит на сайт и идёт по ссылкам, а если ссылок нет — идти ему некуда. Карта возвращает сирот в структуру — и это, пожалуй, самый недооценённый её эффект.

Как понять, что сироты у вас есть

Это проверяется за полчаса и без платных инструментов. Возьмите три списка страниц и сравните их между собой:

• что физически есть на сайте — выгрузка из краулера или ваш sitemap.xml;
• что знает поисковик — список страниц из Вебмастера или Search Console;
• куда реально заходят люди — страницы с визитами из системы аналитики.

Расхождения и есть диагноз. Страница есть в sitemap.xml, но робот про неё не знает — скорее всего, на неё ничего не ссылается. Страница в индексе, но ни одного визита за полгода — она не видна ни в меню, ни в перелинковке. Именно такие страницы карта и подбирает.

Обратите внимание, что во всех трёх случаях карта лечит следствие, а не причину. Если до раздела нужно четыре клика — возможно, проблема в структуре, а не в отсутствии карты. Если страницы осиротели — их стоит вернуть в нормальную внутреннюю перелинковку, а не только собрать в карте: ссылка из тематически близкой статьи работает лучше, чем строчка в общем списке. Карта — хорошая подпорка, но плохая замена нормальной архитектуре.

Что должно быть на странице карты

Карта — не автоматическая выгрузка всего подряд, а осмысленный список. Что на ней должно быть:

Иерархия, а не плоский перечень. Разделы верхнего уровня — заголовками, вложенные страницы — списком под ними. Читатель должен видеть уровни, а не ленту из двухсот одинаковых ссылок. Именно иерархия и есть главная ценность карты: она показывает не просто «какие страницы бывают», а как они соотносятся друг с другом.

Только важные страницы. Служебные разделы — корзина, личный кабинет, страницы фильтров, результаты внутреннего поиска, политика обработки данных — на карте не нужны. Они ничего не добавляют ни человеку, ни роботу, зато удлиняют список и размывают внимание. Правило простое: если страница не помогает понять устройство сайта, на карте ей не место.

Человекочитаемые анкоры. Текст ссылки — это название страницы так, как его понимает посетитель: «Ремонт АКПП», а не «Услуга №14» и не «подробнее». Это важно вдвойне: посетитель по анкору решает, туда ли он идёт, а поисковик читает анкор как подсказку о содержании страницы. Ссылка с текстом «здесь» не сообщает ничего ни тому, ни другому.

Актуальность. Карта, где половина ссылок ведёт на удалённые страницы, приносит вред, а не пользу: она множит переходы на 404-е и подрывает доверие к сайту. Если карта собирается вручную, её нужно обновлять при каждом изменении структуры — а значит, кто-то должен за это отвечать. Нет такого человека — делайте автоматическую карту, она хотя бы не будет врать.

Сколько ссылок допустимо

Жёсткого лимита нет — старое правило «не более 100 ссылок на странице» давно не является техническим ограничением. Но есть здравый смысл: страница с тысячей ссылок нечитаема для человека и размывает вес каждой ссылки для робота.

Практический ориентир: до 150–200 ссылок на одной странице карты. Если страниц у сайта больше, карту разбивают:

• по разделам — отдельная карта для каталога, отдельная для блога;
• по уровням — на главной карте только разделы и категории, а внутри каждой категории своя страница со списком.

Для интернет-магазина на десять тысяч товаров карта со всеми товарами бессмысленна: делайте карту категорий, а товары робот найдёт через них и через sitemap.xml. Логика простая: карта должна отражать структуру, а не содержимое. Каталог из десяти тысяч позиций описывается тремя десятками категорий — вот их и показывайте.

Отдельно про блог: если статей много, на карте достаточно рубрик и последних материалов, а полный архив живёт на странице листинга. Иначе карта превращается в бесконечную ленту заголовков, где не видно ни структуры, ни смысла.

Как сделать HTML-карту сайта

Три способа, у каждого свои плюсы и ограничения.

Вручную: готовый код

Самый прозрачный вариант: вы полностью контролируете, что попадёт на карту, и не тянете лишних зависимостей. Подходит сайтам, где структура меняется редко.

Разметка нужна самая простая — вложенные списки. Ничего сверх этого не требуется:

<h1>Карта сайта</h1>

<h2><a href="/services/">Услуги</a></h2>
<ul>
  <li><a href="/services/seo-prodvizhenie/">SEO-продвижение</a></li>
  <li><a href="/services/kontekstnaya-reklama/">Контекстная реклама</a></li>
  <li><a href="/services/audit-sayta/">Аудит сайта</a>
    <ul>
      <li><a href="/services/audit-sayta/tehnicheskiy/">Технический аудит</a></li>
      <li><a href="/services/audit-sayta/kontentnyy/">Аудит контента</a></li>
    </ul>
  </li>
</ul>

<h2><a href="/blog/">Блог</a></h2>
<ul>
  <li><a href="/blog/chto-takoe-seo/">Что такое SEO</a></li>
  <li><a href="/blog/semanticheskoe-yadro/">Семантическое ядро</a></li>
</ul>

<h2><a href="/about/">О компании</a></h2>
<ul>
  <li><a href="/about/contacts/">Контакты</a></li>
</ul>

Что здесь важно и почему именно так:

• Вложенные <ul> передают иерархию средствами разметки, а не отступами через  . Робот читает вложенность списка как структуру, и это ровно то, что нам нужно.
• Заголовки разделов — ссылки. Название раздела само по себе ведёт на этот раздел, а не просто подписывает список.
• Никакого CSS в коде. Оформление подхватится из общих стилей сайта — карта должна выглядеть как его часть, а не как чужеродная страница.

Минус способа очевиден: при каждом изменении структуры карту надо править руками. Если страницы добавляются еженедельно — вы про неё забудете, и через полгода она будет врать.

Автоматически: средствами CMS или генератора

На большинстве популярных систем управления есть готовые решения: в WordPress карту умеют собирать SEO-плагины (Yoast, Rank Math) и специализированные модули; в Битриксе и других коробочных CMS обычно есть штатный компонент; статические генераторы вроде Hugo или Jekyll собирают карту шаблоном из списка страниц.

Плюс — карта обновляется сама и никогда не отстаёт от структуры. Это решающий аргумент для сайтов, где страницы появляются регулярно: интернет-магазин, блог, каталог услуг. Ручную карту в таком режиме вы просто забудете обновить.

Минус — вы получаете то, что решил показать модуль. Часто это плоский список всех страниц подряд, включая служебные, без всякой иерархии — то есть формально карта есть, а пользы от неё ноль. Поэтому автоматическую карту почти всегда нужно донастроить: исключить служебные разделы (корзину, личный кабинет, страницы фильтров и поиска), задать порядок вывода и уровни вложенности, ограничить типы страниц, которые попадают в список.

Практический совет: после подключения автоматической карты откройте её глазами и попробуйте по ней понять устройство сайта. Если вы сами, зная свой сайт, не разбираетесь в этой странице — робот и посетитель тем более не разберутся.

Через онлайн-генераторы

Сервисы-краулеры обходят сайт и отдают готовый список ссылок, который остаётся вставить на страницу. Способ быстрый, но у него есть ловушка: генератор соберёт то, до чего сам сможет добраться. Если часть страниц закрыта от обхода, лежит за фильтрами или доступна только по JS — в списке их не будет, и вы получите неполную карту, думая, что она полная.

Отдельно: полученный список — это разовый слепок. Он не обновляется. Как отправная точка для ручной карты — годится, как постоянное решение — нет.

Что показывать на карте: по типам сайтов

Универсального шаблона нет — что попадёт на карту, зависит от того, из чего состоит сайт. Разберём три типичных случая.

Интернет-магазин. На карту идут категории и подкатегории каталога, страницы брендов (если они у вас продвигаются), информационные разделы — доставка, оплата, гарантия, — и рубрики блога. Товары на карту не выносят: их тысячи, они постоянно меняются, и робот прекрасно найдёт их через категории и sitemap.xml. Исключение — небольшой магазин на сотню позиций, где список товаров реально помещается и читается.

Сайт услуг. Здесь карта самая простая и самая осмысленная: все услуги списком, сгруппированные по направлениям, плюс страницы для разных городов, если вы работаете по географии, плюс блог и информационные страницы. Для сайта с услугами в нескольких городах карта особенно полезна — она разом показывает и человеку, и роботу всю матрицу «услуга × город», которую из меню обычно не видно целиком.

Контентный сайт или блог. На карту выносят рубрики и подрубрики, а не все статьи подряд. Если статей несколько сотен, полный список превратит карту в нечитаемую простыню. Разумный компромисс — рубрики плюс ссылка на архив каждой рубрики, где статьи уже перечислены полностью.

Общий принцип во всех трёх случаях один: на карте живёт скелет сайта, а не его содержимое. Если вы не можете решить, выносить ли раздел на карту, спросите себя — помогает ли эта ссылка понять устройство сайта. Если нет, ей там не место.

Пять ошибок, из-за которых карта не работает

Карту сделать несложно, испортить — тоже. Вот что встречается чаще всего.

Карта-призрак. Страница есть, но ссылки на неё нет нигде: ни в подвале, ни в меню. Получается страница-сирота, которая создавалась как лекарство от сирот. Забавно, но встречается регулярно — особенно когда карту делают «для галочки» и забывают про последний шаг.

Карта врёт. Собрали руками год назад, с тех пор структура поменялась: разделы переименовали, часть страниц удалили. Теперь карта ведёт на 404-е и показывает разделы, которых нет. Такая карта хуже, чем никакой: она портит впечатление и посетителю, и роботу. Ручная карта требует дисциплины — если её некому обновлять, лучше делать автоматическую.

Свалка вместо структуры. Автоматический модуль выгрузил все страницы подряд — вперемешку товары, служебные разделы, страницы фильтров и результаты поиска. Формально это карта, фактически — мусор, в котором ничего не найти. Автоматическую карту почти всегда нужно настраивать, а не оставлять как есть.

Дубли карты. На сайте одновременно живут /sitemap/, /karta-sayta/ и /site-map/ — остатки разных попыток. Три страницы с одинаковым содержимым конкурируют между собой и размывают вес. Оставьте одну, с остальных настройте 301-редирект.

Карта как инструмент манипуляции. Иногда карту делают не для навигации, а чтобы «прокачать» перелинковку: пихают на неё сотни ссылок с ключевыми словами в анкорах, прячут блок стилями, дублируют ссылки по нескольку раз. Для поисковика это узнаваемый паттерн, и ничем хорошим он не заканчивается. Простой критерий здоровой карты: если её неловко показать посетителю — значит, вы делаете что-то не то.

Где разместить и как связать с сайтом

Стандартное место ссылки на карту — подвал сайта. Там её ожидают и пользователи, и роботы: подвал сквозной, то есть ссылка автоматически появляется на всех страницах, и робот наткнётся на карту, с какой бы страницы ни начал обход. Плюс подвал не отнимает места у основной навигации.

Адрес страницы — говорящий и постоянный: /sitemap/, /karta-sayta/, /site-map/. Принципиальной разницы между вариантами нет, важно другое — выбрать один и больше его не менять. Смена адреса карты означает, что все накопленные ссылки на неё придётся переносить редиректом, а выгоды от переезда никакой.

Ставить ссылку на карту в главное меню обычно не нужно. Это не тот раздел, ради которого люди приходят на сайт, и место в меню лучше отдать услугам, каталогу или контактам. Исключение — сайты, где карта действительно является рабочим инструментом навигации: большие справочники, каталоги с сотнями разделов, порталы. Там ссылку на карту иногда выносят и в шапку.

SEO-настройка самой страницы карты

Про этот пункт забывают чаще всего: карту делают, а саму страницу оставляют как есть — без заголовка, без title, иногда случайно закрытой от индексации.

Должна ли карта индексироваться. Да, по умолчанию — пусть будет открыта. Закрывать её от индексации нет причин: это нормальная полезная страница, и в индексе она никому не мешает. Исключение бывает одно: если сайт борется с раздуванием индекса и мусорными страницами, карту иногда закрывают, чтобы не плодить лишнего. Но честнее признать, что это лечение симптома — разбираться надо с самим мусором, а как это делается, мы разбирали в статье про индексацию сайта в Яндексе.

Title и H1 у самой страницы. Простые и честные: «Карта сайта» плюс название компании в title. Изобретать здесь нечего и оптимизировать нечего — по запросу «карта сайта» вашу страницу искать никто не будет, её задача не в поисковом трафике, а в навигации. Единственное, чего делать не стоит, — оставлять страницу вообще без title и H1: тогда она выглядит недоделанной и для робота, и для человека.

Ссылки на карте — обычные. Закрывать их в nofollow не нужно: смысл карты как раз в том, чтобы передавать вес разделам и показывать роботу структуру. Карта, у которой все ссылки закрыты от передачи веса, теряет половину смысла — остаётся только польза для посетителя, а её и так немного.

Немного текста на странице не помешает. Один короткий абзац в начале — что это за страница и как ей пользоваться — превращает голый список ссылок в осмысленную страницу. Это мелочь, но она отличает карту, сделанную для людей, от карты, сгенерированной для роботов.

Чек-лист: проверить карту после внедрения

Пройдите по пунктам — это займёт десять минут и покажет большинство типовых ошибок:

1. Страница отдаёт код 200. Не 404 и не редирект — проверяется любым сервисом проверки ответа сервера.
2. Все ссылки на карте рабочие. Битые ссылки на карте особенно неприятны: она обещает быть полным оглавлением, а ведёт в никуда. Прогоните страницу краулером и убедитесь, что 404-х нет.
3. Ссылка на карту есть в подвале и доступна с любой страницы сайта.
4. Карта не закрыта от индексации случайно — проверьте robots.txt и мета-тег robots на самой странице.
5. Ссылки не закрыты nofollow без осознанной причины.
6. Структура читается. Откройте страницу и попробуйте за десять секунд понять, из чего состоит сайт. Не получилось — переделайте иерархию.
7. Служебных страниц на карте нет — корзины, личного кабинета, страниц фильтров.
8. Карта попала в обход. Через пару недель посмотрите в Яндекс Вебмастере, обошёл ли робот страницу и попала ли она в индекс.

Если пункты 1–5 вызвали вопросы — скорее всего, проблема шире одной карты, и стоит посмотреть сайт целиком: как это делается, разбирали в статье про технический аудит.

HTML-карта — простой инструмент с узкой задачей: показать структуру сайта тем, кому её не видно из меню. Она не заменит sitemap.xml, не поднимет позиции сама по себе и не спасёт сайт с плохой архитектурой. Но большому сайту со сложной навигацией она честно экономит клики посетителю и возвращает в структуру забытые страницы — а это уже немало для страницы, которую можно собрать за вечер.

Если не уверены, нужна ли карта именно вашему сайту и нет ли проблем серьёзнее — начните с бесплатного экспресс-аудита: посмотрим структуру, индексацию и перелинковку, покажем, где сайт теряет страницы и посетителей.