Как создать полезную html карту сайта для пользователей

Рано или поздно каждый сайтостроитель начинает понимать, что сайт строится в первую очередь для пользователей, а не для поисковых систем. Конечно, лучше раньше, чем никогда. И начинает вводить онлайн удобства и сервисы на сайте для посетителей. Одним из таких удобств является html карта сайта WordPress.

Она позволяет показать пользователю иерархический список записей и разделов с удобной навигацией по ним. В этой статье я покажу, как создать html карту сайта в WordPress для людей.

HTML карта сайта

Что такое html карта и чем она отличается от xml карты?

Карта сайта в формате xml создается для машин и поисковых систем. Она использует язык разметки для представления содержимого ресурса. Поисковые системы используют эти карты для определения приоритетов и настройки скорости сканирования сайта. 

Карта сайта в формате html предназначена для реальных людей. Она отображает список записей и разделов сайта на одной странице. Роботам поисковых систем она подходит меньше, чем xml карта, хотя они ее тоже используют. 

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

Зачем нужна карта для пользователей?

Если на сайте еще нет html карты, то ее надо сделать. Почему?

1. Благодаря карте можно построить иерархию разделов, подразделов и записей на одной странице сайта.
   2. Карта упрощает индексацию сайта ботами и увеличивает количество запросов, участвующих в поиске.
   3. Она может служить дополнительным инструментом поиска нужного контента для пользователя
   4. Карта выступает как элемент главного меню и предоставляет удобный инструмент навигации по сайту. Любой материал доступен в два клика (первый — на карту, второй — на статью)
   5. Html карта улучшает SEO показатели сайта
   6. Для владельца сайта html карта покажет количество созданных записей в каждом разделе и пробелы в наполнении его необходимым контентом.

Создать карту сайта для людей возможно следующими способами:

1. С помощью плагинов,
   2. Без плагинов через изменение html шаблонов темы,
   3. При помощи шорткода.

И если варианты 2 и 3 требуют углубленного знания WordPress и основ программирования, то первый способ подходит всем, кто только начал создавать сайт на вордпресс. Поэтому я в статье остановлюсь только на создании html карты сайта при помощи плагинов.

Добавление карты сайта с помощью плагинов

Существует множество плагинов для создания карты, например:

• Simple Sitemap,
• WP Sitemap Page,
• Sitemap by click5 (позволяет создавать как xml, так и html карты сайта),
• Hierarchical HTML Sitemap,
• Simple Sitemap и другие

Я не буду рассматривать их всех, а остановлюсь только на трех плагинах, которые применял на нескольких своих и клиентских проектах.

13 карт сайта в одном плагине PS Auto Sitemap

Достаточно популярным и простым плагином для создания красивой карты сайта можно считать PS Auto Sitemap (количество скачиваний более 200 000, оценка 5.0). Крайняя версия WP, с которой он тестировался, 4.2.28.

Его достоинствами являются: 

1. автоматическая генерация html карты сайта, 
2. 13 встроенных стилей визуализации, 
3. наличие внутреннего кэша, что позволяет освободить базу данных от лишних запросов.

Данный плагин хорошо работает на сайтах с не очень большим объемом страниц. Он не умеет делить карту сайта на несколько страниц и выводит ее одной длинной “портянкой”. Это является практически единственным недостатком. 

Установка и активация плагина обычные, без каких либо премудростей. После его установки в консоли WP в разделе Настройки появится новый пункт PS Auto Sitemap.

Приступаем к формированию карты сайта для людей. Первое, что необходимо сделать — это создать страницу, на которой будет она размещена. При создании запоминаем (записываем) ID страницы. Узнать его можно при редактировании. В каждой теме ID выводится по-своему, у меня в Divi это вот так: post=232267. Значит ID страницы 232267.

На данную страницу надо вставить единственный шорткод:

<!— SITEMAP CONTENT REPLACE POINT —>

Всё сохраняем и идем в настройки плагина, для оформления внешнего вида карты сайта для пользователей.

