Как работать с Open Graph?

145
43

Поисковые системы обращают внимание на поведенческие факторы, в частности — внимание к сайту в социальных сетях. В свою очередь, протокол Open Graph позволяет использовать возможности соцсетей при поисковой оптимизации в полную силу. К тому же, повышает кликабельность ссылок на сайт, которыми делятся пользователи в своих профилях.

Протокол Open Graph создан специалистами Facebook. Зачем его использовать? Чтобы сделать предпросмотр (превью) веб-страниц в социальных сетях смотрибельным. А в глобальном смысле — для воплощения идеи семантической паутины. То есть стандартизации всей информации во Всемирной паутине, чтобы она стала пригодна для автоматической обработки.

Зачем внедрять Open Graph

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

Протокол также используется для передачи данных в Яндекс.Видео и помогает качественнее работать функции «Блоки рекомендуемого контента» в AdSense.

Давайте подробнее рассмотрим, что произойдет, если не внедрить Open Graph на своем сайте.

Вот некоторые образцы предпросмотра в Facebook веб-страниц без разметки:

Образец предпросмотра веб-страницы афишы без разметки

Образец предпросмотра веб-страницы строительства и дизайна без разметки

Образец предпросмотра веб-страницы сайта магазина сантехники без разметки

Facebook не понимает, какие элементы подгружать в предпросмотр, поэтому берет любую картинку со страницы (может взять даже рекламный баннер). К тому же, полностью загружает заголовок.

Теперь примеры страниц с разметкой:

Пример страницы с разметкой портала Информбюро

Пример страницы с разметкой сайта Странаюа

Пример страницы с разметкой сайта Project liga

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

Важно: заголовок и описание, по желанию, могут отличаться от title и description веб-страницы.

Open Graph позволяет собственноручно сформировать желаемый сниппет для превью страницы в соцсетях.

Основные теги протокола Open Graph

Разметкой предусмотрено много свойств (тегов). Основные:

  1. og:title — заголовок, который характеризует страницу и отображается внешне.

Здесь title

  1. og:type — тип основного содержимого страницы. Например:
  • видео: <meta property='og:type' content="video.movie" />;
  • музыка: <meta property='og:type' content="music.song" />;
  • статья: <meta property='og:type' content="article" />.

  1. og:image — URL изображения, которое отобразится в предпоказе.

Здесь image

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

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

Пример кода, если задействовать только основные свойства:

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

<head>

<meta property="og:title" content="Example title" />

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

<meta property="og:url" content="http://www.site.com/example" />

<meta property="og:image" content="http://site.com/images/example.jpg" />

...

</head>

...

</html>

Рассмотрим не основные, но важные и полезные теги при продвижении:

  1. og:site_name — задает имя сайта, которое отображается в предпоказе.

Здесь site name

  1. og:description — описание страницы (элемент подгружается не всегда. Иногда, к примеру, Facebook может не показывать описание в превью).

Здесь description

Вот все теги, которые влияют на внешний вид предпросмотра:

Еще раз внимательно смотрим на все теги, которые влияют на внешний вид предпросмотра

Дополнительные необязательные теги

  1. og:locale — задает язык и регион в формате «язык_РЕГИОН». Например:

<meta property="og:locale" content="ua_UA" />

Если свойство не задано, по умолчанию язык и регион «en_US».

Код языка нужно указывать по ISO 639.2, а страны по ISO 3166-1.

  • og:audio – указывает URL аудиофайла;
  • og:video – указывает URL видеофайла.

Например:

<meta property="og:video" content="http://site.com/video/example.mp3" />

Как использовать дополнительные свойства тегов

Теги могут содержать дополнительные свойства. Например, у og:image такие:

  • og:image:secure_url — задает URL картинки, который работает на HTTPS;
  • og:image:width — число пикселей в ширину;
  • og:image:height — число пикселей в высоту;
  • og:image:type — задает MIME тип изображения (список существующих MIME-типов).

В коде это выглядит так:

<meta property="og:image" content="http://site.com/example.jpg" />

<meta property="og:image:secure_url" content="https://site.com/example.jpg" />

<meta property="og:image:type" content="image/jpeg" />

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

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

Если необходимо задать разрешение сразу для нескольких изображений, можно использовать массив. Дополнительное свойство присваивается первому родительскому тегу сверху.

Например, есть три картинки с разным разрешением image1, image2, image3. Код будет выглядеть следующим образом:

<meta property="og:image" content="http://site.com/image1.jpg" />

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

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

<meta property="og:image" content="http://site.com/image3.jpg" />

