Темы | МаркетингРазметка Open Graph: пример микроразметки страницы и теги 3 апреля 2023 12 мин на чтение34347 контент соцсети гайды контент соцсети гайды Николай БольшаковАвтор блога Calltouch Содержание Нет времени читать? Для продвижения сайта в социальных сетях применяют систему разметки Open Graph. С ее помощью можно делать репосты страниц сайта. Это особенно важно для контент-маркетинга – грамотное превью поможет раскрутить бренд.Что такое разметка Open GraphOpen 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”]. Маркетинг Читайте также: Как правильно использовать push-уведомления Как правильно использовать push-уведомления Как внедрять Open GraphВнедрить Open Graph несложно – в этом помогут подробные сайты с документацией и инструкцией. Сводки есть и в социальных сетях. Чтобы установить разметку, не обязательно знать языки программирования.ВручнуюДля настройки разметки вручную нужно набрать в начале кода на HTML-странице фразу : <html prefix=”og: http://ogp.me/ns#”> . Далее – разместить метатеги, о которых говорилось ранее, в код между <head>…</head>.С помощью плагиновПод все системы управления сайтами разработали плагины для настройки разметки. Вот некоторые из них:WordPress;Joomla;Битрикс;Opencart;Drupal.Если сайт сделан на Tilda, разметку внедряют на самом сайте через удобный конструктор.Автоматически при помощи генератора метатеговЧерез генератор метатегов делают код самостоятельно. Для этого есть специальная графа – в нее вписывают информацию для кода.Настройка для Facebook*(*продукт компании Meta, которая признана экстремистской организацией в России)Информация по настройке разметки на Фейсбуке* (*продукт компании Meta, которая признана экстремистской организацией в России) представлена на официальном сайте. Для размещения внедрите в код обязательные и дополнительные теги Open Graph.Настройка для TwitterУ Твиттера есть свои метатеги. Их заполняют по аналогии со стандартными: twitter: title, description, image, url. Вместо тега og:type действует twitter:cart, в котором также нужно указать тип страницы.Код для Твиттера на примере названия: <meta name=”twitter:card” content=”название”>.Внедрение Open Graph на WordPressWordPress – это система управления контентом. С ее помощью редактируют сайт, но сама программа укажет только на неверное написание конкретного слова. Плагин 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. “> Маркетинг Читайте также: Обновления Calltouch, июнь 2023. Биг Дата, Сквозная аналитика, Чаты, Обратный звонок Обновления Calltouch, июнь 2023. Биг Дата, Сквозная аналитика, Чаты, Обратный звонок Как проверить корректность внедренияЧтобы проверить правильность настройки разметки, воспользуйтесь:Отладчиком репостов на Фейсбуке* (*продукт компании Meta, которая признана экстремистской организацией в России). При указании url сервис покажет описание страницы.Валидатором микроразметки Яндекс. Посмотреть корректность можно в Вебмастере по такому же принципу, как в Facebook* (*продукт компании Meta, которая признана экстремистской организацией в России).Инструментом проверки в Твиттере.Сервис проверки Open GraphOpen Graph Check – сервис по проверке правильности внедрения метатегов. Чтобы проверить разметку, введите адрес страницы. В ответе система укажет свойства с описаниями.ЗаключениеРазметка Open Graph – эффективное средство продвижения в социальных сетях. С помощью Open Graph ссылки на страницы будут кликабельны. При правильной настройке разметка привлечет новую аудиторию на ваш сайт и увеличит спрос на товар или услугу. Николай БольшаковАвтор блога Calltouch