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 для статей сайта созданного при помощи CMS Joomla 3. Поговорим об основных тегах, префиксах и метаданных данного протокола, а так же поговорим об ошибках, которые могут возникнуть в процессе работы.
Для настройки протокола Open Graph на своем сайте достаточно знать лишь небольшой набор основных метатегов используемых данным протоколом. При помощи протокола Open Graph можно дать описание для статьи, музыки, видео и некоторых других объектов. Но прежде чем говорить о различных объектах, давайте посмотрим, как может выглядеть превьюшка страницы сайта в социальных сетях, в частности при публикации записи в Facebook:
А теперь давайте разберем основные теги, использованные при описании статьи, которые необходимо добавлять исключительно между тегами head документа :
Теперь давайте перейдем к практике и попытаемся внедрить в наш сайт на 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 была заполнена и перенесена в секцию head документа самое время проверить корректность её работы. Для этих целей можно воспользоваться валидатором микроразметки от Яндекса либо отладчиком перепостов от Facebook .
Начнем с «книгоморды», вставляем в соответствующее поле адрес страницы сайта, которую хотим проверить и жмем на кнопку «Отладка». Если все сделано правильно, ошибок быть не должно, а результат должен быть примерно таким:
Теперь проделаем то же самое в валидаторе микроразметки от Яндекса, но тут оказалось не все так замечательно, и я получил ошибку , которая гласит:
ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix
Выглядит это дело следующим образом:
Что это за атрибут такой и почему он не известен валидатору? Оказалось все просто, чтобы избавиться от подобной ошибки всего на всего необходимо явно указать Яндексу, что мы используем микроразметку (протокол) Open Graph. Для этого в индексном файле нашего шаблона необходимо найти открывающийся тег HTML:
И заменить его следующей строкой:
После этого ошибка в валидаторе Яндекса исчезнет. Кстати возможны случаи, когда вместо article Яндексу не нравится префикс fb, в таком случае в теге html необходимо дописать дополнительную строку fb: http://ogp.me/ns/fb# и так далее:
Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.
В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.
Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:
На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.
После того как Open Graph будет внедрен наверняка каждый заметит одну неприятную особенность при публикации записей в социальную сеть ВКонтакте. Дело в том, что именно эта сеть при формировании превьюшки (сниппета) упорно не желает брать в краткое описание статьи указанное в поле description. Все остальные соц. сети это делают, а вот ВКонтакте отказывается.
Чтоб понять причину подобного явления я решил задать вопрос в службу поддержки, на что получил вполне доходчивый ответ:
С осени позапрошлого года у сниппетов больше нет описания. Это осознанное решение разработчиков; очевидно, связанное с компромиссами в проблемах веб-дизайна и интерфейса. По их мнению, почти никогда туда не помещался осмысленный текст, в таком описании не было смысла.
Получается ВКонтакте намеренно перестал брать краткое описание в свой сниппет еще с осени 2016 года. Жаль конечно, но что поделаешь. Так что если вы заметили подобную проблему знайте что это не ваша вина, а некие запреты со стороны социальной сети.
В заключение хочу отметить, что кроме протокола Open Graph существует множество других форматов микроразметки, в частности Schema.org, о которой мы говорили в статье «
Open Graph полезно использовать в Facebook, во ВКонтакте и других сетях.
Если вы добавляете свежий пост с помощью кнопок, установленных на сайте вручную, то уже заметили, что миниатюра вместе с анонсом может опубликоваться любая. В том числе и счетчик с тиц вместо красивого и специально подобранного рисунка. При ручном добавлении вы, конечно, можете тут же скорректировать и не допустить неподходящей графики. Но всегда хочется все делать без лишних кликов. К тому же, при автоматическом кросспостинге картинку не изменить.
Возникают еще и другие несуразности с выводом заголовков, описаний и т. д., поэтому разработчики соц. сетей придумали специальную разметку ]]> Open Graph ]]> .
Нужно отметить, что Яндекс предлагает 5 решений для установки микроразметки.
Еще пример кода, код поместить в скобки:
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/"
Facebook OpenGraph Meta - скачать https://wordpress.org/plugins/facebook-opengraph-meta/
Opengraph and Microdata Generator - скачать https://wordpress.org/plugins/opengraph-and-microdata-generator/
Open Graph meta tags скачать для 6 и 7 версий по ссылке https://drupal.org/project/opengraph_meta
Модуль Meta Tags настраивает мета теги в друпал 7 и некоторые параметры из протокола Open Graph. Скачать https://drupal.org/project/metatag
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.
Как видите все просто. Что касается картинок то идет следующий порядок если нет картинки для вступительной части материала, берется картинка полного материала, если и ее нет то берется логотип сайта. Его разумеется надо указать заменив на свой в строчке "http://komarovdesign.com/images/logo_12x.png"
Далее так же ручками необходимо прописать описание вашего сайта в строке "og:site_name". Указать автора статьи "article:author". В строке "fb:admins" необходимо прописать ID вашего профиля на facebook.
Если внимательно читали то заметили что тут нет основного тега "og:description" он добавляется в другом файле.
У каждого человека, зарегистрированного в социальной сети, может появиться желание удалить свою страницу совсем, либо на какой-либо период времени. Время, предоставленное разработчиками на раздумье, варьируется от одного месяца до полугода. Это обусловлен
Доброго времени суток.Статистика вещь неумолимая - у многих пользователей на жестких дисках лежат, порой, десятки копий одного и того же файла (например, картинки, или музыкального трека). Каждая из таких копий, разумеется, отнимает место на винчестере. А
С вопросом, как установить windows на компьютер я впервые столкнулся в 4 кассе. Там, где я жил интернета не было, поэтому для меня этот вопрос был особенно сложен. В конце 4-ого класса отец мне купил книгу, точно не помню как она называлась, примерно, «Ос
Драйвера для сетевого адаптера нужны на любом устройстве на Windows, где планируется выходить в сеть Интернет. Без них этого сделать не получится. После установки Windows нужно установить все необходимые драйвера. Скачать его нужно и для сетевого адаптер
Все пароли, особенно сложные, часто забываются нами. Иногда бывает так, что их значение мы записываем только на бумажке, которая вскоре попросту теряется. В общем, ситуация типичная. Новичков порой пугает тот факт, что при забытом пароле войти в систему н
Универсальность Не нужно покупать несколько SEO программ. Прямо сейчас вы можете получить полный набор инструментов для раскрутки сайта в виде программы Allsubmitter , которой вполне достаточно, чтобы продвигать и поддерживать сайты в ТОП поисковых систе