Как создать HTML карту сайта

HTML-карта является важным структурным элементом множества интернет-ресурсов. Какие задачи она выполняет, чем полезна для SEO и зачем ее создавать?

Что такое HTML карта сайта и как она работает

Sitemap HTML — вид статического каталога, включающего важные разделы сайта, размещенные в иерархическом порядке. Простыми словами, HTML-карта служит в качестве навигатора и оглавления сразу.

Структура HTML-карты преимущественно древовидная, а ссылку на нее требуется поместить в футер ресурса.

Функции карты сайта

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

Пример: вы продаете мужские джинсы от бренда Armani. Как пользователь найдет нужную страничку? Воспользуется навигацией:

Главная → «Мужчинам» (раздел) → «Одежда» (категория) → «Джинсы» (подкатегория) → «Джинсы Armani» (подкатегория).

То есть нужная юзеру страничка — это 5-й уровень вложенности. Но если ее разместить в карте сайта, она окажется на 3-м:

Главная → карта → «Джинсы Armani».

Еще пример — статистика, отражающая глубину вложенности на сайте, просканированном SEO-сканером Netpeak Spider:

Вертикаль на графике показывает количество страниц, горизонталь — показатели по количеству кликов от главной. Как видно, много страниц находятся на 5-м уровне и ниже, что мешает ботам поиска их сканировать и индексировать. В этой ситуации карта сайта поможет уменьшению значений глубины вложенности у страничек 7-го уровня — они окажутся на 3-м или 4-м.

В принципе на карте видно, как сайт структурирован по разделам и т. д. — но в нее, тем не менее, возможно поместить приоритетные странички фильтрации/тегов. Это разумно, если речь идет о страницах, значимых для развития бизнеса и увеличения продаж, если они имеют глубину вложенности более 4. Карта сайта поможет сканировать и индексировать их. Но если обнаружилось, что много ваших приоритетных страницы «лежит» на глубине кликов более 4, внутренняя перелинковка сайта явно нуждается в оптимизации.

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

Перечень свойств рабочей HTML-карты

Для эффективной работы сделайте карту:

• Простой, чтобы пользователи легко находили нужные им страницы;
• Актуальной. Дополняйте ее ссылками исключительно на страницы, полезные для продвижения — без битых и закрытых от индексации;
• Структурированной. Карта — достоверное отражение имеющегося строения ресурса;
• Обновляемой в автоматическом режиме и регулярно, чтобы список страниц всегда был актуален;
• Стилистически гармонирующей со «своим» сайтом по оформлению.

Рекомендации по созданию HTML карты сайта

Генерируйте html-карту в 7 шагов:

1. Перечислите в ней все ссылки на страницы с отображением структуры ресурса — то есть все основные. Проследите, чтобы они были открытыми для индекса. Не нужно включать в нее странички конкретных товарных позиций, фильтрации, статей, постов и пагинации. Учтите, что это примерно 90% всех ваших страничек. Карта — это прежде всего структура, путеводитель, а не «подробности».
2. Контролируйте регулярность обновления вашей карты — чтобы список страниц не оказался «морально устаревшим».
3. Если ваш ресурс — крупный и сложно разветвленный портал, может оказаться, что в список для размещения в карту попадает 150 и более ссылок. Сделайте ее многостраничной. Пример: на известном туристическом портале Trip.Advisor она именно такая — включает разделы «Куда вы едете» (ссылки на множество HTML-карт по разным туристическим направлениям), «Узнать больше» (раздел ссылает на карты с авиакомпаниями, авиабилетами, отелями и т. п.) и «Дополнительные ресурсы» (ссылки на различную справочную информацию) (см. рисунок ниже).
4. Ссылки на все страницы располагайте логично, соблюдая их иерархию — от раздела в категорию, из нее в подкатегорию, без путаницы.
5. Для анкоров используйте релевантные ключевики — не нагружайте их транзакционными ключевыми фразами, включающие слова «цена», «купить» и подобные. Помните о цели генерации карты: она должна показывать посетителю сайта его строение, помогать быстро оказаться там, где находится нужный ему контент. Анкоры требуются, чтобы работать на эту задачу.
6. Ссылку на карту поставьте в футер, на все страницы. Допустимо поместить ее и на страничку 404.
7. Карта включает ссылки исключительно с кодами 200 (статусами ответа HTTP, означающими, что сервер запрос обработал, и нужный контент предоставлен посетителю ресурса). Статус ответа 200 указывает на доступность страницы для юзеров и роботов поиска, он значимый фактор для SEO.

Способы и правила создания карты сайта

Сделать HTML-документ со всеми важными ссылками вручную реально, если вы имеете определенный опыт или планируете создавать маленький сайт.

Как это реализовать:

1. 1. Используйте SiteMap Generator. С его помощью вы сформируете сразу разные виды хтмл-карт. Но без оплаты это получится сделать лишь для маленького ресурса. Если он у вас 500-страничный и более — услуга становится платной. Существует много других онлайн-генераторов HTML карт.
   2. Пользуйтесь плагинами для разных CMS. Пример: для WordPress удобно взять WP Sitemap Page.
   3. Примените уже знакомый вам сканер Netpeak Spider.

Как использовать «паука? Работайте «Генератором Sitemap», он поможет с созданием всех видов карт (и хтмл включительно). На этапе их формирования можно настроить параметры. Создаем карту:

• Запускаем сканер.
• Нам нужна вкладка «Параметры» (боковая панель). В ней — «Head теги» и «Заголовки H1-H6». Если на них не стоит галочка, ставим ее.

• В адресную строку вводим начальный URL нашего ресурса. Затем нажимаем на «Старт».
• Когда программа закончит сканировать, находим меню инструментов (правый верхний угол). Нам нужен «Генератор Sitemap».

Отмечаем его галочкой и настраиваем:

• «Источник текстовых ссылок» — здесь настраиваются URL, Title либо Заголовок H1;
• «Сегментация» — формируем карту 1 файлом или делим ее на файлы по 100 и 1000 URL;
• «Дополнительный контент» — добавляем содержание Description — это поможет посетителям понять, на каких страницах находится какой контент.

Разобравшись с параметрами, нажимаем «Сгенерировать» и сохраняем результат в любую из папок на свое устройство. Файл передаем прогеру — для внедрения карты на сайт.

Как вы понимаете, не требуется быть специалистом или потратить много времени, чтобы сделать HTML-карту сайта. Зато вы создали инструмент, удобный и для посетителей, и для поисковых систем, сканирующих и индексирующих страницы вашего ресурса.

Смотрите видео к статье:

FAQ