Что такое разметка Open Graph и как ее внедрить без программиста

«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.


Разбираемся, что это за разметка и как ее самостоятельно настроить.


Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика


Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.


Что такое разметка Open Graph и как ее внедрить без программиста

Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:


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

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


Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:


Что такое разметка Open Graph и как ее внедрить без программиста

А так выглядит репост этого же материала во ВКонтакте:


Что такое разметка Open Graph и как ее внедрить без программиста

Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.


Репост в Фейсбук статьи без внедренной разметки:


Что такое разметка Open Graph и как ее внедрить без программиста

А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):


Что такое разметка Open Graph и как ее внедрить без программиста

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:


Что такое разметка Open Graph и как ее внедрить без программиста

Что можно сделать с помощью Open Graph


С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:


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

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:


Что такое разметка Open Graph и как ее внедрить без программиста

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


Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.


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


Полная документация по разметке Open Graph доступна в нескольких источниках:


  • ogp.me — англоязычная документация;
  • ruogp.me — документация на русском языке.

Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.


Также есть руководства по применению Open Graph для отдельных соцсетей:



По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.


Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.


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


Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:


  • og:title — заголовок статьи или страницы. Текст заголовка указывается в атрибуте content

<meta property="og:title" content="Как быстро и бесплатно сделать инфографику: 4 онлайн-сервиса с доступным функционалом"/>

Что такое разметка Open Graph и как ее внедрить без программиста

  • og:type — тип объекта. Например, article, book, video.movie и проч. Полный перечень — здесь. В зависимости от указанного типа могут потребоваться другие свойства, помимо четырех обязательных. Например, если на странице размещена статья, укажите в коде разметки такую строку:

<meta property="og:type" content="article" />

  • og:url — канонический URL, по которому доступен указанный объект. Например, если пользователь расшарит не каноническую страницу (например, страницу пагинации), в соцсети все равно появится ссылка на основную страницу, прописанную в og:url.

<meta property="og:url" content="http://www.site.ru/canonicalpage/" />

  • og:image — здесь указываем, какую картинку нужно подтянуть к публикации при репосте. В атрибуте content указывается URL изображения. Обратите внимание! При использовании разметки изображение может даже не находиться в статье или на странице. Его можно разместить в любой директории сайта, а в теге og:image указать ссылку на него. При репосте соцсети проигнорируют картинки на странице, а подтянут указанное изображение из нужной директории.

<meta property="og:image" content="https://blog.promopult.ru/wp-content/uploads/2019/02/checklist01-1200x630.png"/>

Что такое разметка Open Graph и как ее внедрить без программиста

Как быть с размерами картинок


У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:


  • vk:image
  • fb:image
  • twitter:image

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.


Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:


<meta property="og:image:width" content="1200"/>

<meta property="og:image:height" content="630"/>

В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.


На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:


Что такое разметка Open Graph и как ее внедрить без программиста

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:


Что такое разметка Open Graph и как ее внедрить без программиста

Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.


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


Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:


  • og:description — текст краткого описания страницы или статьи (анонса). Во ВКонтакте и Фейсбуке сейчас отображается ограниченное количество символов описания. Но если вы публикуете ссылки на сайт в Телеграме, обязательно заполняйте этот тег.

<meta property="og:description" content="Еще не добавили чат в поиске Яндекса? Стоит сделать это. Но только в том случае, если вы готовы быстро реагировать на вопросы из чата и вообще — разговаривать с вашими покупателями. Рассказываем в деталях, как и зачем подключать чат в поиске."/>

Вот так description отображается в публикациях в Фейсбуке:


Что такое разметка Open Graph и как ее внедрить без программиста

А так — в Телеграме:


Что такое разметка Open Graph и как ее внедрить без программиста

  • og:site_name — здесь можно указать название сайта и пару слов, описывающих его содержимое или назначение. Данные из этого параметра используются не везде. Например, при репосте в Фейсбук отображается просто URL сайта:

<meta property="og:site_name" content="Блог PromoPult о развитии сайта и привлечении клиентов из интернета"/>

Что такое разметка Open Graph и как ее внедрить без программиста

А в Телеграме корректно подтягивается содержимое тега og:site_name:


Что такое разметка Open Graph и как ее внедрить без программиста

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.


Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:


Что такое разметка Open Graph и как ее внедрить без программиста

Публикуете много видео? Используйте Open Graph


Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.


Больше информации об этом — в справке Яндекса.


В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:


  • og:title — название видео, здесь можно указать до 1000 символов;
  • og:url — URL страницы с видео;
  • og:video — путь к видеоплееру или файлу;
  • og:image — ссылка на картинку, которая должна использоваться как заставка видео;
  • og:description — описание ролика (от 150 до 1000 символов);
  • ya:ovs:upload_date — дата и время загрузки;
  • ya:ovs:adult — в этом мета-теге нужно указать, является ли ваш ролик контентом «для взрослых». Если да, укажите значение «true», если нет — «false»;
  • video:duration — длительность видео (указывается в секундах с округлением до целого числа);
  • og:type — категория видео;
  • og:video:type — доступные кодеки для данного формата видео.

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


Вручную


Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:


<html prefix="og: http://ogp.me/ns#">

Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.


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


Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).


По ссылкам ниже можно найти плагины для вашей CMS:



А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.


Пример внедрения Open Graph на WordPress


Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.


Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.


Что такое разметка Open Graph и как ее внедрить без программиста

После активации перейдите в модуль «Социальные мета» в меню плагина:


Что такое разметка Open Graph и как ее внедрить без программиста

Укажите настройки:


  • главной страницы;
  • изображений;
  • типов данных;
  • укажите отдельные настройки для Twitter.

Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».


Что такое разметка Open Graph и как ее внедрить без программиста

Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.


Что такое разметка Open Graph и как ее внедрить без программиста

Вот вид размеченной ссылки в ленте Facebook:


Что такое разметка Open Graph и как ее внедрить без программиста

Примерно по такому же принципу работают другие плагины.


Как проверить корректность разметки Open Graph


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


Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.


Что такое разметка Open Graph и как ее внедрить без программиста


Что такое разметка Open Graph и как ее внедрить без программиста


Что такое разметка Open Graph и как ее внедрить без программиста

Также есть отдельный инструмент для проверки микроразметки для Твиттера.


Что такое разметка Open Graph и как ее внедрить без программиста

Контролируйте внешний вид репостов с помощью Open Graph


Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.


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


Для получения же большего охвата используйте возможности таргетированной рекламы. В системе PromoPult вы можете запустить рекламу в myTarget (Одноклассники, проекты Mail.ru) и ВКонтакте из единого интерфейса. Комиссия при этом 0%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.