Проверка open graph разметки

Как пользоваться

  • Добавляем нужные нам og поля. Все параметры берутся с офсайта OpenGraph;
  • Добавляем страницы исключения;
  • Выбираем нужную сортировку алгоритмов;
  • Чтобы увидеть изменения нужно сбрасывать кэш.

Как добавить og:image

  1. Добавляем «image» в настройках модуля и сохраняем;
  2. Указываем картинку по умолчанию;
  3. Включаем ресайз и указываем размер (рекомендуем ширину 1024, а высоту 99999);
  4. Добавить вызов модуля в коде (ниже)

Порядок применения алгоритмов

Порядок применения алгоритмов — вы можете указать какой порядок присваивания данных для вас является наиболее приемлемым.

По умолчанию порядок таков:
  • og_fields (Данные из полей OpenGraph элементов/разделов) — поиск значений в полях во вкладке OpenGraph у элементов и разделов
  • iblock_fields (Данные из полей элементов/разделов) — пустые значения заполняются данными из полей iblock у элементов и разделов
  • prop_fields (Данные из SetPageProperty/SetDirProperty) — пустые значения заполняются данными из указанных свойствах страниц (SetPageProperty или SetDirProperty)
  • default (Данные из алгоритма «по умолчанию») — оставшиеся пустые значения заполняются данными по старому алгоритму

Уменьшение размеров (resize)

Уменьшение размеров (resize) — вы можете включить автоматическое уменьшение размеров картинок. Также вы можете указать максимальную ширину/высоту и выбрать 1 из 3 стандартных алгоритмов ресайза.

Страницы исключений

Страницы исключений — пути до страниц от корня сайта, на которых мета-данные Open Graph выводиться не должны. Указывать со всеми расширениями, без GET-параметров. Если нужно исключить главную страницу сайта, то прописываем index.

Поля свойств

Обозначение свойств в админке у элементов и разделов — на странице редактирования элементов тебе можно заполнять Open Graph поля. (Вкладка «Настройки Open Graph»)

og:title: Если не задан, то подставится значение из «Названия элемента» (NAME).
og:description: Если не задан, то подставится значение из «Краткое описание» (PREVIEW_TEXT), если оно путо, то значение из «Детальное описание» (DETAIL_TEXT)

Внимание: Автоматическое ограничение кол-ва символов в 121 символ.
og:image: Если у вас указана активность параметра og:image и вы не укажите картинку для og:image, то по умолчанию подставится картинка из PREVIEW_PICTURE, если она не указана, то подставится картинка из DETAIL_PICTURE.. Свойства, которые не доступны для пользовательского редактирования:

Свойства, которые не доступны для пользовательского редактирования:

  • og:url
  • og:site_name
  • og:image:type
  • og:image:width
  • og:image:height

Все остальные свойства указываются в настройках и выводятся автоматически.

Проблемы с повторяющимися тегами Open Graph

Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.

В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.

И все бы ничего, но так уж получается, что этот самый тег стоит первый в очереди и некоторые социальные сети которые не дают возможность выбора изображений берут для создания поста (когда вы жмете кнопку поделиться) именно его, а это в большинстве случаев как минимум не красиво.

Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:

На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.

Основные Метаданные

