Главная | Блог | Темы | Маркетинг | Разметка Open Graph: пример микроразметки страницы и тегиРазметка Open Graph: пример микроразметки страницы и теги 3 апреля 2023 12 мин на чтение 37 270 контент соцсети гайды контент соцсети гайды Николай БольшаковАвтор блога 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”]. Маркетинг Читайте также: Как компании определить целевой рынок Как компании определить целевой рынок Как внедрять 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. “> Маркетинг Читайте также: Роман Абдуллин: «Авторитарное управление в определенных ситуациях является эффективным» Роман Абдуллин: «Авторитарное управление в определенных ситуациях является эффективным» Как проверить корректность внедренияЧтобы проверить правильность настройки разметки, воспользуйтесь:Отладчиком репостов на Фейсбуке* (*продукт компании Meta, которая признана экстремистской организацией в России). При указании url сервис покажет описание страницы.Валидатором микроразметки Яндекс. Посмотреть корректность можно в Вебмастере по такому же принципу, как в Facebook* (*продукт компании Meta, которая признана экстремистской организацией в России).Инструментом проверки в Твиттере.Сервис проверки Open GraphOpen Graph Check – сервис по проверке правильности внедрения метатегов. Чтобы проверить разметку, введите адрес страницы. В ответе система укажет свойства с описаниями.ЗаключениеРазметка Open Graph – эффективное средство продвижения в социальных сетях. С помощью Open Graph ссылки на страницы будут кликабельны. При правильной настройке разметка привлечет новую аудиторию на ваш сайт и увеличит спрос на товар или услугу. Николай БольшаковАвтор блога Calltouch
