Марина сверстала страницу услуг в WordPress, а клиенты в мессенджере спрашивают: «Где вы на карте?» Она вставила код из Яндекса в обычный абзац — на сайте остались угловые скобки. Потом поставила карту через iframe, PageSpeed упал, и она сняла блок совсем. Боль здесь не в «программировании», а в порядке: Конструктор карт → блок «Произвольный HTML» → отложенная загрузка → проверка с телефона. За один вечер в админке вы получите рабочую метку офиса без лишнего JavaScript и без паники из-за API.
Для одной точки на странице услуг чаще хватает iframe из Конструктора карт Яндекса: схема с меткой может жить без платного ключа. Поиск и маршруты на карте без apikey не включатся — для салона это обычно нормально. Код iframe нельзя дописывать руками, только скопировать; зато можно задать width 100%, высоту 360-450 px и loading=»lazy», чтобы карта не тянулась при первом открытии страницы.
Карта на услугах отвечает на вопрос «как доехать» раньше, чем человек уйдёт в «Контакты». На практике это меньше переписки «где вход?» и больше доверия к мастеру с фиксированным адресом или точке приёма. Ниже — ветка для новичка: без JavaScript API, с запасным путём через плагин; соседние темы WordPress собраны в разделе статей.
- Решите, зачем карта на услугах, а не только в контактах
- Соберите код в Конструкторе карт Яндекса
- Вставьте iframe в блок «Произвольный HTML» в Gutenberg
- Сравните три способа: iframe, YaMaps и блок Gutenberg
- Ускорьте страницу: lazy load, одна карта, загрузка по клику
- Проверьте результат так, как увидит клиент
- Частые вопросы
- Можно ли вставить Яндекс.Карту в WordPress без плагина?
- Влияет ли iframe карты на скорость сайта?
- Нужен ли API-ключ Яндекса для карты на странице услуг?
- Чем карта Конструктора отличается от кнопки «Поделиться» на Яндекс.Картах?
- Карта пропала после сохранения в Gutenberg — что проверить?
- Google Maps или Яндекс — что ставить на русскоязычный сайт услуг?
Решите, зачем карта на услугах, а не только в контактах
Страница «Услуги» продаёт запись и цену; карта снимает страх «это где-то в промзоне». Достаточно метки, масштаба района и подписи с адресом. Маршрут клиент построит в приложении Яндекс.Карт по ссылке «Открыть в картах» — отдельный блок маршрутов на сайте не обязателен.
Типичная ошибка — продублировать одну и ту же карту в шапке, в подвале и на каждой услуге. Три iframe = три тяжёлых гостя для скорости. Оставьте одну карту там, где человек уже выбрал услугу и думает «доехать или написать».
Соберите код в Конструкторе карт Яндекса
Конструктор (yandex.ru/map-constructor) — это визуальный редактор: ставите метку, подбираете масштаб, нажимаете «Получить код карты». Для WordPress без лишнего кода выберите вариант iframe, слой «Схема». Интерактивный код через script тянет больше логики; для страницы услуг с одной точкой он редко нужен.
- Откройте Конструктор карт, найдите адрес салона или кабинета, поставьте метку.
- Проверьте масштаб на телефоне в превью: видны улица и ориентир, не вся область.
- Нажмите «Получить код карты» и скопируйте блок iframe целиком, без правок внутри src.
- Сохраните черновик кода в заметку — если Гутенберг «съест» вставку, вставите снова одним куском.
- Если позже понадобятся поиск и маршруты прямо на сайте — тогда отдельно получите ключ JavaScript API в кабинете developer.tech.yandex.ru; для простой метки шаг пропустите.
В реальном проекте владелица салона бровей так и сделала: iframe без ключа, ссылка «Построить маршрут» вела в приложение карт — заявок стало не меньше, зато PageSpeed перестал «краснеть» только из-за карты.
Вставьте iframe в блок «Произвольный HTML» в Gutenberg
Обычный абзац показывает код как текст — отсюда история с угловыми скобками у Марины. Нужен блок «Произвольный HTML» (Custom HTML): плюс → поиск по слову «HTML» → вставить код из Конструктора.
После вставки замените фиксированную ширину на width=»100%» и задайте высоту 360-450 px, иначе на телефоне увидите серый прямоугольник. Добавьте loading=»lazy» в тег iframe, если Яндекс не прописал его сам — браузер отложит загрузку карты, пока посетитель не докрутит почти до блока.
Маршрут в админке:
Страницы → Услуги → Редактировать → «+» → Произвольный HTML → вставить iframe → width 100% и высота → loading=»lazy» → Предпросмотр → Опубликовать
Если после сохранения карта пропала, проверьте роль пользователя: иногда фильтры безопасности режут iframe не с домена maps.yandex.ru. Не отключайте защиту всего сайта — вставляйте только официальный код из Конструктора. Подробнее про страницу контактов и блоки — в материале про страницу контактов WordPress.
Сравните три способа: iframe, YaMaps и блок Gutenberg
| Критерий | iframe из Конструктора | Плагин YaMaps | Map Block for Yandex |
|---|---|---|---|
| Кому подходит | Одна метка на услугах, без кода | Метки из админки, шорткоды | Нативный блок редактора |
| Нагрузка на скорость | Низкая с loading=»lazy» | Выше, подключает JS API | SDK у границы экрана или по клику |
| Ключ API | Не нужен для метки | Нужен для поиска и маршрутов | Зависит от режима блока |
| Типичная ловушка | Нулевая высота контейнера | Нет блока «Классический редактор» | Забыли режим «по клику» на длинной странице |
Итоговый вердикт: для страницы услуг с одним адресом начните с iframe и lazy load. Плагин YaMaps (версия 0.6.41, десять тысяч+ установок) имеет смысл, если правите метки прямо в WordPress: в Гутенберге добавьте блок «Классический редактор», затем «Добавить карту». Ошибка «Сервер не смог обработать запрос» почти всегда лечится ключом API и ограничением по домену сайта в кабинете разработчика.
Ускорьте страницу: lazy load, одна карта, загрузка по клику
PageSpeed ругается не на сам факт карты, а на тяжёлый сторонний скрипт при первой отрисовке. iframe с loading=»lazy» и фиксированной высотой снижает и вес старта, и «прыжок» блока при догрузке (метрика CLS в отчёте скорости). Логика та же, что у картинок: один слой отложенной загрузки, без дубля в трёх плагинах — разбор в гайде по lazy load картинок.
На мобильном палец иногда «залипает» в карте при скролле страницы услуг. Тогда помогает активация по клику (плагины вроде map-ya-wp на GitHub) или статичное превью с кнопкой «Показать карту». Если у вас уже стоит баннер cookies, карта как сторонний контент может грузиться после согласия — это нормально для EU-ориентированных тем; детали в инструкции по cookie на сайте услуг.
- Оставьте на странице услуг одну карту, не пять филиалов в слайдере.
- Проверьте iframe: loading=»lazy», width 100%, высота не меньше 360 px.
- Откройте сайт в режиме инкогнито, F12 → вкладка «Сеть»: карта не должна грузиться до прокрутки к блоку.
- Если отчёт скорости всё ещё жёлтый — включите показ карты по клику или блок Map Block for Yandex с отложенной подгрузкой.
- Под картой оставьте кнопку заявки в мессенджер, чтобы маршрут не перекрывал «Написать».
Проверьте результат так, как увидит клиент
Успех по чеклисту из практики: на опубликованной странице без входа в админку видна метка в нужном месте; на телефоне карта не обрезана; при первом открытии в «Сети» браузера iframe карт не скачивается сразу (если включён lazy); форма или кнопка связи рядом не уехала под карту. Запишите скрин вкладки «Сеть» — через полгода сэкономите время при смене темы.
Две карты на одной странице, iframe на всю ширину без высоты и карта поверх кнопки «Написать» — три частые поломки без консоли разработчика. Исправление: одна карта, явная высота, отступ снизу перед CTA. Нужна страница услуг «под ключ» с картой и текстами — смотрите раздел услуг; вопрос по своему сайту удобнее задать через форму контактов (пишите в мессенджер) или в Telegram-канале.
Материал проверен: Андрей Дикий (создаёт сайты и продвигает их статьями (SEO/GEO)).
Достоверность данных: справка Конструктора карт Яндекса (apikey, ограничения iframe), yandex.ru/dev/maps/constructor, каталог YaMaps 0.6.41 на ru.wordpress.org, Map Block for Yandex, PR-CY 2026 про loading=»lazy» и CLS, developer.tech.yandex.ru; частотность запросов — Яндекс Вордстат на 2026-10-06 (MCP недоступен, точные показы не верифицированы).
Частые вопросы
Можно ли вставить Яндекс.Карту в WordPress без плагина?
Да. Скопируйте iframe из Конструктора карт в блок «Произвольный HTML» на странице услуг, задайте высоту и loading=»lazy». Плагин нужен только если хотите редактировать метки внутри админки или включить поиск по адресу на карте.
Влияет ли iframe карты на скорость сайта?
Влияет, если карта грузится сразу при открытии страницы. Отложенная загрузка через loading=»lazy», одна карта вместо нескольких и режим «показать по клику» заметно облегчают первый экран. Тяжелее всего обычно полный JavaScript API, а не простой iframe со схемой.
Нужен ли API-ключ Яндекса для карты на странице услуг?
Для одной метки через iframe из Конструктора ключ чаще не нужен: не будут только поиск, маршруты и панорамы внутри виджета. Ключ понадобится в плагине YaMaps при ошибке «Сервер не смог обработать запрос» или если клиент должен строить маршрут прямо на вашем сайте.
Чем карта Конструктора отличается от кнопки «Поделиться» на Яндекс.Картах?
«Поделиться» даёт компактный виджет организации или маршрута с параметром языка. Конструктор собирает карту под ваш масштаб и метку для встраивания на сайт. Для одной точки услуг обычно удобнее Конструктор с iframe на странице услуг.
Карта пропала после сохранения в Gutenberg — что проверить?
Убедитесь, что код в блоке «Произвольный HTML», а не в параграфе. Проверьте, что iframe с maps.yandex.ru не вырезан фильтром роли редактора. Не редактируйте src вручную — заново скопируйте код из Конструктора.
Google Maps или Яндекс — что ставить на русскоязычный сайт услуг?
Ориентируйтесь на аудиторию: для локального бизнеса в РФ чаще привычнее Яндекс.Карты и маршрут в их приложении. Техника вставки та же: iframe, высота, lazy load; вторую карту другого сервиса на ту же страницу не добавляйте без необходимости.