Чþ ñàÿÃÂõòÃÂðÃÂøÃÂàòðÃÂàweb-ÃÂÃÂÃÂðýøÃÂàò óÃÂðÃÂøÃÂõÃÂúøõ þñÃÂõúÃÂÃÂ, òðü ýÃÂöýþ ôþñðòøÃÂàñð÷þòÃÂõ üõÃÂðôðýýÃÂõ ú òðÃÂõù ÃÂÃÂÃÂðýøÃÂõ. ÃÂàþÃÂýþòÃÂòðõüÃÂàýð ÿõÃÂòþýðÃÂðûÃÂýþù òõÃÂÃÂøø ÿÃÂþÃÂþúþûð
RDFa ÃÂÃÂþ þ÷ýðÃÂðõàÃÂÃÂþ òàñÃÂôøÃÂõ ÃÂð÷üõÃÂðÃÂàôþÿþûýøÃÂõûÃÂýÃÂõ ÃÂõóø ò òðÃÂõù web-ÃÂÃÂÃÂðýøÃÂõ. çõÃÂÃÂÃÂõ þÃÂýþòýÃÂàÃÂòþùÃÂÃÂòð ôûàúðöôþù ÃÂÃÂÃÂðýøÃÂÃÂ:

  • — ÃÂð÷òðýøõ òðÃÂõóþ þñÃÂõúÃÂð, úðú þý ôþûöõý þÃÂþñÃÂðöðÃÂÃÂÃÂàò óÃÂðÃÂõ, ýðÿÃÂøüõàÃÂøûÃÂü, «The Rock».
  • — , ýðÿÃÂøüõÃÂ, «video.movie». à÷ðòøÃÂøüþÃÂÃÂø þàÃÂøÿð, üþöýþ ÷ðôðÃÂàôÃÂÃÂóøõ ÃÂòþùÃÂÃÂòð úþÃÂþÃÂÃÂõ üþóÃÂàñÃÂÃÂàýõþñÃÂþôøüÃÂ.
  • — URL-ðôÃÂõàø÷þñÃÂðöõýøÃÂ, úþÃÂþÃÂÃÂù ôþûöõý þÿÃÂõôõûøÃÂàÃÂðàþñÃÂõúàò óÃÂðÃÂõ ôûàø÷þñÃÂðöõýøÃÂ.
  • — ÃÂðýþýøÃÂõÃÂúøù URL-ðôÃÂõàþñÃÂõúÃÂð, úþÃÂþÃÂÃÂù ñÃÂôõàøÃÂÿþûÃÂ÷þòðÃÂÃÂÃÂàò úðÃÂõÃÂÃÂòõ õóþ
    ÿþÃÂÃÂþÃÂýýþóþ ID ò óÃÂðÃÂõ, ýðÿÃÂøüõÃÂ, «http://www.imdb.com/title/tt0117500/».

àúðÃÂõÃÂÃÂòõ ÿÃÂøüõÃÂð ýøöõ ÿÃÂøòþôøÃÂÃÂàÃÂð÷üõÃÂúð ÿÃÂþÃÂþúþûð Open Graph ôûàÃÂøûÃÂüð «The Rock» ýð
IMDB:

áûõôÃÂÃÂÃÂøõ ÃÂòþùÃÂÃÂòð ÃÂòûÃÂÃÂÃÂÃÂàýõþñÃÂ÷ðÃÂõûÃÂýÃÂüø ôûàûÃÂñþóþ þñÃÂõúÃÂð ø, úðú ÿÃÂðòøûþ, ÃÂõúþüõýôÃÂõÃÂÃÂÃÂ:

  • — URL-ðôÃÂõà÷òÃÂúþòþóþ ÃÂðùûð, úþÃÂþÃÂÃÂù ÃÂþÿÃÂÃÂÃÂÃÂòÃÂõàÃÂÃÂþüàþñÃÂõúÃÂÃÂ.
  • — ÃÂôýþ-ôòð ÿÃÂõôûþöõýøàþÿøÃÂðýøàòðÃÂõóþ þñÃÂõúÃÂð.
  • — áûþòþ, úþÃÂþÃÂþõ ÿþÃÂòûÃÂõÃÂÃÂàÿõÃÂõô ýð÷òðýøõü ÃÂÃÂþóþ þñÃÂõúÃÂð ò ÿÃÂõôûþöõýøø. âøÿ (a, an, the, «», auto). ÃÂÃÂûø òÃÂñÃÂðýþ , ÿþÃÂÃÂõñøÃÂõûàôðýýÃÂàôþûöõý òÃÂñøÃÂðÃÂàüõöôà«a» øûø «an». ÃÂþ ÃÂüþûÃÂðýøà— » » (ÿÃÂÃÂÃÂþ).
  • — âõó ûþúðÃÂøø.
    äþÃÂüðà. ÃÂþ ÃÂüþûÃÂðýøà.
  • — âøÿ ôÃÂÃÂóøàûþúðûõù ýð ÃÂÃÂþù ÃÂÃÂÃÂðýøÃÂõ.
  • — ÃÂÃÂûø òðàþñÃÂõúàÃÂòûÃÂõÃÂÃÂàÃÂðÃÂÃÂÃÂàñþûÃÂÃÂþóþ web-ÃÂðùÃÂð, ýð÷òðýøõ, ôþûöýþ þÃÂþñÃÂðöðÃÂÃÂÃÂàýð òÃÂõàÃÂÃÂÃÂðýøÃÂðàÃÂðùÃÂð. ÃÂðÿÃÂøüõÃÂ, «IMDb».
  • — URL-ðôÃÂõàòøôõþ-ÃÂðùûð, úþÃÂþÃÂÃÂù ÃÂþÿÃÂÃÂÃÂÃÂòÃÂõàÃÂÃÂþüàþñÃÂõúÃÂÃÂ.

