Как сделать карту на сайте html

HTML Карты изображений

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

В этой теме:

Карты изображений

HTML тег <map> определяет карту изображения. Карта изображений — это изображение из кликабельными областями. Области определяются одним или несколькими тегами <area> .

Попробуйте кликнуть на компьютере, телефоне или чашке кофе на изображении ниже:

Пример

Вот исходный HTML код для карты изображений выше:

Как это работает?

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

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

Изображения

Изображение вставляется с помощью тега <img> Единственное отличие от других изображений заключается в том, что вы должны добавить атрибут usemap :

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

Примечание: Вы можете использовать любое изображение для карты изображений!

Создать карту изображений

Потом добавьте элемент <map> .

Элемент <map> используется для создания карты изображений и связывается с изображением с помощью необходимого атрибута name :

Атрибут name должен иметь то самое значение, что и атрибут <img> usemap .

Кликабельные области

Потом добавьте кликабельные области.

Область, на которую можно кликнуть, определяется с помощью элемента <area> .

Форма кликабельной области

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

• rect — определяет прямоугольную область
• circle — определяет круговую область
• poly — определяет полигональную область
• default — определяет всю область

Вы также должны определить некоторые координаты, чтобы можно было разместить область, на которую можно нажать на изображении.

Shape="rect"

Координаты для shape="rect" состоят попарно, одна для оси x, и одна для оси y.

Т.о., координаты 34,44 расположены на 34 пикселей от левого поля и 44 пикселей от верхнего:

Координаты 270,350 расположены в 270 пикселей от левого поля и 350 пикселей от верхнего:

Теперь у нас есть достаточно данных, чтобы создать прямоугольную область, на которую можно нажать:

Пример

Это область, которая становится интерактивной и направляет пользователя на страницу "computer.html":

Shape="circle"

Чтобы добавить область круга, сначала найдите координаты центра окружности:

Затем укажите радиус окружности:

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

Пример

Это область, которая становится интерактивной и направляет пользователя на страницу "coffee.html":

Shape="poly"

shape="poly" содержит несколько координатных точек, создает фигуру, образованную прямыми линиями (многоугольник).

Это можно использовать для создания любой фигуры.

Как, возможно, форма круассана!

Как мы можем сделать так, чтобы круассан на картинке ниже стал ссылкой, которую можно кликнуть?

Мы должны найти координаты x и y для всех краев круассана:

Координаты подаются попарно, одна для оси x и одна для оси y:

Пример

Это область, которая становится интерактивной и направляет пользователя на страницу "croissant.html":

Карта изображений и JavaScript

Интерактивная область может также вызвать функцию JavaScript.

Добаьте событие click к элементу <area> для выполнения функции JavaScript:

Пример

Здесь мы используем атрибут onclick для выполнения функции JavaScript при нажатии на область:

<script>
function myFunction() <
alert("Вы кликнули на чашке кофе!");
>
</script>

Резюме

• Используйте HTML элемент <map> чтобы определить карту изображений
• Используйте HTML элемент <area> чтобы определить кликабельные области на карте изображений
• Используйте HTML атрибут usemap элемента <img> для указания на карту изображений

HTML Теги изображения

Тег	Описание
<img>	Определяет изображение
<map>	Определяет карту изображений
<area>	Определяет кликабельную область внутри карты изображений
<picture>	Определяет контейнер для нескольких ресурсов изображений

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

• Что такое карта изображений на веб-странице?
• Для чего нужны карты изображений на HTML-странице?
• Какой тег определяет карту изображений?
• С помощью какого тега определяются кликабельные области на изображении?
• Какой атрибут нужно добавить к изображению, чтобы установить взаимосвязь между изображением и картой изображений?
• Какой тег определяет карту изображений на стороне клиента?
• С помощью какого атрибута карта изображений связывается с изображением?
• Какой тег определяет кликабельную область внутри карты изображений?
• Какое значение определяет прямоугольную кликабельную область на изображении?
• Какое значение определяет круговую кликабельную область на изображении?
• Какое значение определяет полигональную кликабельную область на изображении?
• Какое значение делает кликабельным всё изображение?
• Какой атрибут используется для выполнения JavaScript-функции onclick при нажатии на кликабельную область изображения?
• К какому элементу необходимо добавить событие click для выполнения JavaScript-функции onclick?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

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

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

Что такое HTML-карта сайта и какие ее функции

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

Чаще всего у HTML-карты древовидная структура, а ссылка на нее должна быть размещена в футере сайта.

Зачем нужна HTML-карта сайта

