При отправке ссылки площадка может показать заголовок, описание и изображение. Open Graph помогает передать эти сведения, но окончательный вид карточки зависит от платформы, её кеша и доступности страницы. Поэтому проверять нужно не только теги, но и фактическое превью там, где ссылкой пользуются.
Базовые свойства Open Graph
Спецификация Open Graph определяет четыре базовых свойства: og:title, og:type, og:image и og:url. Описание og:description — дополнительное свойство.
| Свойство | Что передаёт |
|---|---|
| og:title | Название материала |
| og:type | Тип объекта, например website или article |
| og:image | Адрес изображения, представляющего страницу |
| og:url | Постоянный канонический адрес объекта |
| og:description | Краткое описание |
Не путайте требование протокола с обещанием одинаковой карточки во всех приложениях. Отсутствие отдельного тега может привести к выбору другой информации, а не обязательно к полному отсутствию превью.
Учебный пример
<meta property="og:title" content="Как подготовить сайт к редактированию">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide.jpg">
<meta property="og:description" content="Какие данные сохранить и что проверить перед изменением страницы.">
<meta property="og:locale" content="ru_RU">
Пример не содержит цены или гарантии. На рабочем сайте используйте реальные адреса и описание опубликованного материала. Теги размещают в head; проверьте, не создают ли разные плагины противоречащие значения.
Как выбрать изображение
Изображение должно представлять конкретную страницу. Для товара это может быть сам товар, для статьи — содержательная иллюстрация. Общий логотип на всех URL редко помогает различать материалы.
Проверьте размер и соотношение сторон по требованиям целевых площадок. Горизонтальный вариант 1200×630 можно использовать как исходный макет для проверки, но не как универсальный обязательный минимум. Площадки могут кадрировать изображение по-разному, поэтому важные детали не должны быть у самого края.
Дайте полный доступный URL, проверьте ответ сервера, тип файла и доступ без авторизации. Не используйте временную ссылку, которая скоро истечёт.
Twitter Cards: проверяйте целевую площадку
Для карточек X используются отдельные метаданные с именами twitter:*. Пример распространённой конфигурации:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Как подготовить сайт к редактированию">
<meta name="twitter:description" content="Данные и проверки перед изменением страницы.">
<meta name="twitter:image" content="https://example.com/images/guide.jpg">
Не добавляйте вымышленный аккаунт в twitter:site. Если X важен аудитории, проверьте текущее отображение на самой площадке: наличие этих тегов не обещает определённую компоновку, размер или показ описания. Не полагайтесь на автоматическую подстановку из OG без проверки.
Open Graph и поиск
Нельзя свести OG только к социальным сетям. В актуальных рекомендациях Google по изображениям og:image указан как один из способов сообщить предпочтительное изображение страницы. Это не означает гарантированный выбор картинки или повышение позиции.
Для поисковых функций структурированные данные Schema.org решают собственные задачи. OG и JSON-LD должны согласовываться с видимым содержанием, но не заменяют друг друга полностью.
Почему показывается неверная или старая карточка
| Наблюдение | Что проверить |
|---|---|
| Старый заголовок | Кеш сайта, конечный URL и кеш площадки |
| Логотип вместо изображения | Значение og:image, дубли тегов и доступ файла |
| Нет карточки | Доступ бота, статус ответа, ограничения платформы |
| Разные данные в приложениях | Поддерживаемые поля, кадрирование и кеш каждой площадки |
| В браузере теги есть, у бота нет | Исходный HTML и зависимость метаданных от JavaScript |
Социальные боты не обязаны выполнять тот же сценарий JavaScript, что обычный браузер. Надёжнее отдавать существенные метаданные в исходном HTML и проверять фактический ответ сервера.
Проверка перед использованием ссылки
Откройте исходный HTML конечного URL и убедитесь, что теги содержат нужные значения. Затем проверьте картинку отдельно и карточку в целевом приложении. После исправлений учитывайте кеширование: новая версия может отобразиться не сразу.
Не меняйте рабочий URL страницы только для сброса превью и не публикуйте тестовое сообщение без необходимости. Для доступных инструментов обновления кеша следуйте актуальной справке площадки; один сторонний бот не является универсальным решением.
Применить к сайту
Проверим, как важные страницы выглядят при отправке клиенту: заголовок, изображение, описание и конечный адрес. Затем подготовим согласованный шаблон метаданных.
Вопросы и ответы
OG гарантирует красивое превью?
Нет. Метаданные задают сведения, а платформа выбирает отображение и может использовать кеш. Нужна проверка в целевых приложениях.
Нужна ли уникальная картинка каждой странице?
Она должна соответствовать содержанию. Один тематический образ может быть уместен для связанных материалов, но общий логотип не стоит использовать автоматически везде.
Можно ли указать цену в описании?
Только действующую и совпадающую с предложением. Если цена часто меняется, учтите кеш карточки и риск устаревшего обещания.
Добавить комментарий