Как сделать HTML-карту сайта и в чем ее функция? Примеры и правила оформления

Рассказываем о том, что такое html-карта сайта, кому она пригодится, и даем подробную инструкцию по ее составлению.

Многие знают про файл sitemap.xml, но не все понимают, для чего нужна карта сайта в формате HTML, и ее значимость для SEO. В материале расскажем: 

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

Статья будет полезна начинающим seo-специалистам, вебмастерам и владельцам сайтов, которые хотят разобраться в базовых понятиях работы SEO.

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

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

Для SEO карта сайта тоже важна. Она упрощает индексацию страниц ресурса и является дополнительным способом внутренней перелинковки.

Для чего нужна карта сайта в формате HTML?

Казалось бы, для чего нужен sitemap.html, если есть файл sitemap.xml, существующий специально для помощи поисковым роботам в индексации страниц сайта?

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

Часто бывает так, что некоторые страницы отсутствуют в структуре сайта или находятся слишком глубоко. Например, категория “красный чехлы на телефон из силикона в подарочной упаковке” или “красные шторы в Сольвычегодске” — мало кто добавит ссылку на такую посадочную в меню. Под структурой сайта мы имеем в виду количество кликов до соответствующей страницы начиная с главной страницы сайта.

Но ко всему нужно подходить индивидуально. Поэтому предлагаем рассмотреть случаи, в которых точно нужна хтмл-карта сайта.

Небольшой практический пример: с индексацией всё было хорошо, но в структуре сайта не было страниц под GEO, т.е. попасть на них можно было только из поиска или sitemap.xml. Была сделана карта сайта и в неё добавлены ссылки на страницы под GEO. Ссылка на саму карту сайта была добавлена в “подвал” сайта. Позиции в Google подтянулись:

Хотя, конечно, на позиции мог повлиять текстовый спам апдейт Google в конце 2022 и ссылочный спам апдейт в начале 2023 года.

В каких случаях нужна HTML-карта сайта?

Sitemap.html будет нужна в следующих случаях:

• Проблемы с индексацией продвигаемых страниц.

• Информационные сайты с публикацией постоянных рубрик, сайты журналов, газет (чтобы пользователю было удобно просматривать все выпуски издания).

Пример HTML-sitemap (вперёд читать газеты за 1851 год!):

• Одна из групп пользователей сайта — пожилые люди. Им удобнее ориентироваться в хтмл-карте сайта.

• Есть страницы на подпапках. Кто понимает, о чём речь, переходите к следующему блоку статьи. Для остальных поясним.

Иногда региональность делается на поддоменах https://moscow.site.ru/, а иногда на подпапках https://site.ru/moscow/.

Если вы прорабатываете региональность по городам, то обычно у вас есть подобное меню:

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

Сейчас мы на странице Казани:
https://site.ru/kazan/catalog/piony

А внутри анкора “Ижевск” стоит ссылка:
https://site.ru/izhevsk/catalog/piony

И так на каждой странице. То есть мы получаем ссылки на своих региональных братьев. 

А что касается локального поиска, то зачастую это районы, станции метро и даже улицы. И такой разбивки будет очень много, а урлы обычно выглядят так:
https://site.ru/remont-telefona-na-sportivnoi/ (Спортивная — станция метро).

Конечно, такую разбивку не получится добавить в меню в шапке сайта. Поэтому на помощь приходит sitemap.html. Называем страницу “Список услуг по станциям метро” и добавляем туда все наши локальные ссылки, которые созданы под станции метро. Также делаем страницы: “Список услуг по районам города” и т.д.

Да, html-сайтмапов может быть несколько.

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

Что должно быть в HTML-карте сайта?

1. Качественная иерархия — карта должна отражать настоящую вложенность разделов, подразделов и страниц сайта.
2. Актуальность — карта не должна содержать в себе ссылки с 301 редиректом и ссылки на страницы с кодом ответа 404.
3. Если сайт большой, то стоит оставить только ссылки на разделы и важные страницы, которые вы продвигаете..

Про количество ссылок в html-карте сайта

Бытует мнение, что на одной странице HTML-sitemap должно быть не более 100 ссылок (да и на любой другой странице сайта), иначе страница выпадет из индекса, и вообще на сайт будут наложены санкции за ссылочный спам и т.д. Откуда пошла такая информация?  Начало нулевых. Тогда Google говорил, что может индексировать 101 кб данных, поэтому не стоит добавлять больше 100 ссылок на страницу.

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

Самое простое, что можно сделать, — поставить себя на место пользователя и понять, будет ли ему удобно то, что вы делаете. Поэтому только вам решать, добавлять в html-карту сайта 100, 500, 1000 или 10000 ссылок. Но важно понимать, что листать бесконечную страницу реальному пользователю будет неудобно. 

Какой тип html-карты выбрать

Одностраничная 

Подойдет в случае, если на вашем ресурсе небольшое число страниц, ссылки на которые можно разместить на одной странице html-карты сайта с удобством для пользователя.

Схематический пример:

Примеры реализации одностраничной карты сайта:

• https://www.nalog.gov.ru/rn77/sitemap/
• https://pages.ebay.com/sitemap.html
• https://xn--80aaigb7aj2b.xn--p1ai/site-map 