Основное предназначение карты для пользователей — это визуализация структуры сайта и упрощение навигации.

Также она помогает роботам поисковых систем в навигации по сайту. Боты при сканировании HTML-карты получают список ссылок на приоритетные страницы сайта, точнее на те, которые вы считаете таковыми. Это может ускорить сканирование этих самых страниц.

Скажем, вы продаете мультиварки Bosch. Навигация к соответствующей странице на вашем сайте такая:

Главная страница → раздел «Бытовая техника» → категория «Техника для кухни» → подкатегория «Мультиварки» → подкатегория «Мультиварки Bosch»

Это 5-й уровень вложенности. При этом страница будет иметь 3-й уровень вложенности, находясь в карте сайта:

Главная страница → карта сайта → подкатегория «Мультиварки Bosch»

Например, один из сайтов, просканированных с помощью Netpeak Spider, имеет следующую статистику по глубине вложенности страниц:

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

Хотя карта сайта нужна, чтобы показать его структуру — основные разделы, категории, подкатегории, бренды, в нее все же можно вывести отдельные приоритетные страницы фильтрации/тегов. Если если стратегически важны для вашего бизнеса, но имеют глубину вложенности более 4. Так вы улучшите их сканирование и индексацию. Хотя при обнаружении приоритетных страниц с глубиной кликов более 4 стоит задуматься об оптимизации внутренней перелинковки на сайте.

Также HTML-карта может увеличить ссылочный вес страниц, которые она содержит. Хоть сама карта не является целевой посадочной страницей, она передаёт определённый вес другим страницам — ссылка на нее, расположенная в футере сайта, является сквозной, то есть каждая страница ссылается на карту сайта.

Какими свойствами должна обладать HTML-карта сайта

1. Простота. У пользователей не должно возникать сложностей в поиске необходимой страницы.
2. Актуальность. Добавляйте в карту ссылки только на актуальные для продвижения страницы — никаких ссылок на битые или закрытые от индекса.
3. Структурированность. Важно, чтобы карта максимально точно отражала существующую структуру сайта.
4. Карта должна регулярно автоматически обновляться. Это позволит поддерживать актуальность списка страниц.
5. Карта сайта должна быть оформлена в том же стиле, что и весь сайт.

Общие рекомендации по созданию HTML-карты сайта

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

• конкретных товаров;
• страницы фильтрации;
• страницы постов;
• страницы статей;
• страницы пагинации.
Они, как правило, составляют около 90% всех страниц сайта.



1. Ссылки на страницы должны быть расположены в логичной форме и в соответствии с иерархией страниц, то есть: от разделов к категориям, от категорий к подкатегориям.



1. Следует использовать релевантные ключевые слова для анкоров ссылок — никаких транзакционных ключевых фраз со словами «цена», «купить», «заказать» и прочее. Вы делаете эту карту, чтобы показать пользователю структуру вашего сайта, помочь ему найти нужный раздел или категорию. Анкоры должны быть соответствующие.
2. Ссылку на HTML-карту нужно разместить на всех страницах в футере сайта. Также она может быть размещена на 404 странице сайта.
3. Карта сайта должна содержать ссылки только с 200 кодами ответа сервера.

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

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

Как это можно сделать?

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

Встроенный в Netpeak Spider инструмент «Генератор Sitemap» позволяет создать все виды карт сайта, в том числе HTML, а также настраивать параметры на этапе создания. Для генерации HTML Sitemap действуйте по алгоритму:

1. Запустите программу.

2. На боковой панели на вкладке «Параметры» убедитесь, что галочкой отмечены «Head теги» и «Заголовки H1-H6».



3. Введите в адресной строке начальный URL сайта и нажмите «Старт».

4. По окончанию сканирования перейдите в меню инструментов в правом верхнем углу и выберите «Генератор Sitemap».



Отметьте галочкой раздел «HTML Sitemap» и настройте параметры.



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

6. После настройки параметров нажмите «Сгенерировать» и выберите папку для сохранения карты на ваше устройство.



7. После генерации файла необходимо сформированную карту сайта передать программисту для ее внедрения на сайт.

Вот пример того, как легко сгенерировать карту сайта с помощью Netpeak Spider:

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

Вместо выводов. Споры о пользе HTML-карты сайта

Специалисты по-разному оценивают пользу HTML-карты сайта как для пользователя, так и для поисковой оптимизации. Вы можете услышать об этом элементе самые разные мнения, а именно:

