Попробовать бесплатно
  • 📱 Социальные сети

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

  • 10 декабря 2021
  • 7 мин.
  • 20580

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

Что такое Open Graph?

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

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

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

Джефф Буллас эксперт по цифровому маркетингу и социальным сетям

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

А что если у меня нет Open Graph на сайте? 

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

CTR постов в соцсетях

Пост в соцсетях без Open Graph:

Пост в соцсетях с Open Graph:

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

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

Читайте такжеОптимизация под голосовой поиск

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

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

Иерархия тегов Open Graph

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

og:title

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

Пример для разметки Open Ghaph:

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

og:type

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

Пример для разметки Open Ghaph:

<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, оно будет отображаться как меньшая миниатюра. Это не так привлекательно.

Социальная сетьРекомендуемый размерОсобенности
Facebook1200 x 630 pxСоотношение сторон 1.91:1
Twitter1200 x 675 pxСоотношение сторон 16:9
LinkedIn1200 x 627 pxМакс. размер файла 5MB
Pinterest1000 x 1500 pxВертикальные изображения
VK1200 x 630 pxАналогично Facebook

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

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

Присоединяй­тесь к
Rush-Analytics уже сегодня

7-ми дневный бесплатный доступ к полному функционалу. Без привязки карты.

Попробовать бесплатно
Присоединяй­тесь кRush-Analytics уже сегодня

Пример 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-->
Для вас подарок! В свободном доступе до конца месяца
Получите подборку файлов
Для роста продаж с вашего сайта
Чек-лист по выбору SEO-подрядчика
5 шагов для быстрого роста
конверсии вашего сайта
Как проверить репутацию вашего бренда
Чек-лист по проверке рекламы
в Яндекс-Директ
Получить документы

Уже скачали 1348 раз

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

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

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

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

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

Обязательный чек-лист для проверки Open Graph

✔️ Убедитесь, что все базовые теги (title, type, url, image) присутствуют
✔️ Проверьте корректность отображения превью в основных соцсетях
✔️ Убедитесь, что изображение соответствует рекомендуемым размерам
✔️ Проверьте соответствие og и og содержанию страницы
✔️ Протестируйте работу тегов после обновления содержимого страницы
✔️ Проверьте корректность URL в теге og (должен быть каноническим)
✔️ Убедитесь в корректности отображения спецсимволов в тегах

Плагины для внедрения 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.

Эволюция Open Graph

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

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


Руководитель Rush Analytics Дмитрий Цытрош
Просмотров
20580
Рейтинг
5,0/5
Оценить
Комментариев
0
Комментировать
Оцените статью Оценка анонимная
Добавить комментарий

Ваш адрес email не будет опубликован

Rush Analytics

Другие наши статьи

На страницу статей

Получите 7 дней бесплатного доступа

Здесь вы можете собрать поисковые подсказки из Яндекс, Google или YouTube

Зарегистрироваться