Как добавить карту на сайт и разметить организацию в JSON-LD: шаблон страницы «Контакты» для локального бизнеса

Mapli — Sun, 01 Nov 2026 11:52:31 +0000

У сайта кофейни, автосервиса или студии маникюра обычно одна по-настоящему рабочая страница — «Контакты». На неё приходят за двумя ответами: где это и открыто ли сейчас. Человеку для этого нужна карта, поисковику — структурированные данные.

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

В этой статье — шаблон, который мы в Mapli используем для таких страниц:

как добавить карту на сайт четырьмя способами и какой выбрать;
как встроить виджет карты на сайт без потерь в скорости;
что делать с отзывами с Яндекс Карт на сайте;
как собрать микроразметку организации по schema.org LocalBusiness в JSON-LD;
как проверить результат до релиза.

Код можно копировать и подставлять свои данные.

Что должно быть на странице «Контакты»

Минимальный набор для локального бизнеса:

адрес текстом, а не только меткой на карте;
кликабельный телефон (tel:);
часы работы, включая выходные дни;
короткое описание, как найти вход: «вход со двора», «второй этаж, лестница справа»;
встроенная карта с меткой именно вашей организации;
блок application/ld+json с теми же данными.

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

Совет. Начинайте не с кода, а с карточки организации на картах. Откройте её и выпишите название, адрес, телефон и часы ровно в том виде, в каком они там указаны. Это и будет эталон для страницы и для разметки.

Как добавить карту на сайт: четыре способа

Вариантов встраивания больше, чем кажется. Выбор зависит от того, что карта должна делать.

1. Виджет карты из карточки организации

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

Плюсы:

метка сразу ваша, с названием и рейтингом;
не нужен API-ключ;
данные в виджете обновляются вместе с карточкой.

Минус один: внешний вид почти не настраивается. Для страницы «Контакты» небольшого бизнеса это обычно не проблема.

2. Конструктор карт

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

несколько филиалов на одной карте;
линия от остановки или метро до входа;
выделенная зона парковки;
подписи к точкам.

Конструктор отдаёт интерактивную карту (JavaScript или iframe), статичную картинку и версию для печати. Статичная картинка пригодится ниже, для приёма с фасадом.

3. JavaScript API

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

Частая ситуация: карту подключили через API, а ключ не указали или указали не тот. Карта рисуется, но поиск и маршруты не работают. Если вы встретили запрос «яндекс карты api» в задаче для сайта одной кофейни, скорее всего, API там избыточен.

4. Статичная карта

Обычная картинка с меткой. Ни скриптов, ни тайлов, ни запросов к сторонним серверам. Подходит для:

лёгких лендингов;
AMP-подобных страниц и писем;
заглушки перед загрузкой интерактивной карты.

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

Что выбрать

Задача	Способ
Одна точка, нужно быстро	Виджет из карточки
Несколько филиалов или схема проезда	Конструктор карт
Поиск, маршруты, своя логика	JavaScript API
Максимальная скорость, без скриптов	Статичная карта

Виджет карты на сайт без потерь в скорости

Интерактивная карта тянет скрипты, тайлы и шрифты. Если она в первом экране, страдает LCP. Если у неё нет заданной высоты — CLS. На слабом телефоне с мобильным интернетом это заметно.

Базовая версия: lazy-loading и зарезервированная высота

<div class="map-box">
  <iframe
    src="https://yandex.ru/map-widget/v1/?…ваш_код_виджета…"
    title="Карта: как нас найти"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allowfullscreen></iframe>
</div>

<style>
  .map-box { aspect-ratio: 16 / 9; max-height: 420px; }
  .map-box iframe { width: 100%; height: 100%; border: 0; }
</style>

Что здесь важно:

loading="lazy" — браузер не загружает карту, пока она далеко от области просмотра. Атрибут поддерживается всеми современными браузерами;
aspect-ratio у контейнера резервирует место заранее, вёрстка не прыгает;
title нужен для скринридеров, без него iframe для них безымянный.

Фасад: карта только по клику

