Проверка разметки Open Graph
Проверка и отладка тегов Open Graph
Вставьте URL-адрес, чтобы прочитать его теги Open Graph и увидеть превью ссылки, которое они создают. Найдите недостающие или конфликтующие og-теги и исправьте их перед тем, как поделиться страницей.
og:title
Заголовок, который отображается в карточке предпросмотра. Старайтесь уложиться примерно в 60 символов и сделайте его понятным самим по себе, без привязки к названию сайта.
Название
Описание
framer.com
og:description
Краткое описание под заголовком. Оптимальный объем — от 110 до 160 символов. Некоторые приложения показывают только первую строку, поэтому начните с самого главного.
Название
Описание
framer.com
og:image
Изображение для предпросмотра. Используйте абсолютный URL-адрес по протоколу HTTPS для файла JPG или PNG размером 1200 x 630 пикселей, а также добавьте теги og:image:width, og:image:height и og:image:alt.
og:url и og:type
Значение og:url должно совпадать с каноническим URL, чтобы репосты учитывались для одного адреса. og:type обычно имеет значение website для страниц и article для записей в блоге.
Название
Описание
framer.com
Практическое руководство по тегам Open Graph
Open Graph — это протокол, который большинство платформ использует для создания предпросмотра ссылок. Инструмент проверки Open Graph показывает, какие данные они считают с вашей страницы, и помогает исправить возможные ошибки.
Что такое инструмент проверки Open Graph?
Инструмент проверки Open Graph загружает URL, считывает его метатеги og и отображает карточки предпросмотра для таких платформ, как LinkedIn, Facebook, X, Slack и WhatsApp. Он работает как отладчик внешнего вида вашей ссылки при публикации.
Какие теги Open Graph являются обязательными?
Четыре основных тега — это og:title, og:type, og:image и og:url. Добавьте og:description и og:site_name для полноценного превью, а также og:locale, если вы публикуете материалы на нескольких языках.
Как отлаживать теги Open Graph
Проверьте URL с помощью инструмента проверки и обратите внимание на отсутствующие теги, дубликаты или значения, отличающиеся от данных на странице. Убедитесь, что теги присутствуют в HTML-коде, отрендеренном на сервере, так как многие поисковые роботы не выполняют JavaScript.
Open Graph против карточек Twitter
Теги Twitter cards, такие как twitter:card и twitter:image, используются исключительно платформой X. Если они отсутствуют, X использует теги Open Graph. Установите для twitter:card значение summary_large_image, а для остальных параметров используйте Open Graph.
Почему по-прежнему отображается старый предпросмотр?
Платформы кэшируют предпросмотр. После изменения тегов повторно опубликуйте страницу и воспользуйтесь инструментом самой платформы (например, LinkedIn Post Inspector), чтобы обновить данные.
Помогают ли теги Open Graph для SEO?
Теги Open Graph не влияют на ранжирование напрямую, но привлекательные превью приносят больше кликов и репостов, что привлекает больше посетителей и увеличивает шансы на получение ссылок на вашу страницу.
Краткий чек-лист по Open Graph
По одному тегу og:title и og:description на страницу, изображение og:image размером 1200 x 630 с абсолютным URL, og:url, совпадающий с каноническим, настроенный twitter:card и повторная проверка после каждого изменения.
Другие бесплатные инструменты: проверка размера изображений OG, валидатор карточек Twitter, проверка фавикона и генератор метатегов.