микроразметка open graph что это
Что такое разметка 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, Вконтакте и далее по списку? Проверьте, готов ли к этому сайт. Один из обязательных пунктов — наличие микроразметки 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 позволит получить больше переходов заинтересованных пользователей из социальных сетей на ваш ресурс.
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 — полезняк, который нужно внедрять на сайты. Я проспал эту тему (откладывал постоянно), потому сейчас дописываю пост и иду пилить его на свои сайты 🙂
Понравился пост? Сделай репост и подпишись!
Рекомендую к прочтению
301 редирект в SEO
Увеличение трафика на сайт или как поднять посещаемость
Еще не зарегистрированы?
Что такое 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 теги позволяют:
Таким образом, применяя различные виды микроразметки, вы сможете обеспечить своему сайту рост и популярность в интернете.