Open Graph: как настроить превью ссылок на сайт в мессенджерах

Open Graph — набор мета-тегов og: в разделе head, из которых мессенджеры и соцсети собирают карточку ссылки: заголовок, описание и картинку. Обязательных тегов четыре: og:title, og:type, og:image и og:url. Без них сервис угадывает превью сам и часто берёт случайную картинку или обрезанный текст.

Что такое Open Graph и откуда берётся превью ссылки

Open Graph — открытый протокол разметки. Он превращает обычную страницу в объект с понятными свойствами: названием, типом, картинкой и постоянным адресом. Технически это мета-теги с атрибутом property, которые ставят в head страницы.

Когда вы отправляете ссылку в Telegram или публикуете её во ВКонтакте, сервис скачивает страницу и ищет эти теги. Нашёл — строит карточку из них. Не нашёл — собирает превью из title, первого абзаца и первой попавшейся картинки. Иногда это логотип в шапке, иногда баннер с куки, иногда пустой серый блок.

Яндекс описывает назначение стандарта так: он позволяет контролировать превью, которое формируется при публикации ссылки на сайт, и передавать информацию другим интернет-сервисам. Среди тех, кто читает разметку, Яндекс называет ВКонтакте, LinkedIn, Pinterest и другие сервисы.

Карточка ссылки — первое, что человек видит до перехода. Название, понятная картинка и одна фраза описания решают, откроют ли ссылку в чате, где рядом десяток других сообщений. Кнопки «Поделиться» и виджеты сообществ на сайте — отдельная задача, её мы разобрали в статье как встроить соцсети в корпоративный сайт.

Разметка Open Graph решает, как ссылка на вашу страницу выглядит в чате: с понятной картинкой и заголовком или с тем, что сервис угадал сам.

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

Протокол требует четыре свойства на каждой странице. Остальные теги дополняют карточку, но без этих четырёх разметка считается неполной.

В разметке это выглядит так:

<head prefix="og: https://ogp.me/ns#">
  <meta property="og:title" content="Пластиковые окна под заказ">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://site.ru/og/okna.jpg">
  <meta property="og:url" content="https://site.ru/okna/">
</head>

Тип website подходит для главной, услуг и разделов. Справка Яндекса по Open Graph прямо пишет, что любая неразмеченная страница определяется как объект website. Для записей блога берите article: у него есть свои свойства — дата публикации, дата изменения, автор, раздел и теги.

Адрес в og:url должен совпадать с каноническим адресом страницы. Протокол называет его постоянным идентификатором объекта, поэтому туда ставят чистый адрес — без UTM-меток, параметров сортировки и номеров сессий, даже если страница открыта с ними.

Факт. По протоколу Open Graph у каждой страницы четыре обязательных свойства: og:title, og:type, og:image и og:url.

Дополнительные теги: что ещё стоит заполнить

Четыре обязательных тега дают карточку, но не лучшую. Ещё несколько дополнительных свойств стоит заполнить на любом сайте:

• og:description — краткое описание объекта. Если тега нет, сервис возьмёт кусок текста со страницы.
• og:site_name — название сайта, на котором размещена страница. Его показывают мелко над заголовком.
• og:locale — язык разметки в формате язык_территория. По умолчанию это en_US, поэтому русскому сайту стоит прописать ru_RU.
• og:image:width и og:image:height — размеры картинки в пикселях. Они сообщают сервису размер картинки заранее.
• og:image:alt — текстовое описание того, что изображено на картинке.

Для записей блога добавьте свойства типа article: article:published_time и article:modified_time с датами, article:section с рубрикой. Они пригодятся сервисам, которые показывают дату в карточке.

Не путайте og:title с title страницы. Title пишут для выдачи: в нём ключевой запрос ближе к началу и нет лишних слов. og:title пишут для чата: он может быть живее и с крючком, а бренд в нём не нужен — его и так видно по домену и картинке.

Мнение. Если карточку видят в основном в рабочих чатах и каналах, пишите og:title как заголовок новости: что человек получит, открыв ссылку. Ключевые слова здесь не помогают — карточку читает человек, а не поисковик.

Как подготовить картинку для превью?

Картинка занимает в карточке больше всего места, поэтому от неё зависит, заметят ли ссылку. Правила простые, но их часто нарушают:

Если в разметке несколько тегов og:image, при конфликте учитываются данные из первого тега сверху. Поэтому главную картинку ставьте первой, а уточняющие свойства — ширину, высоту, alt — сразу после неё.

Требования к пропорциям и минимальному размеру у сервисов разные и меняются. Сверяйтесь со справкой той площадки, где превью важнее всего, и проверяйте результат отправкой ссылки себе.

Пример разметки Open Graph для статьи блога

Полная разметка для записи блога собирает обязательные и дополнительные теги в одном месте:

