Как создать превью для страниц магазина: быстрый ответ

Чтобы ссылки на страницы каталога, карточки товаров и статьи формировали аккуратные сниппеты при отправке, используйте генератор превью для соцсетей. Заполните обязательные поля заголовка и описания, укажите ссылку на изображение и нажмите кнопку «Сгенерировать». Сервис мгновенно сформирует готовый блок meta-тегов для вставки в секцию head вашей страницы, а также покажет счетчики символов и статус наличия иллюстрации.

Подготовка данных перед заполнением

Перед генерацией тегов соберите параметры страницы. В инструменте предусмотрены следующие поля:

  • og:title (обязательное поле): понятный заголовок сниппета, например название конкретного товара или заголовок статьи.
  • og:description (обязательное поле): краткое описание сути страницы объемом до 200 символов с ключевыми преимуществами или характеристиками.
  • og:type: тип контента. Выбирается из списка (website, article, product, video.other, music.song, profile). По умолчанию установлено значение website, а для карточек каталога выбирается product.
  • og:url: канонический адрес страницы на сайте.
  • og:image: прямая ссылка на графический файл. Рекомендуемый сервисом размер баннера составляет 1200x630 пикселей.
  • og:site_name: название магазина или проекта.
  • og:locale: языковая локаль документа, по умолчанию ru_RU.

Два поля являются строго обязательными: og:title и og:description. Остальные параметры опциональны, но их заполнение позволяет сформировать максимально информативную карточку.

Пошаговая инструкция по настройке

  1. Откройте генератор. Перейдите к инструменту разметки на платформе Zyntec.
  2. Введите заголовок и текст. Заполните обязательные поля og:title и og:description.
  3. Задайте тип страницы. Выберите подходящий og:type из выпадающего списка (например, product для страницы товара или article для публикации в блоге).
  4. Укажите медиа и ссылки. Добавьте адрес страницы в og:url, ссылку на подготовленное изображение 1200x630 в og:image и название сайта в og:site_name.
  5. Нажмите «Сгенерировать». Сервис обработает данные и сформирует блок разметки.
  6. Оцените параметры. Проверьте подсчитанную длину заголовка, длину описания и индикатор наличия картинки.
  7. Скопируйте код. Вставьте полученный набор meta-тегов property="og:..." в блок head HTML-шаблона страницы.

Пример заполнения формы

Для оформления карточки товара в интернет-магазине укажите следующие параметры:

  • og:title: Беспроводные наушники Zyntec Pro
  • og:description: Полноразмерные наушники с активным шумоподавлением и автономностью до 40 часов. Быстрая доставка со склада.
  • og:type: product
  • og:url: https://zyntec.ru/catalog/headphones-pro
  • og:image: https://zyntec.ru/images/products/headphones-pro-1200x630.png
  • og:site_name: Zyntec
  • og:locale: ru_RU

После нажатия кнопки «Сгенерировать» инструмент выдаст готовые строки с атрибутами property="og:...", покажет точное количество символов в названии и тексте, а также подтвердит привязку фонового изображения. Полученный фрагмент сразу готов к копированию.

Ограничения и чек-лист проверки результата

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

  • Длина описания. Текст в поле og:description не должен превышать 200 символов, чтобы сниппет отображался целиком и не обрезался.
  • Доступность ссылки на картинку. Убедитесь, что URL в поле og:image открывается напрямую и ведет на изображение с пропорциями 1200x630 пикселей.
  • Соответствие типа. Для интернет-магазина используйте product для товаров, article для статей и обзоров, website для главной страницы и общих разделов.
  • Размещение в коде. Сгенерированные теги должны находиться строго внутри тега head до закрывающего тега.

Возможные ошибки и их устранение

Если при генерации возникли сложности, сервис выведет соответствующее системное уведомление:

  • «Поле og:title обязательно» возникает, если строка заголовка осталась пустой. Добавьте название страницы или товара.
  • «Поле og:description обязательно» появляется при отсутствии описания. Напишите краткий текст до 200 символов.
  • «Неизвестный og:type: X» отображается, если передан неподдерживаемый тип контента. Выберите стандартный вариант из выпадающего списка.

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

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