В этой статье разберемся, что такое разметка Open Graph, и как ее применять для интеграции с социальными сетями. Ведь именно в соцсетях находится большая часть пользовательского трафика и можно перехватить его и направить на сайт.
Что такое Open Graph и зачем он нужен?
На многих страницах сайта мы видим кнопки для соцсетей. При нажатии на них происходит репост анонса страницы сайта. При этом сниппет с этим анонсом формируется по правилам той соцсети, где происходит репост. То есть текст и картинка в анонс попадают автоматически со страницы сайта. Очень часто это бывает не самый понятный текст и не самая удачная картинка. В сниппет может попасть даже рекламный баннер, который в это время оказался на странице, совершенно далекий от темы статьи. Если «социальному» роботу попалась даже подходящая картинка, она может быть изуродована до неузнаваемости подгонкой под формат соцсети всякими обрезаниями и сжатиями.
Для того, чтобы анонс страницы выглядел информативно и привлекательно, чтобы на него хотелось кликнуть, а не скорее пролистнуть, и придумали специальные правила. Это — микроразметка для социальных сетей. Теперь вебмастер может определять вид анонса страницы сайта в соцсетях. Он указывает какой брать текст, изображение и анкор ссылки для сниппета.
Open Graph (OG)– это специальный словарь семантической разметки, который в свое время был разработан для Facebook. Сейчас этот словарь понимают и остальные соцсети – ВКонтакте, Twitter, Одноклассники, Pinterest и другие. Протокол Open Graph также поддерживают поисковики, в том числе Гугл и Яндекс. Наряду с schema.org это самый распространенный словарь для микроразметки.
Как внедрить OG на сайт?
Информация для соцсетей передается с помощью специальных тегов ОпенГраф. Они же, в свою очередь, прописываются в блоках html и head.
В теге html объявляем то, что на странице мы используем словарь OG.
<html xmlns:fb=»http://ogp.me/ns/fb#»>
Остальное прописываем в head. Вот основные мета теги Open Graph:
- og:title – аналог обычного title, заголовок страницы или другого объекта, он же текст ссылки;
- og:description – как и стандарный description, описание материала, которое будет выводиться под заголовком;
- og:type – типы объектов, это может быть статья, видео или аудио трек;
- og:image – ссылка на иллюстрацию материала;
- og:url – собственно сама ссылка на материал.
Далее примеры как прописать теги OG.
|
1 2 3 4 5 6 7 8 |
<meta property="og:title" content=" Внедрение разметки Open Graph на сайте"> <meta property="og:type" content="article"> <meta property="og:description" content="В этой статье узнаем, что такое разметка Open Graph, и как ее применить на сайте для улучшения его представления в социальных сетях. "> <meta property="og:url" content="http://myseosite.com/articles/opengraphinsite"> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content="http://myseosite.com/img/img1.jpg"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> |
В примере встретилось еще несколько полезных тегов. Желательно указывать локализацию, можно задать размер изображения.
Вариантов значений тега type достаточно много. Для разных видов контента они свои. Кроме того, с этим связаны атрибуты в теге html. Подробное описание содержится в документации Фейсбук для разработчиков
https://developers.facebook.com/docs/reference/opengraph/#object-type
или на сайте Open Graph.
Для каждой соцсети существуют отдельные теги. Особенно много специализированных тегов у Twitter. Например, у всех сетей разные требования к размерам картинок. И чтобы все это выглядело красиво можно прописать vk:image для VK, fb:image для Фейсбук, twitter:image для Твиттер. Каждая соцсеть будет брать параметры изображения из своего тега.
Особенности внедрения OG на сайт
После того как разместили микроразметку Open Graph на странице, ее следует проверить. Сделать это можно с помощью специального отладчика Facebook
https://developers.facebook.com/tools/debug/
В отладчике нужно просто указать ссылку проверяемой страницы. Здесь можно увидеть, как выглядит анонс страницы. Исходя из этого внести необходимые коррективы и устранить ошибки, если они есть.
Кроме того проверку микроразметки ОпенГраф умеет делать валидатор Yandex.
https://webmaster.yandex.ru/tools/microtest/
При отладке и исправлении ошибок есть один нюанс. Как только соцсети находят у себя новую ссылку на внешний ресурс, они сохраняют в кэше всю нужную им информацию для сниппета и больше не обращаются к сайту. Если при отладке сохранились какие-то кривые параметры, то они так там и останутся. Очищать кэш нужно самому вручную. Для этого в каждой социальной сети есть свой механизм.
Микроразметку Open Graph в CMS можно подключить с помощью плагина, а можно прописывать руками без плагина. Первое, конечно, проще. Существуют плагины для всех популярных движков – WordPress, Joomla, Drupal. Для WordPress их достаточно много — плагин Yoast SEO, WP Facebook Open Graph protocol, Facebook, All in One SEO Pack. Есть плагины и для CMS интернет-магазинов – OpenCart, Magento, Zen Cart.
Как видим, с помощью микроразметки Open Graph несложно добиться хорошего представления сайта в соцсетях, увеличить кликабельность и трафик. При этом не забывайте размещать на сайте сами социальные кнопки.