1. Display home list — Выводить в карту сайта домашнюю (главную) страницу или нет. 
2. Display post tree — Показывать дерево сообщений (выводить или нет в карте сайта записи). 
3. Display page tree — Показывать дерево страниц (выводить или нет страницы сайта). 
4. PostID of the sitemap — ID страницы с картой сайта.
5. Depth level — уровень глубины. Сколько уровней сайта надо отображать (1, 2, 3 и так далее ) на html карте (no limit — выводить без ограничений). 
6. Display first — очередность вывода. Что выводить первым записи или страницы? 
7. Display of categories & posts — выводить записи (посты) и страницы вместе или раздельно. 
8. Excluded categories — исключать категории. Какие категории нужно исключить из карты сайта. Необходимо указать ID категорий последовательно друг за другом, разделяя запятой. 
9. Exclude posts — исключить посты. Какие записи не надо выводить в пользовательскую карту. Также указываются ID постов через запятую. 
10. Select style — стиль отображения карты сайта на экране. 
11. Using cache — использование кэша (должно быть включено, то есть около use должна быть галочка). 
12. Сохранить изменения — не забыть всё сохранить.

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

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

Для любителей музыки и сайтов соответствующей направленности стиль Music

Визуальная карта сайта — плагин Slick Sitemap

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

Несмотря на то, что плагин достаточно старый и давно не обновлялся, он рабочий. Однако, прежде чем настраивать плагин, необходимо создать меню для его работы. Создается оно как обычное меню WordPress.

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

Можно также создать другое меню или использовать существующее с несколькими важными страницами. Это меню будет использоваться как служебное вверху карты сайта.

После того как созданы два меню (основное и служебное), можно настроить html карту сайта. Для этого надо перейти в консоли WordPress раздел Настройки (1) и выбрать пункт Slick Sitemap (2) для настройки плагина.

В настройках всего три пункта: 

1. Default Sitemap Menu — выбор основного меню (Визуальное меню), 
2. Default Columns — сколько столбцов должно быть отображено на карте сайте, 
3. Default Utility Menu — выбор служебного меню

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

После создания и настройки карты следующим шагом будет отображение ее на странице сайта WordPress. Для чего надо создать новую страницу и добавить этот шорткод.

[slick-sitemap]

После этого опубликовать страницу и посмотреть, что получилось в результате работы плагина Slick Sitemap.

Пример визуальной карты сайта в WordPress

Плагин WP Sitemap Page

Еще одним из широко применяемых плагинов является WP Sitemap Page, который также “немного” заброшен. Крайняя версия WordPress, с которой он тестировался, 5.2.7. Но несмотря на это имеет количество скачиваний 200 000+ и оценку 5.0.

После установки и активации плагина в панели Настройки появился новый раздел WP Sitemap Page.

Особенности плагина:

• Дает возможность показать все страницы, сообщения и категории в одном месте.
• Настраиваемый вид отображения показываемой таксономии.
• Позволяет вывести один или любой вид контента.
• Прост в использовании.
• Есть возможность исключить некоторые страницы или какой-либо пользовательский тип сообщения.
• Посты и категории отображаются иерархически.
• Имеется возможность тонкой настройки через классы CSS.
• Доступен на русском языке

К недостаткам плагина относится то, что на больших проектах использование его нежелательно. Карта сайта создается динамически без использования кеша. Поэтому ее формирование будет “тормозить” сайт. Для больших проектов подойдет плагин PS Auto Sitemap, который имеет встроенный кеш.

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

Можно отобразить любой пользовательский тип сообщения, используя его ключевое слово внутри атрибута «only». Например:

Если указан шорткод, то формируется стандартная иерархическая карта сайта, пример которой показан на рисунке.

Из трех рассмотренных выше плагинов я отдаю предпочтение PS Auto Sitemap, несмотря на его “преклонный” возраст.

На что стоит обратить внимание при создании html карты

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

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

И в заключение этой статьи позволю дать несколько практических советов при составлении пользовательской карты сайта:

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

Надеюсь, что созданная html карта поможет улучшить пользовательские факторы сайта и не разочарует посетителей.

Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.