Open Graph — несколько строк в голове страницы, которые говорят, что показать вместо ссылки: заголовок, описание и картинку. Их читают мессенджеры, соцсети и всё, куда люди кидают ссылки.
Зачем это знать
Ссылку на ваш сайт кто-то отправит в чат. Без этих строк там появится адрес и обрывок случайного текста — например, пункт меню, потому что он первый в коде. Разница между «скучный адрес» и «карточка с заголовком и картинкой» — это разница в том, откроют ссылку или нет.
Пять строк, которые нужны
<meta property="og:type" content="article">
<meta property="og:url" content="https://eazy-logic.ru/teoriya/open-graph/">
<meta property="og:title" content="Open Graph: как выглядит ссылка">
<meta property="og:description" content="Пять строк в голове страницы,
которые решают, что покажет мессенджер вместо адреса.">
<meta property="og:image" content="https://eazy-logic.ru/assets/img/og-cover.png">
<meta property="og:site_name" content="Easy Logic">
<meta property="og:locale" content="ru_RU">| Свойство | Что в нём |
|---|---|
og:type |
website для главной, article для статей |
og:url |
Полный адрес страницы — тот же, что в canonical |
og:title |
Заголовок карточки. Может быть короче, чем title: названия сайта тут не нужно |
og:description |
Одно-два предложения. Обрезается примерно на двухстах знаках |
og:image |
Картинка карточки: полный адрес, 1200×630 точек |
Адреса только полные
И у страницы, и у картинки адрес пишется целиком —
со схемой и доменом. Относительный путь вроде
/img/cover.png не сработает: карточку
собирает чужой сервер, и он не знает, относительно
чего его считать.
Картинка: 1200×630 и крупные буквы
Пропорция примерно 1,9 к 1 — её ждут почти все сервисы. Меньше 600 пикселей по ширине лучше не брать: часть мессенджеров такую картинку покажет маленьким значком сбоку вместо широкой карточки.
В ленте эта картинка видна размером с почтовую марку, поэтому мелкий текст на ней бесполезен. Работает другое: название сайта, крупный заголовок в две-три строки и однотонный фон. Хорошая новость в том, что такую картинку можно собирать автоматически — по шаблону, подставляя заголовок страницы.
А как же Twitter Card
Отдельные теги twitter: сегодня почти
не нужны: если их нет, сервис берёт данные из Open
Graph. Достаточно добавить одну строку
twitter:card со значением
summary_large_image, чтобы карточка была
широкой.
Что будет, если тегов нет
Карточка всё равно соберётся, но из того, что сервис найдёт
сам. Заголовком станет содержимое
<title> — вместе с названием сайта
и всем, что вы туда вписали. Описанием — либо
description, либо первый попавшийся текст
страницы, а это часто пункт меню или слово «Главная».
Картинки не будет вовсе или подставится случайная —
например, иконка из шапки.
Отсюда простое правило: Open Graph — это не украшение, а страховка от того, что кто-то чужой решит за вас, как выглядит ваша ссылка.
В CMS теги собираются из полей ресурса
Писать семь строк на каждой из полусотни страниц руками не придётся. В шаблоне они пишутся один раз, а вместо значений ставятся метки полей: заголовок берётся из названия ресурса, описание — из поля «Описание», адрес складывается из домена и адреса страницы. Картинку удобно завести отдельным TV-полем, а если оно пустое — подставлять общую картинку сайта.
Что просить у нейросети
Составь набор тегов Open Graph для страницы (её
заголовок, описание и адрес прилагаю). Тип —
article, домен
eazy-logic.ru, картинка лежит по адресу
/assets/img/og-cover.png.
og:title сделай короче, чем
title страницы: название сайта в карточке
выводится отдельной строкой, повторять его не нужно.
Адреса пиши полными.
Добавь строку для широкой карточки в Twitter
и объясни, чем этот набор отличается от
description для поисковика: там и там
описание, но задачи разные.
Почему карточка не меняется после правки
Самая частая жалоба: теги исправлены, а в чате по-прежнему старый заголовок. Причина почти всегда в кеше: сервис однажды сходил на страницу, запомнил карточку и больше не проверяет. Держится такая запись от нескольких часов до недель.
Два способа обойти. Первый — открыть страницу сброса кеша
у самого сервиса: у крупных соцсетей есть инструмент, где
можно ввести адрес и заставить перечитать страницу. Второй,
грубый, но работающий всегда, — добавить к адресу
бессмысленный параметр вроде ?v=2: для сервиса
это другой адрес, и карточку он соберёт заново.
Как проверить, что получилось
- Отправить ссылку самому себе в мессенджер — самый честный способ.
- Проверить, что картинка открывается по своему полному адресу в отдельной вкладке.
- Если карточка показывает старые данные — мессенджеры кешируют их надолго; у крупных сервисов есть страница сброса кеша.
- Проверить внутреннюю страницу, а не только главную: теги должны быть у каждой.
Что стоит запомнить
- Пять свойств: тип, адрес, заголовок, описание, картинка
- Адреса страницы и картинки — полные, со схемой и доменом
- Картинка 1200×630 с крупным текстом, без мелких надписей
- Теги свои у каждой страницы, а не одни на весь сайт
- Проверка — отправить ссылку самому себе