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

8 JavaScript библиотек для визуализации данных в виде интерактивных карт

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

Данная статья дает общее, но вовлеченное представление о восьми самых интересных, на мой взгляд, JavaScript-библиотеках для построения интерактивных геовизуализаций. В целом, таких решений сейчас много, и выбрать оптимальное под тот или иной конкретный проект – задача порой непростая как минимум по времени. Этой публикацией я попытаюсь хотя бы немного упростить жизнь тем, кто только начинает разбираться в данной теме. Кстати, это слегка модифицированный перевод моей недавней статьи на Onextrapixel (оригинал на английском).

На всякий случай сразу уточню: вообще, JavaScript-библиотеки для создания карт можно разделить на два типа. Одни просто позволяют отображать географическое положение одного или нескольких объектов. Для подобной задачи можно использовать карты типа Google Maps или OpenStreetMaps в качестве источника. В принципе, таких решений достаточно, и результат их работы примерно таков:

Другой тип – и о нем я хочу сегодня поговорить – JavaScript-библиотеки, с помощью которых можно делать именно визуализацию данных посредством создания красивых интерактивных карт. Они показывают либо связи между величинами в разных географических регионах, либо перемещение каких-либо объектов относительно их местоположения, и т.п. – всё то, что крайне важно в плане анализа данных и business intelligence.

JavaScript-библиотеки для интерактивных карт-визуализаций

amMap (от amCharts)

amMap – специальная JavaScript (HTML5) библиотека для построения карт, разработанная командой amCharts. Она не нуждается в каких-либо внешних зависимостях и позволяет довольно просто делать красивые choropleth, bubble, dot (point), connector и flow карты, поддерживая много полезных интерактивных фич.

В частности, amMap дает возможность легко «погружаться» в тот или иной выбранный участок карты с помощью drill down или, например, использовать любые картинки в качестве маркеров – довольно любопытная вещь.

Для начала работы с amMap нужно скачать ZIP-файл с бинарниками. Кстати, в нем уже лежит по 455 карт в каждом из поддерживаемых форматов (JavaScript/SVG). Документация у amMap не очень большая и сводится по большей части к набору вопросов и ответов.

AnyMap (от AnyChart)

AnyMap – одна из популярных JavaScript (HTML5) библиотек для визуализации данных, созданных компанией AnyChart. Как и в случае с amMap, для создания карты с ее помощью не требуется больших усилий, равно как и подключения каких-либо внешних ресурсов или сторонних библиотек (jQuery и т.д.). AnyMap также поддерживает все базовые типы серий, который только могут понадобиться: choropleth, bubble, dot, connector, flow.

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

Забегая немного вперед, скажу, что, на мой взгляд, AnyMap больше похожа на D3, нежели на amMap или Highmaps. Она как бы сочетает в себе возможности «коробочных» решений и в то же время является хорошо расширяемой и контролируемой со стороны разработчика, позволяет полностью кастомизировать визаулизации путем добавления или изменения различных элементов и легко создать собственные карты.

Бинарники AnyMap находятся в ZIP-файле и содержат множество примеров, а на CDN у AnyChart доступны сотни карт в самых разных форматах: GeoJSON, TopoJSON, SHP, SVG. Также стоит заметить, что у этой библиотеки богатая документация и обширное описание API, кстати, довольно легкое для понимания и – опять же – с большим количеством сэмплов.

D3.js (от Mike Bostock)

D3.js – мощная в плане возможных результатов библиотека для визуализации данных с открытым исходным кодом. В отличие от других упомянутых JavaScript-библиотек, D3 – это, скорее, фреймворк, который дает максимальную свободу творчества. Хотя создание интерактивных карт здесь не так очевидно, как, скажем, в решениях от amCharts, AnyChart или Highcharts.

В частности, чтобы сделать такую замечательную интерактивную карту, как на иллюстрации, потребуется изучить достаточно большое количество материалов. Хотя, надо сказать, это стоит того, потому что в итоге можно сделать реально потрясающие, оригинальные визуализации.

