Как быстро настроить Open Graph для интернет-магазина
Чтобы карточки товаров и разделы каталога красиво отображались при отправке ссылок в сообщениях или публикациях, настройте микроразметку через генератор open graph на русском языке. Вы вносите базовые данные страницы, обязательно заполняете поле с описанием и получаете готовый фрагмент HTML-кода для вставки в шаблон сайта. Это экономит время и страхует от синтаксических ошибок в разметке.
Какие данные подготовить перед заполнением
Перед началом работы соберите параметры конкретной страницы каталога или статьи:
- Заголовок страницы (title).
- Прямой адрес страницы (URL).
- Прямую ссылку на обложку или фотографию товара.
- Название сайта или магазина.
- Локаль (языковой стандарт, например, ru_RU).
- Описание страницы (description).
Следите за тем, чтобы все данные относились к одному товару или разделу. Особое внимание обратите на поле «og_description»: в сервисе Zyntec оно является обязательным. Если оставить его пустым, инструмент не сможет сформировать разметку.
Совет: сохраняйте исходный список параметров в рабочем блокноте. Это позволит быстро обновить теги при смене баннера или корректировке цен, а также сверить итоговый код с исходником.
Пошаговый процесс генерации разметки
- Выберите страницу магазина. Определите, для какого раздела, категории или карточки товара вы создаете микроразметку.
- Соберите значения полей. Подготовьте точные ссылки на страницу и изображение, заголовок, имя сайта, локаль и текст сниппета.
- Откройте генератор. Перейдите в сервис Zyntec для создания Open Graph разметки.
- Заполните форму. Вставьте подготовленные данные в соответствующие поля интерфейса.
- Проверьте описание. Убедитесь, что строка «og_description» заполнена текстом.
- Запустите генерацию. Нажмите кнопку отправки формы и дождитесь формирования метатегов.
- Скопируйте готовый код. Вставьте полученные теги в блок head нужной страницы сайта.
Практический пример заполнения
Для наглядности разберем рабочий пример с типовыми данными:
- Тип страницы: website
- Заголовок страницы: Тестовый заголовок страницы
- Адрес страницы: https://zyntec.ru/
- Адрес изображения: https://zyntec.ru/static/og-image.png
- Название сайта: Zyntec
- Локаль: ru_RU
- Описание страницы: Описание страницы для социальных сетей.
После отправки формы инструмент сразу выдает готовый блок кода без предупреждений.
Генератор принимает описания разной длины: например, если в качестве теста сократить поле «og_description» до одного символа «а», сервис все равно сформирует корректный код. Однако для реального интернет-магазина лучше писать емкие тексты от 60 до 160 символов, которые точно передают суть предложения.
Ограничения и особенности работы
Генератор строго следует переданным данным и не проверяет доступность указанных ссылок вручную. Важно учитывать следующие моменты:
- Поле «og_description» обязательно для генерации, остальные поля задают структуру разметки под вашу задачу.
- Сервис формирует код на основе введенного текста, но не заменяет ручную проверку: убедитесь, что картинка товара открывается по прямой ссылке и имеет подходящие пропорции.
- Если вы вносите изменения в форму и генерируете теги повторно, сохраняйте финальный вариант кода, чтобы случайно не внедрить на сайт промежуточную версию.
Возможные ошибки и их исправление
Основная ошибка при работе с инструментом связана с пропуском обязательного поля. Если отправить форму без описания, генератор покажет сообщение: «Ошибка: Поле og:description обязательно».
В таком случае разметка не сформируется. Чтобы решить проблему, добавьте понятное описание страницы в поле «og_description» и нажмите кнопку генерации повторно. Готовый код сразу появится на экране, и его можно будет переносить в код магазина.