Our website collects cookies and IP address, for the convenience of your work. If you do not want this data to be processed, then you must leave the site.
Согласен
Главная / Блог / 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-заголовок, который отобразится в названии страницы в соцсетях. Старайтесь, чтобы заголовок был максимум информативным и не слишком длинным.

Разметка Open Graph пример:

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

og:type

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

Разметка Open Graph пример:

<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.

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

Читайте также: Как составить мета теги

Поделиться
Еще не зарегистрированы? Еще не зарегистрированы? 2018-11-19T14:57:04+03:00 2020-12-17T12:01:22+03:00 https://www.rush-analytics.ru/sites/default/files/blog/open-graph-og.png
Виталий, специалист Rush Analytics
Rush Agency
Оцените статью по 5-бальной шкале
4.5 из 5 на основе 22 оценок
Интересно почитать

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

Юлия Туловская - специалист отдела клиентской..
5 мин · 1 Ноя. 2017
Будь в курсе первым!