Pull to refresh
32.91
Rating
Click.ru
Инструменты для РРС и SMM

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

Click.ru corporate blogInternet marketingContent-marketingSearch engine optimizationSocial networks and communities
Что такое разметка 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%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.

Tags:Open GraphрепостыразметкасоцсетиFacebookTwitterВКонтакте в соцсети
Hubs: Click.ru corporate blog Internet marketing Content-marketing Search engine optimization Social networks and communities
Total votes 5: ↑4 and ↓1 +3
Views29.7K

Comments 9

Only those users with full accounts are able to leave comments. Log in, please.

Top of the last 24 hours

Information

Founded
Location
Россия
Website
click.ru
Employees
101–200 employees
Registered
Representative
Александр Шипин