В статье:

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

  2. Проблема с добавлением ссылки в социальную сеть

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

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

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

  6. Сервисы для работы и плагины 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» или «Yoast SEO» для WordPress;
  • «Phoca Open Graph» для Joomla;
  • «Open Graph Meta» для Opencart.

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

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

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

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

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

Вам может быть интересно:
Как внедрить микроразметку информации Schema.Org на сайт, и что это дает?

Источник

от admin

Добавить комментарий

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

Adblock
detector