1. Карта сайта бесполезна для маленьких сайтов, так как, по сути, дублирует все ссылки, которые находятся в навигационном меню.
2. Нет смысла создавать HTML-карту, так как пользователи используют ее крайне редко, а для поисковых роботов существует XML Sitemap.
3. При качественной перелинковке карта сайта не понадобится пользователю. Однако на практике далеко не все ресурсы могут таковой похвастаться, поэтому HTML-карта все таки нужна.
4. HTML-карта сайта может быть сигналом для поисковой системы, что владелец ресурса заботится о пользователях, предоставляя им возможность в пару кликов сориентироваться на сайте еще одним способом, помимо меню и поиска.

Весьма интересными по этому поводу являются высказывания ведущего аналитика Google Джона Мюллера, который в 2016 году сказал:

Мы знаем, что HTML-карты сайта могут быть полезны для пользователей, но есть ли в них SEO-ценность? Если мы уже делаем карты сайта XML и отправляем их в Search Console, есть ли SEO-ценность в размещении карт сайта HTML? Не знаю, иногда. Иногда, безусловно, имеет смысл иметь такие HTML-карты сайта, которые, по сути, отображают ваши категории или страницы товаров, особенно если мы не можем просмотреть сайт иным способом. Так что если у вас действительно сложная структура навигации, может быть, если у вас есть страницы, которые связаны только через формы поиска, а не через логическую структуру, то, по крайней мере, наличие одного места, где мы понимаем структуру сайта на основе ссылок, может нам очень помочь.

Однако в 2019 году Мюллер высказал следующее мнение:

Я согласен. Когда речь идет о SEO. Для небольших сайтов ваш сайт в любом случае должен быть просматриваемым (и если вы используете распространенную CMS, то почти всегда все будет в порядке). И для больших сайтов карты сайта все равно не будут полезны (используйте XML sitemaps, используйте нормальные перекрестные ссылки, проверьте выборочно с помощью краулера).

Имеют ли они смысл для пользователей? Я думаю, это хороший сигнал о том, что ваша обычная навигация и поиск на сайте плохи, если люди в конечном итоге переходят на ваши страницы HTML-Sitemap.

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

Напоследок, несколько примеров оригинального подхода к оформлению HTML-карт. Смотрите для вдохновения:

1. The New York Times. В карте сайта есть ссылки на статьи за январь 1851 года.



1. IMDb. Чтобы предоставить пользователю максимально точную и при этом лаконичную информацию о том, куда он попадет, к каждой ссылке добавлена небольшая аннотация.



1. Daily Mail. Карта сайта оформлена наглядно, ярко и при этом не нарушает общую стилистику оформления сайта.



1. Для чего нужна HTML-карта сайта?

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

2. Какими свойствами должна обладать HTML-карта?

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

3. Какие страницы должны быть в HTML-карте?

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

В SEO с августа 2021 года. В октябре 2021 прошел на интернатуру SEO от Netpeak Group. Сейчас — Intern SEO Specialist в Netpeak Agency.

Как‌ ‌добавить‌ ‌карту‌ ‌Google,‌ ‌Яндекс‌ ‌и‌ ‌2ГИС‌ ‌на‌ ‌ сайт:‌ ‌просто‌ ‌по‌ ‌шагам‌



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

На сайт можно вставить карту Google, Яндекс или 2ГИС с нужной меткой, чтобы пользователи могли сразу понять, куда им предстоит ехать. И дольше оставались на сайте, рассматривая карту и увеличивая время визита, что важно для поведенческих факторов и SEO. ��

В статье:

1. Как создать карту для сайта:

Выбрать можно любую карту, какая вам больше нравится.

Как вставить Яндекс карту на сайт

Первый вариант: встроить Карту с уже существующей меткой

Откройте Яндекс.Карты, найдите компанию и скопируйте код для вставки:

Карта с меткой и информацией из Яндекс.Карт будет выглядеть так:



Организация на карте Яндекса

Найдите нужный адрес.

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

Выберите виджет с картой и скопируйте код для вставки. Можете сначала включить предпросмотр, чтобы увидеть, как она будет выглядеть.

Второй вариант: создать свою метку

Карта, которую мы сделали, выглядит так: у нее есть маркер с иконкой, которую мы выбрали, и отображается линия с пояснением для удобства.

Карта, созданная в конструкторе Яндекса

Создание карты пошагово:

Найдите адрес, выберите цвет и вид маркера.

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

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

Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.

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

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

Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.

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

Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск. Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.

Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.

Вставьте код с картой Яндекса на сайт через редактор страницы.

Как вставить Google карту на сайт

