Карта на сайте помогает клиенту найти дорогу, но встроенный виджет Яндекс.Карт тянет на первый экран сотни килобайт чужих скриптов. Разбираем три способа показать маршрут - iframe конструктора, JS API и обычную картинку со ссылкой - и как выбрать между ними, чтобы карта не портила скорость загрузки.
Вопрос обычно всплывает на этапе вёрстки страницы контактов. Дизайнер оставляет блок под карту, разработчик вставляет код из конструктора Яндекса не глядя на вес, и через месяц в отчёте о скорости страница контактов оказывается самой медленной на сайте - виновата ровно одна секция. Дальше разбираем, кому карта нужна, какой способ встраивания выбрать и на чём чаще всего ошибаются те, кто делает это в первый раз.
Кому карта нужна, а кому мешает
Карта работает, когда человек физически едет к вам: в шоурум, клинику, ресторан, магазин стройматериалов, юридическую контору с приёмом по записи. Здесь маршрут - часть решения дойти, и его стоит показывать сразу, без лишних кликов.
Если у бизнеса нет точки, куда приезжает клиент - удалённые консультации, доставка по всей стране, интернет-магазин с самовывозом через транспортную компанию - карта на первом экране просто занимает место и добавляет вес без пользы. Эту площадь лучше отдать кнопке звонка или мессенджера: она конвертирует, а метка на карте страны - нет.
Отдельный случай - сеть точек или зона доставки. Тогда карта действительно нужна, но не с одной меткой, а с несколькими адресами или полигоном зоны. Про то, как это собрать, - в разделе про конструктор.
Три способа встроить карту
Технически вариантов три, и они по-разному платят весом страницы за удобство.
| Способ | Вес на странице | Что умеет | Когда уместен |
|---|---|---|---|
| iframe конструктора | 300-500 КБ | Готовая карта с меткой, маршрутом, зоной доставки | Одна точка на странице контактов |
| JS API | от 150 КБ, растёт с логикой | Свои метки, расчёт расстояния, интерактив | Несколько точек, калькулятор доставки, каталог с картой |
| Статичная картинка со ссылкой | 20-60 КБ | Показывает расположение, по клику ведёт на карту | Лендинг, мобильная версия, любой сайт, где важна скорость |
Конструктор карт. Бесплатный сервис Яндекса: ставите метку, добавляете маршрут и рисуете зону доставки многоугольником, а на выходе получаете готовый код iframe без единой строчки своего JavaScript.
JS API. Библиотека для тех, кому мало одной метки: кластеры для сети точек, расчёт расстояния до склада, подсветка зоны доставки по адресу покупателя. Требует ключ API и работу разработчика.
Картинка со ссылкой. Скриншот карты с меткой, обёрнутый в ссылку на настоящую карту или сразу на приложение. Ничего не грузит, кроме одного изображения.
Как собрать метку и маршрут в конструкторе
Порядок действий одинаковый для любой отрасли, разница только в том, что рисовать - точку, маршрут или зону.
- Открыть конструктор карт, войти под аккаунтом Яндекса.
- Добавить объект "метка" и вбить точный адрес. Конструктор иногда ставит её на ближайший из известных домов - проверьте вручную по спутниковому снимку.
- При необходимости добавить объект "маршрут" - от конкретной точки, например от станции метро, если посетители обычно едут именно оттуда.
- Для доставки нарисовать объект "зона" многоугольником по границам обслуживания: покупатель сразу увидит, попадает ли его адрес в зону, ещё до оформления заказа.
- Опубликовать карту и скопировать код для вставки. Ширину и высоту сразу задавайте в процентах или через
aspect-ratio, а не в пикселях - иначе с адаптивом придётся разбираться отдельно.
Ленивая загрузка, чтобы карта не сажала скорость
По умолчанию iframe конструктора начинает грузиться в тот момент, когда браузер доходит до этой строчки HTML - то есть сразу, даже если карта стоит в подвале страницы и половина посетителей до неё не долистает. Атрибут loading="lazy" откладывает загрузку, пока блок не окажется рядом с видимой областью экрана.
Более радикальный приём - показывать вместо карты картинку с меткой и подписью "показать карту", а настоящий iframe подставлять скриптом только по клику. Тогда часть посетителей ни разу не загрузит чужие скрипты Яндекса. Похожую логику - грузить по требованию то, что не входит в первый экран, - мы разбирали в статье как ускорить сайт до 1,5 секунды: карта здесь не отличается от видео или тяжёлого чата.
Карта и карточка в Яндекс Бизнесе
Карта на сайте не существует в вакууме: рейтинг, число отзывов и часы работы, которые иногда показываются рядом с меткой, подтягиваются из карточки организации в Яндекс Бизнесе, если адрес совпадает. Если карточки нет или адрес отличается хотя бы предлогом, связка не срабатывает, а заодно слабеют сигналы локального SEO - подробнее в статье про локальное SEO и Яндекс.Карты для бизнеса в СПб.
С тем же профилем связана и работа с отзывами: если на карте появляется негатив, отвечать нужно из карточки в Яндекс Бизнесе, а не с сайта - мы разбирали, как получать отзывы на Яндекс Картах и что делать с негативом. Если рассматриваете ещё и платное продвижение через тот же кабинет, у нас есть разбор рекламы в Яндекс.Бизнес и Яндекс.Услугах.
Мобильная версия и кнопка маршрута
На телефоне у карты два частых врага: фиксированная высота в пикселях и попытка листать её теми же жестами, что и ленту страницы. Первое лечится aspect-ratio или высотой в vh вместо жёстких пикселей. Второе решается проще: интерактивная карта на мобильной версии часто не нужна вовсе, посетитель всё равно построит маршрут в своём приложении, а не будет щипками увеличивать встроенный виджет.
Рабочий вариант для телефона - кнопка "Построить маршрут", которая открывает приложение Яндекс Карт с уже подставленным адресом, а если приложения нет - разворачивает мобильную веб-версию. Такая кнопка весит меньше самой лёгкой картинки и решает задачу быстрее любого встроенного виджета.
Частые ошибки
Метка не на том доме. Конструктор иногда привязывает адрес к ближайшему известному объекту, а не к нужному подъезду или корпусу. Проверяйте вручную, особенно если офис во дворе или на территории с несколькими корпусами.
Адрес на сайте и в карточке различается. "Мкр." против "микрорайон", "д." против "дом", лишняя буква корпуса - для человека разницы нет, а для сервисов это два разных адреса. Последствия те же, что в статье про местное SEO: часть доверия к карточке теряется.
Фиксированная высота ломает телефон. Блок в 400 пикселей на компьютере на телефоне превращается либо в узкую полоску, либо в карту на весь экран, которую приходится проматывать. Нужна только адаптивная высота.
iframe без атрибута title. Программа чтения с экрана объявляет фрейм без названия просто "фреймом", и незрячий посетитель не понимает, что это. Атрибут title="Карта проезда до офиса" решает это одной строкой.
Чек-лист перед сдачей страницы контактов
- Адрес на карте, на странице контактов и в карточке Яндекс Бизнеса совпадает дословно, вплоть до сокращений.
- Метка проверена вручную на спутниковом снимке, а не оставлена там, куда её поставил конструктор по умолчанию.
- У блока карты нет фиксированной высоты в пикселях - только
aspect-ratioили проценты. - Стоит
loading="lazy", либо карта заменена картинкой, которая разворачивается по клику. - У iframe заполнен атрибут
title. - Кнопка "Построить маршрут" на мобильной версии открывает приложение, а не браузерную страницу.
- Страница контактов проверена в инструменте оценки скорости до и после добавления карты.
Ставить карту или обойтись без неё
Если у вас офлайн-точка и посетитель реально едет к вам - ставьте карту, но через конструктор с ленивой загрузкой или картинкой-заглушкой, а не голым iframe без атрибутов. Если весь бизнес идёт через звонок или мессенджер, карта на первом экране почти всегда лишняя, и то же место лучше отдать кнопке связи. В обоих случаях адрес на сайте должен слово в слово совпадать с адресом в карточке компании - это дешевле любой доработки карты и напрямую влияет на то, как вас видит локальный поиск.
Если собираете страницу контактов с нуля и не уверены, какой из трёх способов подойдёт именно вашему случаю, посмотрите вживую, как карта работает в связке с адресом, часами работы и формой заявки на нашей странице контактов - оттуда проще скопировать разметку, чем объяснять её словами.
