«Делай сайты с 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 для отдельных соцсетей:
По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.
Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.
Обязательные свойства
Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:
- og:title — заголовок статьи или страницы. Текст заголовка указывается в атрибуте content
<meta property="og:title" content="Как быстро и бесплатно сделать инфографику: 4 онлайн-сервиса с доступным функционалом"/>
- og:type — тип объекта. Например, article, book, video.movie и проч. Полный перечень — здесь. В зависимости от указанного типа могут потребоваться другие свойства, помимо четырех обязательных. Например, если на странице размещена статья, укажите в коде разметки такую строку:
<meta property="og:type" content="article" />- og:url — канонический URL, по которому доступен указанный объект. Например, если пользователь расшарит не каноническую страницу (например, страницу пагинации), в соцсети все равно появится ссылка на основную страницу, прописанную в og:url.
<meta property="og:url" content="http://www.site.ru/canonicalpage/" />- og:image — здесь указываем, какую картинку нужно подтянуть к публикации при репосте. В атрибуте content указывается URL изображения. Обратите внимание! При использовании разметки изображение может даже не находиться в статье или на странице. Его можно разместить в любой директории сайта, а в теге og:image указать ссылку на него. При репосте соцсети проигнорируют картинки на странице, а подтянут указанное изображение из нужной директории.
<meta property="og:image" content="https://blog.promopult.ru/wp-content/uploads/2019/02/checklist01-1200x630.png"/>
Как быть с размерами картинок
У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:
- vk:image
- fb:image
- twitter:image
При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.
Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:
<meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/>В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.
На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:
А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:
Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.
Опциональные свойства
Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:
- og:description — текст краткого описания страницы или статьи (анонса). Во ВКонтакте и Фейсбуке сейчас отображается ограниченное количество символов описания. Но если вы публикуете ссылки на сайт в Телеграме, обязательно заполняйте этот тег.
<meta property="og:description" content="Еще не добавили чат в поиске Яндекса? Стоит сделать это. Но только в том случае, если вы готовы быстро реагировать на вопросы из чата и вообще — разговаривать с вашими покупателями. Рассказываем в деталях, как и зачем подключать чат в поиске."/>Вот так description отображается в публикациях в Фейсбуке:
А так — в Телеграме:
- og:site_name — здесь можно указать название сайта и пару слов, описывающих его содержимое или назначение. Данные из этого параметра используются не везде. Например, при репосте в Фейсбук отображается просто URL сайта:
<meta property="og:site_name" content="Блог PromoPult о развитии сайта и привлечении клиентов из интернета"/>
А в Телеграме корректно подтягивается содержимое тега og:site_name:
Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.
Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:
Публикуете много видео? Используйте Open Graph
Видеохостинги и другие сайты, которые публикуют много видео, могут использовать Open Graph для улучшения ранжирования видеороликов в сервисе Яндекс.Видео.
Больше информации об этом — в справке Яндекса.
В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:
- og:title — название видео, здесь можно указать до 1000 символов;
- og:url — URL страницы с видео;
- og:video — путь к видеоплееру или файлу;
- og:image — ссылка на картинку, которая должна использоваться как заставка видео;
- og:description — описание ролика (от 150 до 1000 символов);
- ya:ovs:upload_date — дата и время загрузки;
- ya:ovs:adult — в этом мета-теге нужно указать, является ли ваш ролик контентом «для взрослых». Если да, укажите значение «true», если нет — «false»;
- video:duration — длительность видео (указывается в секундах с округлением до целого числа);
- og:type — категория видео;
- og:video:type — доступные кодеки для данного формата видео.
Как внедрять Open Graph
Вручную
Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:
<html prefix="og: http://ogp.me/ns#">Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.
С помощью плагинов
Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).
По ссылкам ниже можно найти плагины для вашей CMS:
А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.
Пример внедрения Open Graph на WordPress
Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.
Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.
После активации перейдите в модуль «Социальные мета» в меню плагина:
Укажите настройки:
- главной страницы;
- изображений;
- типов данных;
- укажите отдельные настройки для Twitter.
Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».
Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.
Вот вид размеченной ссылки в ленте Facebook:
Примерно по такому же принципу работают другие плагины.
Как проверить корректность разметки Open Graph
Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:
Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.
- Валидатор микроразметки от Яндекса. Это стандартный валидатор в Яндекс.Вебмастере. Добавляете URL или фрагмент кода, и получаете результат проверки.
- Сервис Open Graph Check. Вводите URL — получаете список свойств с описаниями.
Также есть отдельный инструмент для проверки микроразметки для Твиттера.
Контролируйте внешний вид репостов с помощью Open Graph
Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.
Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.
Для получения же большего охвата используйте возможности таргетированной рекламы. В системе PromoPult вы можете запустить рекламу в myTarget (Одноклассники, проекты Mail.ru) и ВКонтакте из единого интерфейса. Комиссия при этом 0%. То есть вы платите столько же, сколько платили бы при запуске рекламы в соцсетях напрямую, но получаете дополнительные удобные инструменты.
mvs
Совместима ли разметка для соцсетей с ld+json для Google, можно ли избежать дублирования?
PromoPult Автор
Open Graph описывается с помощью синтаксиса RDFa (JSON-LD — нет). JSON-LD подходит для семантической разметки на базе Schema.org (равно как и RDFa, как и Microdata). Open Graph и Schema.org решают разные задачи. Open Graph — грубо говоря, для красивых репостов, Schema.org — опять же, грубо говоря, для красивых сниппетов в поиске. Оба вида разметки прекрасно уживаются на одной странице, о дублировании переживать не стоит.