Первый вариант: вставить карту из Google Maps с существующей меткой

Откройте Google Maps, найдите компанию и скопируйте код для вставки:

Карта будет выглядеть так:

Найдите компанию на картах, нажмите на «Поделиться».

Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.

Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.

Второй вариант: создать свою метку в Google Maps

Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.

Карта с меткой компании

Пошаговое создание метки на Google картах:

Введите адрес или название компании.

Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.

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

Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.

Как вставить карту 2ГИС на сайт

Встроить карту через API

Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.

Карта 2ГИС

Перейдите на страницу и выберите город.

Найдите компанию по названию.

Установите нужный размер карты в правом нижнем углу.

Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.

Нажмите «Получить код» и скопируйте его для вставки на сайт.

Создать в Конструкторе карту со своими метками

В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.

Пошагово как сделать карту в Конструкторе 2ГИС:

Введите адрес и найдите нужное здание.

Настройте цвет метки, введите название.

Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.

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

Выберите нужный размер карты.

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

Как настроить отложенную загрузку карты на сайте

Карты громоздкие, они влияют на загрузку сайта и могут тормозить отображение страницы.

Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:



Фрагмент проверки

Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.

Загрузка карты по доскроллу до нее

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

Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.

Пример исходного кода:

Его нужно изменить вот так:

Браузер будет получать src = «», когда читателю понадобится карта.

Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):

Загрузка карты после наведения курсора

Другой пользователь Хабра Dionisvl предлагает такой способ оптимизировать карту Яндекса, чтобы она подгружалась только при наведении на нее курсора мыши.

При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:

На сайте нужно написать контейнер для блока с картой:

Также нужны стили для статичной картинки, подойдет скриншот.

Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:

Готово, теперь карта должна загружаться по наведении курсора или тапа на экран, если пользователь смотрит сайт с мобильного.

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

Фрагмент проверки сайта

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

Как создать карту сайта — руководство по SEO-картографии

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

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

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

Карта сайта (Sitemap) — это файл со списком всех страниц сайта, о которых должны знать как поисковые роботы, так и пользователи. По виду она напоминает оглавление книги, только вместо разделов — ссылки.

Существует 2 основных типа карты сайта: HTML и XML.

HTML Sitemap — это веб-страница, на которой перечислены ссылки на наиболее важные разделы и страницы сайта. Вот несколько хороших примеров в формате HTML: Эльдорадо, Apple, Olx.



Карта сайта в формате HTML предназначена в основном для пользователей, а не для роботов, и помогает быстро перемещаться по основным разделам сайта.

XML Sitemap — это XML-файл (например, sitemap.xml), расположенный в корневом каталоге ресурса. В нем указывают URL-адреса, даты изменения страниц и другие параметры, которые важны для поисковых систем. Поскольку все параметры помечены специальными тегами, XML-файлы визуально очень похожи на HTML-код сайта:



Хоть синтаксис XML Sitemap выглядит запутано, карта сайта очень важна для SEO. Этот файл помогает краулерам получить целостное представление о сайте, лучше понять его структуру, быстро обнаружить новый контент и многое другое.

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

Преимущества XML Sitemap

Если у вас большой сайт или вы только запускаете новый проект, вам точно понадобится файл Sitemap. В первом случае он поможет поисковикам обнаружить контент, который находится далеко от главной страницы. А если говорить о новом сайте, то благодаря карте сайта можно не ждать вечность, пока поисковая система вообще узнает о существовании вашего контента. Но что, если сайт не подпадает ни под одну из категорий? Стоит ли создавать файл Sitemap в таком случае?

Google утверждает, что создание карты сайта позитивно оценивается поисковыми системами. Наличие файла Sitemap может дать множество ощутимых преимуществ:

• Карты сайта в формате XML помогают краулерам понять, какие страницы необходимо проиндексировать — добавляя URL в файл Sitemap, вы сообщаете поисковикам, что страница качественная. Но не забывайте, что поисковая система может проигнорировать ваш запрос — чтобы страница была проиндексирована, она должна соответствовать стандартам качества Google.
• Файлы Sitemap помогают контролировать индексацию определенных страниц в Google Search Console.
• Можно сообщить поисковикам о региональных версиях страниц, указав их в карте сайта вместе со специальными атрибутами hreflang. Это не единственный способ правильно организовать многоязычный сайт, но некоторые вебмастера считают, что именно этот вариант — самый простой.
• Карта сайта в формате XML — наглядное подтверждение ваших авторских прав на контент: в ней указываются время публикации и обновления страниц.