Фактически в D3 доступно множество фич, среди которых полная кастомизация поведения, событийная модель и т.д. В целом, я бы сказал, что это – идеальное решение для веб-приложений. Хотя, к сожалению, D3 не предоставляет собственных карт. Это значит – их придется самостоятельно искать в открытых источниках, но вряд ли сейчас это большая проблема.

Документации как таковой у D3 нет, однако есть хорошо расписанное API и множество различных туториалов, примеров и прочих полезных материалов буквально по всему Интернету.

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно.

Google GeoCharts (от Google)

У гиганта Google есть своя JavaScript-библиотека для визуализации данных – Google Charts. Она содержит возможности и для построения интерактивных карт-визуализаций, называющихся здесь geocharts, видимо, чтобы их не путали с обычными картами, которые нужны только для отображения местоположения объектов.

Карта в Google Geocharts только одна, и это – карта мира. Однако можно выбрать регион, на который при рисовании будет сделан фокус с помощью зума.

К сожалению, здешний API не поддерживает прокрутку (scrolling), изменение масштаба (zoom), перетаскивание (drag). Также Google не предлагает иных типов серий для карт, кроме choropleth и bubble. Однажды данные недостатки довольно сильно меня, мягко скажем, опечалили, но в этом был и положительный момент: в конечном счете мне пришлось начать искать и изучать всяческие другие библиотеки, и вот я сейчас делюсь результатами этого микроисследования с вами.

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

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно.

Highmaps (от Highsoft)

Highmaps – «младшая сестра» Highcharts и Highstock, популярных библиотек разработки компании Highsoft. Ее ключевые преимущества – открытый код со всеми его плюсами, небольшой размер, высокая скорость отрисовки и широкий набор интерактивных возможностей, таких как drill down и т.п.

Среди поддерживаемых в Highmaps серий – choropleth и bubble. Кроме того, с помощью этой библиотеки можно рисовать линии для обозначения дорог, рек и коннекторов. Хотя сделать, скажем, flow-карту здесь не так просто, как в тех же amMap и AnyMap.

Также стоит отметить, что ни Highcharts, ни Highmaps не работают без jQuery, так что для их использования эта зависимость должна быть подключена (или, конечно, есть еще вариант поискать другую библиотеку для визуализации данных — ха-ха).

Положительный момент – Highmaps имеет большое количество карт в форматах SVG и GeoJSON. Также у нее обильная документация, которая позволяет довольно быстро и успешно разобраться во всевозможных настройках.

jQuery Mapael (от Vincent Broute)

jQuery Mapael – еще одна очень достойная, хорошо сделанная библиотека с открытым исходным кодом, предназначенная для создания динамических векторных карт. Она основана на jQuery и Raphael JS, так что эти зависимости нужно иметь в виду при построении поддерживаемых ею choropleth, bubble или connector карт.

Набор своих, готовых для использования карт лежит в репозитории Mapael. Документация и описание API соединены в одну статью но, честно говоря, начать работу с данной библиотекой достаточно легко и с помощью вот этого подробного туториала.

Описание API: есть.
Зависимости: jQuery и Raphael.
Лицензия: бесплатно.

jVectorMap (от Kirill Lebedev)

Библиотека для интерактивных карт jVectorMap имеет открытый исходный код, как и ряд других перечисленных в статье. Она не будет работать без jQuery. Хотя кому-то может показаться, что такая внешняя зависимость делает данную (или любую другую) библиотеку не слишком легко-универсальной, это не должно стать большой проблемой в наше время, ведь jQuery с большим отрывом занимает первое место среди JavaScript-библиотек для сайтов и по популярности, и по доле рынка.

К сожалению, выбор доступных типов серий здесь не слишком велик: в jVectorMap предлагаются только choropleth и marker карты, но в то же время – отдадим этой библиотеке должное – они сделаны весьма добротно. Кроме того, тут можно использовать в качестве маркеров любые картинки, а также имеются drill down и ряд других интерактивных фич.

У jVectorMap довольно небольшое описание API и нет документации в привычном по крайней мере для меня виде. Однако имеется маленький, но все равно очень полезный туториал Getting Started. Свои карты используются, но только в формате GeoJSON.