ÃÂðÿÃÂøüõà(line-break øÃÂúûÃÂÃÂøÃÂõûÃÂýþ ò ôõüþýÃÂÃÂÃÂðÃÂøþýýÃÂàÃÂõûÃÂÃÂ):

áÃÂõüàRDF (ò Turtle)
üþöýþ ýðùÃÂø ýð ogp.me/ns.

Разметка Open Graph

Основная часть материалов, которыми делятся люди, представлена на Facebook в виде URL, поэтому для разметки сайта важно использовать теги Open Graph. От них зависит то, как ваши материалы будут выглядеть на Facebook

Если этих тегов нет, краулер Facebook с помощью встроенных эвристических алгоритмов приблизительно определит заголовок и описание ваших материалов, а также выберет изображение для предварительного просмотра. Чтобы обеспечить наилучшее качество публикаций на Facebook, задайте эти элементы с помощью тегов Open Graph.

Пример материала, отформатированного с использованием тегов Open Graph:

Пример разметки

Ниже представлен пример разметки статьи, новости или записи в блоге со свойством и некоторыми дополнительными свойствами:

В этих свойствах содержатся описательные метаданные о статье

Нам важно, чтобы эти данные обязательно присутствовали в публикации, когда человек делится статьей

Основные теги

В таблице ниже представлены основные метатеги, которые должны присутствовать в материалах любого типа.

Канонический URL вашей страницы. Это должен быть простой URL без переменных сеанса, параметров для идентификации пользователей и счетчиков. Отметки «Нравится» и действия «Поделиться» для этого URL будут агрегироваться именно по этому URL. Например, URL в домене для мобильных устройств должны указывать на версию URL для ПК, которая выступает в качестве канонического URL для агрегирования отметок «Нравится» и перепостов в различных версиях этой страницы.

Заголовок статьи без какого-либо упоминания бренда, например названия сайта.

Краткое описание материалов (обычно 2–4 предложения). Отображается под заголовком публикации на Facebook.

URL изображения, которое отображается на Facebook, когда человек делится материалами. Подробнее см. . Также рекомендуем ознакомиться с нашим по созданию изображения для предварительного просмотра.

Чтобы воспользоваться статистикой Facebook, добавьте на страницу ID приложения. С помощью статистики можно просматривать информацию о переходах на ваш сайт из Facebook. ID приложения указан в панели приложений.

Чтобы привлечь внимание к вашим материалам и повысить вовлеченность, добавьте два дополнительных тега:

Язык ресурса. Значение по умолчанию — . Если материалы доступны на нескольких языках, можно добавить соответствующие теги . Подробнее о поддерживаемых языках см. в нашей .

Usage

From ruby