Сколько файлов Sitemap нужно сайту?

Перед созданием карты сайта вам нужно понять, сколько карт вам понадобится. Обычно достаточно одной. Но есть случаи, когда требуется создать несколько файлов Sitemap.

Разделяйте большие файлы Sitemap

Максимально допустимый размер файла Sitemap — 50 МБ в несжатом виде. Также карта сайта не должна содержать более 50 000 URL-адресов. Google ввел такие ограничения не просто так — они гарантируют, что ваш сервер не будет перегружен при обработке больших файлов.

Рекомендуем сжимать файлы Sitemap с помощью инструмента gzip для экономии трафика. Когда карта сайта сжимается, к имени файла добавляется расширение .gz, например, sitemap.xml.gz.

Поэтому если у вас огромный сайт и, соответственно, огромный файл Sitemap, необходимо разбить его на несколько поменьше. В противном случае вам выдаст ошибку при отправке файла Sitemap в Google Search Console.

Несколько файлов Sitemap для разных разделов сайта

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

Наконец, использование файлов Sitemap меньшего размера для разных разделов сайта — хорошее техническое решение. Размер вашей карты сайта может не превышать 50 МБ, а количество перечисленных URL будет меньше 50 000, но чем больше страниц в карте сайта, тем больше ненужной нагрузки на ваш сервер. Это может привести к усеченным ответам или тайм-аутам соединения и, следовательно, к возможным ошибкам сканирования. Используя файлы Sitemap меньшего размера, вы можете предотвратить такие проблемы.

Карта сайта для видео, изображений и новостей в Google

В дополнение к файлам Sitemap, которые содержат URL сайта, Google позволяет создавать отдельные карты сайта для изображений и видеоконтента, а также — для новостей.

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

А вот файлы Sitemap для изображений и видео будут очень полезны для сайтов, которые существуют за счет медиаконтента. Например, стоки, библиотеки или стриминговые платформы. Файлы Sitemap для изображений увеличивают шансы сайта на попадание в поиск по картинкам, а карта сайта для видео помогает Google ранжировать видеоконтент.

Здесь можно предоставить Google дополнительную информацию о медиа — например, указать заголовок изображения и подпись. А для видео — обозначить его длину, рейтинг, возрастное ограничение для просмотра и многое другое.



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

Какие страницы включить в карту сайта

Эта часть нашего интенсива по созданию файла Sitemap очень важна, так что читайте внимательно!

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

Как правило, все страницы в карте сайта должны возвращать код ответа 200 ОК и содержать качественный контент для пользователей. То есть следует убрать из файла Sitemap все страницы, которые не соответствуют этим критериям. Но стоит учесть некоторые исключения.

Страницы с кодом 4хх в XML Sitemap

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

Страницы с кодом 4хх, которых не должно быть в карте сайта

404 — это удаленные страницы. Поэтому, если они были удалены намеренно, не стоит включать их в карту сайта. То же самое касается страниц soft 404, которые были удалены, но по-прежнему возвращают код ответа 200 ОК. Обычно soft 404 — это страницы, на которых нет или очень мало контента, страницы с перенаправлением на главную или заблокированные файлом robots.txt. Ошибки soft 404 вряд ли хорошо повлияют на продвижение сайта в целом, поэтому выделите время для решения этого вопроса.

Не забудьте создать продуманную страницу 404, чтобы обеспечить крутой пользовательский опыт посетителям сайта.

Другой популярный код ответа из группы 4хх — 401. Он означает, что поисковик «не залогинился» для доступа к странице. Обычно такие страницы предназначены для авторизованных пользователей, и вы не хотите, чтобы поисковая система их индексировала. Следовательно, и в карте сайта эти страницы не нужны.

Страницы с кодом 4хх, которые могут быть в карте сайта

В некоторых случаях необходимо, чтобы поисковик просканировал и проиндексировал страницу 401. Например, вы защищали паролем страницу на стадии разработки, а затем забыли снять ограничения, когда проект был запущен. Иногда вебмастера ограничивают доступ к определенным страницам, чтобы защитить их от плохих ботов или спамеров. В таких случаях для проверки необходимо выполнить DNS-запрос, чтобы убедиться, что краулер, который обращается к странице, является роботом Google.

Страницы с кодом 3хх в XML Sitemap

3xx — это страницы редиректа. Они могут быть в карте сайта в зависимости от типа редиректа.

Страницы с кодом 3хх, которых не должно быть в карте сайта

