для чего используется open graph
Еще не зарегистрированы?
Что такое Open Graph?
Open Graph структурирует информацию о странице. Например, вы можете указать какое изображение или видео появится в превью, или какие заголовок и описание должны быть показаны, и даже местоположение или язык, авторство и многое другое.
С Open Graph ваш контент становится более ярким и привлекательным в новостных лентах социальных сетей, более кликабельным. А значит больше людей увидит, щелкнет и поделится им. На сегодняшний день, протокол поддерживается всеми известными соцсетями и мессенджерами: Facebook, Вконтакте, Однокласники, Twitter, Linkedin, Pinterest, Skype, Whatsapp, Viber, Telegram.
А что если у меня нет Open Graph на сайте?
В таком случае соцсети будут собирать данные о странице выборочно и могут не точно ее отобразить. Например, в качестве обложки вывести не изображение статьи, а логотип сайта или какую-нибудь другую картинку, или показать слишком длинный заголовок. Все это негативно скажется на рейтинге ваших публикаций.
Вот так выглядит пост в соцсетях без Open Graph:
Пост с прописанной микроразметкой Open Graph:
Думаю, вы уже убедились, что Open Graph вещь полезная и настоящая панацея для соцсетей!
Структура и внедрение Open Graph
Теги Open Graph добавляются как свойство в HTML-тег : и помещаются в секцию: .
Рассмотрим основные теги:
og:title
Разметка Open Graph пример:
og:type
Разметка Open Graph пример:
og:url
Указываете канонический URL-адрес страницы.
og:description
Указываете краткое описание страницы. Попытайтесь написать несколько релевантных предложений, которые увеличат информативность вашей публикации.
og:image
Если ваше изображение меньше 600 x 315 px, оно будет отображаться как меньшая миниатюра. Это не так привлекательно.
Также у этого тега есть связанные теги, которые передают дополнительные свойства:
Другие OG-теги
Существуют и другие теги Open Graph, которые предоставляют соцсетям дополнительную информацию о вашем контенте:
Пример Open Graph на веб-странице
Инструмент проверки Open Graph
Контролировать работу разметки Open Graph на своем сайте можно с помощью отладчика Facebook.
У него две очень полезные функции:
Плагины для внедрения Open Graph
Для WordPress оптимальным решением может будет многофункциональный плагин Yoast SEO. При редактировании страницы, у вас появится возможность добавить Open Graph информацию для Facebook и Twitter:
Плагины Open Graph для CMS Joomla можно просмотреть в репозитории Joomla и подобрать на свой вкус.
Под Drupal существует специальный модуль Open Graph meta tags.
Выводы
Однозначно, протокол Open Graph является очень полезным элементом для каждого веб-сайта.
OG теги позволяют:
Таким образом, применяя различные виды микроразметки, вы сможете обеспечить своему сайту рост и популярность в интернете.
Что такое OpenGraph и как его настроить?
Время чтения: 8 минут Нет времени читать?
С развитием распространения интернета не стояли на месте поисковые системы и социальные сети. Эти вещи с каждый годом становятся все более взаимосвязаны. Например, SEO и SMM, стоит только посмотреть на различные издательства Republic, Cossa, VC.
Часто встречали такое, что когда копируете ссылку в определенную социальную сеть: Facebook, VK, Twitter, Одноклассники ссылка заменяется на какой-либо подставляемый заголовок, текст и картинку. Но откуда он берется? Сегодня я поведую вам об этой тайне.
Что такое Open Graph?
Open Graph – протокол, который позволяет сформировать необходимое превью при публикации ссылки в социальных сетях.
По-другому Open Graph называют словарь микроданных, который был разработан компанией Facebook специально для решения проблемы с отображением ссылок в соцсети.
На сегодняшний день Open Graph используется в Facebook, Вконтакте, Google+, Twitter, Linkedin, Pinterest. Например, Яндекс использует Open Graph для формирования заголовка сниппета и передачи данных в сервис Яндекс Видео.
Часто на многих сайтах встречается серия кнопок поделиться в различных соц сетях. Например, мы поделились Вконтакте, что произойдет?
На 2 страницах практически нет информации, но в случае с ссылкой Яндекса мы видим более информативный пост с внешней ссылкой и слоган (которого на странице нет), т.к. используются возможности Open Graph. Но если данные сайты в представлении не нуждаются, то внешний вид нашей ссылки имеет огромное значение.
Социальная сеть самостоятельно вставляет любую картинку, которая есть на сайте (либо указывает стандартное изображение). Но замечу, что ссылку данный вид разметки не показывает, поэтому необходимо настроить его самостоятельно, о чем я расскажу чуть ниже.
Open Graph как использовать?
Дополнительные атрибуты Open Graph
Разберем следующие виды атрибутов, которые не обязательны и зависят от спецификации вашего объекта.
Лучше покажу примеры оформления микроразметки Open Graph у популярных сайтов:
Популярное издательство Republic тоже не обходит социальные сети. Мне понравилось, что ребята подходят отдельно к оформлению в соцсетях. Помимо микроразметки они используют еще картинку с текстом, благодаря чему кликабельность может увеличиться в 2, а то и более раз. Все-таки людям свойственно обращать внимание на большие заголовки, вспомните газеты, журналы, где писали большими печатными буквами так же и тут.
Всем советую многое подчеркнуть из того, как публикуют СМИ ссылки на новости в группах и пабликах.
Как проверить Open Graph?
Здесь все просто – рассмотрит 2 самых популярных способа.
Проверяем вручную
Для этого заходим на сайт, где мы хотим проверить разметку OpenGraph и нажимаем “Посмотреть исходный код” или в Google Chrome это клавиши CTRL+U. Мы попадем в код страницы, далее нам необходимо нажать CTRL + F и написать в появшейся строке 3 символа: “og:”, где og – означает Open Graph. Нам подсветятся значения если они используются на сайте.
Использование сервиса Open Graph Check
Упрощу вам работу, есть сайт Open Graph Check (Загуглите сами если нужно). Перейдя на главную страницу сайта вам необходимо всего лишь вставить ссылку в поле и нажать далее и сервис автоматически выдаст вам все теги Open Graph, которые используются на сайте.
Аналоги Open Graph
Помимо Open Graph существует много других микроразметок данных. Разберем самые популярные виды микроразметок:
Что касается других видов разметок, но они менее популярные и используются только в особых случаях.
Заключение:
Open Graph безусловно важна, в первую очередь с точки зрения привлечения трафика на сайт с социальных сетей. Ведь от того, как выглядит ссылка, будет зависеть кликнет на вас пользователь или нет, да что говорить, если самые посещаемые сайты используют данную разметку.
Так что не ленитесь, все в ваших руках! Успехов вам в настройке Open Graph и продвижении ваших ресурсов!
Если у вас остались вопросы ко мне, пишите, я на них отвечу!
Open Graph Protocol — разбор микроразметки
Open Graph Protocol представляет собой микроразметку от Facebook, которая в 2010 году была разработана для того, чтобы интегрировать веб-сайты с соц. сетью. Сейчас данный формат используется в Twitter, Google+, Вконтакте, Одноклассники, Pinterest и т.д. С помощью протокола Open Graph можно управлять представлением контента в социальных медиа, тем самым улучшая его взаимодействие с пользователями. Например, мы можем определить, название, описание и фото, которое будет отображаться на странице в социальной сети и определить тип контента.
Что такое Open Graph на практике
Для подключение OG необходимо внести специальный html-код (разметка на примере видео есть в хэлпе Яндекса). Группа обязательных тегов:
Open Graph мета-теги
В результате применения этих тегов расшаренная запись в Facebook будет отображаться так:
В дополнение к 4 обязательным мета-тегам Open Graph есть дополнительные:
В Facebook можно использовать еще больше мета-данных (подробности здесь). Например:
Геолокации: широта, долгота, высота над уровнем моря:
Контактная информация (street_address, locality, postal_code, region, country_name, email, phone_number, fax_number):
Типы контента
На Facebook широкий спектр дополнительных типов данных, которые мы можем назначить для страницы (вы должны поместить их в тег «og:type»). Типы контента сгруппированы по категориям:
Для некоторых типов контента есть уникальные дополнительные маркеры. Например, тип «article» может определить дату публикации — «article:published_time» или категорию статьи «article:section». Для того, чтобы использовать это нужно немного магии в микро-разметке:
Для получения дополнительной информации о дополнительных маркерах для типов контента нужно покопать документацию Open Graph (на русском).
Реализация
Реализация протокола Open Graph на сайтах гораздо проще, если вы используете популярные CMS (системы управления контентом), такие как WordPress или Drupal и т.д. Есть куча плагинов, которые позволяют довольно просто настраивать соответствующую разметку. Например для WordPress это сделает Yoast SEO.
Когда соответствующие теги Open Graph будут размещены на сайте, вы можете проверить его точность с помощью инструментов, предоставляемых Facebook: https://developers.facebook.com/tools/debug
Open Graph в других социальных сетях
Открытый протокол График используется не только Facebook, но и на других сайтах социальных сетей, в разной вариации. Вконтакте и Одноклассники, например, поддерживают стандартный Open Graph, потому их не выделяем.
Карты Twitter
Twitter автоматически использует стандартные теги OG, но и создал свой собственный набор метаданных. Они позволяют делать более сложные и хорошо размеченные твиты. Они выделяются в толпе других постов и позволит вам получить больше переходов и ретвитов. Ниже приведены два примера твитов.
Для использования этих функций необходимо разместить специальный код, используемый Твиттером. Наиболее важными тегами являются:
Пример:
Пример:
Подробная информация о Twitter карточки с примерами и перечнем необходимых тегов для различных типов карт можно найти в официальной документации: https://dev.twitter.com/cards/overview
Вы должны знать, что если вы используете Open Graph и Twitter карты, то можно опустить дублирующие теги, такие как название, описание или изображение и оставить их только стандартные теги OG.
Правильность реализации на данных мета Twitter можно проверить с помощью валидатора: https://cards-dev.twitter.com/validator
Google+
Предпочтительными тегами являются Schema.org (она же микроразметка), но также поддерживаются следующие мета-теги Open Graph: og:title, og:description, og:image. Для получения более подробной информации о представлении страниц в Google+ доступна по адресу: https://developers.google.com/+/web/snippet/.
Pinterest использует несколько типов разметки: Schema.org, Open Graph, oEmbed и hRecipe. Существуют различные типы тегов в зависимости от типа контента, так называемые — Rich Pins, содержащие дополнительные данные доступные для следующих категорий: рецепты, статьи, видео, места и продукты. Точные описания метки, необходимые для данной категории, вы можете получить на странице: https://developers.pinterest.com/docs/rich-pins/.
Вот так круто выглядит Rich Pin:
Как использовать Open Graph
С помощью тегов OG, потому что мы можем установить страницу:
Таким образом, мы будем улучшать CTR из соц. сетей и увеличим количество переходов.
Например, сервис Tumblr после реализации протокола Open Graph увеличил трафик с Facebook на 250%. Использование Open Graph особенно уместно на сайтах, связанных с таким темами, как:
В общем любые тематики, где часто делают расшаривания контента, т.к. это даст более качественное представление вашего поста в любой соц. сети. Одним слово, Open Graph — полезняк, который нужно внедрять на сайты. Я проспал эту тему (откладывал постоянно), потому сейчас дописываю пост и иду пилить его на свои сайты 🙂
Понравился пост? Сделай репост и подпишись!
Рекомендую к прочтению
Биржа ссылок Sape. Как работать с Sape новичку
Делаем информативный дашборд в Яндекс Метрике
Пуленепробиваемая разметка Open Graph
В процессе разработки над нашими проектами, не раз сталкивались с проблемой правильной микроразметки Open Graph. В статье хотим поделиться решением, которое подойдет в 99% случаев.
Для начала ответим на вопрос, что такое разметка Open Graph и зачем она нужна?
Микроразметка — это способ оптимизации сайта, благодаря которому роботы берут только нужную информацию и используют её в сниппетах выдачи или в соцсетях.
Задачи микроразметки — информативность сниппета, привлекательность для пользователей. Прямого влияния на SEO нет, но за счет внедрения микроразметки можно улучшить поведенческие факторы сайта. Ну просто люди будут чаще переходить по ссылке. Да и теряться в общей массе не будет.
Остается вопрос, но как пользователи делятся публикациями? Разберем часто используемое решения:
Кнопки «Поделиться» на сайте
Этот функционал предлагают несколько сервисов. Например, мы используем Яндекс для русскоговорящих проектов или Addthis для всего остального мира.
Этот фунционал полезен. Пользователям удобно отправлять интересные материалы себе на стену в социальные сети, двумя кликами, а владельцы сайтов получают дополнительное распространение контента и увеличение трафика.
Если материал понравился посетителю сайта и он решил сохранить себе в соцсеть или рассказать друзьям, он нажимают соответствующую кнопку любимой соцсети и делаешь репост. Репост примерно выглядит так:
Что бы репост в социальной сети был красивый, надо внедрить микроразметку Open Graph.
Протокол Open Graph от Facebook
Основная часть материалов, которыми делятся люди, представлена на Facebook в виде URL, поэтому для разметки сайта важно использовать теги Open Graph. От них зависит то, как ваши материалы будут выглядеть на Facebook. Руководство по публикации для веб-мастеров
Говоря проще Open Graph разработали в Facebook для контроля текстово-графического анонса, который формируется при добавлении ссылки в социальную сеть.
Зачем нужен Open Graph?
Разметку Open Graph поддерживают соцсети (ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники) и мессенджеры (Telegram, Skype) и другие.
Разберемся, как настроить разметку Open Graph для страницы.
Теги Open Graph
Основные теги Open Graph
Дополнительные теги Open Graph
Дополнительные теги Open Graph для Twitter
Пример разметки Open Graph
Этот пример Open Graph самодостаточен для публикации практически во все социальные сети.
Требования к картинке для разметки
Выбор картинки подходящего размера — основная проблема. Даже внутри одной соцсети есть сценарии, в которых изображения безбожно кропятся.
На хабре рекомендуют изображение в 968×504 пикселя, это меньше минимально рекомендованных Фейсбуком. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.
Мы используем размер рекомендованный Фейсбуком 1200×630 пикселей.
Где проверить разметку Open Graph?
Тут всё просто. Идем на страницу «Отладки репостов» в Facebook и на страницу Card validator в Twitter. Вставляете вашу ссылку и проверяете.
Микроразметка Open Graph
Open Graph – стандарт микроразметки, который позволяет формировать превью сайта при публикации в социальных сетях.
Open Graph – стандарт микроразметки, который позволяет формировать превью сайта при публикации в социальных сетях.
Стандарт Open Graph был разработан Facebook. Сейчас Open Graph используют Facebook, Яндекс, Вконтакте, Google+, Twitter, Pinterest и др. В Яндексе микроформат используется для передачи данных в Яндекс.Видео.
Принцип работы микроразметки
Сайт самостоятельно подгружает картинку (или картинки), описание и заголовок с ссылки, которую вы вставили в социальную сеть. Это позволяет кратко ознакомится с материалом, который предоставлен по ссылке. Как итог, вам не нужно придумывать описание для ссылки и добавлять изображения к публикации.
Результат внедрения микроразметки Open Graph
Также будет выглядеть публикация при нажатии на кнопки «поделиться в соц. сетях».
Основные теги Open Graph
Это не весь список тегов. Полный список тегов можно посмотреть на официальном сайте Open Graph.
Основные теги сейчас используются для всех социальных сетей. Также есть отдельные настройки для каждой соц. сети отдельно (Вконтакте, Facebook, Twitter, Google+, Mail).
Описание основных тегов
OG:TITLE
Используется только для заголовка. Обязательный тег, используется во всех случаях микроразметки.
OG:DESCRIPTION
OG:TYPE
Используется для определения типа объекта. В зависимости от контента на странице может принимать значения:
Тип объекта нужно устанавливать в зависимости от размещаемого контента. Если он смешивается с другими типами объектов, то нужно выбрать из них один как основной.
OG:IMAGE
Используется для определения изображения у объекта. Является массовым тегом – можно использовать несколько раз, в публикации можно будет выбрать нужное изображение. Обычно используется как постер к публикации в соц. сетях.
Для тега можно также установить детальные настройки для каждого изображения:
Означает, что на странице несколько изображений. первое изображение имеет размер 300×300, среднее изображение имеет неопределенные размеры, а последнее имеет высоту 1000 пикселей.
Дополнительные опциональные настройки изображений:
OG:URL
Используется для обозначения ссылки на объект. Обычно выступает в роли дубликата URL страницы. Ссылка не должна содержать прочие GET-параметры, без которых можно обойтись.
Пример микроразметки Open Graph для статьи блога
Пример краткой микроразметки Open Graph:
Пример микроразметки Open Graph для товаров или услуг
Пример краткой микроразметки Open Graph:
Проверка микроразметки Open Graph
Проверить микроразметку можно вручную или воспользоваться автоматизированными сервисами: