Добавление Open Graph protocol в Joomla. Какая польза Open Graph для кнопок like Перечислим основные возможности расширения
Open Graph полезно использовать в Facebook, во ВКонтакте и других сетях.
Перейдем теперь к практике. Что именно должен сделать вебмастер, чтобы схватывалась нужное вам изображение.
Если вы добавляете свежий пост с помощью кнопок, установленных на сайте вручную, то уже заметили, что миниатюра вместе с анонсом может опубликоваться любая. В том числе и счетчик с тиц вместо красивого и специально подобранного рисунка. При ручном добавлении вы, конечно, можете тут же скорректировать и не допустить неподходящей графики. Но всегда хочется все делать без лишних кликов. К тому же, при автоматическом кросспостинге картинку не изменить.
Возникают еще и другие несуразности с выводом заголовков, описаний и т. д., поэтому разработчики соц. сетей придумали специальную разметку ]]> Open Graph ]]> .
Нужно отметить, что Яндекс предлагает 5 решений для установки микроразметки.
Чтобы избежать различных казусов, вебмастер может добавить следующие мета-теги Open Graph между тегами
В тег добавить путь к xmlns, не забудьте весь код поместить в скобки:
html xmlns:og="https://ogp.me/ns#"Еще пример кода, код поместить в скобки:
Html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru-RU" lang="ru-RU" prefix="og: https://ogp.me/ns# video: https://ogp.me/ns/video# ya: https://webmaster.yandex.ru/vocabularies/"
Готовые решения движков для добавления мета тегов Open Graph
Для WordPress плагины:
Facebook OpenGraph Meta - скачать https://wordpress.org/plugins/facebook-opengraph-meta/
Opengraph and Microdata Generator - скачать https://wordpress.org/plugins/opengraph-and-microdata-generator/
Для Drupal модули:
Open Graph meta tags скачать для 6 и 7 версий по ссылке https://drupal.org/project/opengraph_meta
Модуль Meta Tags настраивает мета теги в друпал 7 и некоторые параметры из протокола Open Graph. Скачать https://drupal.org/project/metatag
Плагин для Joomla
Easy Open Graph размещает небольшую картинку, краткий анонс и ссылку в раздел интересов в Facebook. Выбрать версию джумлы и скачать https://extensions.joomla.org/extensions/social-web/facebook-integration/17883
Посмотреть og:разметку при смене картинок, заголовков и т. д. можно с помощью инструмента URL Linter по ссылке https://developers.facebook.com/tools/debug
К сожалению очень мало информации по этому вопросу в интернете особенно в рунете. Все что нам может предложить google для решения задачи по вставке open graph protocol в joomla? это парочка плагинов которые позволяют вставлять свои meta и теги head. Один из популярных являет ITP Meta. Принцип работы его бесплатной версии мягко говоря странный. После того как вы создали статью, вам необходимо отдельно для каждого материала прописывать мета теги. Не желая мирится с такой рутинной работой я предлагаю вам воспользоваться моим методом.
Итак для начала чтоб стало совсем понятно почему надо ставить Open Graph protocol для facebook в head Joomla. Вот как выглядит материал без специальных записей.
А вот так он выглядит со всеми необходимыми записями. Под необходимыми я подразумеваю основные. Так как записей очень много некоторые из перечисленных meat тегов протокола Open Graph которые будут в этой статье не очень нужны facebook-у, но они являются обязательными для скажем pinterest.
Добавление Open Graph protocol в Joomla
- Идем сюда: /components/com_content/views/article/tmpl
- Открываем файл: default.php
- Далее ищем 14-ую строчку с комментарием: // Create shortcuts to some parameters.
- Далее необходимо определить переменную для даты создания статьи. Для этого добавляем следующую строчку куда угодно в список переменных. В итоге должна появится новая переменная $datepubl . Для примера вот как это у меня.
Как видите все просто. Что касается картинок то идет следующий порядок если нет картинки для вступительной части материала, берется картинка полного материала, если и ее нет то берется логотип сайта. Его разумеется надо указать заменив на свой в строчке "http://komarovdesign.com/images/logo_12x.png"
Далее так же ручками необходимо прописать описание вашего сайта в строке "og:site_name". Указать автора статьи "article:author". В строке "fb:admins" необходимо прописать ID вашего профиля на facebook.
Если внимательно читали то заметили что тут нет основного тега "og:description" он добавляется в другом файле.
- Идем сюда: libraries/joomla/document/html/renderer/
- Открываем файл: head.php
- Ищем примерно 106 сточку с комментарием: // Don"t add empty descriptions
- И после основного description вставляем мета тег Open Graph protocol. В итоге должно получиться следующее.
Facebook является одним из основных инструментов для обратной связи с посетителями сайта и само собой инструментом для продвижения любого ресурса. Кнопочки «Поделится» и «Нравится» жизненно необходимы для вашего ресурса. Но какую именно информацию должен подхватывать робот не понятно. Каждый сайт отличается по своей структуре и что бы робот Facebook не парсил материал наугад существует протокол Open Graph . Что это такое и как он облегчает жизнь роботам и веб-мастерам?
Покажу наглядный пример, чтобы стало понятно зачем надо ставить Open Graph для Facebook в head секцию Joomla . Вот как выглядит материал без специальных записей:
А вот так он выглядит со всеми необходимыми meta property записями. Так как записей очень много, некоторые из перечисленных meta property тегов протокола Open Graph которые будут в этой статье не очень нужны для Facebook , но они являются обязательными для других социальных сетей.
Структура для собственной разметки вывода компонента очень проста:
/templates/html/название_компонента/название_вида/название_файла_разметки.php Давайте рассмотрим примеры. Если мы хотим переписать разметку по умолчанию для вывода материала (article), сначала мы должны скопировать этот файл: /components/com_content/views/article/tmpl/default.php в это место, создавая соответствующие директории, в случае если они еще не существуют: /templates/название_шаблона/html/com_content/article/default.php В файле default.php после этого блока: /** * @package Joomla.Site * @subpackage com_content * * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ defined("_JEXEC") or die; JHtml::addIncludePath(JPATH_COMPONENT . "/helpers"); // Create shortcuts to some parameters. $params = $this->item->params; $images = json_decode($this->item->images); $urls = json_decode($this->item->urls); $canEdit = $params->get("access-edit"); $user = JFactory::getUser(); $info = $params->get("info_block_position", 0); JHtml::_("behavior.caption");
Добавляем следующий код:
//OpenGraph start $datepubl = $this->item->created; if (isset($images -> image_intro) and !empty($images -> image_intro)) { $timage = htmlspecialchars(JURI:: root().$images -> image_intro); } elseif (isset($images -> image_fulltext) and !empty($images -> image_fulltext)) { $timage = htmlspecialchars(JURI:: root().$images -> image_fulltext); } else { $timage = "default_logo.jpg"; } $document =& JFactory:: getDocument(); if($this->item->metadesc == "") {$mmd = strip_tags($this->item->introtext);} else {$mmd = $this->item->metadesc;} $document -> addCustomTag(" escape($this -> item -> title).""/> "); //OpenGraph end
Как видите все просто. Картинки выводятся по следующему принципу - если нет картинки для вступительной части материала, выводится картинка полного материала, если и ее нет то берется картинка по умолчанию. Ее надо указать заменив на свою в строке
$timage = "default_logo.jpg";
Основной тег "og:description" генерируется следующим образом: если нет заполненных тегов meta description для статьи то берется вступительный текст материала.
После всех этих операций можно проверить все ли правильно мы сделали, в этом нам поможет инструмент
Open Graph Protocol Solution for Joomla – компонент первопроходец Joomla, который дает возможность осуществления полного контроля над контентом сайтов Joomla, для всех видов настроек Open Graph Protocol.
На данный момент версия расширения позволяет работать с Joomla 2.5 и 3.6x.
Работа с контентом различных сайтов выходит на первый план для всех владельцев. Игнорирование данного момента не позволит поднять рейтинги поисковых систем в различных средах, что может отрицательно сказаться на посещаемости сайта,а также на финансовой стороне вопроса. Если Вы хотите узнать о существующих проблемах Вашего сайта Вы можете проверить сайт на ошибки с целью их своевременного обнаружения и устранения.
С тех пор как началось возрастание объема данных социальных сайтов и сайтов под управлением web2.0., одно из важных мест в управлении занимает технология Open Graph Protocol. Open Graph Protocol (OGP) позволяет разработчику или владельцам веб-сайтов интегрировать их сайт / страницы / сообщения в социальный трафик. Используя OGP можно передавать большой объем информации, такой как заголовок, описание, изображение, теги геолокации, автора и т.д. OGP стал важным объектом, чтобы делать Ваши страницы более дружественными для социальных сетей.
Open Graph Protocol Solution после установки, производит добавление пиктограммы OGP к нижней части редактора статьи в бэкэнде Joomla, в том месте, где Вы можете вводить теги OGP. Также этот компонент дает возможность перечисления всех статей для лучшего управления тегами статей OGP.
Перечислим основные возможности расширения:
основные опции
- Возможность удаления всплывающих окон;
- Удаление RSS;
- Поддержка функции удаления из Ajax.
Поддерживаемые компоненты:
- ComContent (менеджер по статьям);
- K2 (Comk2);
- Flexi content (ComFlexicontent);
- Virtualmart (ComVirtuemart);
- DJ-Catalog (Comdj-каталог);
- Zoo (ComZoo);
- Включение или отключения любого компонента администратором или части фронтэнда отдельно;
- Возможность настройки функций администратора для по умолчанию открытых тегов.
В данной статье мы разберем на конкретном примере как внедрить протокол (микроразметку) Open Graph для статей сайта созданного при помощи CMS Joomla 3. Поговорим об основных тегах, префиксах и метаданных данного протокола, а так же поговорим об ошибках, которые могут возникнуть в процессе работы.
Основные теги протокола Open Graph
Для настройки протокола Open Graph на своем сайте достаточно знать лишь небольшой набор основных метатегов используемых данным протоколом. При помощи протокола Open Graph можно дать описание для статьи, музыки, видео и некоторых других объектов. Но прежде чем говорить о различных объектах, давайте посмотрим, как может выглядеть превьюшка страницы сайта в социальных сетях, в частности при публикации записи в Facebook:
А теперь давайте разберем основные теги, использованные при описании статьи, которые необходимо добавлять исключительно между тегами head документа :
- og:title - при помощи данного тега мы можем передавать заголовок поста в социальные сети;
- og:description - как следует из названия, тег служит для передачи краткого описания поста, длина краткого описания не должна превышать 300 символов;
- og:type - указывает тип объекта, это может быть статья, музыка, видео и прочее. Подобных объектов в протоколе Open Graph не так уж и много и если на странице их несколько, то указывать стоит только один, который вы считаете основным;
- og:url - адрес страницы, который будет использован в качестве постоянного идентификатора;
- og:image - тег необходим для указания изображения, которое следует брать при формировании поста. Какими должны быть изображения, а точнее, какого размера достаточно интересный вопрос, который мы обсудим в следующий раз;
- og:site_name - имя сайта (его название) на котором размещена та самая информация об объекте.
Внедрение протокола 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->$document -> addCustomTag (" escape($this -> item -> title)."" /> image_fulltext."" /> item->created."" /> item->modified."" /> ");
Код не сложный, изначально мы объявляем, что будем использовать класс 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 .
Начнем с «книгоморды», вставляем в соответствующее поле адрес страницы сайта, которую хотим проверить и жмем на кнопку «Отладка». Если все сделано правильно, ошибок быть не должно, а результат должен быть примерно таким:
Теперь проделаем то же самое в валидаторе микроразметки от Яндекса, но тут оказалось не все так замечательно, и я получил ошибку , которая гласит:
ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix
Выглядит это дело следующим образом:
Что это за атрибут такой и почему он не известен валидатору? Оказалось все просто, чтобы избавиться от подобной ошибки всего на всего необходимо явно указать Яндексу, что мы используем микроразметку (протокол) Open Graph. Для этого в индексном файле нашего шаблона необходимо найти открывающийся тег HTML:
И заменить его следующей строкой:
После этого ошибка в валидаторе Яндекса исчезнет. Кстати возможны случаи, когда вместо article Яндексу не нравится префикс fb, в таком случае в теге html необходимо дописать дополнительную строку fb: http://ogp.me/ns/fb# и так далее:
Проблемы с повторяющимися тегами Open Graph
Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.
В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.
Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:
На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.
Социальная сеть ВКонтакте не берет краткое описание (description)
После того как Open Graph будет внедрен наверняка каждый заметит одну неприятную особенность при публикации записей в социальную сеть ВКонтакте. Дело в том, что именно эта сеть при формировании превьюшки (сниппета) упорно не желает брать в краткое описание статьи указанное в поле description. Все остальные соц. сети это делают, а вот ВКонтакте отказывается.
Чтоб понять причину подобного явления я решил задать вопрос в службу поддержки, на что получил вполне доходчивый ответ:
С осени позапрошлого года у сниппетов больше нет описания. Это осознанное решение разработчиков; очевидно, связанное с компромиссами в проблемах веб-дизайна и интерфейса. По их мнению, почти никогда туда не помещался осмысленный текст, в таком описании не было смысла.
Получается ВКонтакте намеренно перестал брать краткое описание в свой сниппет еще с осени 2016 года. Жаль конечно, но что поделаешь. Так что если вы заметили подобную проблему знайте что это не ваша вина, а некие запреты со стороны социальной сети.
В заключение хочу отметить, что кроме протокола Open Graph существует множество других форматов микроразметки, в частности Schema.org, о которой мы говорили в статье «