Initialize optimizer (or you can call optimization methods directly on ):

image_optim = ImageOptim.new

image_optim = ImageOptim.new(:pngout => false)

image_optim = ImageOptim.new(:nice => 20)

Optimize image getting temp path:

image_optim.optimize_image('a.png')

Optimize image in place:

image_optim.optimize_image!('b.jpg')

Optimize image data:

image_optim.optimize_image_data(data)

Multiple images:

image_optim.optimize_images(Dir) do |unoptimized, optimized|
  if optimized
    puts "#{unoptimized} => #{optimized}"
  end
end

image_optim.optimize_images!(Dir)

image_optim.optimize_images_data(datas)

Реализованные проекты

Сообщество с открытым исходным кодом(Open Source) разработало ряд парсеров и издательских
инструментов. Сообщите в Facebook, если вы создали что-то подобное!

  • Facebook Object Debugger — Официальный парсер и отладчик от Facebook
  • Google Rich Snippets Testing Tool — Поддержка протокола Open Graph в поисковых системах, а так же в вертикальных поисковых системах
  • PHP Validator и Markup Generator — OGP Валидатор 2011 и Генератор разметки на PHP5 ООП
  • PHP Consumer —
    небольшая библиотека для доступа к данным протокола Open Graph на PHP

  • простой парсер на PHP
  • PyOpenGraph —
    библиотека написанная на Python для парсинга информации протокола Open Graph с веб-сайтов
  • OpenGraph Ruby —
    Ruby Gem Парсит веб-страницы и извлекает разметки протокола Open Graph
  • OpenGraph для Java —
    небольшой Java-класс, используемый для представления протокола Open Graph
  • RDF::RDFa::Парсер —
    Perl RDFa парсер, который понимает протокол Open Graph
  • WordPress plugin — Официальный плагин для WordPress от Facebook, который добавляет метаданные Open Graph для сайтов на базе WordPress
  • Alternate WordPress OGP plugin — Альтернативный плагин для WordPress, который добавляет метаданные Open Graph для сайтов на базе WordPress

Публикуете много видео? Используйте 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

Полная документация по разметке Open Graph доступна в нескольких источниках:

  • ogp.me — англоязычная документация;
  • ruogp.me — документация на русском языке.

Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.

Также есть руководства по применению Open Graph для отдельных соцсетей:

По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.

Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги в разделе

Обязательные свойства

Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.

Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:

В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.

На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:

Опциональные свойства

Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:

Вот так description отображается в публикациях в Фейсбуке:

А так — в Телеграме:

А в Телеграме корректно подтягивается содержимое тега og:site_name:

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.

Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:

Что такое Open Graph и зачем он нужен?

На многих страницах сайта мы видим кнопки для соцсетей. При нажатии на них происходит репост анонса страницы сайта. При этом сниппет с этим анонсом формируется по правилам той соцсети, где происходит репост. То есть текст и картинка в анонс попадают автоматически со страницы сайта. Очень часто это бывает не самый понятный текст и не самая удачная картинка. В сниппет может попасть даже рекламный баннер, который в это время оказался на странице, совершенно далекий от темы статьи. Если «социальному» роботу попалась даже подходящая картинка, она может быть изуродована до неузнаваемости подгонкой под формат соцсети всякими обрезаниями и сжатиями.

Для того, чтобы анонс страницы выглядел информативно и привлекательно, чтобы на него хотелось кликнуть, а не скорее пролистнуть, и придумали специальные правила. Это – микроразметка для социальных сетей. Теперь вебмастер может определять вид анонса страницы сайта в соцсетях. Он указывает какой брать текст, изображение и анкор ссылки для сниппета.

Open Graph (OG)– это специальный словарь семантической разметки, который в свое время был разработан для Facebook. Сейчас этот словарь понимают и остальные соцсети – ВКонтакте, Twitter, Одноклассники, Pinterest и другие. Протокол Open Graph также поддерживают поисковики, в том числе Гугл и Яндекс. Наряду с schema.org это самый распространенный словарь для микроразметки.

