Микроразметка — способ расстановки на веб-странице меток для поисковых роботов, которые сканируют ее содержимое и отбирают информацию для создания превью в списке поисковой выдачи.
Чтобы роботы выбирали не рандомную, а нужную информацию, и пользователи социальных сетей могли делиться статьями и ссылками с красивыми анонсами, используется протокол разметки Open Graph. О нем мы подробно рассказываем в статье.
Что такое Open Graph
Так называют технологию разметки для создания текстово-графических превью. Это превью видят пользователи социальных сетей, когда автор поста публикует в нем ссылку на сайт. С помощью протокола Open Graph можно выбрать картинку для анонса, настроить заголовок, текстовое вступление или описание и ссылку.
Изначально эта технология применялась только в социальной сети Facebook, но в 2025 ее используют и в других популярных мессенджерах и социальных сетях.
Если на сайте не налажена микроразметка, в анонсе может оказаться не то содержимое, которое хотел бы публиковать автор поста или владелец сайта. Например, случайный баннер со страницы или выдернутый из контекста кусок текста.
Можно настроить анонс вручную. Но этим вряд ли будет заниматься кто-то кроме администратора корпоративного аккаунта. Пользователи социальных сетей и мессенджеров обычно обмениваются ссылками в личных целях. Их устраивает то, что ссылки и превью автоматически становятся красивыми. За решение этого вопроса отвечает протокол Open Graph.
Вот основные преимущества микроразметки:
- В посте или в сообщении покажется заголовок и картинка, соответствующие контенту на странице. Показ случайных изображений и фраз исключается.
- Пользователи целиком видят заголовок, а картинка попадает в стандарт социальной сети и не смотрится чужеродно.
- Сниппет смотрится готовым постом, а не ссылкой, которой необходимо описание и изображение.
- Красивое превью положительно влияет на поведенческие факторы и количество кликов.
Микроразметка — не единственная полезная технология. Параллельно с ней можно использовать кнопки «Поделиться», «Лайк» и прочие. Это удобно для блогов, где читатели регулярно обмениваются ссылками на статьи. Если на сайте с блогами внедрена разметка Open Graph, то пользователям не приходится вручную копировать и вставлять ссылки. Процесс обмена контентом ускоряется.
Базовые метатеги Open Graph
Технология предполагает использование метатегов типа «og:». Их вставляют в HTML-код страницы внутри тега <head>. Вот самые популярные метатеги данного протокола:
- og:title — заголовок;
- og:description — описание ссылки, заполняется по желанию;
- og:image — ссылка на изображение, показываемое на превью;
- og:type — категория контента, на который ведет ссылка;
- og:url — собственно ссылка на страницу.
Все перечисленные метатеги (кроме og:description) являются обязательными для заполнения.
Дополнительные метатеги
Чаще всего указываются такие дополнительные свойства:
- og:audio — ссылка на аудиофайл;
- og:video — ссылка на видеофайл;
- og:description — описание;
- og:locale — указатель на локацию;
- og:site_name — имя сайта, которое будет показываться на всех страницах.
Свойство og:description позволяет разместить мини-описание из 1-2 предложений. Самый удачный пример сниппета с информативным og:description — это сниппет из Телеграма, который не ограничивает количество символов так жестко, как это делают VK и Фейсбук.
Свойство og:site_name предназначен для размещения в сниппете имени сайта и пары слов для его описания. Этот метатег обрабатывается не каждой социальной сетью. Так, на Фейсбуке показывается только URL сайта, а в Телеграме превью содержит все, что прописано в og:site_name.
Свойства og:image, og:video и og:audio позволяют указывать некоторые метаданные. Рассмотрим их на примере свойства для картинки:
- og:image:secure_url — дополнительный URL для страниц с протоколом HTTPS;
- og:image:type — формат картинки;
- og:image:width — ширина картинки;
- og:image:height — высота картинки.
Те же самые метаданные можно прописать для видеофайлов. У звуковых файлов по понятным причинам нет метаданных, касающихся их длины и ширины.
Как не запутаться с размерами картинок
Социальные сети имеют разные стандарты размеров картинок. Самый удачный вариант — это подготовка картинки нужного размера для каждой из популярных социальных сетей.
Предположим, блогер выкладывает статью на своей площадке и собирается опубликовать ссылку на нее в Твиттере, Фейсбуке и VK. Чтобы превью получились красивыми во всех трех случаях, ему понадобится три отдельных картинки. Каждая из упомянутых социальных сетей «поймет», какое изображение выбрать, если блогер пропишет в Open Graph микроразметке следующие метатеги:
- vk:image;
- fb:image;
- twitter:image.
В превью, которое покажется в VK, отобразится исключительно метатег vk:image. Два других его не коснутся. То же верно для Твиттера и Фейсбука.
Блогер может решить эту задачу и другим способом. Например, выставить общий размер картинки на превью для всех социальных сетей. Это может сделать через теги og:image:width и og:image:height. Допустим, блогер из нашего примера собирается репостнуть свою статью в Фейсбуке. Его теги, описывающие размер картинки, будут выглядеть так:
<meta property=»og:image:width» content=»1200″/>
<meta property=»og:image:height» content=»630″/>
Под две другие площадки — Твиттер и VK — картинка будет подрезана соответственно их требованиям. Предусмотрительный блогер учтет этот нюанс и не будет размещать в критических зонах текст или самые важные участки картинки.
Микроразметка Open Graph для работы с видеофайлами
Видеохостинги и прочие интернет-площадки, на которых пользователи выкладывают большое количество видеороликов, могут применять эту технологию для улучшения ранжирования файлов. Существует множество специальных метатегов, подробно описывающих ролик:
- og:title — название ролики длиной до тысячи символов;
- og:url — адрес страницы, где выложен ролик;
- og:video — путь к проигрывателю видеороликов или к самому файлу;
- og:image — ссылка на изображение, которое играет роль превью для ролика;
- og:description — описание видео длиной до тысячи символов;
- ya:ovs:upload_date — день, месяц, год и точное время загрузки ролика на сайт;
- ya:ovs:adult — значение «true» для видео из категории «18+», значение «false» — для видео без ограничений по возрасту;
- video:duration — продолжительность ролика в секундах;
- og:type — категория ролика;
- og:video:type — кодеки для воспроизведения конкретного формата роликов.
Как использовать Open Graph
Это можно делать вручную и с помощью плагинов и сервисов для CMS. Рассмотрим оба варианта.
Вручную
Чтобы настроить микроразметку вручную, необходимо вставить в начале HTML-кода страницы строку <html prefix=”og: http://ogp.me/ns#”>. Эта строка указывает на то, что в коде будет применяться технология Open Graph. Все основные метатеги и дополнительные свойства впишутся между открывающим и закрывающим тегом <head>.
С использованием плагинов
Для большинства распространенных систем управления контентом на сайтах уже есть плагины, помогающие работать с микроразметкой. Плагины можно скачать для следующих CMS:
Если сайт собран на Тильде, то разбираться с плагинами или вручную прописывать метатеги Open Graph не нужно. В Тильде уже предусмотрена оптимизация под социальные сети.
Полезные сервисы для работы с микроразметкой
В интернете можно найти много сервисов для автогенерации кода под конкретную страницу. Пример такого сервиса — бесплатный генератор метатегов. В предлагаемые поля необходимо скопировать ссылки и вставить текст. Сервис выдаст готовый код. Можно ввести дополнительные данные: имя сайта, язык страницы, видеоролик с Ютуба, идентификатор аккаунта на Фб. Из метаданных сервис предлагает указать автора текста, время появления материала на сайте, его категорию и теги.
Еще один бесплатный генератор — создатель картинок с заголовком, описанием и логотипом. Для получения картинки необходимо вставить ссылку на фоновое изображение, придумать заголовок и описать материал одним-двумя предложениями. Сервис продемонстрирует готовый вариант и сгенерирует блок для вставки в HTML-код страницы.
Проверить, используется ли разметка Open Graph на интересующей странице, можно с помощью Анализатора контента. Сервис также умеет оценивать контент, анализировать поведенческие факторы, проверить технические характеристики и адаптируемость страницы.
Подсмотреть микроразметку конкурентов можно с помощью сервиса, который парсит метатеги.
Как проверить правильность микроразметки
Убедиться в правильности настройки разметки Open Graph можно с помощью таких сервисов:
- Отладчик репостов от Фб. Когда пользователь вводит URL, сервис-отладчик на Фейсбуке показывает описание страницы.
- Валидатор разметки от Яндекса. Для проверки правильности микроразметки необходимо зайти в панель для веб-мастеров и указать URL, чтобы увидеть описание страницы.
- Сервис для проверки от Твиттера.
Репосты в социальных сетях часто приносят дополнительный трафик на сайт. На таких площадках высоко ценится визуальная привлекательность постов, за счет которой можно «цеплять» внимание большого количества пользователей во время скроллинга. Если пост выглядит сомнительно, пользователи идут мимо. Чтобы увеличить охваты, имеет смысл пользоваться микроразметкой Open Graph. Эта технология гарантированно делает ссылки на сайт красиво оформленными и поэтому кликабельными.
