Как добавить Яндекс Карту на сайт: пошаговая инструкция

Яндекс Карты – самый популярный геосервис в России, которым регулярно пользуются 86% опрошенных компанией Ipsos. Согласно исследованию, ядро аудитории Яндекс Карт – это люди в возрасте 26-45 лет со средним и высоким уровнем дохода. И именно они являются наиболее платежеспособной и заинтересованной аудиторией в нашей стране.

Добавить Яндекс Карту на сайт – значит повысить комфорт пользователей и привлечь новых клиентов. Алгоритмы поисковых систем продвигают наиболее наполненные информацией сайты в выдаче, а значит шансы быть замеченными возрастают. И это совершенно бесплатно!

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

Когда потенциальный клиент заходит на сайт, он хочет увидеть всю необходимую информацию о компании сразу. И это не только номер телефона, электронная почта для связи и ссылки на мессенджеры.
Многие до сих пор публикуют адрес организации без уточняющих деталей: ближайшей станции метро, схемы проезда и расположения входа. Все эти моменты легко можно решить, если добавить Яндекс Карту на сайт. Так вы проявите заботу и внимание, которые пойдут бизнесу на пользу. А ещё наличие Яндекс Карты на сайте учитывается при ранжировании сайта в поисковой выдаче и повышает шансы компании выйти в топ.
Самый простой способ, как добавить Яндекс Карты на сайт – встроить карту с уже существующей отметкой. Для этого перейдите в Яндекс Карты, найдите свою компанию и скопируйте код. Для этого нажмите на кнопку «Поделиться».

В поле «Виджет с картой» выберите «Предпросмотр». Вы увидите, как будет выглядеть Яндекс Карта, которая отобразится на сайте. Затем скопируйте код из открывшейся ячейки.

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

Если вы хотите добавить Яндекс Карту на сайт, но вам не нравится стандартный вариант, можно сделать её более интересной и наглядной. Например, создать схему проезда или разместить на карте несколько точек продаж, чтобы пользователь мог выбрать наиболее подходящую.
Чтобы создать интерактивную Яндекс Карту, зайдите в сервис «Конструктор Яндекс Карт» под аккаунтом вашей компании. В случае, если у вас уже есть готовая карта в Яндексе, она отобразится в списке – вы сможете отредактировать её прежде, чем добавить на сайт.
Далее рассмотрим пошагово, как создать Яндекс Карту для сайта в конструкторе с нуля.

Зайдите в «Конструктор Яндекс Карт» и нажмите кнопку «Создать карту».

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

Допустим, вы хотите показать на карте точное месторасположение магазина. Для этого нажмите кнопку «Метки». На карте появится отметка и поля для информации.

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

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

Чтобы нарисовать схему проезда на Яндекс Карте, используйте инструмент «Линии». Поставьте точку в начале предполагаемого пути клиента, например, у ближайшего метро. И также точками прорисуйте путь до вашего заведения.

Вы можете выбрать цвет, толщину и прозрачность линий, а также добавить описание маршрута. К примеру, «Схема проезда от метро X». На Яндекс Карту можно добавить сразу несколько путей, обозначив их линиями разных цветов.

Чтобы добавить несколько адресов на Яндекс Карте, используйте инструмент «Метки». Проставьте точки в нужных локациях и заполните описание. Стиль иконок для разных точек можно менять, делая их более заметными для пользователей.

Кроме того, с помощью инструмента «Слои» можно выбрать разный формат карт – «Схема», «Спутник» или «Гибрид». Рекомендуем выбирать формат «Схема» – наиболее привычный и понятный для пользователей вариант.

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

Разместите участок карты, который вы хотели разместить на сайте в рамке. И нажмите кнопку «Получить код карты».

Сервис предложит вам выбрать код в двух вариантах:

• JavaScript – более надёжный и современный вариант, который в некоторых случаях не пропускают «системы управления» сайтом
• iframe – код, который подходит для большинства форматов сайтов

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

Добавить Яндекс Карту на сайт не составит большого труда и даже не придется обращаться за помощью к ИТ-специалистам. Ниже вы найдёте понятные инструкции, как добавить Яндекс Карту на сайт WordPress и Tilda с помощью HTML-виджета и через код.

Зайдите в панель администратора и выберите раздел «Внешний вид». Из него перейдите во вкладку «Виджеты». Здесь вам нужно выбрать HTML-код и «перетянуть» его в колонку футера, который также называется «подвалом» сайта.

Откройте содержимое виджета «HTML-код» и добавляем один из двух кодов, которые вы скопировали в конструкторе Яндекса при создании карты.

Этот вариант подойдет для тех, кто знаком с версткой. В панели администратора откройте раздел «Внешний вид» и перейдите в «Редактор тем», а затем в футер (подвал).

Финальный шаг – добавить код Яндекс Карты в код сайта перед закрывающим тегом <body>.

В настройках зайдите в раздел «Все блоки» и перейдите в раздел «Другой». Выберите первый блок в списке – Т123 HTML код.

Разместите блок в подходящем месте на лендинге и добавьте в его содержание код Яндекс Карты. Она отобразится сразу после того, как вы опубликуете страницу.

Яндекс Карта на сайте – это необходимый минимум цифрового комфорта ваших клиентов. Мы подробно рассказали, как добавить Яндекс Карту на сайт, и теперь вы сможете сделать это за несколько минут даже без знаний программирования. Действуйте по инструкции, и всё получится!

А еще больше ценной информации о продвижении локального бизнеса с помощью Яндекс Карты вы найдете в отдельной статье.