Код ответа 301 означает, что страница была навсегда перемещена ​​на новый адрес, а исходной страницы больше не существует. Таких страниц не должно быть в карте сайта. Единственное, что в этом случае обязательно нужно внести целевой URL в файл Sitemap.

Страницы с кодом 3хх, которые могут быть в карте сайта

Страницы с кодом 302 — это временно перенаправленные страницы. Например, такой редирект часто используется для A/B-тестирования — когда часть пользователей перенаправляют на тестовый URL. В этом случае вам нужно, чтобы исходная страница оставалась проиндексированной, поэтому очевидно, что она должна оставаться в карте сайта. С другой стороны, тестовую страницу не нужно индексировать, потому что она по сути дублирует исходную. Поэтому вам необходимо сделать исходный URL каноническим и не вносить тестовый URL в карту сайта, как и все неканонические страницы.

Страницы с кодом 5хх, которых не должно быть в карте сайта

Код 5хх означает, что на сервере возникла проблема. Наиболее распространенной является ошибка 503 Service Unavailable — она сообщает, что сервер временно не работает. Это может произойти из-за того, что сервер находится на техническом обслуживании или он попросту перегружен.

Если ошибка была обнаружена единожды, не стоит беспокоиться — скорее всего это произошло из-за планового технического обслуживания сервера. В другом случае ​нужно выяснить, в чем проблема, и исправить ошибку как можно скорее. Иначе поисковик решит, что сайт плохо обслуживается.

В случае страниц с кодом 5хх речь не идет о том, чтобы добавлять их в карту сайта. Главное здесь — устранить проблему и убедиться, что страницы возвращают код ответа 200 OK.

Неиндексируемые страницы

На каждом сайте есть ряд служебных страниц, которые важны для пользователей, но не для поисковых систем — страницы входа, личные аккаунты, страницы сортировки и фильтрации и т. д. Обычно такие страницы блокируют с помощью файла robots.txt, чтобы Google не мог получить к ним доступ. Или можно дать поисковику сканировать страницу, но ограничить ее индексирование специальными директивами (noindex или all).

Логично, что эти страницы не нужны в карте сайта. Если страница не может быть проиндексирована, но указана в файле Sitemap, это не только сбивает поисковик с толку, но и расходует ваш краулинговый бюджет. То же самое и со страницами, заблокированными файлом robots.txt — поисковик не сможет их просканировать.

Если вы хотите, чтобы Google исключил из индекса страницу и применили к ней тег noindex, не добавляйте страницу в файл robots.txt. Также можно сохранить ее в карте сайта до того, как она выпадет из индекса.

Рекомендую провести аудит сайта, чтобы убедиться, что тег noindex и файл robots.txt используются правильно, и вы случайно не заблокировали не те страницы.

Вы можете легко найти все необходимые страницы с помощью инструмента «Аудит сайта» SE Ranking. После запуска аудита нужно перейти в раздел «Отчет об ошибках» — «Сканирование».



Нажав на количество страниц, вы увидите полный список URL-адресов, отмеченных метатегом noindex или заблокированных файлом robots.txt. Здесь можно отследить и другие важные параметры — количество внутренних ссылок, указывающих на страницу, все метатеги robots, теги X-Robots и заголовки страниц. Также вы сможете увидеть, какие страницы включены в файл Sitemap.

Если вы еще не пользовались SE Ranking, протестировать платформу можно в рамках 14-дневной пробной версии.

Неканонические страницы

Тег canonical используют, когда на сайте есть похожие страницы и необходимо обозначить, какая из двух является основной. Чаще всего поисковики индексируют и ранжируют основную страницу и игнорируют дубли или практически идентичные страницы. Похожие страницы с тегом canonical могут иметь как совершенно разные, так и похожие URL (например, URL-адреса, созданные в процессе сортировки и фильтрации, URL-ы с UTM-метками и параметрами отслеживания).

Иногда теги canonical используют, чтобы сделать страницу доступной как по HTTP, так и по HTTPS, а также как с префиксом www, так и без него. В этом случае основная версия страницы (например, вариант HTTPS без www) будет помечена атрибутом rel=canonical. Однако большинство сайтов делают переадресацию на стороне сервера — это просто и гарантирует индексацию только предпочтительного варианта сайта.

Теги canonical отличаются от редиректов — это скорее рекомендация, чем директива, поэтому поисковики могут как следовать им, так и игнорировать их. Вот почему наличие неканонических URL в карте сайта действительно сбивает с толку поисковые системы. Если страница не помечена как каноническая, это говорит Google, что вы не хотите, чтобы она индексировалась. В то же время вы добавляете страницу в карту сайта, побуждая поисковые системы проиндексировать ее. В результате Google может проиндексировать все версии страниц, и вам придется столкнуться с каннибализацией ключевых слов. Или поисковики проиндексируют неканонический URL, что вам тоже не нужно.

