19750 Знания

Микроразметка ​Open Graph: что это и как настроить

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

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

О видах микроразметки и ее настройке для «Яндекс» и Google читайте в статье.


Кнопки «Поделиться в соцсетях» на сайте

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

кнопки поделиться в соц сетях на сайте
Кнопки для репостов в социальные сети


Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.

репост пина с рецептом в соцсети
Поделиться пином с рецептом



Подробнее о том, как настроить кнопку «Pint it» и зачем вам Pinterest, в статье 
«Как бизнес-аккаунт в Pinterest влияет на ранжирование сайта»

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

Распространённый сбой — превью содержит не тот графический контент. К примеру, новость в социальной сети сопровождается не тематическим фото обложки, а рисунком рекламного баннера, который также был на странице.

отображение превью в соцсетях пример
Неправильное отображение сниппета


Проблема устраняется просто — с помощью дополнительного стандарта микроразметки страницы Open Graph.

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

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

Зачем нужен Open Graph

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

Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.

Разберемся, как настроить микроразметку для страницы.

Ключевые мета-теги Open Graph

Протокол Open Graph состоит из мета-тегов, их интегрируют в html-код страницы в .

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

  • og:title – название материала;
  • og:description – описание материала, заполнять не обязательно;
  • og:image – ссылка на картинку, которая должна сопровождать материал;
  • og:type – тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;
  • 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


Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на странице ogp.me. Иногда их использование тоже может быть оправдано: к примеру, если добавляемая страница содержит информацию о конкретном человеке, то можно дополнительно указать характеристики с помощью специального тега.

Настройка через json-ld:

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "Имя организации»",
"url" : "ссылка на сайт",
"sameAs" : [
"https://vk.com/адрес",
"https://www.pinterest.com/адрес",
"https://www.facebook.com/адрес",
"https://twitter.com/адрес"
]
}
</script>


Пример микроразметки страницы с помощью Open Graph

Пример практического использования протокола Open Graph — фрагмент html-кода, в котором использованы необходимые теги данной разметки. Подопытная страница – недавняя статья про статья про редиректы на PR-CY:

<meta property="og:title" content="Как настроить редирект самостоятельно">
    <meta property="og:image" content="<img class=" redactor-autoparser-object"="" src="https://s3-eu-central-1.amazonaws.com/news.pr-cy.ru/535312/7463.png">">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://pr-cy.ru/news/p/7463-kak-nastroit-redirekt-samostoyatelno">
            <meta property="og:description" content="Самостоятельная быстрая настройка редиректа для Nginx и Apache, а также с помощью PHP, HTML, JavaScript и cPanel. Разбираем на примере переадресации с www-домена на домен без www и наоборот. ">

Отдельно можно настроить особенное отображение для соцсетей, к примеру, в аккаунте Twitter. Тогда к записи нужно добавить теги:

<meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://pr-cy.ru/news/p/7463-kak-nastroit-redirekt-samostoyatelno">
    <meta property="twitter:title" content="Как настроить редирект самостоятельно">
            <meta property="twitter:description" content="Самостоятельная быстрая настройка редиректа для Nginx и Apache, а также с помощью PHP, HTML, JavaScript и cPanel. Разбираем на примере переадресации с www-домена на домен без www и наоборот. ">
        <meta property="twitter:image" content="<img class=" redactor-autoparser-object"="" src="https://s3-eu-central-1.amazonaws.com/news.pr-cy.ru/535312/7463.png">">
    <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, самостоятельно разбираясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS:

Сервис проверки Open Graph

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

проверка микроразметки на странице статьи
Фрагмент работы инструмента


Наличие разметки определяет инструмент для автоматического аудита конкретной страницы «Анализ контента». Если нужно быстро проверить, работает ли разметка, а также оценить контент, юзабилити, технические характеристики и мобильность страницы по многим параметрам, попробуйте сервис.

проверка наличия микроразметки на сайте
Фрагмент анализа инструментом

Вам может быть интересно:
Как внедрить микроразметку информации Schema.Org на сайт, и что это дает?
Главное о микроразметке: подборка знаний для веб-мастеров
Как внедрить микроразметку информации Schema.Org на сайт, и что это дает?
Чек-лист после запуска сайта на WordPress
Комментарии (3)
hackoff   28.02.2016 19:28
Что-то верстальщик PR-CY совсем положил :) страница данной новости разъехалась! А материальчик действительно полезный! спасибо будем внедрять и эту разметку
Taras_Cherkassky   02.03.2016 00:11
Спасибо за оценку - стараемся.))
Facebook и ВК далеко не всегда адекватно воспринимат этот OpenGraph. Основная проблема - картинки.

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

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