Kartograph (от Gregor Aisch)

Kartograph – еще одно открытое решение со всеми вытекающими из этого преимуществами. Данную библиотеку характеризует обилие визуальных эффектов, таких как тени, размытие и т.д.

Интересно также, что вдобавок к традиционным choropleth и bubble типам серий здесь еще есть 3D columns (или, как их иногда называют, вертикальные 3D bars).

Готовой коллекции карт в Kartograph нет. Но библиотека работает с любыми картами в формате SVG. Также она предлагает утилиту Kartograph.py для создания карт.

Хотя Kartograph имеет зависимости и не будет работать без Raphael JS (используется как движок для рисования) и jQuery, эта библиотека делает процесс создания карт действительно довольно понятным и беспроблемным, тогда как документация и описание API данной библиотеки, соединенные в одну статью, позволяют вполне легко и удобно заполучить нужные интерактивные карты для ваших проектов.

Описание API: есть.
Зависимости: jQuery и Raphael.
Лицензия: бесплатно.

Заключение

Все перечисленные мною JavaScript-библиотеки для визуализации данных с помощью интерактивных карт – кросс-браузерные. (Ну, в XXI веке иначе, наверное, и быть уже не может.) Некоторые из них даже поддерживают старые браузеры, такие как Internet Explorer 6. (Хотя вот это, я надеюсь, очень скоро уже перестанет быть важным, в конце 2010-х.)

Все бесплатные библиотеки, которые я упомянул, довольно-таки неплохо справляются с созданием интерактивных карт. Но зато они не обеспечивают такую широкую поддержку, как коммерческие, да и – положа руку на сердце – не так уж сильны в кастомизации (ну, кроме D3, конечно).

Говоря о коммерческих библиотеках – кстати, обычно ими можно пользоваться бесплатно для некоммерческих и личных целей, – я не могу не отметить AnyMap и Highmaps за их обстоятельные документации и описания API, равно как и за большие пулы всяческих примеров/демо JavaScript-карт с добротной интерактивностью.

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

Источник

Динамичный скрипт карты сайта Sitemap.xml на PHP для osCommerce 2.3

Пожалуй, написано немало статей на тему, зачем нужен файл Sitemap.xml, и что с ним делают поисковики. Здесь мне не хотелось бы повторяться. Поэтому просто оговоримся, что файл Sitemap представляет карту сайта, содержит перечень страниц сайта и служит для лучшей индексации ресурса поисковыми роботами вроде Yandex, Google и пр. На этом и закончим.

Конечно, для создания карты сайта всегда можно обратиться к генераторам Sitemap, благо, что в интернете существует много таких сервисов (нагуглить их по запросу «sitemap generator» не составит труда). Стоит лишь вбить адрес сайта в предлагаемое поле ввода, и для вас сгенерируется файл карты сайта Sitemap.xml по всем правилам. Сохраняете его на своем компьютере, переносите на сайт, а далее переходите в Яндекс.вебмастер и просто указываете ссылку на него. Однако, такой способ имеет ряд определённых недочётов. Во-первых, количество линков (url-ов вашего сайта), как правило, лимитируется генераторами в пределах от 500 до 1000. Т.е. для больших сайтов, с количеством страниц, превышающих тысячу, а то и несколько, такая карта сайта Sitepam.xml будет не полной. Во-вторых, если речь идет об интернет-магазине, в котором постоянно добавляются новые товары, безусловно, однажды созданная карта сайта не будет их включать. Для того, чтобы новые товары или любые изменения категорий были учтены в Sitemap.xml, нужно создать динамичный php-скрипт, который будет моделировать файл Sitemap.xml каждый раз при индексации сайта поисковиком.

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

Дополнительно пару слов о создании карты сайта Sitemap.xml посредством генераторов. Изучив такую карту сайта для интернет-магазина на базе osCommerce, я обнаружила ещё одну особенность. В ущерб более ценным ссылкам, таким генератором формируются линки вида:

Обратите внимание на фрагмент «?sort=1a&page=1» — эта выдержка говорит об использовании сортировки на странице. Не будем забывать, что заголовок такой страницы в разделе интернет-магазина остаётся прежним — по названию категории или производителя (бренда). Как известно, поисковики чаще всего исключают из своего поля зрения страницы с одинаковыми названиями, поэтому такой линк, по всей вероятности, окажется, скорее мусорным. Вспомним про лимит ссылок от генератора при создании карты сайта Sitemap.xml, и мы получаем картину, когда такие дубликаты заполоняют пространство Sitemap взамен более значимых путей по сайту.

С обоснованиями актуальности мало-мальски разобрались. Пора приступить к делу. Я буду создавать файл карты сайта Sitemap на PHP по аналогии с YML-файлом для трансляции товаров на Яндекс.Маркете — скриптом, подготовленным под типичный формат.

Как видим, здесь используется только сама ссылка, причём единственная, и один необязательный тег «priority» (указывает приоритетность страницы в спектре от 0.0 до 1.0 по отношению к другим страницам этого же сайта). Другие необязательные теги, которыми также можно применять: «lastmod» (дата последнего изменения, напр., 2012-03-05), «changefreq» (выбор периодичности изменения страницы, напр., «monthly», «weekly», «never», «always» и др.). Подробнее о XML формате файла Sitemap можно ознакомиться на этом сайте.

В нашем PHP скрипте карты сайта Sitemap создаем подключение к БД и определяем формат передачи XML:

Т.к. таблицы хранятся в кодировке latin1, осуществляем запрос mysql с заданной кодировкой (прописано в последней строке). Я работаю с тюнингованной версией движка (чит. Тюнинг osCommerce v.2.3, или прокачка интернет-магазина для дизайнерских и seo-целей), в которой все линки (url-ы) являются seo-оптимизированными и преображаются согласно семантики. Чтобы выдавать в карте сайта Sitemap именно такие ссылки на страницы, создадим функцию «str_ru». В полевых условиях хостинга и используемого файл-менеджера, мне удобнее конвертировать знаки из cp1251 (Windows-1251) в кодировку UTF-8 (что обеспечивается iconv). Однако, если вы делаете Sitemap.php в онлайновом файл-менеджере на сайте компании хостинга, можно сразу задать редактирование файла в UTF-8. Тогда конвертировать знаки не нужно. В этом случае, к каждому символу в массиве приводим («к» => «k», «а» => «a» и т.д.). Ниже сама функция:

Прописываем адрес сайта и начинаем шапку XML, открываем тег urlset:

Вручную прописываем три стандартных области сайта, такие как: Бренды (Все производители), Новинки, Скидки (Спецпредложения). Т.к. сайт, который мной оптимизировался, интернет-магазин очков STAROPTIC.RU, посвящен теме очков и очковых оправ, то используются заменённые названия файлов: kupit-ochki-brands.php (бывш. allmanufacturers.php), novie-ochki.php (бывш. products_new.php), ochki-so-skidkoy.php (бывш. specials.php). Четвертая ссылка — статьи (poleznoe-pro-ochki-t-2.html). Следует отметить, что сам движок находится в папке сайта «ochki-linzi-opravi/», и в данном скрипте наименование этого каталога будет фигурировать повсеместно.

Теперь приступим к запросам БД. Для начала, выведем все категории и подкатегории:

Теперь будем выводить все бренды:

Здесь следует оговориться, что сам линк на бренды немного модернизирован. Скажем, в интернет-магазине используется две версии подачи брендов. Если в товарах (навесной) применяется исключительно название бренда (например, Ray-Ban, Prada и т.д.), то на конкретной странице, посвящённой бренду, он имеет заголовок «Купить очки Ray-Ban«, «Купить очки Prada«. Соответственно этому заголовку, были построены и ссылки, т.е. к каждой из них, после названия, помимо указания бренда (-m-*manufacturersID) приписывается ещё и знаменатель «-kupit-ochki». Т.е. вид такого человеко-понятного урла (ЧПУ) в адресной строке будет следующим:

http://staroptic.ru/ochki-linzi-opravi/ray-ban-kupit-ochki-m-61.html

Я люблю последовательность во всём, и если в заголовок страницы бренда прописывается определённая связка (в данном случае, «Купить очки …»), она должна прослеживаться и в урле.

И, наконец, переходим к выводу товаров в нашей карте сайта Sitemap.php:

В окончание, прописываем закрытие тега urlset, а дальше начинаем вывод того, что наскриптили:

На выходе мы получили динамичный PHP-скрипт для создания файла Sitemap (карты сайта для лучшей индексации поисковиками). Наша карта сайта включает все разделы (рубрики), бренды и товары. Причём, при обновлении интернет-магазина, такие обновления будут отражаться на нашем файле.

Источник

Как создать и настроить карту сайта sitemap.xml в 2021 году

Обновил Сергей Алмакин

Даже в 2021 году XML-карта нужна: этот инструмент по-прежнему используется краулерами Google и «Яндекс» – для ускорения индексации и получения технической информации о страницах. Из этой статьи вы узнаете, что такое sitemap.xml, зачем нужна XML-карта сайта, как ее создать и настроить правильно.

Что такое карта сайта, и зачем она нужна

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

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

XML и HTML – языки разметки.

HTML-карты – устаревший и не очень удобный элемент навигации, поэтому уделим им немного внимания в конце статьи. А пока сосредоточимся на XML-картах, которые важны для корректной индексации ресурсов.

Зачем нужна карта сайта sitemap.xml

Подробно об этом можно прочитать в справочниках от Google и «Яндекса». Краткая суть: в sitemap.xml содержится важная для поисковых роботов информация. Это:

Те есть карта сайта – навигатор для поисковых систем.

Можно ли обойтись без sitemap.xml

Можно. Поисковые системы считают XML-карту сайта рекомендованным инструментом. Например, если на сайте нет sitemap.xml, «Яндекс» отметит это в списке возможных, а не критичных или фатальных проблем.

Роботы – не дураки, они проиндексируют сайт и без sitemap.xml. Но в некоторых ситуациях отсутствие XML-карты приводит к проблемам с индексированием. Вот примеры:

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

Как создать и подключить файл sitemap.xml

Создать карту сайта можно двумя способами. Первый – сделать sitemap.xml можно с помощью внешнего онлайн-генератора. Второй – понадобится модуль или внутренний генератор для конкретной CMS. Рассмотрим оба способа.

Как создать карту сайта онлайн с помощью генератора

Этот способ хорош тем, что вы не привязываетесь к конкретному движку. С помощью онлайн-генераторов можно сделать sitemap.xml для сайта на любой CMS или для статичного сайта на HTML.

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

Если на сайте постоянно появляются новые страницы, бесплатные внешние генераторы не подходят. Они не включают в карту сайта новые URL, поэтому sitemap.xml теряет актуальность.

Вот несколько генераторов карты сайта:

Чтобы создать sitemap.xml с помощью XML-Sitemaps, укажите URL сайта и нажмите кнопку Start.

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

В нашем случае сканирование сайта с 541 страницей в поиске «Яндекса» заняло около 4 минут. После того, как карта будет сформирована, скачайте файл sitemap.xml на жесткий диск. Для этого нажмите кнопку VIEW SITEMAP DETAILS:

Откроется подробная детализация созданной карты. Можете ознакомиться с ней и затем нажать DOWNLOAD YOU XML SITEMAP FILE:

Теперь загрузите sitemap.xml в корневую директорию на сайте. Это можно сделать с помощью FTP-клиента, например, FileZilla. У нас есть руководство по работе с этой программой. Еще легче – при помощи файлового менеджера используемого вами хостинга. Например, вот файловый менеджер хостинга Beget:

Если не знаете, где находится корневой каталог сайта, найдите файл index.html или index.php:

Как создать карту сайта с помощью дополнительных модулей для CMS

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

