сео новости

Все самые главныесео новости в одном месте!

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

open-graf Микроразметка Open Graph

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

Кнопки «Поделиться»

Специальные кнопки, такие как «Мне нравится», «Поделиться», «Share» или «Like», позволяющие распространять контент в любимых соцмедиа полезны для обеих сторон. Пользователям не нужно копипастить адресную строку понравившейся странички для размещения ее, а владельцам сайтов это позволяет увеличить трафик и распространить необходимую информацию.

Чаще всего подобные кнопки можно увидеть в блогах. Принимая решения о размещении, в первую очередь, необходимо поставить себя на место пользователя. Большинство подписчиков или просто посетителей сайта сделают репост интересной и полезной статьи, нежели каталога товаров. Хотя некоторые товары также заслуживают внимания – многие пользователи популярной социальной сети Pinterest сохраняют понравившиеся рецепты или мастер классы с яркими фотографиями, чтобы поделиться с подписчиками или сохранить себе на будущее.

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

Проблемы с репостами в социальных платформах

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

Протокол Open Graph от Facebook

Open Graph способствует интеграции между Facebook и другими веб-сайтами, позволяя им превращаться в богатые «графические» объекты с той же функциональностью, что и другие объекты Facebook. Проще говоря, возможен некоторый контроль над тем, как информация перемещается со стороннего веб-сайта на социальную сеть, когда страницей делятся или ставят «нравится», настраивая картинку в превью, а также корректную информацию.

Для чего необходим Open Graph

  • Посетители увидят правильный текст и картинку, настроенные веб-разработчиком.
  • Сниппет оформлен в виде поста, который можно репостнуть в соцмедиа, а не в виде ссылки, требующей дополнительного дескрипшена и изображения.
  • Установленное превью имеет более привлекательный вид, что позитивно влияет на поведенческие факторы, и улучшает показатели CTR.

Open Graph поддерживается практически всеми популярными соцсетями и мессенджерами.

Рассмотрим, как оптимизировать Open Graph.

Основные метатеги Open Graph

Основные метатеги Open Graph

Протокол Open Graph включает в себя метатеги, основные из них:

  1. og:title – название контента;
  2. og:description – описание контента, не требует обязательного заполнения;
  3. og:image – ссылка на изображение, необходимое для иллюстрации контента;
  4. og:type – тип добавляемого контента, например, «article» – статья, «movie» – кино и т.д.;
  5. og:url – ссылка на саму страничку, которая опубликуется в социальной платформе.

<meta property="og:title" content="Заголовок">

<meta property="og:image" content="<img class=" redactor-autoparser-object"="" src="https://site.ru...png">">

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

<meta property="og:url" content="https://site.ru">

<meta property="og:description" content="Описание ">

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

Пример применения Open Graph

Проиллюстрировать практическое применение Open Graph с помощью следующей статьи.

<meta property="og:title" content="Как настроить редирект самостоятельно">

 <meta property="og:image" content="<img class=" redactor-autoparser-object"="" src="/https://studio-maksi.ru/images/articles/91/b2ap3_large_seo-moz1.jpg">">

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

<meta property="og:url" content="https://studio-maksi.ru/poleznyj-material/14-prognozov-o-razvitii-seo-industrii-ot-moz-na-2019-god">

<meta property="og:description" content="Команда сео-специалистов Moz сделала свои прогнозы о развитии сферы в наступившем году и недалеком будущем. Что же ожидает сео-мир в ближайшее время . ">

Дополнительно можно установить специальное изображение для социальных платформ, например для блога Twitter, добавив следующие теги:

<meta property="twitter:card" content="summary_large_image">

 <meta property="twitter:url" content="https://studio-maksi.ru/poleznyj-material/14-prognozov-o-razvitii-seo-industrii-ot-moz-na-2019-god">

 <meta property="twitter:title" content="14 прогнозов о развитии сео-индустрии от Moz на 2019 год">

 <meta property="twitter:description" content="Команда сео-специалистов Moz сделала свои прогнозы о развитии сферы в наступившем году и недалеком будущем. Что же ожидает сео-мир в ближайшее время ">

 <meta property="twitter:image" content="<img class=" redactor-autoparser-object"="" src="https://studio-maksi.ru/images/articles/91/b2ap3_large_seo-moz1.jpg">">

<meta property="twitter:image:width" content="800">

<meta property="twitter:image:height" content="400">

<meta property="twitter:site" content="prcyru">

Сервисы и плагины, сопряженные с Open Graph

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

Как разработать код Open Graph автоматически?

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

Просмотреть страницу конкурирующих сайтов на наличие микроразметки можно с помощью сервиса парсер мегатегов Open Graph.

Если самостоятельная работа над микроразметкой сайта владельца не прельщает, можно воспользоваться специальными плагинами:

Как проверить микро-разметку Open Graph?

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

Проверить основные параметры разметки, а также основные характеристики сайта, такие как посещаемость, юзабилити, контент определенной страницы можно с помощью сервиса «Анализ контента».

Google готовит запуск обновлений в поисковике
14 прогнозов о развитии сео-индустрии от Moz на 20...