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

Что такое «Яндекс Карты»

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

Учитывая популярность сервиса, каждому владельцу бизнеса стоит завести карточку организации в «Яндекс Картах». Это можно сделать через «Яндекс Бизнес»: достаточно заполнить профиль, указать контактные данные и ссылку на сайт, чтобы получать бесплатный целевой трафик из поиска.

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

Готовую карту можно встроить на сайт с помощью специального кода: все данные из профиля организации подтянутся автоматически.

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

А на вашем сайте техничка в порядке?

• Подарим чек-лист по внутренней оптимизации
• Проконсультируем по SEO-вопросам

Получить чек-лист

Зачем нужна карта «Яндекса» на сайте

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

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

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

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

Читайте также:

Оптимизация сайта: какие страницы дорабатывать в первую очередь

Как вставить карту в «Яндекс Карты» за 2 минуты

1. Откройте Конструктор карт и нажмите «Создать карту».
2. Добавьте метку по адресу, задайте ей название и краткое описание в балуне (всплывающем окне).
3. Нажмите «Сохранить» → «Получить код». Выберите тип «Интерактивная карта», установите ширину 100 % и высоту 360–480 px.
4. Вставьте полученный код на страницу «Контакты» (или в другой нужный раздел) в HTML-блок.

Готовый адаптивный фрагмент с lazy‑load и fallback:

<div class="map-embed" aria-label="Карта проезда к [Название компании]">
  <iframe
    src="https://yandex.ru/map-widget/v1/?um=constructor%3A[ID_ВАШЕЙ_КАРТЫ]&source=constructor"
    width="100%"
    height="400"
    loading="lazy"
    style="border:0;"
    referrerpolicy="no-referrer-when-downgrade"></iframe>
  <noscript>
    <p>Карта недоступна. <a href="https://yandex.ru/maps/" rel="nofollow">Открыть в Яндекс.Картах</a></p>
  </noscript>
</div>
<style>
  .map-embed{aspect-ratio:16/9; max-width:100%}
  .map-embed iframe{width:100%; height:100%}
</style>

Такой подход закрывает главный интент посетителя, снижает отказы и улучшает показатели Core Web Vitals: карта загружается отложенно (lazy), заранее резервирует место на странице (aspect-ratio) и показывает альтернативный контент для пользователей без JavaScript.

5 классных SEO-кейсов

Круче, чем Гудини: как мы вырастили трафик в 2,2 раза

Все вы прекрасно знаете Гарри Гудини: этот фокусник мог выбраться из закрытой бочки, брошенной в воду. Примерно в таких же рамках оказались и мы, начиная работу с сайтом Eurorepar. Узкий функционал, жесткие требования. Но мы справились без магии, увеличив трафик х2!

Читать кейс

Читать кейс

Как выжать максимум из двадцатилетнего сайта

Можно ли выжать максимум из 20-летнего сайта и докрутить его до современных стандартов? А если есть отягчающие обстоятельства — накрутка поведенческих факторов, антиботы, да еще и админка капризничает и сама удаляет категории?

Читать кейс

Читать кейс

Долгая дорога в SEO и мощный прорыв

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

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

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

Читать кейс

Читать кейс

Эффективное ссылочное продвижение для федеральной аптечной сети

Федеральная аптечная сеть пришла в Kokoc Performance (входит в Kokoc Group) за ссылочным продвижением. Интересно, что в компании есть своя in-house команда по SEO, которая подготовила ссылочную стратегию, а за ее реализацией обратилась к нам.

Читать кейс

Читать кейс

1/5

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

Для создания карты, которую вы затем встроите на сайт, зайдите в сервис «Конструктор карт "Яндекса"». Если у вас уже есть аккаунт в «Яндексе», авторизуйтесь; если нет — зарегистрируйтесь.

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

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

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

Как сделать метку, линию и многоугольник на карте

Основные рабочие инструменты — метки и линии. Остальные используются для уточнения навигации. В отличие от Google Maps, где для сложной кастомизации часто требуется API-ключ, конструктор «Яндекса» позволяет создать и настроить карту без навыков разработки.

Метки — это обозначения статичных объектов. Маршрут обычно строится между двумя точками, которые и обозначаются метками. В их описании можно указать любую дополнительную информацию: телефон, часы работы и т.д.

Линии — соединительный инструмент между объектами (метками). Если маршрутов несколько, можно использовать разный дизайн линий, чтобы наглядно показать варианты передвижения.