Структурированные Свойства

Некоторые свойства могут иметь дополнительные метаданные, прикрепленные к ним.
Они определены таким же образом как метаданные и
, но будут иметь дополнительные .

Свойство тега имеет несколько дополнительных структурированных свойств:

  • — Идентичный .
  • — Альтернативный url-адрес для использования в случае, если web-страница требует
    HTTPS.
  • — Типы MIME для изображения.
  • — Число пикселей в ширину.
  • — Число пикселей в высоту.

Пример структурированных свойств для изображения:

Свойство тега имеет идентичные теги с . Вот пример:

Тег имеет только 3 доступных свойства (потому что, звук не имеет ширины и высоты):

Интеграция

Как вывести OpenGraph у элементов:

Вам необходимо прописать в result_modifier.php шаблона используемого компонента следующее:

// подгружаем все модуль и все его классы
\Bitrix\Main\Loader::includeModule('dev2fun.opengraph');
\Dev2fun\Module\OpenGraph::Show($arResult,'element'); 
// где arResult - идентификатор элемента
// где element - тип, т.к. мы выводим для элемента, поэтому element

Как вывести OpenGraph у разделов:

Вам необходимо прописать в result_modifier.php шаблона используемого компонента следующее:

// подгружаем все модуль и все его классы
\Bitrix\Main\Loader::includeModule('dev2fun.opengraph');
\Dev2fun\Module\OpenGraph::Show($arResult,'section'); 
// где arResult - идентификатор раздела
// где section - тип, т.к. мы выводим для раздела, поэтому section

Поддерживаемые события

название события передаваемые переменные описание
OnBeforeAddOpenGraph &$arSettings — массив настроек&$cache_id — идентификатор кэша Событие запускается перед запуском всех алгоритмов
OnAfterAddOgFields &ogValues — массив полей со значениями Событие запускается после алгоритма og_fields
OnAfterAddIBlockFields &ogValues — массив полей со значениями Событие запускается после алгоритма iblock_fields
OnAfterAddPropFields &ogValues — массив полей со значениями Событие запускается после алгоритма prop_fields
OnAfterAdd &ogValues — массив полей со значениями Событие запускается после всех алгоритмов
OnBeforeOutput &$arData — массив полей со значениями Событие запускается перед выводом свойств (не кэшируется!)

Массивы

Если тег может иметь несколько значений, просто поставьте несколько таких тегов на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.

Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.

Пример:

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер px, второе изображением не имеет указанных размеров и третье изображением имеет размеры px в высоту.

Социальная сеть ВКонтакте не берет краткое описание (description)

После того как Open Graph будет внедрен наверняка каждый заметит одну неприятную особенность при публикации записей в социальную сеть ВКонтакте. Дело в том, что именно эта сеть при формировании превьюшки (сниппета) упорно не желает брать в краткое описание статьи указанное в поле description. Все остальные соц. сети это делают, а вот ВКонтакте отказывается.

Чтоб понять причину подобного явления я решил задать вопрос в службу поддержки, на что получил вполне доходчивый ответ:

Получается ВКонтакте намеренно перестал брать краткое описание в свой сниппет еще с осени 2016 года. Жаль конечно, но что поделаешь. Так что если вы заметили подобную проблему знайте что это не ваша вина, а некие запреты со стороны социальной сети.

В заключение хочу отметить, что кроме протокола Open Graph существует множество других форматов микроразметки, в частности Schema.org, о которой мы говорили в статье «Микроразметка Schema.org для материалов Joomla 3».

Как внедрить OG на сайт?

Информация для соцсетей передается с помощью специальных тегов ОпенГраф. Они же, в свою очередь, прописываются в блоках html и head.

В теге html объявляем то, что на странице мы используем словарь OG.

