Разметка Open Graph: что это и почему необходимо её правильно настроить
Что такое протокол Open Graph: описание, мета-теги и настройка.
Распространение контента в Интернете является важной частью работ по продвижению товаров и услуг, которые предлагает ваша компания. То, как люди видят информацию о вашей деятельности на разных онлайн-площадках, влияет как на образ компании целиком, так и на понимание конкретного сообщения о продукте, который вы представляете. Несколько строк “правильного” рекламного объявления в поисковой выдаче или постах в социальной сети могут превратить обычного пользователя в вашего клиента, а сами площадки в мощный источник трафика.
Проблема с “правильным” добавлением ссылок в Facebook сейчас актуальна как никогда. Если раньше можно было просто скопировать ссылку с желаемого ресурса и поделиться ей на Facebook, после чего изменить картинку и описание в ссылке на желаемое, то сейчас это сделать невозможно. Дело в том, что после недавних изменений Facebook запретил замену картинок и описание материала к ссылкам. Теперь они публикуются с исходной картинкой и текстом.
В результате новость в социальной сети не всегда сопровождается тематическим фото, а картинкой, которая присутствует на странице, с которой эта новость была взята. А это, согласитесь, не всегда удобно, и не обязательно повысит конверсию вашего контента.
Устранить такую проблему возможно довольно просто – достаточно ознакомиться и настроить протокол Open Graph.
Что такое протокол The Open Graph?
Open Graph — это протокол, который позволяет фиксировать и структурировать важную информацию о web-странице для дальнейшего её использования в социальных сетях.
Другими словами, это набор правил по заполнению группы meta-тегов, которые передают в социальную сеть информацию о содержании web-страницы, которой пользователь делиться в этой социальной сети.
Разметка Open Graph
Протокол Open Graph был разработан сотрудниками Facebook для отображения качественного превью страницы сайта в социальной сети, но на текущий момент данный стандарт используется и другими известными социальными платформами, среди которых Google+, LinkedIn, Twitter, VKontakte и другие.
Ключевыми meta-тегами Open Graph для корректного отображение страницы в социальной сети являются:
og:url – тег, которые указывает ссылку на веб-страницу, которая добавляется в социальную сеть.
og:type – тег, который указывает тип страницы (статья, новость, видео, категория и другие).
og:title – тег, который указывает на заголовок страницы, то есть, как она будет отображаться в ленте новостей или посте.
og:description – тег, в котором содержится краткое описание страницы.
og:image – тег, в котором указывается адрес картинки, которая будет отображаться в посте.
Более детальную информацию об основной и вспомогательной разметке можно посмотреть здесь: http://ogp.me/#metadata
Пример отображения разметки в HTML5:
property= “og:title” content= “Пример заголовка статьи” >
property= “og:site_name” content= “название сайта” >
property= “og:type” content= “article” >
property= “og:url” content= “http://example.com/пример-заголовка-статьи” >
property= “og:image” content= “http://example.com/картинка_статьи.jpg” >
property= “og:description” content= “Краткое описание статьи.” >
Настройка для Facebook
Ниже указанные основные рекомендации для корректного отображения информации о странице в постах на Facebook.
Полную информацию по использованию разметки под Facebook можно посмотреть здесь: https://developers.facebook.com/docs/sharing/webmasters
Итак, смотрим какие основные мета-теги необходимо использовать и чем их заполнять.
og:url
Используйте каноничный URL для адреса страницы, то есть её оригинальный вид без таких “примесей”, таких как параметры сессии, пользовательские параметры, счетчики и тд.
og:type
Указывайте тип контента/медиа, который соответствует вашей странице.
Для одного URL может быть указан только один тип, который соответствует данной странице.
og:title
Рекомендуется использовать название страницы без добавления брендинга (например, без названия сайта).
Не увлекайтесь, используйте не более 65 символов, поскольку название длиннее будут обрезаться.
og:description
Рекомендуется использовать краткое описание от 2 до 4 предложений. Действует ограничение в 300 символов.
og:image
Используйте изображение, которое лучше всего передает суть страницы или её сожержание.
Рекомендуемый размер не менее 1200х630 пикселей для наилучшего отображения на устройствах с большим разрешением экрана. Для нормального отображения поста с изображения должно быть не менее 600х315 пикселей.
Чтобы края картинки не обрезались в посте, старайтесь придерживаться соотношения сторон в картинке 1.91-к-1.0.
Подробные рекомендации по работе с картинками можно посмотреть по ссылке: https://developers.facebook.com/docs/sharing/best-practices#images
Пример заполнения и отображения
Пример информации, которую мы указали в og-тегах:
Пример заполнения og-тегов
И как это выглядит на Facebook:
Пример отображения поста на Facebook
Проверка корректности разметки
Для проверки корректности настроенных meta-тегов страниц и их отображения на Facebook используйте инструмент “Отладчик перепостов” (Sharring Debbuger), который можно найти по ссылке:
С помощью данного инструмента можно:
А вы правильно используете протокол Open Graph для Facebook?
Хотите узнать как видят пользователи информацию о Вашей компании в Интернете?
Обращайтесь за консультацией к нашим специалистам!
Микроразметка Open Graph: что это и как настроить
В статье:
Микроразметка — это способ оптимизации семантики сайта, который позволяет роботам идентифицировать тип информации на странице и лучше структурировать ее в сниппетах выдачи или в соцсетях. Основные преимущества использования микроразметки — информативность сниппета, привлекательность для пользователей и поисковых роботов. Прямого влияния на SEO нет, но за счет внедрения микроразметки можно улучшить поведенческие факторы сайта.
О видах микроразметки и ее настройке для «Яндекс» и Google читайте в статье.
Кнопки «Поделиться в соцсетях» на сайте
Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.
Кнопки для репостов в социальные сети
Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.
Поделиться пином с рецептом
Веб-мастеру недостаточно просто установить кнопку «Поделиться в соцсети» для того, чтобы пользователь делился контентом с красивым превью. Картинка или заголовок можгут отображаться не так, как задумано.
Проблема с добавлением ссылки в социальную сеть
Распространённый сбой — превью содержит не тот графический контент. К примеру, новость в социальной сети сопровождается не тематическим фото обложки, а рисунком рекламного баннера, который также был на странице.
Неправильное отображение сниппета
Проблема устраняется просто — с помощью дополнительного стандарта микроразметки страницы Open Graph.
Протокол Open Graph от Facebook
Open Graph разработан Facebook для контроля текстово-графического анонса, который формируется при добавлении ссылки на ресурс в социальную сеть. С его помощью можно настроить изображение, которое должно появляться в превью, правильный заголовок, описание и ссылку.
Зачем нужен Open Graph
Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.
Разберемся, как настроить микроразметку для страницы.
Ключевые мета-теги Open Graph
Разберем основные теги:
Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на странице ogp.me. Иногда их использование тоже может быть оправдано: к примеру, если добавляемая страница содержит информацию о конкретном человеке, то можно дополнительно указать характеристики с помощью специального тега.
Настройка через json-ld:
Пример микроразметки страницы с помощью Open Graph
Пример практического использования протокола Open Graph — фрагмент html-кода, в котором использованы необходимые теги данной разметки. Подопытная страница – недавняя статья про статья про редиректы на PR-CY:
Отдельно можно настроить особенное отображение для соцсетей, к примеру, в аккаунте Twitter. Тогда к записи нужно добавить теги:
Сервисы для работы и плагины Open Graph
Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.
Составить код разметки Open Graph автоматически
Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.
Пример работы сервиса
Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:
Пример работы парсера
Если у владельца сайта нет особого желания разбираться с протоколом Open Graph, самостоятельно разбираясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS:
Сервис проверки Open Graph
Контролировать разметку страницы Open Graph можно через специализированный сервис, разработанный Facebook. С его помощью веб-мастер узнает, как социальная сеть будет отображать анонс внешней страницы, и сможет отредактировать мета-тег для лучшего отображения превью в социальных медиа.
Фрагмент работы инструмента
Наличие разметки определяет инструмент для автоматического аудита конкретной страницы «Анализ контента». Если нужно быстро проверить, работает ли разметка, а также оценить контент, юзабилити, технические характеристики и мобильность страницы по многим параметрам, попробуйте сервис.
Фрагмент анализа инструментом
Что такое разметка Open Graph и как ее внедрить без программиста
«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.
Разбираемся, что это за разметка и как ее самостоятельно настроить.
Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика
Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.
Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:
Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.
Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:
А так выглядит репост этого же материала во ВКонтакте:
Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.
Репост в Фейсбук статьи без внедренной разметки:
А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):
В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:
Что можно сделать с помощью Open Graph
С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:
Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:
Где используется Open Graph
Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.
Синтаксис разметки Open Graph
Полная документация по разметке Open Graph доступна в нескольких источниках:
Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.
Также есть руководства по применению Open Graph для отдельных соцсетей:
По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.
Обязательные свойства
Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:
Как быть с размерами картинок
У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:
При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.
Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:
В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.
На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:
А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:
Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.
Опциональные свойства
Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:
Вот так description отображается в публикациях в Фейсбуке:
А так — в Телеграме:
А в Телеграме корректно подтягивается содержимое тега og:site_name:
Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Публикуете много видео? Используйте Open Graph
Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.
Больше информации об этом — в справке Яндекса.
В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:
Как внедрять Open Graph
Вручную
Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:
С помощью плагинов
Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).
По ссылкам ниже можно найти плагины для вашей CMS:
А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.
Пример внедрения Open Graph на WordPress
Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.
Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.
После активации перейдите в модуль «Социальные мета» в меню плагина:
Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».
Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.
Вот вид размеченной ссылки в ленте Facebook:
Примерно по такому же принципу работают другие плагины.
Как проверить корректность разметки Open Graph
Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:
Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.
Также есть отдельный инструмент для проверки микроразметки для Твиттера.
Контролируйте внешний вид репостов с помощью Open Graph
Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.
Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.