Страницы, которые не нужно добавлять в карту сайта

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

• удаленные страницы 404 и soft 404, страницы с кодом 401, которые защищены паролем;
• страницы 301, с которых настроена постоянная переадресация;
• неиндексируемые и неканонические страницы — эта категория включает страницы входа и страницы пагинации, фильтрации и сортировки, страницы результатов поиска по сайту, URL-адреса с идентификаторами сеансов и т. д.

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

XML-теги карты сайта и их настройки

Ранее я уже упоминала, что наряду с URL-адресами сайтов, файл Sitemap также содержит различные теги, которые определяют параметры страницы. Вот отрывок из XML Sitemap нашего блога, чтобы наглядно показать вам, как расположены теги.



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

• <urlset> — это обязательный элемент, который инкапсулирует карту сайта и показывает, какая версия стандарта протокола XML Sitemap используется (с помощью атрибута xmlns). Стандарт протокола еще называют пространством имен.
• <url> — еще один обязательный элемент, который отмечает блок со всей информацией, относящейся к одному URL-адресу.
• <loc> — последний обязательный элемент, который указывает на сам URL страницы. Все перечисленные URL должны быть абсолютными — содержать протокол сайта (HTTP или HTTPS), а также префикс www, если он включен в доменное имя.
• <changefreq> определяет примерную частоту изменений страницы. Можно указать следующие значения: always, hourly, daily, weekly, monthly, yearly или never.
• <priority> устанавливает приоритетность сканирования страницы (допустимый диапазон значений — от 0,0 до 1,0).
• <lastmod> указывает дату последнего изменения страницы.

Убедитесь, что вы используете такой же синтаксис при указании URL-адреса. Кроме того, файлы Sitemap должны быть в кодировке UTF-8.

Раньше Google обращался к тегам <changefreq> и <priority>, чтобы понять, каким страницам следует отдавать приоритет при сканировании сайтов. Поэтому вебмастерам приходилось тщательно настраивать эти параметры для каждой страницы. Сейчас это неактуально. Аналитики Google Джон Мюллер и Гэри Иллис подтвердили, что Google теперь не учитывает тег <priority>. А Гэри Иллис заявил, что этот тег — это просто «много шума из ничего».



То же самое и с тегом <changefreq> — по словам Джона Мюллера он также не берется во внимание.

Единственный необязательный тег, который все еще учитывается Google — это <lastmod>. Гэри Иллис утверждает, что поисковик может обратиться к нему, если тег достаточно актуален. Вероятно, он имел в виду, что тег должен обновляться только тогда, когда в контент были внесены существенные изменения. Намеренное обновление тега — чтобы заставить поисковик думать, будто у вас новый контент, никак не поможет.

При правильном использовании <lastmod> помогает Google понять, когда контент обновлялся в последний раз и нужно ли его повторно сканировать. Кроме того, тег помогает поисковой системе выяснить, кто был первоначальным автором публикации.

Статические и динамические карты сайта

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

Этот вид файла Sitemap обновляется автоматически, когда вы вносите какие-либо изменения на сайте. Например, каждый раз, когда вы удаляете страницу, и она становится 404, эта страница удаляется из карты сайта. Если вы пометите страницу метатегом noindex или добавите ее в файл robots.txt, она тоже будет удалена из карты сайта. Также каждый раз, когда вы создаете новую страницу и помечаете ее как каноническую, она сразу же добавляется в карту сайта. Проще некуда — все, что вам нужно, это правильно настроить инструмент, который будет генерировать динамические карты сайта.

Как создать карту сайта в формате XML

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

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

У некоторых CMS встроенная функция создания карты сайта — это относится к Tilda, «1С-Битрикс», Magento, Shopify, Wix и Squarespace. С другими популярными CMS, такими как WordPress, Joomla, Drupal или OpenCart, придется использовать специальные плагины.

WordPress	Yoast SEO, Google XML Sitemaps, WordPress XML Sitemap Plugin, All in One SEO Pack
Joomla	OSMap, JSitemap, Sitemap Cache
Drupal	Simple XML sitemap
OpenCart	All In One Seo Extension, XML Sitemap, XML Sitemap Generator by Cuispi