<meta property="og:image" content="http://site.com/image2.jpg" />

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

То есть, у image1 размер 800х600, у image2 500 пикселей в высоту, а ширина не указана,

у image3 размеры не указаны,

Разметка позволяет подстраховаться, указав, например, альтернативную картинку. Если первый URL будет недоступен, то в предпросмотр подгрузится вторая картинка. Очередь (приоритет) — сверху вниз.

Например:

<meta property="og:image" content="http://site.com/example.jpg" />

<meta property="og:image" content="http://site.com/example1.jpg" />

Если картинка http://site.com/example.jpg недоступна, подгрузится следующая http://site.com/example1.jpg.

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

Существуют несколько способов внедрения протокола Open Graph на сайте.

Первый и легкий — использовать плагины для CMS (если сайт сделан на CMS, для которой существуют такого рода плагины). Например, для WordPress и Для Joomla!.

Второй вариант посложнее — внедрить протокол напрямую в код страниц.

Сначала нужно обозначить, что страница использует протокол Open Graph. Для этого в открывающем теге <html> указать атрибут prefix со значением my_namespace: http://example.com/ns#

Выглядит это так: <html xmlns:og="http://ogp.me/ns#">

Сами же свойства (теги) нужно располагать между открывающим <head> и закрывающим </head>, то есть внутри элемента <head>.

Способ подойдет сайтам, которые не используют CMS или же используют, но нет подходящего плагина.

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

Выводы

Open Graph —инструмент для формирования превью, который поддерживают большинство социальных сетей и мессенджеров. С помощью Open Graph можно:

  1. Рекламировать свой сайт в социальных сетях, создавая корректные превью страниц.
  2. Привлекать трафик из соцсетей кликабельными превью.
  3. Формировать не случайный, а продуманный предпоказ страницы.
  4. Наращивать поведенческие факторы и популярность среди пользователей соцсетей, которые будут репостить, лайкать и комментировать красивые превью.

Существуют несколько способов внедрения протокола Open Graph на сайте:

  1. Первый и легкий — использовать плагины для CMS (если сайт сделан на CMS, для которой существуют такого рода плагины). 
  2. Второй вариант посложнее — внедрить протокол напрямую в код страниц.
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (10 )

  1. 0
    3 месяца назад

    Добавил на сайт разметку. В description вывелось только 55 символов, хотя во многих статьях пишут, что можно добавлять 160 символов и больше.

    На другом урле вообще не вывелся дескрипшен при посте в ФБ, хотя инструмент проверки показывает его)

    Не сталкивались с подобным?

    • 0
      Matt Cutts
      3 месяца назад
      В ходе наблюдений не было выявлено закономерностей загрузки описания, т. е. Facebook сам решает на каких типах страниц и когда показывать/не показывать полный desription, заданный с помощью OpenGraph.

      Поэтому даже правильная реализация OpenGraph на странице не гарантирует что Facebook полностью отобразит description.

      • 0
        Александр Чуваткин
        месяц назад

        Возможно влияет еще наличие картинки. На страницах без картинок desription получился около 160 символов.

  2. 0
    4 месяца назад

    А можно использовать одновременно 2 протокола: schema.org и Open Graph? У них ведь разные возможности?

    • 0
      Елена
      4 месяца назад

      Использовать микроразметку по словарям schema.org и Open Graph вместе на одной странице можно.

      Отличие заключается в том, что разметку по schema.org применяют, чтобы поисковые боты имели дополнительную информацию о содержимом страницы (это приводит к появлению/изменению различных дополнительных элементов в сниппете на странице поисковой выдачи). Дополнительно на эту тему можно почитать в этой статье.

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

  3. 0
    4 месяца назад
    Для вордпресс хорош Yoast SEO умеет многое также и опенграф настроить можно под каждый пост или страницу
    • 0
      Мухамед-Канапия Жаксылык
      месяц назад
      Да, вариант применения плагина комплексного решения SEO для WordPress выгоден тем, что не нужно применять много разных дополнений, так как все собрано в одном.
  4. 0
    4 месяца назад

    Спасибо. Все по теме - удобно передавать разработчикам, которые еще не внедряли.

    Вот только указанный "оф. плагин" для WP - уже не работает с апреля:
    https://wordpress.org/plugins/facebook/
    "This plugin was closed on April 5, 2018 and is no longer available for download. Reason: Licensing/Trademark Violation."

Чтобы оставить комментарий, необходимо авторизироваться

Подписаться

на самую полезную рассылку по интернет-маркетингу

Самое

обсуждаемое популярное читаемое

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