<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
  <title>Как выбрать пластиковые окна для квартиры — блог «Окна Юг»</title>
  <meta name="description" content="Профиль, стеклопакет, фурнитура: на что смотреть при выборе окон и как не переплатить.">
  <meta property="og:type" content="article">
  <meta property="og:title" content="Как выбрать окна и не переплатить за лишние камеры">
  <meta property="og:description" content="Разбираем профиль, стеклопакет и фурнитуру на понятных примерах.">
  <meta property="og:url" content="https://site.ru/blog/kak-vybrat-okna/">
  <meta property="og:site_name" content="Окна Юг">
  <meta property="og:locale" content="ru_RU">
  <meta property="og:image" content="https://site.ru/upload/og/kak-vybrat-okna.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Разрез оконного профиля с подписями камер">
  <meta property="article:section" content="Советы">
</head>

Размеры 1200 и 630 здесь условные: они описывают конкретную картинку из примера, а не требование протокола. Подставляйте реальные размеры своего файла.

Руками такую разметку на каждой странице никто не пишет. В CMS её собирает шаблон: og:title берётся из заголовка страницы или отдельного поля, og:description — из мета-описания, og:image — из обложки или главного фото. Важно, чтобы у редактора было поле для своего og:title и картинки на ключевых страницах, а шаблон подставлял запасные значения на остальных.

Влияет ли Open Graph на SEO?

Прямого влияния на позиции у Open Graph нет: это разметка для карточек ссылок, а не для ранжирования. Но поисковики её читают.

Google называет содержимое тегов og:title среди источников, из которых автоматически создаёт ссылку-заголовок в выдаче, — вместе с title, заголовками страницы и текстом ссылок. Если title пустой или неудачный, Google может взять текст из og:title. Яндекс использует Open Graph для передачи данных в свой поиск по видео.

Косвенная польза — в переходах. Аккуратная карточка в канале или чате получает больше кликов, а значит, страница получает больше посетителей и упоминаний. А если на страницу ссылаются с других сайтов, Яндекс учитывает тексты этих ссылок, когда формирует заголовок и описание страницы в выдаче.

Open Graph не заменяет микроразметку Schema.org. Это разные задачи: OG отвечает за карточку при репосте, Schema.org — за данные для поисковых сниппетов. На хорошем сайте есть обе.

Факт. Google использует содержимое тегов og:title как один из источников при автоматическом создании ссылки-заголовка в результатах поиска.

Как проверить превью и обновить старую карточку

Сначала проверьте сам код. Откройте исходный код страницы и найдите теги og: — они должны быть в head, а не в теле, и не должны появляться только после загрузки скрипта: многие сервисы скачивают страницу без выполнения JavaScript. Распознаёт ли разметку машина, покажет «Валидатор микроразметки» в Яндекс Вебмастере: он поддерживает микроформаты, Schema.org, Open Graph, микроданные HTML и RDFa.

Затем проверьте живую карточку: отправьте ссылку себе в Telegram, в «Избранное», и в личные сообщения во ВКонтакте. Так вы увидите превью глазами получателя.

Если вы поменяли картинку или заголовок, а карточка осталась старой, дело в кэше: сервисы запоминают превью ссылки и не перекачивают страницу при каждой отправке. В Telegram обновить карточку можно через официального бота @WebpageBot — отправьте ему адрес страницы. Для остальных сервисов есть проверочный приём: добавьте к адресу любой параметр, например ?v=2. Сервис увидит новый адрес и соберёт карточку заново — так вы убедитесь, что разметка верная, а старая карточка обновится, когда истечёт кэш.

Честная граница: если сайт закрыт от посторонних роботов, например защитой от ботов на уровне хостинга, никакая разметка не поможет. Сервис просто не скачает страницу, и превью не будет вовсе. Проверьте, что страница отдаётся без капчи и проверки браузера.

С чего начать, если разметки нет

Откройте исходный код главной, одной услуги и одной статьи. Если тегов og: нет, начните с шаблона: пусть он ставит четыре обязательных тега и og:description, og:site_name, og:locale на всех страницах. Запасной картинкой сделайте горизонтальный баннер с логотипом.

Затем дайте редактору поля для своего og:title и картинки и заполните их для страниц, которыми вы делитесь чаще всего: главной, ключевых услуг, свежих статей. Отправьте каждую ссылку себе и посмотрите на карточку.

Если сайт собран на старом шаблоне и разметку некуда добавить без программиста, это решается доработкой шаблона. Open Graph, микроразметку и мета-теги мы закладываем в шаблоны при разработке корпоративного сайта — чтобы каждая новая страница получала правильную карточку без ручной работы.

Источники

• Open Graph — Яндекс
• Валидатор микроразметки — Яндекс
• Как управлять выбором ссылок-заголовков в результатах поиска — Google
• Заголовок и описание — Яндекс