Как настроить Open Graph разметку: быстрый старт

Чтобы быстро создать структурированное превью для ссылки, откройте онлайн генератор Open Graph на Zyntec, укажите обязательные параметры заголовка и описания, выберите подходящий тип страницы и получите готовый блок HTML-кода для вставки в контейнер head.

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

Подготовка исходных данных

Перед заполнением формы соберите базовую информацию о странице. В инструменте предусмотрены два обязательных параметра (og:title и og:description), а также ряд полезных опциональных полей:

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

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

  1. Откройте инструмент. Перейдите в генератор Open Graph.
  2. Заполните обязательные поля. Введите заголовок в поле og:title и текст до 200 символов в поле og:description.
  3. Укажите дополнительные параметры. Выберите нужный og:type из списка, вставьте URL страницы, ссылку на изображение рекомендуемого формата 1200×630, имя сайта и проверьте локаль.
  4. Запустите генерацию. Нажмите кнопку «Сгенерировать».
  5. Скопируйте результат. Заберите готовый блок тегов property="og:...", сверьте счетчики длины заголовка, описания и статус наличия картинки, после чего добавьте код в секцию head вашего сайта.

Наглядный пример и проверка результата

Допустим, необходимо разметить страницу публикации. Исходные данные для ввода: - og:title: Руководство по настройке разметки - og:description: Пошаговая инструкция по генерации метатегов Open Graph для публикации на страницах сайта. - og:type: article - og:url: https://zyntec.ru/articles/open-graph-ishodnye-dannye-primer-i-proverka-rezultata/ - og:image: https://zyntec.ru/static/og-guide.png - og:site_name: Zyntec - og:locale: ru_RU

После нажатия кнопки «Сгенерировать» сервис сформирует блок HTML-тегов:

<meta property="og:title" content="Руководство по настройке разметки">
<meta property="og:description" content="Пошаговая инструкция по генерации метатегов Open Graph для публикации на страницах сайта.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://zyntec.ru/articles/open-graph-ishodnye-dannye-primer-i-proverka-rezultata/">
<meta property="og:image" content="https://zyntec.ru/static/og-guide.png">
<meta property="og:site_name" content="Zyntec">
<meta property="og:locale" content="ru_RU">

Вместе с кодом инструмент выведет техническую сводку: длину заголовка, длину описания и индикатор наличия ссылки на картинку.

Ограничения инструмента

  • Два обязательных параметра. Инструмент не формирует разметку, если пропущен заголовок og:title или описание og:description.
  • Лимит описания. Текст в поле og:description оптимизирован под отображение до 200 символов, чтобы сниппет не обрезался.
  • Список типов. В поле og:type поддерживаются строго определенные значения: website, article, product, video.other, music.song, profile.

Возможные ошибки и их исправление

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

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