В таблице выше перечислены популярные плагины для создания Sitemap. Выбирая один из вариантов для своего сайта, обратите внимание на набор функций: оптимизированные для SEO решения позволят исключить страницы 404, а также перенаправленные, неиндексируемые, неканонические и другие неприемлемые страницы из вашей карты сайта. Кроме того, обратите внимание на возможности кастомной настройки — так вы сможете легко изменять список страниц, включенных в карту сайта.

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

Поэтому, если использование одного из платных решений и функций CMS не подходит, советую создать файл Sitemap с помощью инструмента «Аудит сайта» SE Ranking. Всего за несколько минут инструмент сделает для вас статическую карту сайта на основе последнего сканирования. По умолчанию инструмент включает в карту сайта только страницы с кодом ответа 200, упуская 4xx, 3xx, неиндексируемые и другие страницы, которые обычно не добавляют в файл Sitemap.

При создании Sitemap с помощью инструмента «Аудит сайта» помните об ограничениях сканирования — количество страниц на вашем сайте не должно превышать установленные лимиты. Иначе есть риск, что некоторые важные страницы не попадут в карту сайта.

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

Как загрузить карту сайта в Google

Все зависит от платформы, которая использовалась для создания карты сайта. В некоторых случаях придется добавить файл Sitemap вручную на свой сайт. А если динамическая карта сайта создана на CMS, она скорее всего уже есть на сайте. Обычно, когда Sitemap автоматически добавляется на сайт, ее можно найти по адресу: yoursite.com/sitemap.xml.

Если вы использовали один из сервисов для создания XML Sitemap, вам придется вручную загрузить его в корневой каталог сайта. Сделать это можно с помощью хостинг-панели cPanel или программы «FTP-клиент», например, Total Commander или FileZilla. Перед загрузкой необходимо проверить карту сайта, особенно если файл был создан вручную. Воспользуйтесь одним из бесплатных сервисов, подобных этому, чтобы убедиться, что карта сайта работает так, как вы задумали.

Также рекомендуется продублировать ссылку на файл Sitemap в robots.txt — ее можно найти в корневом каталоге сервера.

Загружаем карту сайта в Google Search Console

Давайте рассмотрим, как отправлять файл Sitemap в Google. Как только на вашем сайте появится действующая карта сайта, можете смело отправлять ее в Google Search Console (GSC). Для этого перейдите в раздел «Файлы Sitemap», нажмите «Добавить файл Sitemap», введите URL-адрес карты сайта и нажмите кнопку «Отправить».



В столбце «Статус» будет показано, смог ли Google обработать ваш файл Sitemap. Если все прошло удачно, вы увидите «Успешно». Если карта сайта была проанализирована, но Google нашел ошибки, будет статус «Обнаружены проблемы». Наконец, если Google не смог просканировать карту сайта, вы увидите «Не получено».



Обязательно исправьте все ошибки карты сайта, чтобы получить статус «Успешно». Я создала отдельное руководство с описанием распространенных ошибок в файлах Sitemap, чтобы помочь в этом вопросе.

В этом же отчете о файле Sitemap вы увидите количество выявленных URL — в идеале оно должно совпадать с общим количеством URL, которые добавлены в файл Sitemap.

Наконец, щелкнув на значок рядом с количеством обнаруженных URL-адресов, вы попадете в отчет об индексировании, который даст лучше понять, как Google сканирует и индексирует сайт. Изучение отчета поможет удалить некачественные страницы из карты сайта и добавить пропущенные.

Отправка нескольких карт сайта в Google

Несколько файлов Sitemap можно отправить в поисковую систему одновременно. Для этого нужно указать все свои карты сайта в одном файле.



Файл под названием Sitemap index поможет поисковикам легко найти все ваши карты сайта. В один файл можно включить до 50 000 URL-адресов отдельных карт сайта, и еще одно требование — размер файла. Как вы уже могли догадаться, он не должен превышать 50 МБ.

Создав индекс файлов Sitemap, отправляйте его в Google так же, как и стандартный файл Sitemap.

Заключение

Поздравляю! Вы успешно прошли наш интенсив по SEO-картографии. Следуйте рекомендациям по созданию Sitemap, и у краулеров точно не возникнет проблем с поиском и сканированием всех качественных страниц вашего сайта. Если вы хотите получить максимальную отдачу от собственной карты сайта, ознакомьтесь с руководством по ее усовершенствованию.

Похожие публикации:
1. Как сделать мобильную версию сайта html
2. Как сделать отправку формы на почту html
3. Как сделать переход с одной страницы на другую в html с помощью кнопки
4. Как сделать прогресс бар в html