Если карта всё же в первом экране или страница должна быть совсем лёгкой, используйте паттерн «фасад». Сначала показываете статичную картинку, а iframe создаёте по клику.

<button class="map-facade" type="button"
        data-src="https://yandex.ru/map-widget/v1/?…ваш_код_виджета…">
  <img src="/img/map-static.webp" alt="Схема проезда к нашему входу"
       width="800" height="450" loading="lazy">
  <span>Показать интерактивную карту</span>
</button>

<script>
  document.querySelectorAll('.map-facade').forEach((btn) => {
    btn.addEventListener('click', () => {
      const frame = document.createElement('iframe');
      frame.src = btn.dataset.src;
      frame.title = 'Карта: как нас найти';
      frame.style.cssText = 'width:100%;aspect-ratio:16/9;border:0';
      frame.allowFullscreen = true;
      btn.replaceWith(frame);
    }, { once: true });
  });
</script>

Фасад не стоит ставить, если карта — главное на странице и без неё человек не поймёт, куда идти. Тогда лучше обычный iframe с loading="lazy" чуть ниже адреса и телефона: текстовые контакты видны сразу, карта догружается следом.

Мобильная версия

На телефоне у встроенной карты есть ещё одна проблема: она перехватывает прокрутку. Человек листает страницу, палец попадает на карту — и вместо скролла карта начинает двигаться.

Несколько приёмов:

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

<a class="route-btn"
   href="https://ссылка-на-карточку-организации-на-картах"
   target="_blank" rel="noopener">
  Построить маршрут
</a>

Несколько карт на одной странице

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

Отзывы с Яндекс Карт на сайт

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

Что важно знать:

отзывы подтягиваются автоматически, переносить тексты на сайт не нужно;
виджет показывает реальные отзывы, в том числе отрицательные, поэтому отвечать на них в карточке нужно регулярно;
к виджету отзывов применимы те же правила скорости: loading="lazy", заранее заданная высота, размещение ниже первого экрана;
не копируйте тексты отзывов на страницу как свои и не размечайте их как отзывы о вашей организации в JSON-LD: Google прямо не показывает звёздочки для отзывов, которые организация размечает о самой себе на своём сайте.

Для отзывов 2ГИС на сайте логика та же: официальный виджет вместо копирования.

Микроразметка организации: JSON-LD по schema.org

Карта на странице — картинка для человека. Поисковику понятнее структурированные данные. Для локального бизнеса берите LocalBusiness или его подтип из schema.org: CafeOrCoffeeShop, AutoRepair, BeautySalon, Dentist, HairSalon и другие. Чем точнее тип, тем лучше. Полный список подтипов — на странице LocalBusiness на schema.org.

Почему JSON-LD, а не Microdata? Оба формата допустимы. Но JSON-LD живёт отдельным блоком и не зависит от вёрстки: редизайн не сломает разметку, а разметка не мешает верстальщику.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AutoRepair",
  "@id": "https://example.ru/#org",
  "name": "Название как в карточке на картах",
  "url": "https://example.ru/",
  "telephone": "+7-000-000-00-00",
  "image": "https://example.ru/img/facade.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "ул. Примерная, д. 1, стр. 2",
    "addressLocality": "Город",
    "postalCode": "000000",
    "addressCountry": "RU"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 55.000000,
    "longitude": 37.000000
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "09:00",
      "closes": "20:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday",
      "opens": "10:00",
      "closes": "16:00"
    }
  ],
  "hasMap": "https://ссылка-на-карточку-организации-на-картах",
  "sameAs": [
    "https://ссылка-на-карточку-организации-на-картах",
    "https://ссылка-на-второй-картографический-сервис"
  ]
}
</script>

Разберём поля, на которых чаще всего ошибаются.

name и address

Название — как на вывеске и в карточке, без приписок «недорого» или «круглосуточно». Адрес — в том же формате, что и в карточке: та же улица, тот же формат дома, корпуса и строения. streetAddress — одна строка, город отдельно в addressLocality.

geo: координаты

