Что такое Open Graph или как привлечь трафик из социальных сетей
Зачем нужна микроразметка Open Graph
Изначально протокол был разработан для Facebook, но сейчас используется во многих других соцсетях. Самый простой пример работы Open Graph – это ссылки на Google и Яндекс на странице ВКонтакте:
Сайт самостоятельно выдергивает любую картинку и текст, чаще всего то, что первое под руку попадет. Никто не захочет оставлять у себя на стене такую ссылку и переходить по ней.
Что происходит, если вы используете протокол Open Graph:
Таким образом, использование протокола делает ссылку на ваш ресурс в соцсетях привлекательной. Пользователь охотнее кликнет по такой ссылке, так как он сразу видит, что его ждет после перехода на страницу вашего сайта.
Как настроить микроразметку Open Graph: от теории к практике
Основные теги Open Graph
Теги для видео:
Вот основные теги для видеофайлов:
Указываем используемые префиксы.
Теперь необходимо детально представить наше видео роботу:
Также можно найти дополнительные настройки для каждой социальной сети отдельно (Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest) так.как иногда происходит сбой и может неверно отображаться картинка или часть текста.
Существуют также плагины, которые могут проверить валидность кода og. Если у вас нет желания самому ковырять html-код, то в этом могут помочь специальные плагины для CMS. Вот наиболее популярные варианты для WordPress:
А вот плагины для других CMS:
Как проверить разметку Open Graph
Настроив микроразметку, убедитесь в том, что она корректно работает, а ссылка на страницу вашего сайта выглядит именно так, как вы планировали. Для этого воспользуйтесь специальным инструментом от разработчиков Facebook. С его помощью вы можете заранее узнать, как будет выглядеть превью на страницу вашего сайта. Когда вы увидите внешний вид публикации, вы поймете, правильно ли выполнены настройки, и внесете изменения, если необходимо.
Также есть инструмент от Яндекс, который анализирует микроразметку. Работает также и для Open Graph. Валидатор разметки Yandex позволит вам отследить и исправить ошибки в настройках.
Экспертное мнение
Профессионально владеем таргетированной рекламой в социальных сетях и инструментами для запуска успешной кампании:
– Умеем привлекать подписчиков. – Выгодно продаем товары и услуги.
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
Basic Metadata
To turn your web pages into graph objects, you need to add basic metadata to your page. We’ve based the initial version of the protocol on RDFa which means that you’ll place additional tags in the of your web page. The four required properties for every page are:
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
Optional Metadata
The following properties are optional for any object and are generally recommended:
For example (line-break solely for display purposes):
The RDF schema (in Turtle) can be found at ogp.me/ns.
Structured Properties
The og:image property has some optional structured properties:
A full image example:
The og:audio tag only has the first 3 properties available (since size doesn’t make sense for sound):
Arrays
If a tag can have multiple values, just put multiple versions of the same tag on your page. The first tag (from top to bottom) is given preference during conflicts.
Put structured properties after you declare their root tag. Whenever another root element is parsed, that structured property is considered to be done and another one is started.
Object Types
In order for your object to be represented within the graph, you need to specify its type. This is done using the og:type property:
When the community agrees on the schema for a type, it is added to the list of global types. All other objects in the type system are CURIEs of the form
The global types are grouped into verticals. Each vertical has its own namespace. The og:type values for a namespace are always prefixed with the namespace and then a period. This is to reduce confusion with user-defined namespaced types which always have colons in them.
Music
Video
A multi-episode TV show. The metadata is identical to video.movie.
A video that doesn’t belong in any other category. The metadata is identical to video.movie.
No Vertical
These are globally defined objects that just don’t fit into a vertical but yet are broadly used and agreed upon.
No additional properties other than the basic ones. Any non-marked up webpage should be treated as og:type website.
Types
The following types are used when defining attributes in Open Graph protocol.
Type
Description
Literals
Boolean
A Boolean represents a true or false value
true, false, 1, 0
DateTime
A DateTime represents a temporal value composed of a date (year, month, day) and an optional time component (hours, minutes)
ISO 8601
Enum
A type consisting of bounded set of constant string values (enumeration members).
A string value that is a member of the enumeration
Float
A 64-bit signed floating point number
All literals that conform to the following formats:
1.234 -1.234 1.2e3 -1.2e3 7E-10
Integer
A 32-bit signed integer. In many languages integers over 32-bits become floats, so we limit Open Graph protocol for easy multi-language use.
All literals that conform to the following formats:
Discussion and support
You can discuss the Open Graph Protocol in the Facebook group or on the developer mailing list. It is currently being consumed by Facebook (see their documentation), Google (see their documentation), and mixi. It is being published by IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp, and many many others.
Implementations
The open source community has developed a number of parsers and publishing tools. Let the Facebook group know if you’ve built something awesome too!
The Open Graph protocol was originally created at Facebook and is inspired by Dublin Core, link-rel canonical, Microformats, and RDFa. The specification described on this page is available under the Open Web Foundation Agreement, Version 0.9. This website is Open Source.
Микроразметка 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 и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.
Протокол Open Graph позволяет любой веб-странице стать полноценным объектом в социальных сетях. Например, протокол используется на Facebook, чтобы разрешить любой веб-странице иметь такую же функциональность, как и любой другой объект на Facebook.
Хотя многие различные технологии и схемы существуют и могут быть объединены вместе, нет ни одной технологии, которая предоставляет достаточно информации, чтобы красочно представлять какие-либо веб-страницы внутри социальных сетей. Протокол Open Graph строится на этих существующих технологиях и предоставляет разработчикам возможность реализовать все это в одном протоколе. Простота разработки является ключевой задачей протокола Open Graph, сообщили многие, на основе технических проектных решений.
Основные Метаданные
Что бы превратить вашу web-страницу в графические объекты, вам нужно добавить базовые метаданные к вашей странице. Мы основываемся на первоначальной версии протокола RDFa это означает что вы будите размещать дополнительные теги в вашей web-странице. Четыре основных свойства для каждой страницы:
В качестве примера ниже приводится разметка протокола Open Graph для фильма «The Rock» на IMDB:
Дополнительные Метаданные
Следующие свойства являются необязательными для любого объекта и, как правило, рекомендуется:
Например (line-break исключительно в демонстрационных целях):
Схему RDF (в Turtle) можно найти на ogp.me/ns.
Структурированные Свойства
Свойство тега og:image имеет несколько дополнительных структурированных свойств:
Пример структурированных свойств для изображения:
Тег og:audio имеет только 3 доступных свойства (потому что, звук не имеет ширины и высоты):
Массивы
Если тег может иметь несколько значений, просто поставьте несколько таких тегов на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.
Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.
На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300×300 px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000 px в высоту.
Типы Объектов
Для того что бы корректно отобразить объект в графе, необходимо задать ему тип. Это делается с помощью свойств: og:type
Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма CURIEs
Глобальные типы сгруппированы по вертикали. Каждый вертикальный тип имеет собственное пространство имен. Тип og:type значение имени всегда с префиксом пространства имен, а затем период. Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.
Музыка
Видео
Если это сериал или ТВ-шоу, метаданные идентичны video.movie.
Видео, которое не относится ни к одной из категорий. Метаданные идентичны video.movie.
Не Вертикальные объекты
Это глобально-определеные объекты, которые просто не вписываются в вертикальные объекты, но всеже широко используются в Интернете.
Никаких дополнительных свойств, отличных от базовых. Любая не размеченная web-страницы должна рассматриваться как og:type web-сайт.
Следующие типы используются при определении атрибутов в протоколе Open Graph.
Тип
Описание
Литерал
Boolean
Представляет логическое значение true или false
true, false, 1, 0
DateTime
DateTime представляет собой временное значение, состоящее из даты (Год, месяц, день) и дополнительного компонента времени (часов, минут)
ISO 8601
Enum
Типа, состоящий из ограниченного множества постоянных строковых значений (перечисление членов).
Строковое значение, которое является членом перечисления
Float
64-разрядное число с плавающей точкой
Все литералы, которые соответствуют следующим форматам:
1.234 -1.234 1.2e3 -1.2e3 7E-10
Integer
32-разрядное целое число с плавающей запятой. Во многих языках целое число, по сравнению с 32-бит, становятся числом с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для удобного использования нескольких языков.
Все литералы, которые соответствуют следующим форматам:
Обсуждение и поддержка
Вы можете обсудить протокол Open Graph в группе Facebook или в группе Google. В настоящее время протокол применяется в Facebook (смотрите их документацию), Google (смотрите их документацию) и mixi. Протокол был опубликован в IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp и многих многих других.
Реализованные проекты
Сообщество с открытым исходным кодом(Open Source) разработало ряд парсеров и издательских инструментов. Сообщите в Facebook, если вы создали что-то подобное!
Протокол Open Graph изначально была создана Facebook и вдохновлен Дублинское ядро, link-rel canonical, Microformats и RDFa. Описание спецификации доступно на этой странице, в соответствии с Open Web Foundation Agreement, Version 0.9. Этот сайт является Open Source. Последнее обновление 20 Октября, 2014
Кнопки для репостов в социальные сети
Поделиться пином с рецептом
Неправильное отображение сниппета
Пример работы сервиса
Пример работы парсера
Фрагмент работы инструмента
Фрагмент анализа инструментом