Последние статьи из блога > Микроразметка Open Graph

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

Open Graph это протокол, который позволяет придать ссылке в соцсетях определенный вид. Изначально был создан для Facebook, но со временем появилась возможность использования в других соцсетях. Официальную документацию можно почитать на сайте OpenGraph. Почти на всех сайтах есть кнопки “поделиться” в соцсетях, но не все оптимизаторы занимаются дальнейшей настройкой. Чтобы наглядно увидеть работу микроразметки (а заодно узнать, как проверить наличие разметки Open Graph) в действии посмотрим на две ссылки от Google и Twitter. Мы просто скопировали ссылки и вставили в социальной сети Вконтакте.

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

Теперь мы наглядно видим, что Open Graph позволяет:

  • Настроить отображение картинки
  • Сделать качественное описание
  • Убрать из ссылки все лишнее (иногда туда может попасть рекламный блок со страницы).

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

Как настроить Open Graph

Вся настройка происходит путем указания дополнительных тегов в элементе <head>. Есть возможность редактировать название, размер картинки, саму картинку и т.д. Давайте рассмотрим основные теги.

<html prefix=»og: ogp.me/ns#> — указывает наличие микроразметки на странице.

Данный код подходит для Facebook, Вконтакте и Одноклассники.

<meta property=«og:type» content=«website»>

<meta property=«og:site_name» content=«Название сайта»>

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

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

<meta property=«og:url» content=«http://site.com/page.html»>

<meta property=«og:locale» content=«ru_RU»>

<meta property=«og:image» content=«http://site.com/img.jpg»>

<meta property=«og:image:width» content=«968»>

<meta property=«og:image:height» content=«504»>

А этот будет работать для твиттера

<meta name=«twitter:card» content=«summary_large_image»>

<meta name=«twitter:title» content=«Заголовок»>

<meta name=«twitter:description» content=«Описание.»>

<meta name=«twitter:image:src» content=«http://example.com/img.jpg»>

<meta name=«twitter:url» content=«http://example.com/page.html»>

<meta name=«twitter:domain» content=«example.com»>

<meta name=«twitter:site» content=«@»>

<meta name=«twitter:creator» content=«@…»>

Более детальные настройки можно посмотреть на официальном сайте. В основном их используют для конкретных описаний — личности/концерты/мероприятия.

Альтернативные способы настройки Open Graph

Они же автоматические. Есть ряд плагинов для различных CMS, которые помогут в настройке. Будет полезно сайтам с большим количеством страниц в индексе и когда прописать везде просто не получится. 

Для WordPress OpenGraph или YoastSEO

Для Jumla Phoca Open Graph

Для OpenCart OpenCartMeta

Еще есть несколько вариантов сервисов по созданию кода, например парсер от pr-cy. Нужно просто внести данные и скопировать готовый код.

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

Очень просто. Можно скопировать ссылку в социальную сеть и посмотреть на результат. Также есть отладчик репостов от Facebook, который покажет до публикации как будет выглядеть ваша ссылка на сайте. Еще есть валидатор микроразметки от Яндекс, который может помочь устранить ошибки, если таковые имеются.

Экспертное мнение

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

Оставить комментарий

avatar
  Подписаться  
Уведомление о

Похожие статьи из блога