Координаты — числа, а не строки, с точкой в качестве разделителя. Шести знаков после точки достаточно, чтобы попасть в конкретный вход.

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

Частая ловушка: в адресной строке карт координаты нередко идут в обратном порядке, «долгота, широта» (например, параметр ll). Если перепутать, точка уедет далеко от города, а валидатор ничего не скажет — формально всё корректно.

openingHoursSpecification

Структурированный вариант надёжнее строки openingHours: в нём проще описать разные часы по дням. Выходной день просто не указывайте. Если работаете круглосуточно, используйте "opens": "00:00" и "closes": "23:59". На праздники можно добавить отдельный объект с validFrom и validThrough.

sameAs и hasMap

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

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

Совет. Добавьте @id с якорем вида https://example.ru/#org. Если на других страницах сайта тоже есть разметка (статьи, услуги), ссылайтесь на организацию через этот @id. Так у вас будет одна сущность, а не пять почти одинаковых.

Филиалы

У каждого филиала — своя страница и свой блок LocalBusiness со своим адресом, телефоном, часами и ссылкой на свою карточку. Общую компанию описывайте как Organization на главной, а филиалы связывайте с ней через parentOrganization. Не перечисляйте все адреса одним массивом в одном блоке.

Куда положить блок

На страницу «Контакты» обязательно; можно и в шаблон всех страниц, если данные одни и те же.
Блок может стоять в <head> или в <body>, порядок не важен.
Отдавайте его в исходном HTML. Разметку, которую вставляет скрипт после загрузки, обрабатывает не каждый краулер.
Если CMS или SEO-плагин уже генерирует разметку, не добавляйте вторую. Две организации с разными телефонами хуже, чем одна.

Проверка перед релизом

Schema Markup Validator (validator.schema.org) — проверяет синтаксис и соответствие словарю schema.org.
Rich Results Test от Google — показывает, как разметку видит его краулер, в том числе после выполнения JavaScript.
Валидатор микроразметки в Яндекс Вебмастере — проверка для Яндекса, принимает и URL, и фрагмент кода.
Сверка с карточкой. Откройте рядом карточку на картах и пройдитесь по полям: название, адрес, телефон, часы. Никакой валидатор этого за вас не сделает.
Lighthouse или PageSpeed Insights — посмотрите LCP и CLS до и после добавления карты.

Привычки, которые экономят время:

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

Чек-лист страницы «Контакты»

[ ] Адрес, телефон и часы видны текстом в первом экране.
[ ] Карта показывает вашу метку, а не центр города.
[ ] У iframe есть loading="lazy", title и зарезервированная высота.
[ ] На мобильных карта не перехватывает прокрутку.
[ ] Отзывы — официальным виджетом, а не копией текста.
[ ] В JSON-LD точный подтип LocalBusiness, числовые координаты и openingHoursSpecification.
[ ] sameAs ведёт прямо на карточку организации.
[ ] Данные на сайте, в разметке и в карточке совпадают до буквы.

Частые вопросы

Нужен ли API-ключ, чтобы вставить карту на сайт?
Для виджета из карточки и карты из конструктора — нет. Ключ нужен для JavaScript API, когда вы используете поиск, маршруты и другую логику.

Микроразметка организации нужна на всех страницах?
Обязательно — на странице контактов. На остальных достаточно ссылки на организацию через @id, если на них есть своя разметка.

Что важнее: карта или разметка?
Это разные аудитории. Карта помогает человеку дойти до двери, разметка помогает поисковику связать сайт с конкретной точкой и карточкой. Нужны обе, и они должны совпадать.

Коротко

Как добавить карту на сайт: виджет из карточки для одной точки, конструктор для схем и филиалов, API для логики, статичная картинка для скорости.
Виджет карты — с loading="lazy", зарезервированной высотой или фасадом по клику.
Микроразметка — точный подтип schema.org LocalBusiness, числовые координаты, openingHoursSpecification, sameAs на карточку.
Данные на сайте, в разметке и в карточке совпадают.

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

DEV Community: Mapli