Если ваш сайт работает на WordPress, обратите внимание на плагин Google XML Sitemaps. Установите и активируйте модуль. Перейдите на страницу настроек. В базовых параметрах включите уведомления для Google, добавьте URL карты сайта в robots.txt и включите сжатие файла sitemap.xml:

В разделе «Приоритет статьи» отключите автоматический расчет приоритета публикаций. Позже вы укажете приоритеты страниц вручную.

Уделите внимание разделу «Содержание карты сайта». Включите в sitemap.xml только те типы страниц, которые нужны вам в индексе поисковых систем.

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

Обязательно отметьте галочкой опцию Include the last modification time. В этом случае плагин укажет в карте сайта дату последнего обновления публикации. Эта информация нужна роботам, чтобы планировать повторное сканирование страниц.

В разделе Excluded Items при необходимости исключите из карты сайта отдельные категории или страницы.

В разделе Change Frequencies можно попросить поисковые системы индексировать те или иные типы страниц с определенной периодичностью. Поисковики, скорее всего, проигнорируют параметр changefreq в sitemap.xml, так как они сами планируют краулинговый бюджет сайта. Тем не менее, плагин дает возможность указать эти настройки в карте сайта.

В разделе «Приоритеты» укажите приоритетность страниц сайта. Допустимы значения от 0,1 до 1,0. По умолчанию страница имеет приоритет 0,5. Присвойте высокий приоритет страницам, которые считаете важными по сравнению с остальными страницами сайта. Например, если на главной появляются анонсы новостей или новых товаров, она может считаться самой приоритетной страницей.

Обратите внимание: время последнего обновления, желаемая частота индексации и приоритетность страниц – необязательная информация. Поисковые системы могут ее учитывать, а могут и не учитывать. Вы ничего не потеряете, если оставите в этих разделах дефолтные значения.

Сохраните изменения. После этого о плагине Google XML Sitemaps можно навсегда забыть, так как он работает в фоновом режиме, автоматически обновляется и сам актуализирует карту сайта. Вам останется только добавить sitemap.xml в Google Search Console и «Яндекс.Вебмастер».

Google XML Sitemaps – не единственный плагин для WordPress, с помощью которого можно создать карту сайта. Например, в комбайне All in One SEO есть модуль «Sitemaps»:

После активации модуля можно создать карту сайта и настроить ее параметры:

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

Кроме этого, для создания отдельной карты сайты для видео можно воспользоваться специально предназначенным для этого генератором, например, Sitemap Generator.

Вот генераторы sitemap.xml для других движков:

После создания карты сайта добавьте ее в Google Search Console и «Яндекс.Вебмастер».

Как добавить карту сайта в Google Search Console и «Яндекс.Вебмастер»

Чтобы добавить карту сайта в Search Console, выберите раздел «Файлы Sitemap». Добавьте URL карты и нажмите кнопку «Отправить». Обычно карта сайта доступна по адресу типа vash-site.ru/sitemap.xml.

Поисковику понадобится какое-то время, чтобы проиндексировать карту сайта. После индексации появится статус «Успешно» или сообщение об ошибках. Чтобы просмотреть отчет об индексировании карты сайта в новом интерфейсе Search Console, нажмите на отмеченную на иллюстрации пиктограмму.

В отчете можно увидеть данные об индексировании sitemap.xml. Например, если на сайте есть закрытые от индексирования страницы, уведомление об этом появится в отчете.

Чтобы добавить sitemap.xml в «Яндекс.Вебмастер», выберите раздел «Индексирование – Файлы Sitemap»:

Укажите URL карты сайта в соответствующем поле и нажмите кнопку «Добавить».

В «Яндекс.Вебмастере» уведомление о проблемах с картой сайта появляется в разделе «Диагностика сайта». Также корректность файла можно проверить с помощью специального инструмента.

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

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

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

Создать карту сайта в формате HTML на WordPress можно с помощью плагина Simple Sitemap от разработчика David Gwyer или аналогичных решений. Достаточно установить и активировать надстройку, а затем вставить предложенный шорткод на страницу, где нужна карта сайта.

Вот решения для других CMS:

В OpenCart карта сайта в формате HTML создается автоматически.

Источник