Размещаете интересные статьи на своем блоге и хотите поведать об этом в соцсетях Вконтакте, Facebook, Одноклассниках и Twitter. А, правильно ли настроен ваш сайт для этого. Одно из необходимых условий использовать микроразметку Open Graph (сокращенно-OG).
Что такое Open Graph - это протокол, с помощью которой фиксируется и структурируется значимая информация о странице, чтобы дальше использовать её в соцсетях.
Зачем использовать Open Graph
Ежели у вас на странице размещены кнопки шеринга, то вы конечно же предполагаете, что ваши посты будут репостить:
И будет неприятно, если в соцсети пост будет смотреться криво (какое нибудь изображение подтянется, а в анонсе неожиданно выскочит текст из титла (title) страницы).
Публикуя контент в соцсетях с применением микроразметки Open Graph сделает посты более аккуратными и красивыми. Без разметки пост может смотреться не очень аккуратно или вообще плохо.
Рандомное либо некорректное изображение, описание отсутствует либо нерелевантно материалу — всего этого может не быть, если применять OG.
Разметка изначально создавалась для Фейсбук, однако сейчас его применяют и другие соцсети ВКонтакте, Twitter, Pinterest, Telegram, LinkedIn, мессенджеры ( Viber, WhatsApp, Slack).
В социальных сетях данная разметка улучшает внешний вид ваших постов — это еще один плюс в копилку стратегии контент-маркетинга и SMM-продвижения. Помимо этого, благодаря разметке Open Graph можно делать блоки с рекомендуемым контентом, если вы применяете Google AdSense для монетизации ресурса.
Как использовать микроразметку Open Graph?
Синтаксис разметки
От разработчиков протокола Open Graph есть официальная информация на русском языке , о его характеристиках, руководстве по применению и ссылки на внедрение — ruogp.me. В справке вебмастера Яндекса все это описано в свободном и сокращенном виде.
Справочники существуют также и для:
- Twitter
- Pinterest
- Facebook
Основные метатеги
Используя теги Open Graph мы показываем социальным сетям, что за информация находится на странице. Их правильное заполнение формирует аккуратную видимость статьи в ленте.
- og:title — прописываем название статьи (заголовок).
<meta property="og:title" content="Как ускорить сайт | mysite.ru">
- og:image — расположение картинки (url), оно будет вместе с анонсом поста.
<meta property="og:image" content="http://mysite.ru/images/kak-uskorit-sajt.jpg">
У Facebook, Twitter и ВКонтакте различные правила к размеру картинок. Для правильного отображения картинки в посте, можно написать настройки по отдельности к любой соцсети, применяя такие теги, как fb:image, vk:image, twitter:image — любая соцсеть сперва просканирует свои теговые обозначения. Единственный недостаток этого способа — надо для разных социальных сетей делать отдельные изображения.
Другой способ — использовать такие атрибуты тега meta, как ширина и высота в пикселях (width и height), позволяющий прописать для всех социальных сетей один размер. На примере внизу размеры картинки прописаны для Фейсбук. Иные социальные сети это изображение будут подстраивать под свои стандарты.
- og:description — небольшое описание поста. Сейчас в ВКонтакте и Facebook он почти не показывается. Но для Телеграма его надо прописывать.
- og:type — в этом месте надо указать тип содержания страницы. Глобальные типы: видео (video), музыка (music), книга (book), статья (article), сайт (website), профайл (profile).
- og:url — тут укажите адрес страницы (url).
<meta property="og:url" content="http://mysite.ru/articles/kak-uskorit-sajt.php">
- og:site_name — в этом месте пропишите название блога. В Facebook будет показываться URL.
<meta property="og:site_name" content="mysite.ru">
Поподробнее о других meta тегов и массивах (несколько элементов тега) можно узнать на официальном ресурсе протокола Open Graph либо в справочнике Яндекса – https://yandex.ru/support/webmaster/open-graph/
Вот как отображается код страницы с использованием микроразметки OG:
<meta property="og:url" content="http://mysite.ru/articles/kak-uskorit-sajt.php">
<meta property="og:title" content="Как ускорить сайт | mysite.ru">
<meta property="og:type" content="article">
<meta property="og:image" content="http://mysite.ru/images/kak-uskorit-sajt.jpg">
<meta property="og:site_name" content="mysite.ru">
<meta property="og:description" content="Различные эффективные способы по повышению скорости загрузки страниц сайта.">
<meta property="article:published_time" content="2019-11-14T01:35:36Z">
<meta property="article:modified_time" content="2021-04-07T04:56:58Z">
<meta property="og:image:secure_url" content="http://mysite.ru/images/kak-uskorit-sajt.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Как ускорить сайт | mysite.ru">
<meta name="twitter:description" content="Различные эффективные способы по повышению скорости загрузки страниц сайта.">
<meta name="twitter:image" content="http://mysite.ru/images/kak-uskorit-sajt.jpg">
Open Graph для видео
Если имеется много увлекательного видео на вашем ресурсе и вы хотите ими поделиться, тогда можете применить OG, чтобы данные передать в сервис Яндекс.Видео. В нашем протоколе OG есть различные meta теги, позволяющие детально описать ролик:
- og:image — ставим адрес (url) картинки видео (заставки);
- og:video — пишем адрес (url) файла либо видеоплеера;
- ya:ovs:adult — ограничение контента 18+ (с двумя значениями — "false" и "true");
- ya:ovs:upload_date — когда загружено (дата);
- og:type — к какой категории относится видеоконтент (эпизод сериала, фильм, прямая трансляция, выпуск ТВ-шоу, клип);
- og:video:type — различные кодеки для видео, которые имеются для формата;
- video:duration — продолжительность в секундах.
Способы внедрения Open Graph
Есть два варианта указать микроразметку:
- Разметка вручную
- в <html> пропишите префикс, указывающий на применение разметки OG:
- между тегами <head> напишите необходимые теги OG.
2. Плагины OG для популярных движков
- OG для Joomla ― extensions.joomla.org/tags/open-graph/
- OG для WordPress ― wordpress.org/plugins/search/open+graph/
- OG для Opencart ― www.opencart.com/index.php?route=marketplace/extension&filter_category_id=20&filter_search=open%20graph
- OG для Битрикс ― marketplace.1c-bitrix.ru/search/?q=Open+Graph
- OG для Magento ― marketplace.magento.com/catalogsearch/result/?q=open%20graph#q=open%20graph&idx=m2_cloud_prod_default_products&p=0&nR%5Bvisibility_search%5D%5B%3D%5D%5B0%5D=1
- OG для Drupal ― www.drupal.org/search/site/open%20graph?f%5B0%5D=ss_meta_type%3Amodule
В Tilda (конструктор сайтов) имеется оптимизация под соцсети.
Если используете движок WordPress, то в настройках плагина "All in One SEO Pack" имеется опция с разметкой Open Graph.
Как проверить микроразметку Open Graph
Существуют три метода проверки OG:
- Валидатор разметки от Яндекса — webmaster.yandex.ru/tools/microtest/
- С помощью инструментов Фейсбук — developers.facebook.com/tools/debug/
- Услуги Open Graph Check — opengraphcheck.com/
Есть проверка и для соцсети Twitter. А ВКонтакте имеется инструмент очищения кеша, если вы обнаружили на странице ошибку после публикации анонса в социальной сети, исправили ее, а пост так и не обновился.
Для размещения постов в соцсетях форма является значимой не меньше, чем содержание. Применение разметки OG даст вам больше посетителей из соцсетей на ваш блог.
Если остались вопросы по статье «Что такое Open Graph? Зачем и как использовать микроразметку Open Graph», то напишите в комментариях.