Многостраничная 

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

Снова приведу в пример карту сайта New York Times — https://www.nytimes.com/sitemap/. Очень удобно с точки зрения пользователей. И правило “держать минимум ссылок на странице” сохраняется.

Схематический пример:

Примеры реализации многостраничной карты сайта:

• https://www.nytimes.com/sitemap/
• https://www.airbnb.ru/sitemaps/v2
• https://en.bab.la/dictionary/english-spanish/a/1
• https://www.kyero.com/sitemap
• https://avaho.ru/nav/novostroiki-msk-po-metro/
• https://www.linguee.com/english-spanish/topenglish/500001-2200000.html

Как правильно сделать?

Существует несколько способов создания sitemap.html:

1. С помощью плагина для CMS. Если вы используете систему управления контентом (CMS), например WordPress или другую, вы можете установить плагин, который автоматически создаст хтмл-карту сайта. Вам нужно будет лишь активировать плагин и настроить страницу.
2. Вручную. Этот способ требует самостоятельного написания хтмл-кода или постановки программисту задачи на создание динамически обновляющейся страницы (почти как плагин, только свой).
3. С помощью генератора. Существует множество сервисов и программ, которые позволяют создавать HTML-sitemap автоматически. Вам нужно лишь ввести адрес веб-ресурса, а программа сама сгенерирует хтмл-код для карты сайта. 

Разберём каждый из способов подробнее.

1. Создание HTML-карты сайта с помощью плагина для CMS

Простой, быстрый и удобный способ.

Плагины для создания карты сайта  можно найти в официальном репозитории плагинов вашей CMS.

1. Перейдите в раздел настроек плагина и настройте его. В зависимости от выбранного плагина, у вас может быть возможность настроить различные параметры, такие как внешний вид карты, структура и другие. 
2. Сгенерируйте карту сайта. Часто плагины предоставляют кнопку для генерации. Нажмите эту кнопку, чтобы сгенерировать карту сайта.
3. Разместите хтмл-карту на сайте. 

2. Создание HTML-карты сайта ручным способом

Если для вашей CMS нет нужных плагинов, то нужно поставить задачу программисту на создание sitemap.html. 

Если программист в отпуске, а сделать надо срочно, то можно собрать её своими руками. Но делайте так лишь в крайнем случае! Оптимизатор, подумай несколько раз!

Такой способ вам подходит, если на все вопросы из списка вы ответите “да”:

• Есть продвигаемые локальные страницы, которые не указаны нигде в структуре или до них больше 2 кликов от главной страницы?
• Есть проблема с индексацией продвигаемых страниц?
• Сайт небольшой? 
• Нет плагинов для вашей CMS?
• Программист в вашем случае — дорого и/или долго?
• Если не сделать хтмл-карту, то всё пропало? 

Переходим к созданию карты сайта:

1. Парсим сайт, делаем список со всеми контентными страницами (text/html; charset=UTF-8) с кодом ответа 200 ОК.
2. Выстраиваем структуру сайта в таблице Excel или Google.
3. Делаем страницу на сайте через админку вашей CMS и публикуем.

Пример:

Для сайта на 800 страниц было отобрано 50 страниц — служебные, категории и подкатегории. Далее вручную выстроена структура и вручную  же опубликована страница хтмл-карты сайта.

Временные затраты: 2 часа. Если придется обновлять в будущем, то тоже ручками. И это новые временные затраты. А время — деньги.

Лучше или забыть про хтмл-карту, или всё-таки найти программиста, который сделает ее под вашу CMS. Для самописных сайтов то же самое.

3.  Создание sitemap.html с помощью онлайн-сервисов для генерации

Это хороший вариант, если для вашей CMS нет подходящих плагинов. 

Плюсы: быстрее и дешевле, чем ручной способ.

Минусы: 

• у сервисов есть ограничения на количество страниц в бесплатной версии;
• могут быть ошибки и не всегда удобная фильтрация, чтобы исключить определённые страницы.

Чтобы создать хтмл-карту сайта с помощью генератора, следуйте этим шагам:

1. Найдите надежный онлайн-генератор хтмл-карт сайта. Существует много  сервисов, которые позволяют создавать их автоматически. Вот некоторые из них:

• https://www.mysitemapgenerator.com/ru/sitemaps/index.html 
• https://websiteseochecker.com/html-sitemap-generator/ 
• https://www.prepostseo.com/xml-html-sitemap-generator 

2. Введите адрес веб-ресурса, для которого хотите создать карту. Некоторые генераторы могут предлагать дополнительные настройки.  Например, выбор максимального количества ссылок, которые нужно включить в карту, или исключение некоторых разделов.
3. Нажмите кнопку для генерации. Генератор автоматически создаст sitemap.html и предоставит вам готовый HTML-код.
4. Сохраните HTML-код карты сайта. Вы можете скопировать и вставить его на страницу вашего сайта, и тем самым сделать html-карту сайта.

Где размещать HTML-карту сайта?

1. В футере:

2. Добавить ссылку на хтмл-карту на странице 404 ошибки.

Автор статьи: Кирилл Агафонов (Ant-team.ru)

P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых полезных материалов по SEO.