Микроразметка Joomla 3 при помощи протокола Open Graph своими руками

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

В данной статье мы разберем на конкретном примере как внедрить протокол (микроразметку) Open Graph для статей сайта созданного при помощи CMS Joomla 3. Поговорим об основных тегах, префиксах и метаданных данного протокола, а так же поговорим об ошибках, которые могут возникнуть в процессе работы.

 Основные теги протокола Open Graph

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

Пример превьюшки страницы сайта при использовании протокола Open Graph

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

  • og:title – при помощи данного тега мы можем передавать заголовок поста в социальные сети;
  • og:description – как следует из названия, тег служит для передачи краткого описания поста, длина краткого описания не должна превышать 300 символов;
  • og:type – указывает тип объекта, это может быть статья, музыка, видео и прочее. Подобных объектов в протоколе Open Graph не так уж и много и если на странице их несколько, то указывать стоит только один, который вы считаете основным;
  • og:url – адрес страницы, который будет использован в качестве постоянного идентификатора;
  • og:image – тег необходим для указания изображения, которое следует брать при формировании поста. Какими должны быть изображения, а точнее, какого размера достаточно интересный вопрос, который мы обсудим в следующий раз;
  • og:site_name – имя сайта (его название) на котором размещена та самая информация об объекте.

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

Внедрение протокола Open Graph в Joomla 3

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

Как всегда самым простым вариантом в решение данной, если можно так сказать, проблемы будет использование специальных плагинов (Easy Open Graph, Phoca Open Graph, Open Graph Tags, Global Open Graph). Но если честно ни один из множества плагинов, которые я тестировал, меня не впечатлили, поэтому я решил делать все самостоятельно, чего и Вам советую.

Как добавить данные в блок head документа Joomla 3? В этом нам поможет стандартный класс JDocument, при помощи которого мы сможем внедрить в блок head документа все что угодно. Чтобы не ходить вокруг да около, давайте сразу рассмотрим код, который необходимо добавить в файл отвечающий макет статьи /components/com_content/views/article/tmpl/default.php, но предварительно я советую вам создать переопределение (скопировать данный файл в папку /templates/имя_шаблона/html/com_content/article). Более подробная информация об этом содержится в статье «Переопределение в Joomla 3».

//Протокол Open Graph
$document =& JFactory :: getDocument();
if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации
$document -> addCustomTag( '
<meta property="og:title" content="'.$this -> escape($this -> item -> title).'" />
<meta property="og:description" content="'.$desc.'" />
<meta property="og:type" content="article" />
<meta property="og:url" content="'.JURI :: current().'" />
<meta property="og:image" content="http://joom4all.ru/'.$images -> image_fulltext.'" />
<meta property="article:published_time" content="'.$this->item->created.'" />
<meta property="article:modified_time" content="'.$this->item->modified.'" />
<meta property="fb:app_id" content="140756266603425" />
');

Код не сложный, изначально мы объявляем, что будем использовать класс JDocument, а затем при помощи метода addCustomTag мы можем добавлять что угодно в секцию head документа, в нашем случае это будут метатеги Open Graph.

Хочу обратить отдельное внимание на то, как формируется описание публикации, тут мы при помощи определенного условия проверяем наличие текста в метатеге description , если его нет, тогда в качестве краткого описания страницы будет использован вступительный текст материала. За это отвечает следующая строчка кода:

if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации

После чего при помощи метода addCustomTag начинаем добавлять в head документа необходимую для протокола Open Graph информацию – заголовок, описание, тип объекта, изображение, а так же дату публикации и модификации статьи. Кроме того обратите внимание на свойство fb:app_id, это идентификатор вашего приложения (сайта, группы) в социальной сети Facebook, получить данный идентификатор можно на странице Инструменты и поддержка -> Мои приложения -> Добавить новое приложение.

Проверка микроразметки Open Graph

После того как микроразметка Open Graph была заполнена и перенесена в секцию head документа самое время проверить корректность её работы. Для этих целей можно воспользоваться валидатором микроразметки от Яндекса  либо отладчиком перепостов от Facebook.

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

Проверка микроразметки Open Graph при помощи отладчика перепостов

Теперь проделаем то же самое в валидаторе микроразметки от Яндекса, но тут оказалось не все так замечательно, и я получил ошибку, которая гласит:

ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix

Выглядит это дело следующим образом:

В результате проверки микроразметки Open Graph валидатор Яндекса выдал ошибку о неизвестном префиксе article

Что это за атрибут такой и почему он не известен валидатору? Оказалось все просто, чтобы избавиться от подобной ошибки всего на всего необходимо явно указать Яндексу, что мы используем микроразметку (протокол) Open Graph. Для этого в индексном файле нашего шаблона необходимо найти открывающийся тег HTML:

<html lang="en">

И заменить его следующей строкой:

<html lang="en" prefix="article: http://ogp.me/ns/article#">

После этого ошибка в валидаторе Яндекса исчезнет. Кстати возможны случаи, когда вместо article Яндексу не нравится префикс fb, в таком случае в теге html необходимо дописать дополнительную строку fb: http://ogp.me/ns/fb# и так далее:

<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> 

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

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

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

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

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

Убираем дублирующийся метатег og:image создаваемый плагином mAvik Thumbnails

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

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

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

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

С осени позапрошлого года у сниппетов больше нет описания. Это осознанное решение разработчиков; очевидно, связанное с компромиссами в проблемах веб-дизайна и интерфейса. По их мнению, почти никогда туда не помещался осмысленный текст, в таком описании не было смысла.

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

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

 

Добавить комментарий


Комментарии   

Татьяна
+1 #1 Татьяна 30.04.2018 00:44
Спасибо за статью! Было бы здорово, если бы вы описали код самих социальных кнопок. В качестве кнопок я использую шрифт icomoon и у меня в a href указана ссылка на главную страницу. Позднее я добавила теги Open Graph (по вашей статье). В отладчике перепостов пример перепоста выглядит верно (хотя и пишет "URL, указанный для og:image, имеет недействительное расширение"), но реально при нажатии на кнопки на сайте в перепосте так и остается только главная страница, с какой бы страницы не была нажата кнопка. Как сделать, чтобы ссылка подхватывалась с той страницы, с которой нажимается кнопка?
Цитировать