Генератор Open Graph метатегов

Заполните заголовок, описание, полный URL страницы и полный URL изображения. Генератор выдаст HTML-теги для секции head. Минимальный набор Open Graph включает og:title, og:type, og:image и og:url; мы также добавляем описание, язык, альтернативный текст изображения и название сайта, если они указаны. Выберите тип website для обычной страницы или article для статьи.

Скопируйте код в шаблон страницы и проверьте опубликованный HTML. Метатеги должны отражать конкретную страницу, а не одинаковый текст на всём сайте. Предпросмотр ниже показывает пример компоновки, но каждая платформа может обрезать заголовок, изменить кадрирование и закешировать старую картинку. Финальный вид проверяйте на опубликованном адресе.

Используйте изображение, доступное по абсолютному HTTPS-адресу без авторизации. Важные слова и логотип не ставьте вплотную к краям: площадка может обрезать картинку. Заполните alt коротким описанием смысла изображения, если оно помогает понять публикацию. Генератор проверяет синтаксис URL, но не скачивает картинку и не подтверждает её доступность.

Если изображение недавно заменили, социальная сеть может продолжать показывать закешированную версию. Сначала убедитесь, что новый файл отдаётся публично, затем запросите повторное чтение карточки средствами конкретной платформы. Иногда помогает новый URL файла, если прежний адрес остался тем же, а его содержимое изменилось.

Тег og:title задаёт заголовок карточки для систем, которые используют Open Graph. Обычный HTML title остаётся отдельным элементом страницы. Точно так же og:description не заменяет meta description для поисковой выдачи. Значения могут совпадать, но иногда карточке нужен более короткий или более понятный заголовок.

Адрес og:url должен вести к канонической версии страницы, а не к случайному URL с параметрами кампании. Если сайт доступен на нескольких доменах или через HTTP и HTTPS, сначала определите основную версию. Ошибочная ссылка в карточке может вести человека в другой раздел, даже когда само изображение и заголовок верны.

Для страницы каталога с заголовком «Новые коллекции» и изображением preview.jpg результат содержит строки вида <meta property="og:title" ...> и <meta property="og:image" ...>. Специальные символы в значениях экранируются, чтобы кавычка или знак меньше не ломали HTML-атрибут. Полученный фрагмент можно копировать или скачивать.

Поля обрабатываются в браузере и не отправляются серверу Pugofka. Генератор не проверяет сетевую доступность изображения. Для дополнительной карточки X используйте генератор Twitter Card; для описания сущности страницы — JSON-LD. Если шаблоны сайта уже создают OG-теги автоматически, не вставляйте второй набор поверх них: сначала проверьте исходный HTML.

Сгенерированный HTML — только начало. После внедрения откройте опубликованную страницу и посмотрите её исходный код: там должны быть фактические значения конкретной страницы. Проверьте og:url, og:image и отсутствие дублирующих тегов. Затем откройте адрес изображения отдельно. Если он отвечает только авторизованному пользователю, внешний сервис не сможет построить карточку.

При проверке разных страниц обращайте внимание на шаблон: если карточка товара показывает общий баннер магазина, значит данные продукта не дошли до слоя метаданных. Для страниц с UTM-параметрами обычно используют основную версию URL в og:url, а не каждый рекламный вариант. Если URL товара сменился, обновите и метаданные, и внутренние ссылки, и постоянный редирект.

Заголовок карточки должен совпадать по смыслу с тем, что человек увидит после перехода. Если на картинке один товар, а ссылка ведёт на общую категорию, доверие к публикации падает. Для статей поставьте изображение, которое относится к теме материала, и краткое описание без неподтверждённых обещаний. Для услуг полезно назвать саму услугу и результат, который страница действительно объясняет.

OG-метаданные не заменяют доступный текст на странице. Если карточка выглядит красиво, но HTML пуст для поискового робота или сама страница отвечает ошибкой, ссылку всё равно трудно использовать. Проверьте HTTP-ответ, мобильный интерфейс и обычный title. Структурированные данные JSON-LD и Open Graph решают разные задачи и могут сосуществовать на одной странице.

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

После массового обновления проверьте выборку страниц разных типов: главную, категорию, товар, статью и служебную страницу. У них могут быть разные шаблоны и разные ошибки. Если карточка у всех URL одинаковая, проблема часто в шаблоне вывода, а не в самих полях генератора. Запишите рабочую проверку в регламент публикации, чтобы редакторы видели ошибку до распространения ссылки.

В карточке товара заголовок, описание и изображение лучше брать из данных самого товара. Если поле описания пусто, подготовьте понятное запасное значение, но не копируйте один рекламный текст на все URL. Категория может использовать собственное изображение и краткое объяснение ассортимента. Статья — свою обложку и редакционный заголовок. Такой подход помогает карточке ссылки соответствовать ожидаемому содержанию.

При автоматическом выводе всегда экранируйте текст в HTML-атрибутах. Название товара может содержать кавычки, амперсанд или знак меньше. Генератор делает это для своего фрагмента, но шаблон CMS должен делать то же. Если рядом стоит код JSON-LD, он имеет другой формат экранирования: просто вставлять готовые OG-теги внутрь JSON нельзя. После внедрения проверьте реальный товар с кавычками в названии.

Для товара «Кабель USB-C» заполните title конкретным названием, description — коротким описанием, image — адресом фотографии товара, url — основной страницей товара без рекламных параметров. Тип website подходит для обычной карточки. Для статьи о выборе кабеля поставьте редакционный заголовок и обложку, а тип переключите на article. Один и тот же общий баннер для обоих URL затруднит понимание ссылки.

После генерации проверьте исходный HTML обеих страниц. Если в head остались старые og:title и og:image из шаблона, удалите дублирующий набор или исправьте источник данных. Генератор не умеет внедрять код в CMS самостоятельно и не проверяет опубликованную страницу. Его задача — собрать корректный фрагмент с экранированными атрибутами и дать понятный пример. Реальную карточку проверяйте после выкладки.

В интернет-магазине данные меняются: товар может получить новую фотографию или название. Если OG-теги записаны вручную один раз, они быстро устареют. Лучше формировать их из карточки товара и иметь правила для отсутствующих полей. Проверяйте образцы из разных категорий, потому что шаблон изображения или адреса может отличаться. Для структурированных данных о цене и наличии используйте отдельный JSON-LD, не пытайтесь записать всю информацию в og:description.

После проверки результата можно перейти к связанным задачам: Twitter Card, JSON-LD, Разработка интернет-магазинов. Используйте инструмент на настоящем образце перед публикацией результата.