Как нарисовать схему проезда (прохода) до объекта

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

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

Для установки метки кликните левой кнопкой мыши по объекту, затем выберите вид, цвет и иконку. После выбора дизайна нажмите «Готово». Первый объект на карте появился.

Следующий этап — проложение маршрута. Используйте инструмент «Линии», чтобы показать точное продвижение клиента до магазина. Внешний вид линий тоже можно настроить: доступны выбор цвета, толщины и прозрачности.

Сохраняем линию маршрута и переходим к последнему шагу.

Конечный этап — установка метки на цветочном магазине. Здесь также можно настроить ее дизайн.

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

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

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

Перед копированием кода задайте ширину 100 % и высоту 360–480 px (или используйте CSS aspect‑ratio). Добавьте атрибут loading="lazy" для отложенной загрузки — это улучшит Core Web Vitals и адаптивность.

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

Получаем код яндекс карты для сайта:

Пример готового кода для вставки

<iframe 
  src="https://yandex.ru/map-widget/v1/?um=constructor%3A[ID_ВАШЕЙ_КАРТЫ]&source=constructor" 
  width="100%" 
  height="400" 
  frameborder="0" 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade"></iframe>

Как добавить несколько адресов

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

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

Проверяем заполнение и сохраняем.

Эффективное SEO

• Гарантия результатов
• Комплексное развитие
• При любом тарифе отслеживаем динамику заявок и звонков с сайтов
• Регулярный пересмотр семантического ядра

Узнать больше

Как добавить карту на сайт

Рассмотрим варианты установки на CMS WordPress и конструктор Tilda.

WordPress (Gutenberg): блок «HTML-код»

В редакторе Gutenberg добавьте блок «HTML-код» и вставьте iframe карты на нужной странице (например, «Контакты»). Для этого откройте страницу в режиме редактирования, нажмите «+» (Добавить блок), найдите «HTML-код» и вставьте скопированный код. Это современная альтернатива использованию виджетов.

Установка через код (для разработчиков)

Если требуется вставка карты в шаблон сайта, в админ-панели выберите «Внешний вид» → «Редактор тем» и найдите нужный файл, например, подвал (footer.php).

Вставьте iframe карты в HTML-блок нужной страницы (например, «Контакты»). Размещение в шаблоне подвала используйте, только если карта нужна на всех страницах сайта.

Этот вариант подходит тем, кто знаком с версткой.

Для совместимости добавьте в код <noscript> со ссылкой «Открыть в Яндекс Картах» (пример — в блоке «Быстрый старт»).

Читайте также:

Основные средства предприятия: что это, виды и состав

Установка на Tilda

В библиотеке блоков Tilda выберите категорию «Другое» и блок T123 «HTML-код».

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

Готовый код для Tilda:

<iframe 
  src="https://yandex.ru/map-widget/v1/?um=constructor%3A[ID]&source=constructor" 
  width="100%" 
  height="400" 
  frameborder="0" 
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

Мы закончили работу: карта установлена на сайт и готова к использованию.

Частые ошибки и быстрые решения в «Яндекс Картах»

• Карта не отображается: используйте только https‑ссылки в коде; проверьте, что CMS или плагины не вырезают iframe (добавьте исключение для yandex.ru в настройках безопасности).
• Пустой блок или обрезка: поместите карту в видимый контейнер, задайте ширину 100 % и фиксированную высоту (360–480 px) или aspect-ratio (см. код выше).
• Карта «ломает» верстку: оберните iframe в контейнер с aspect-ratio, проверьте свойство overflow и конфликтующие CSS в родительских элементах.
• Балун не кликается на мобильных: уберите перекрывающие элементы, проверьте свойства CSS z-index и pointer-events над картой.
• Не грузится из-за политики безопасности: разрешите домены *.yandex.ru в настройках Content Security Policy (CSP) или других фильтрах.
• Карта во вкладке: инициализируйте или показывайте карту после открытия вкладки, либо не прячьте контейнер через display:none (используйте visibility:hidden).

Коротко о главном

• «Яндекс Карты» — картографический сервис, который помогает бизнесу и клиентам найти друг друга.
• «Конструктор карт "Яндекса"» позволяет создавать кастомные карты и встраивать их на сайт без программирования.
• Интерактивная карта дает возможность указать несколько адресов организации и проложить маршрут до нужного объекта.
• Встраивание «Яндекс Карты» на сайт — простой процесс. Для популярных CMS и конструкторов существуют готовые решения через HTML-блок или виджет.