Главная / Блог / Open Graph - панацея для соцсетей
Поделиться

Open Graph - панацея для соцсетей

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

Что такое Open Graph?

Open Graph (OG) - это специальный веб-протокол, разработанный командой Facebook, который c помощью специальных тегов позволяет веб-странице передать социальным сетям нужную информацию о себе и улучшить формат отображения.

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

С Open Graph ваш контент становится более ярким и привлекательным в новостных лентах социальных сетей, более кликабельным. А значит больше людей увидит, щелкнет и поделится им. На сегодняшний день, протокол поддерживается всеми известными соцсетями и мессенджерами: Facebook, Вконтакте, Однокласники, Twitter, Linkedin, Pinterest, Skype, Whatsapp, Viber, Telegram.

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

Вот так выглядит пост в соцсетях без Open Graph:

Пост с прописанной микроразметкой Open Graph:

Думаю, вы уже убедились, что Open Graph вещь полезная и настоящая панацея для соцсетей!

Перейдем теперь к структуре и внедрению OG - из чего состоит разметка и как ее прописать на веб-страницах?

Структура и внедрение Open Graph

Теги Open Graph добавляются как свойство в HTML-тег <meta><meta property=”og:тег” content=”значение”> и помещаются в секцию: <head>...</head>

Рассмотрим основные теги:

og:title

Аналогичен html-тегу <title>. В нем указываете SEO-заголовок, который отобразится в названии страницы в соцсетях. Старайтесь, чтобы заголовок был максимум информативным и не слишком длинным.

Пример:

<meta property = "og:title" content = "Open Graph - панацея для соцсетей" />

og:type

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

Пример:

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

og:url

Указываете канонический URL-адрес страницы. 

Пример:

<meta property = "og:url" content = "https://mywebsite.com/blog/example.html" />

og:description

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

Пример:

<meta property = "og:description" content = "Что такое микроразметка Open Graph и как прописать на веб-странице? Читайте в блоге Rush Analytics" />

og:image

Указывается URL-адрес изображения, которое будет выводится в качестве обложки веб-страницы в соцсетях. Поддерживаются .png, .jpeg и .gif расширения.

Пример:

<meta property = "og:image" content = "http://www.mywebsite.com/how-to-make-og.jpg" />

Рекомендуемое разрешение для Open Graph - 1200 x 630 px. При таком размере миниатюра будет большой и хорошо выделяться. Не рекомендуется превышать вес изображения >5 Мб.

Если ваше изображение меньше 600 x 315 px, оно будет отображаться как меньшая миниатюра. Это не так привлекательно.

Также у этого тега есть связанные теги, которые передают дополнительные свойства:

  • og:image:url - задается URL альтернативного изображения;
  • og:image:secure_url  - задается URL изображения по протоколу https;
  • og:image:width — задается число пикселей в ширину изображения;
  • og:image:height — задает число пикселей в высоту изображения;
  • og:image:type — задается тип изображения.

Примеры:

<meta property = "og:image" content = "http://www.mywebsite.com/how-to-make-og.jpg" />
<meta property = "og:image:url" content = "http://www.mywebsite.com/how-to-make-og2.jpg" />
<meta property = "og:image:secure_url" content = "https://www.mywebsite.com/how-to-make-og.jpg" />
<meta property = "og:image:type" content = "image/png" />
​<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="349" />

Другие OG-теги

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

  • og:locale - задает языковые данные для страницы в формате язык_страна (используется ISO 639.2 и ISO 3166-1 соотвественно)
  • og:site_name - указывается название сайта;
  • og:audio - указывается URL аудио объекта;
  • og:video - указывается URL видео объекта.

Примеры:

<meta property = "og:locale" content = "ru_RU" />
<meta property = "og:site_name" content = "Mywebsite.com" />
<meta property = "og:audio" content = "https://wwww.mywebsite.com/example.mp3" />
<meta property = "og:video" content = "https://www.mywebsite.com/video.avi" />

Все теги можно просмотреть на официальном сайте Open Graph.

Пример Open Graph на веб-странице

<!--OPEN GRAPH-->
<meta property = "og:title" content = "Open Graph - панацея для соцсетей" />
<meta property = "og:type" content = "article" />
<meta property = "og:url" content = "https://www.rush-analytics.ru/blog/open-graph-panaceya-dlya-socsetey" />
<meta property = "og:image" content = "/site/all/themes/stat/front/img/emailimages/opengraph_og.png" />
<meta property = "og:image:type" content = "image/png" />
<!--OPEN GRAPH-->

Инструмент проверки Open Graph

Контролировать работу разметки Open Graph на своем сайте можно с помощью отладчика Facebook.

У него две очень полезные функции:

  1. Во-первых, когда вы вводите URL страницы, которую хотите разместить в соцсетях, он покажет как будет выглядеть страница, а также любые ошибки и предложения для тегов OG, если таковые имеются. 
  2. Во-вторых, он очищает кеш Facebook. Это очень важный момент. Представьте себе следующее: вы публикуете страницу на Facebook, но затем видите ошибку в миниатюре или в заголовке, возвращаетесь на свой сайт и редактируете теги OG, затем публикуете снова в Facebook. Но ничего не произойдет. Миниатюра останется прежней. Это из-за кеша. Отладчик Facebook позволяет обновить этот кеш на ваших URL, поэтому не забудьте использовать при необходимости.

Также можете ознакомиться с рекомендациями Facebook по OpenGraph.

Плагины для внедрения Open Graph

Если у вас нет базовых навыков в веб-программировании и вы не понимаете как добавить Open Graph на свой сайт - вам помогут специальные плагины.

Для Wordpress оптимальным решением может будет многофункциональный плагин Yoast SEO. При редактировании страницы, у вас появится возможность добавить Open Graph информацию для Facebook и Twitter:

Плагины Open Graph для CMS Joomla можно просмотреть в репозитории Joomla и подобрать на свой вкус.

Под Drupal существует специальный модуль Open Graph meta tags.

Выводы

Однозначно, протокол Open Graph является очень полезным элементом для каждого веб-сайта.

OG теги позволяют:

  • повысить релевантность контента и поднять интерес к вашему сайту в соцсетях
  • увеличить количество лайков и перепостов
  • привлечь новых подписчиков
  • улучшить кликабельность
  • получать трафик на сайт

Стоит отметить, что существуют и другие виды микроразметки, которые выполняют похожую функцию и передают структурированные данные не только в Facebook, но и в поиск Яндекс/Google - это Schema.org. Есть также отдельная разметка для Twitter - Twitter Cards.

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

Поделиться

Интересно почитать

7 критериев хорошего домена

Доменные имена - это недвижимость в Интернете. Правильно подобранное имя станет краеугольным камнем успеха вашего сайта. Но как их идентифицировать? Ниже вы найдете 7 критериев, на которые стоит полагаться при выборе доменных имен.
Юлия Туловская - специалист отдела клиентской поддержки Rush Analytics · 5 мин
1 Ноя. 2017
Будь в курсе первым!