Нет времени читать?
Отправить статью на почту

Разметка Open Graph: пример микроразметки страницы и теги

3 апреля 2023
12 мин на чтение
33950
Разметка Open Graph: пример микроразметки страницы и теги
author__photo

Для продвижения сайта в социальных сетях применяют систему разметки Open Graph. С ее помощью можно делать репосты страниц сайта. Это особенно важно для контент-маркетинга – грамотное превью поможет раскрутить бренд.

Что такое разметка Open Graph

Open Graph – это специальный протокол в коде. Он нужен для структурирования информации на сайте и ее внедрения в социальные сети. На некоторых ресурсах этот блок размещен, на другие сайты его внедряют самостоятельно. Это несложно – помощь программиста не понадобится.

Зачем нужен Open Graph

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

Чтобы оценить, какой канал привлекает больше пользователей на сайт, подключите сквозную аналитику Calltouch. Сервис объединит данные всех рекламных площадок, CRM-систем и других маркетинговых инструментов в удобный отчет, чтобы вы делали выводы об эффективности маркетинга на основе полных данных.

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов
Подробнее

Где используется

Разметку разработала команда Facebook* (*продукт компании Meta, которая признана экстремистской организацией в России), но на сегодняшний день ее используют на многих платформах: в Instagram* (*продукт компании Meta, которая признана экстремистской организацией в России), Vk, Twitter, Telegram, Viber и других.

Синтаксис разметки

Open Graph базируется на синтаксисе RDFa, где в <head> прописывают мета-теги. Внутри <meta> указывают атрибуты property и content. Полную информацию по настройке разметки можно найти на сайтах ogp.me, ruogp.me и в справке Яндекс.Вебмастер.

Обязательные свойства

В разметку включают обязательные компоненты:

  • og:title – заголовок страницы. Вписывают название документа или страницы.
  • og:type – вид страницы. Здесь указывают тип информации, например, «article» (cтатья), «video.movie» (фильм).
  • og:url – ссылка на сайт, которую добавляют в социальную сеть. По ней переходят на главную страницу сайта.
  • og:image – изображение для превью. Оно помогает увидеть логотип сайта или сделать рекламную запись более привлекательной. Минимальный размер картинки VK – 160х160 пикселей, Facebook* (*продукт компании Meta, которая признана экстремистской организацией в России) – 600х315 пикселей.

Опциональные свойства

Помимо основных свойств, в запись для репоста добавляют дополнительные. Они не обязательны, но улучшают визуальное оформление разметки. Среди них:

  • og:description – краткое описание текста. Здесь указывают анонс информации, которую пользователь увидит при переходе на сайт. Соцсеть не всегда выводит полный текст – показывает примерно 60 символов и многоточие. 
  • og:site_name – раздел с названием сайта и краткой информацией о нем.
  • og:video – ссылка на страницу с видео.

Изображения

Это своеобразные постеры, которые крепят к записи. Изображение может и не находиться на странице сайта, а располагаться в его директории. В коде разметки указывают ссылку на картинку.

Для разных соцсетей можно задать различные изображения. Это нужно также из-за разных требований к их размерам. Их указывают с помощью тегов с названием соцсетей, например, vk:image, fb:image, twitter:image.

Один размер картинки задают для всех соцсетей с помощью специальных метатегов:

  • og.image.width (ширина);
  • og.image.height (высота).

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

Структурированные метатеги

Метатеги – часть кода страницы между <head>…</head>. Мета-теги OG – это совокупность обязательных и опциональных свойств. В структуре кода они выглядят так:

Массивы

Массивы – это теги с несколькими элементами. В них задают параметры со своими значениями. Массивы применяют для того, чтобы сократить количество полей в коде или передать несколько значений для одного поля. Например, если в репосте нужно указать несколько картинок, создают массив с ссылками на них:

property=“og:image” content = [“ссылка_1”, “ссылка_2”, … “ссылка_n”].

Как внедрять Open Graph

Внедрить Open Graph несложно – в этом помогут подробные сайты с документацией и инструкцией. Сводки есть и в социальных сетях. Чтобы установить разметку, не обязательно знать языки программирования.

Вручную

Для настройки разметки вручную нужно набрать в начале кода на HTML-странице фразу : <html prefix=”og: http://ogp.me/ns#”> . Далее – разместить метатеги, о которых говорилось ранее, в код между <head>…</head>.

С помощью плагинов

Под все системы управления сайтами разработали плагины для настройки разметки. Вот некоторые из них:

Если сайт сделан на Tilda, разметку внедряют на самом сайте через удобный конструктор.

Автоматически при помощи генератора метатегов

Через генератор метатегов делают код самостоятельно. Для этого есть специальная графа – в нее вписывают информацию для кода.

Настройка для Facebook*

(*продукт компании Meta, которая признана экстремистской организацией в России)

Информация по настройке разметки на Фейсбуке* (*продукт компании Meta, которая признана экстремистской организацией в России) представлена на официальном сайте. Для размещения внедрите в код обязательные и дополнительные теги Open Graph.

Настройка для Twitter

У Твиттера есть свои метатеги. Их заполняют по аналогии со стандартными: twitter: title, description, image, url. Вместо тега og:type действует twitter:cart, в котором также нужно указать тип страницы.

Код для Твиттера на примере названия: <meta name=”twitter:card” content=”название”>.

Внедрение Open Graph на WordPress

WordPress – это система управления контентом. С ее помощью редактируют сайт, но сама программа укажет только на неверное написание конкретного слова. Плагин OG покажет логические ошибки в разметке, укажет некорректные данные.

Скачать плагин можно на сайте WordPress.

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

Виджеты
Виджеты Calltouch
Увеличьте конверсию сайта на 30%
Подробнее

Пример микроразметки страницы с помощью Open Graph

Пример настройки кода для этой статьи:

<meta property=”og:title” content=”Микроразметка Open Graph: зачем она контент-маркетингу и как её настроить”>

<meta property=”og:image” content=” <https://drive.google.com/file/d/13b_oaqMprwYsam0Y2v5wZ6nCkAY4j_MR/view?usp=sharing”>

<meta property=”og:type” content=”article”>

<meta property=”og:url” content=”ссылка на сайт размещения”>

<meta property=”og:description” content=”Что такое разметка Open Graph. Для чего нужна микроразметка meta property og. Как правильно внедрять основные метатеги. Настройки Twitter и Facebook* (*продукт компании Meta, которая признана экстремистской организацией в России). Примеры разметки страницы при помощи Open Graph. “>

Как проверить корректность внедрения

Чтобы проверить правильность настройки разметки, воспользуйтесь:

  • Отладчиком репостов на Фейсбуке* (*продукт компании Meta, которая признана экстремистской организацией в России). При указании url сервис покажет описание страницы.
  • Валидатором микроразметки Яндекс. Посмотреть корректность можно в Вебмастере по такому же принципу, как в Facebook* (*продукт компании Meta, которая признана экстремистской организацией в России).
  • Инструментом проверки в Твиттере.

Сервис проверки Open Graph

Open Graph Check – сервис по проверке правильности внедрения метатегов. Чтобы проверить разметку, введите адрес страницы. В ответе система укажет свойства с описаниями.

Заключение

Разметка Open Graph – эффективное средство продвижения в социальных сетях. С помощью Open Graph ссылки на страницы будут кликабельны. При правильной настройке разметка привлечет новую аудиторию на ваш сайт и увеличит спрос на товар или услугу. 

Автор блога Calltouch
Нет времени читать?
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных и получение рекламной информации о продуктах, услугах посредством звонков и рассылок по предоставленным каналам связи.
У вас интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике использования файлов cookie.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить