Что такое 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 теги позволяют:
Таким образом, применяя различные виды микроразметки, вы сможете обеспечить своему сайту рост и популярность в интернете.
Пуленепробиваемая разметка 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
Проверить микроразметку можно вручную или воспользоваться автоматизированными сервисами:
Как и зачем использовать разметку Open Graph
Преимущества протокола, синтаксис, инструкция по внедрению и сервисы для проверки
Наполняете интересным контентом свой ресурс и собираетесь поделиться лучшими материалами в Facebook, Вконтакте и далее по списку? Проверьте, готов ли к этому сайт. Один из обязательных пунктов — наличие микроразметки Open Graph.
Зачем вашему сайту Open Graph
Если вы разместили на странице кнопки шеринга, вы наверняка предполагаете, что материал будут репостить:
И обидно будет, если репост будет выглядеть кривовато. Например, подтянется случайная картинка, а вместо короткого анонса внезапно появится текст из тайтла страницы.
Разметка (протокол) Open Graph позволяет контенту, которым вы делитесь в социальных сетях, выглядеть привлекательно. Например, вот так:
Репост в Facebook — статья с внедренной разметкой
Репост во ВКонтакте — статья с внедренной разметкой
Если захотите поделиться ссылкой с сайта без Open Graph, пост может выглядеть довольно грустно.
Ссылка в Facebook с сайта без OG-разметки
Просто подключи PromoPult. Комплексное рекламное решение для малого и среднего бизнеса. Минимальные стартовые бюджеты, полный набор инструментов для всех каналов продвижения, глубокая автоматизация, кампании «под ключ».
Так выглядит пост, если Фейсбук не находит картинку
Картинка взята из шапки — она не соответствует формату и была обрезана, а в анонс «вытащили» фрагмент из рекламного текста рассылки
Некорректная или рандомная картинка, отсутствующее или нерелевантное материалу описание — этого можно избежать с внедрением на сайт Open Graph.
Протокол изначально был создан для Facebook, но сейчас его также используют ВКонтакте, Pinterest, Twitter, LinkedIn, Telegram, мессенджеры (WhatsApp, Viber, Slack) и др.
Разметка Open Graph повышает привлекательность вашего контента в соцсетях, а значит — это один из пунктов в рамках стратегии SMM-продвижения и контент-маркетинга. Кроме того, протокол позволяет создавать блоки рекомендуемого контента в Google AdSense, если вы используете эту платформу для монетизации сайта:
Синтаксис разметки
Официальная информация от разработчиков протокола, его описание, руководство по использованию и ссылки на реализации — на ruogp.me (на русском языке). В более сжатой и доступной форме все это изложено в справке Яндекс.Вебмастера.
Есть и отдельные руководства для:
Инструменты PromoPult для рекламы в соцсетях: все каналы в одном кабинете, минимальные бюджеты, все делают штатные специалисты системы, вам нужно только дать вводные.
Основные метатеги
Теги Open Graph объясняют соцсетям, какая информация содержится на странице. Корректно заполненные поля позволят сформировать привлекательный вид поста в ленте.
У Twitter, Facebook и ВКонтакте разные требования к размеру изображений. Чтобы картинка в посте отобразилась корректно, можно прописать параметры для каждой соцсети отдельно, используя дополнительные теги vk:image, fb:image, twitter:image — каждая соцсеть в первую очередь обработает «свой» тег. Минус такого решения — придется подготовить отдельную картинку под каждую соцсеть.
Второй вариант — воспользоваться дополнительными метаданными width (ширина в пикселях) и height (высота в пикселях), которые позволят задать один размер для всех соцсетей. В примере указан размер изображения для Facebook. Другие соцсети будут обрезать эту картинку под свои требования.
Пост в Facebook — полная картинка
Пост ВКонтакте — обрезанная картинка
Репост в Телеграме
Фейсбук: используется сокращенный URL
Телеграм: используется site_name
О дополнительных метатегах и массивах (тегах с несколькими элементами) можно подробнее прочитать на официальном сайте протокола или в справке Яндекса.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Видео в Open Graph
Если на вашем ресурсе много интересного видеоконтента, которым вы хотите поделиться, используйте Open Graph для передачи данных в сервис Яндекс.Видео. В протокол добавлены дополнительные метатеги, которые позволят подробно охарактеризовать ролик:
Два способа внедрить Open Graph
Можно прописать метатеги вручную в коде страниц сайта либо использовать плагины.
Для ручной разметки:
Плагины Open Graph для популярных CMS
Рассмотрим внедрение разметки Open Graph для сайта на WordPress на примере плагина All in One SEO Pack. В разделе Управление модулями активируем модуль «Социальные мета»:
Модуль будет активен для настройки:
В специальных полях пропишите настройки главной страницы, изображений, типов данных, а также отдельные настройки для Twitter.
Для того, чтобы настроить Open Graph для отдельной записи или страницы, в консоли выберите вкладку «Социальные настройки»:
В ней заполните метатеги в соответствии с содержанием материала. На этой же вкладке есть возможность воспользоваться отладчиком от Facebook.
Не забудьте сохранить изменения, нажав на кнопку «Обновить».
Вот вид размеченной ссылки в ленте Facebook:
Как проверить корректность разметки
Есть три способа проверить правильность внедрения разметки:
Отдельный валидатор есть для Twitter. А ВКонтакте предлагает инструмент для очистки кеша. Он понадобится, если вы заметили ошибку на странице после размещения анонса, исправили ее, а пост в соцсети не обновился.
Публикации в соцсетях — тот случай, когда форма не менее важна, чем содержание. Внедрение Open Graph позволит получить больше переходов заинтересованных пользователей из социальных сетей на ваш ресурс.
Что такое 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 и продвижении ваших ресурсов!
Если у вас остались вопросы ко мне, пишите, я на них отвечу!