Open Graph Debugger

Проверка Open Graph: что показывает отчёт

Когда ссылку вставляют в Facebook, LinkedIn, X, Telegram, Slack или мессенджер, робот площадки скачивает страницу и читает теги Open Graph в <head>. Из них собирается карточка: заголовок, описание, картинка. Инструмент загружает страницу так же — с нашего сервера и без выполнения JavaScript — и показывает три вещи:

• Превью карточек Facebook, X и LinkedIn из найденных тегов. Вёрстка повторяет каждую соцсеть, но это приближение: реальная карточка зависит от текущего дизайна площадки и её кэша.
• Список тегов: семь тегов Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) и четыре тега X (twitter:card, twitter:title, twitter:description, twitter:image) с пометкой «есть / нет».
• Оценку от 0 до 100. У каждого тега свой вес (больше всего у заголовка и картинки, меньше всего у локали), оценка — доля найденного веса. Она измеряет полноту, а не качество: плохо написанный заголовок тоже засчитывается.

Под превью видно, какого размера og:image на самом деле (его меряет ваш браузер), какой размер объявлен в og:image:width и og:image:height, есть ли og:image:alt и не указан ли адрес картинки относительным путём.

Какие теги Open Graph обязательны

Протокол Open Graph (ogp.me) называет четыре обязательных свойства. С описанием и типом карточки X получается набор, который работает везде:

Минимальный набор в <head>:

<meta property="og:title" content="Весенняя распродажа: −30% на беговые кроссовки">
<meta property="og:description" content="Только две недели, бесплатный возврат.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/sale">
<meta property="og:image" content="https://example.com/img/sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Три пары кроссовок на беговой дорожке">
<meta name="twitter:card" content="summary_large_image">

Размер картинки для Open Graph

Одна картинка 1200×630 пикселей (соотношение 1.91:1) подходит для Facebook, LinkedIn и больших карточек X. Текст и логотип держите ближе к центру: некоторые приложения обрезают края или показывают квадратную миниатюру.

Теги og:image:width и og:image:height позволяют Facebook показать карточку уже при первом шеринге, не дожидаясь загрузки картинки. Сжимайте файл: баннер на 3 МБ тормозит робота, а часть мессенджеров тяжёлые картинки пропускает.

Почему превью не обновилось и как его сбросить

Каждая площадка кэширует то, что однажды скачала. После правки тегов наш инструмент сразу покажет новую версию, а соцсеть — старую, пока не перечитает страницу. Сбросить кэш можно официальными инструментами:

• Facebook, ссылки в Instagram и Messenger: Sharing Debugger на developers.facebook.com — вставьте адрес и нажмите «Scrape Again». Сам Facebook обновляет данные примерно раз в 30 дней.
• LinkedIn: Post Inspector на linkedin.com/post-inspector. Проверка адреса заново скачивает страницу; без неё LinkedIn держит кэш около семи дней.
• Telegram: отправьте ссылку официальному боту @WebpageBot — он обновит превью, которое Telegram хранит для этого адреса.
• X: старый Card Validator превью больше не показывает, ручного сброса нет. Карточка видна в окне нового поста после вставки ссылки. Если X упорно держит старую, публикуйте адрес с безобидным параметром вроде ?v=2 — для X это новый URL.

Картинки тоже кэшируются по адресу. Если заменить файл под тем же именем, часть приложений продолжит показывать старый. Загрузите новую картинку под новым именем и поправьте og:image.

Карточки X: что берётся из Open Graph

X сначала читает свои теги twitter:*. Если нет twitter:title, twitter:description или twitter:image, X возьмёт og:title, og:description и og:image. Поэтому дублировать всё не нужно: на странице с полным Open Graph достаточно добавить twitter:card. Наше превью X работает по той же схеме. Теги X обычно пишут через атрибут name; инструмент читает их только из name.

Частые ошибки Open Graph

1. Относительный путь к картинке. /img/cover.jpg работает в браузере, но не у робота соцсети. Нужен полный адрес с https://; отчёт предупреждает об относительном пути.
2. Теги ставит JavaScript. Роботы соцсетей скрипты не выполняют. Если фреймворк заполняет мета-теги на клиенте, робот видит пустой шаблон. Выводите теги на сервере или используйте пререндер. Наш инструмент JavaScript тоже не выполняет, так что тег, которого нет здесь, скорее всего не увидит и Facebook.
3. Робот заблокирован. Disallow в robots.txt, защита от ботов в файрволе, гео-блокировка или стена авторизации — и соцсеть видит страницу ошибки. Проверьте robots.txt и ответ сервера в HTTP-заголовках.
4. Один шаблон на все страницы. Одинаковые заголовок и картинка на всех URL — и каждый репост выглядит как главная. Генерируйте og:title, og:description и og:image для каждой страницы.
5. Неверный og:url. Facebook считает og:url каноническим адресом и строит карточку по той странице. Если везде стоит главная, любой репост покажет главную.
6. Несколько og:image по ошибке. Бывает, что тег выводят и тема, и SEO-плагин. Обычно берётся первый — и не всегда нужный.
7. Цепочки редиректов. Роботы идут по редиректам, но длинная цепочка или редирект на страницу входа ломают превью. Проверьте редиректы.

Open Graph и SEO

Google не ранжирует страницы по тегам Open Graph и строит сниппет из <title> и meta description, а не из og:*. Open Graph влияет на переходы из соцсетей и мессенджеров: карточку с понятной картинкой замечают. Поисковую часть проверяйте отдельно: проверка мета-тегов покажет title, description и canonical, а SERP Preview — как страница выглядит в Google.