Ржанский Д.

Как настроить Open Graph для соцсетей и нужен ли prefix?

Как настроить Open Graph для корректных превью ссылок в социальных сетях, нужен ли prefix для og и какой набор метатегов использовать как универсальную основу.

Дмитрий Ржанский Дмитрий Ржанский 2 просмотров

Для обычной Open Graph-разметки атрибут prefix="og: https://ogp.me/ns#" не обязателен, но его можно оставить: это валидный и безопасный вариант, который используется в примере текущей спецификации Open Graph.

Причина в том, что Open Graph основан на RDFa, а префикс og уже входит в начальный контекст RDFa 1.1. Поэтому стандартный код работает и без явного объявления пространства имён:

При этом сама спецификация Open Graph сейчас показывает такой вариант:

Поэтому специально удалять `prefix` смысла нет. Если он уже присутствует в шаблоне сайта, его лучше оставить. Для нового шаблона также можно использовать этот вариант: он явно задаёт пространство имён и не мешает обработке страницы социальными сетями. Старую запись с `http://ogp.me/ns#` лучше не копировать из давних руководств. В актуальном примере Open Graph используется HTTPS: ## Какой набор Open Graph использовать Для обычной страницы достаточно следующей основы: Четыре базовых свойства протокола Open Graph — `og:title`, `og:type`, `og:image` и `og:url`. `og:description`, `og:site_name`, `og:locale` и параметры изображения относятся к дополнительным свойствам, но для нормального превью ссылки их обычно имеет смысл указывать. Для статьи вместо: можно использовать: Если добавляются свойства отдельного пространства имён, например `article:published_time`, его префикс лучше объявить явно: ## Универсальный вариант для разных социальных сетей Open Graph следует использовать как базовый слой. Его понимают, в частности, LinkedIn и различные сервисы, формирующие превью ссылок. LinkedIn прямо требует для расшариваемых страниц `og:title`, `og:image`, `og:description` и `og:url`. Для X лучше дополнительно оставить отдельные Twitter Card-теги: В результате практический универсальный шаблон выглядит так: Название страницы Значения `twitter:title`, `twitter:description` и `twitter:image` можно формировать из тех же данных, что и Open Graph. Отдельные значения нужны только тогда, когда карточка для X должна отличаться. Для изображения разумно использовать абсолютный HTTPS-URL и горизонтальный файл около 1200 × 630 пикселей. Сам протокол Open Graph не устанавливает универсальный размер изображения. Например, LinkedIn для превью ссылок указывает соотношение 1,91:1 и размер 1200 × 627 пикселей, поэтому формат около 1200 × 630 подходит как практическая общая основа. Нельзя считать наличие правильных OG-тегов гарантией одинакового отображения во всех сервисах. Социальные сети самостоятельно обрабатывают страницу, применяют собственные требования к изображениям и кешируют уже полученные данные. Поэтому после изменения разметки старое изображение или заголовок некоторое время могут оставаться в превью. Проверять нужно не только исходный HTML, но и фактическую карточку. Для LinkedIn используется Post Inspector, который показывает извлечённые метаданные и позволяет обновить закешированное превью. Для Facebook применяется Sharing Debugger. Open Graph в первую очередь управляет представлением ссылки при публикации. Это не замена Schema.org и не самостоятельный фактор ранжирования. Его следует настраивать ради корректного заголовка, описания и изображения при распространении URL, а не ради предполагаемого роста позиций.
Разобрать проблему на вашем сайте

Опишите проблему — найду вероятную причину и предложу понятный план исправлений без лишних работ.

Связаться