Проблема с добавлением ссылки в социальную сеть
Дело в том, что «лайки» и добавление нужной страницы в социальные сети далеко не всегда происходит корректно. Самый распространённый сбой состоит в том, что размещённое превью содержит не тот графический контент. В результате новость в социальной сети сопровождается не тематическим фото, а, скажем, рисунком рекламного баннера, который также присутствовал на странице, с которой эта новость была взята. Согласитесь, веб-мастера это не может не расстраивать.
Протокол Open Graph от Facebook
Впрочем, это расстройство не на века, так как устраняется довольно просто – с помощью дополнительного стандарта микроразметки страницы Open Graph. Последний разработан Facebook и призван контролировать текстово-графический анонс, который формируется при добавлении ссылки на ресурс в социальную сеть.
На практике протокол Open Graph представляет собой особый набор мета-тегов, которые интегрируются в html-код страницы (в границах тега <head>) и обеспечивают нужное отображение превью страницы сайта в социальной сети. Кстати, несмотря на то, что Open Graph разработал и внедрил Facebook, сегодня данный стандарт разметки страницы используется другими известными социальными платформами. Помимо упомянутых выше Вконтакте и Twitter, это также Google+, Яндекс.Видео, Pinterest, LinkedIn и др.
Ключевые мета-теги Open Graph
Для корректного отображения анонса материала в социальной сети html-код страницы сайта должен содержать следующие мета-теги Open Graph:
- – тег, отвечающий за название материала;
- og:description – тег, содержащий описание материала (причём в отличие от традиционного мета-тега description стандарт Open Graph позволяет увеличить размер описания со 160 до 295 знаков);
- og:image – ссылка на картинку, которая должна сопровождать материал;
- og:type – тег, указывающий на тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;
- og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.
Пример микроразметки страницы с помощью Open Graph
В качестве примера практического использования протокола Open Graph приведём фрагмент html-кода, в котором использованы необходимые теги данной разметки (подопытная страница – одна из прошлых новостейна PR-CY):
<head> … <meta property="og:title" content="Приятный баг для новых пользователей Google AdSense"/> <meta property="og:description" content="Описание новой ошибки в системе Google AdSense "/> <meta property="og:image" content="http://pr-cy.ru/news/upload/49127/images/1051f4d0d4dee5fe79e56c59aa71c063.jpg "> <meta property="og:type" content="article"/> <meta property="og:url" content= "http:// pr-cy.ru/news/p/5396" /> … <head>
Список основных тегов Open Graph (обязательное заполнение которых рекомендуется разработчиком) дополняют условно второстепенные. Иногда их использование тоже может быть оправдано. Например, в том случае, если добавляемая страница содержит информацию о конкретном человеке, то с помощью специального тега в превью в социальной сети можно дополнительно указать пол, возраст и прочие характеристики личности. Исчерпывающий мета-инструментарий Open Graph представлен здесь.
Сервис проверки и плагины Open Graph
Подводя итог, необходимо отметить, что контроль за разметкой страницы Open Graph можно вести посредством специализированного сервиса, разработанного социальной сетью Facebook. С его помощью вы будете знать, как Лицекнига видит (будет непосредственно отображать) анонс той или иной внешней страницы. Владея такой информацией, веб-мастер всегда сможет внести необходимые коррективы в тот или иной мета-тег для лучшего отображения превью в социальных медиа.
Ну и самое последнее. Если у владельца сайта нет особого желания разбираться с протоколом Open Graph, самостоятельно ковыряясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS – Wordpress и Joomla.