Остальное прописываем в head. Вот основные мета теги Open Graph:

  • og:title – аналог обычного title, заголовок страницы или другого объекта, он же текст ссылки;
  • og:description – как и стандарный description, описание материала, которое будет выводиться под заголовком;
  • og:type – типы объектов, это может быть статья, видео или аудио трек;
  • og:image – ссылка на иллюстрацию материала;
  • og:url – собственно сама ссылка на материал.

Далее примеры как прописать теги OG.

В примере встретилось еще несколько полезных тегов. Желательно указывать локализацию, можно задать размер изображения.

Вариантов значений тега type достаточно много. Для разных видов контента они свои. Кроме того, с этим связаны атрибуты в теге html. Подробное описание содержится в документации Фейсбук для разработчиков

или на сайте Open Graph.

Для каждой соцсети существуют отдельные теги. Особенно много специализированных тегов у Twitter. Например, у всех сетей разные требования к размерам картинок. И чтобы все это выглядело красиво можно прописать vk:image для VK, fb:image для Фейсбук, twitter:image для Твиттер. Каждая соцсеть будет брать параметры изображения из своего тега.

Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика

Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.

Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:

  • в обложку поста подтянется случайная картинка из контента страницы, неправильных размеров;
  • вместо заголовка и краткого анонса статьи — содержимое тега.

Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.

Репост в Фейсбук статьи без внедренной разметки:

А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

  • указать, какой заголовок и анонс должны быть у публикации при репосте страницы;
  • указать адрес и параметры изображения, которое должно подтянуться в качестве иллюстрации.

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Options

  • — Nice level, priority of all used tools with higher value meaning lower priority, in range , negative values can be set only if run by root user (defaults to )
  • — Number of threads or disable (defaults to number of processors)
  • — Verbose output (defaults to )
  • — Require image_optim_pack or disable it, by default image_optim_pack will be used if available, will turn on unless explicitly disabled (defaults to )
  • — Skip workers with missing or problematic binaries (defaults to )
  • — Allow lossy workers and optimizations (defaults to )
  • — Configure cache directory
  • — Also cache worker digests along with original file digest and worker options: updating workers invalidates cache

Worker can be disabled by passing instead of options hash or by setting option to .

gifsicle:

  • — Interlace: — interlace on, — interlace off, — as is in original image (defaults to running two instances, one with interlace off and one with on)
  • — Compression level: — light and fast, — normal, — heavy (slower) (defaults to )
  • — Avoid bugs with some software (defaults to )

jpegoptim:

  • — Allow limiting maximum quality (defaults to )
  • — List of extra markers to strip: , , , or (defaults to )
  • — Maximum image quality factor .., ignored in default/lossless mode (defaults to )

jpegtran:

  • — Copy all chunks (defaults to )
  • — Create progressive JPEG file (defaults to )
  • — Use jpegtran through jpegrescan, ignore progressive option (defaults to )

optipng:

  • — Optimization level preset: is least, is best (defaults to )
  • — Interlace: — interlace on, — interlace off, — as is in original image (defaults to )
  • — Remove all auxiliary chunks (defaults to )

pngcrush:

  • — List of chunks to remove or — all except tRNS/transparency or — all except tRNS and gAMA/gamma (defaults to )
  • — Fix otherwise fatal conditions such as bad CRCs (defaults to )
  • — Brute force try all methods, very time-consuming and generally not worthwhile (defaults to )
  • — Blacken fully transparent pixels (defaults to )

pngout:

  • — Copy optional chunks (defaults to )
  • — Strategy: — xtreme, — intense, — longest Match, — huffman Only, — uncompressed (defaults to )

pngquant:

  • — Allow quality option (defaults to )
  • — Maximum number of colors to use (defaults to )
  • — min..max — don’t save below min, use less colors below max (both in range ; in yaml — ), ignored in default/lossless mode (defaults to , in lossy mode)
  • — speed/quality trade-off: — slow, — default, — fast & rough (defaults to )
Ссылка на основную публикацию