Как сделать HTML-карту сайта и в чем ее функция? Примеры и правила оформления
Рассказываем о том, что такое html-карта сайта, кому она пригодится, и даем подробную инструкцию по ее составлению.
Многие знают про файл sitemap.xml, но не все понимают, для чего нужна карта сайта в формате HTML, и ее значимость для SEO. В материале расскажем:
- что такое html-карта сайта и в чем ее назначение;
- в каких случаях карта сайта полезна, а в каких необходима;
- какие типы карты бывают и как выбрать нужный;
- как правильно сделать html-карту — подробная инструкция: от генерации до ручного способа.
Статья будет полезна начинающим seo-специалистам, вебмастерам и владельцам сайтов, которые хотят разобраться в базовых понятиях SEO.
Что такое HTML-карта сайта
HTML-карта сайта или sitemap.html — это статический каталог, где перечислены все основные страницы сайта в иерархическом порядке и есть ссылки на эти страницы. Такой формат ориентирован на посетителей сайта: он позволяет быстро найти необходимые разделы, подразделы и отдельные веб-страницы сайта. И для этого не нужно долго изучать меню.
Для SEO карта сайта тоже важна. Она упрощает индексацию страниц ресурса и является дополнительным способом внутренней перелинковки.
Рис.2. Пример хтмл-карты сайта ФНС (Федеральной налоговой службы).
Для чего нужна карта сайта в формате HTML?
Казалось бы, для чего нужно делать sitemap.html, если есть файл sitemap.xml, существующий специально для помощи поисковым роботам в индексации страниц сайта?
Рис.3. Пример xml-карты сайта ФНС.
Помимо улучшения индексации, карта сайта в формате html (другое название — хабовая страница) уменьшает количество кликов от главной страницы сайта до продвигаемых страниц.
Часто бывает так, что некоторые страницы отсутствуют в структуре сайта или находятся слишком глубоко. Например, категория “красные чехлы на телефон из силикона в подарочной упаковке” или “красные шторы в Сольвычегодске” — мало кто добавит ссылку на такую посадочную в меню. Под структурой сайта мы имеем в виду количество кликов до соответствующей страницы от главной страницы сайта.
Но ко всему нужно подходить индивидуально. Поэтому предлагаем рассмотреть случаи, в которых точно нужна хтмл-карта сайта.
Небольшой практический пример: с индексацией всё было хорошо, но в структуре сайта не было страниц под GEO, т.е. попасть на них было возможно только из поиска или sitemap.xml. Мы в Ant-Team.ru сделали карту сайта и добавили в неё ссылки на страницы под GEO. Ссылку на саму карту сайта добавили в “подвал” сайта. Позиции в Google подтянулись:
Рис.4. Практический пример внедрения карты сайта.
Хотя, конечно, на позиции мог повлиять текстовый спам апдейт Google в конце 2022 и ссылочный спам апдейт в начале 2023 года.
В каких случаях нужна HTML-карта сайта?
Sitemap.html будет нужна в следующих случаях:
- Проблемы с индексацией продвигаемых страниц.
- Информационные сайты с публикацией постоянных рубрик, сайты журналов, газет (чтобы пользователю было удобно просматривать все выпуски издания).
Пример HTML-sitemap (вперёд читать газеты за 1851 год!):
Gif 1. Пример sitemap.html New York Times - https://www.nytimes.com/sitemap/ .
- Одна из групп пользователей сайта — пожилые люди. Им удобнее ориентироваться в хтмл-карте сайта.
Рис.5. Пример sitemap.html на ресурсе социального фонда России - https://sfr.gov.ru/sitemap/.
- Есть страницы на подпапках. Кто понимает, о чём речь, переходите к следующему блоку статьи. Для остальных поясним.
Иногда региональность делается на поддоменах 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-карте сайта?
- Качественная иерархия — карта должна отражать настоящую вложенность разделов, подразделов и страниц сайта.
- Актуальность — карта не должна содержать в себе ссылки с 301 редиректом и ссылки на страницы с кодом ответа 404.
- Если сайт большой, то стоит оставить только ссылки на разделы и важные страницы, которые вы продвигаете.
Про количество ссылок в html-карте сайта
Бытует мнение, что на одной странице HTML-sitemap должно быть не более 100 ссылок (как и на любой другой странице сайта), иначе страница выпадет из индекса, и вообще на сайт будут наложены санкции за ссылочный спам и т.д. Откуда пошла такая информация? Начало нулевых. Тогда Google говорил, что может индексировать 101 кб данных, поэтому не стоит добавлять больше 100 ссылок на страницу.
Прошло достаточно много лет, появилась масса огромных сайтов, и такой подход точно уже не работает. Уверены, что сегодня поисковые системы могут индексировать гораздо большее количество ссылок на странице.
Самое простое, что можно сделать, — поставить себя на место пользователя и понять, будет ли ему удобно то, что вы делаете. Поэтому только вам решать, добавлять в html-карту сайта 100, 500, 1000 или 10000 ссылок. Но важно понимать, что листать бесконечную страницу реальному пользователю будет неудобно.
Какой тип html-карты выбрать
Одностраничная
Подойдет в случае, если на вашем ресурсе небольшое число страниц, ссылки на которые можно разместить на одной странице html-карты сайта с удобством для пользователя.
Схематический пример:
Рис.7. Пример одностраничной карты сайта.
Примеры реализации одностраничной карты сайта:
Многостраничная
Если на вашем ресурсе много страниц с продвигаемым контентом (например, интернет-магазин).
Снова приведу в пример карту сайта New York Times — https://www.nytimes.com/sitemap/. Очень удобно с точки зрения пользователей.
Схематический пример:
Рис.8. Пример многостраничной хтмл-карты.
Примеры реализации многостраничной карты сайта:
Как правильно сделать?
Существует несколько способов создания sitemap.html:
- С помощью плагина для CMS. Если вы используете систему управления контентом (CMS), например WordPress или другую, вы можете установить плагин, который автоматически создаст хтмл-карту сайта. Вам нужно будет лишь активировать плагин и настроить страницу.
- Вручную. Этот способ требует самостоятельного написания хтмл-кода или постановки программисту задачи на создание динамически обновляющейся страницы (почти как плагин, только свой).
- С помощью генератора. Существует множество сервисов и программ, которые позволяют создавать HTML-sitemap автоматически. Вам нужно лишь ввести адрес веб-ресурса, а программа сама сгенерирует хтмл-код для карты сайта.
Разберём каждый способ подробнее.
1. Создание HTML-карты сайта с помощью плагина для CMS
Простой, быстрый и удобный способ.
Плагины для создания карты сайта можно найти в официальном репозитории плагинов вашей CMS.
- Перейдите в раздел настроек плагина и настройте его. В зависимости от выбранного плагина, вы можете настраивать различные параметры, такие как внешний вид карты, структура и другие.
- Сгенерируйте карту сайта. Часто плагины предоставляют кнопку для генерации. Нажмите эту кнопку, чтобы сгенерировать карту сайта.
- Разместите хтмл-карту на сайте.
2. Создание HTML-карты сайта ручным способом
Если для вашей CMS нет нужных плагинов, то нужно поставить задачу программисту на создание sitemap.html.
Если программист в отпуске, а сделать надо срочно, то можно собрать её своими руками. Но делайте так лишь в крайнем случае! Оптимизатор, подумай несколько раз!
Такой способ вам подходит, если на все вопросы из списка вы ответите “да”:
- Есть продвигаемые локальные страницы, которые не указаны нигде в структуре или до них больше 2 кликов от главной страницы?
- Есть проблема с индексацией продвигаемых страниц?
- Сайт небольшой?
- Нет плагинов для вашей CMS?
- Программист в вашем случае — дорого и/или долго?
- Если не сделать хтмл-карту, то всё пропало?
Переходим к созданию карты сайта:
- Парсим сайт, делаем список со всеми контентными страницами (text/html; charset=UTF-8) с кодом ответа 200 ОК.
- Выстраиваем структуру сайта в таблице Excel или Google.
- Делаем страницу на сайте через админку вашей CMS и публикуем.
Пример:
Для сайта на 800 страниц отобрали 50 страниц — служебные, категории и подкатегории. Далее вручную выстроили структуру и вручную же опубликовали страницу хтмл-карты сайта.
Временные затраты: 2 часа. Если придется обновлять в будущем, то тоже ручками. И это новые временные затраты. А время — деньги.
Лучше или забыть про хтмл-карту, или всё-таки найти программиста, который сделает ее под вашу CMS. Для самописных сайтов то же самое.
3. Создание sitemap.html с помощью онлайн-сервисов для генерации
Это хороший вариант, если для вашей CMS нет подходящих плагинов.
Плюсы: быстрее и дешевле, чем ручной способ.
Минусы:
- у сервисов есть ограничения на количество страниц в бесплатной версии;
- могут быть ошибки и не всегда удобная фильтрация, чтобы исключить определённые страницы.
Чтобы создать хтмл-карту сайта с помощью генератора, следуйте этим шагам:
- Найдите надежный онлайн-генератор хтмл-карт сайта. Существует много сервисов, которые позволяют создавать их автоматически. Вот некоторые из них:
- Введите адрес веб-ресурса, для которого хотите создать карту. Некоторые генераторы могут предлагать дополнительные настройки. Например, выбор максимального количества ссылок, которые нужно включить в карту, или исключение некоторых разделов.
- Нажмите кнопку для генерации. Генератор автоматически создаст sitemap.html и предоставит вам готовый HTML-код.
- Сохраните HTML-код карты сайта. Вы можете скопировать и вставить его на страницу вашего сайта, и получите html-карту сайта.
Где размещать HTML-карту сайта?
- В футере:
- Добавить ссылку на хтмл-карту на странице 404 ошибки.
Автор статьи: Кирилл Агафонов (Ant-Team.ru)
P.s. Подписывайтесь на наш телеграм-канал, чтобы первыми узнавать о выходе новых полезных материалов по SEO.
Норм тема, если банчиш ссылками, уровень вложенности становится ниже 🔥