Telegram

Разметка Open Graph в Joomla-4

Joomla 4
Разметка Open Graph joomla-4

Чтобы репостинг статей сайта в соц.сети был красивый, необходимо сделать разметку Open Graph. К сожалению, в joomla-4 в статьях и категориях нет такой разметки. Когда я это прочитал, немного огорчился, и быстро нашел выход. Пишем код прямо в основной файл статьи default.php

Почему такое недоразумение произошло, руководители проекта Joomla не объясняют. Отделались небольшой репликой - "в JED размещены несколько плагинов, выбирайте любой". Я перепробовал все, они громоздкие и плохо работают в новой версии. Для себя я нашел выход - вставить разметку прямо в макет материала и категорию (файлы _.php). Это же и вам советую.

Для чего нужна разметка Open Graph?

Это протокол, который создает краткие данные материала и формирует превью страницы в посте, когда пользователь делиться ссылкой в социальных сетях - facebook, telegram, viber и т.д.
Основной тэг <meta>, и 2 вида префиксов:

  • og - для всех соц.сетей и месенджеров, кроме twitter
  • twitter - для twitter
    • пример: og:description — описание материала
    • пример: twitter:image — изображение материала

Существуют 4 обязательных тэга, которые должны быть на странице:

  • og:title — заголовок статьи или страницы
  • og:type — тип объекта. Например, article, book, video.movie и т.д.
  • og:url — канонический URL, по которому доступен указанный объект
  • og:image — картинка, которую нужно подтянуть к публикации при репосте

Микроразметка Open Graph для Twitter имеет отличия:

  • twitter:card — обязательный элемент, который сообщает, к какому типу относится карточка
  • twitter:title — обязательный элемент, заголовок. Максимальная длина — 70 символов.
  • twitter:description — описание. Необязателен. Длина не может превышать 200 символов.
  • twitter:image — изображение. Форматы: JPG, PNG, WEBP, GIF. Необязательно, но желательно. Если нет картинки, система Twitter поставит пустой серый фон.
  • twitter:site — необязательный элемент. @username Имя пользователя Twitter, автор публикации.

Полный перечень тэгов на официальном сайте The Open Graph protocol

С текстовыми разметками проблем не существует - Название и Тип объекта легко устанавливаются. Гораздо сложнее с картинкой, которую нужно показать. Картинок в материале может быть много, а может не быть вообще. На сегодняшний день статья без картинки - это дурной тон, такого в наше время просто не может быть 🧐 . Но если вдруг забыли поставить изображение, то появится картинка заглушка, которую вы сами придумаете (об этом написано ниже).

Какую картинку ставить в Open Graph?

В материале joomla-4 может быть 4 вида картинок:

  1. Изображение вводного текста - image_intro
  2. Изображение полного текста - image_fulltext
  3. Изображение в тексте материала.
  4. Нет изображения.

В алгоритме кода, который представлен ниже, строгая логика - публикации сверху вниз. Я всегда публикую первой картинку полного текста. Это правильно. Случается такое - читатель увидел в соц.сети интересный пост с картинкой, щелкнул по ней и перешел на сайт, а там совсем другая картинка и текст. Реакция однозначна - легкое замешательство, нервы и нелестные слова в адрес автора, такое бесит ))

Куда вставить код разметки Open Graph?

Код разметки Open Graph я вставил прямо в код статьи default.php и блога blog.php. Заранее создал переопределение статьи и блога в шаблоне. Как создать переопределение материалов, думаю, объяснять не надо.

Переопределение статьи находится в папке шаблона cassiopeia/html/com_content/article. Поместите туда мой файл. Для примера можете изменить названия файла: переименовать default.php, стало opengraph.php. Теперь у вас два макета статьи - По умолчанию в ядре Без разметки и в Шаблоне с Разметкой.
В настройках материала выбрать: вкладка Отображение -> Макет выбираете opengraph. Если вы не переименуете файл default.php, то все материалы будут публиковаться с разметкой. Я на своих сайтах не меняю название файлов в переопределении, у меня все страницы по умолчанию с разметкой.

Обратите внимание, что вывод превью материала в соц.сетях отличается. Это не ошибка кода, а веб-технологии конкретной соц.сети, мы это изменить никак не можем. К примеру, Viber показывает только картинку и название. Telegram не показывает изображение WebP, а разметка меняется от размера картинки. Facebook показывает все красиво и компактно, оно и не удивительно, именно они создали формат разметки.

В моем коде разметки Open Graph установлена определенная логика:

  1. Картинка загружается из полного текста. Если там картинки не обнаружено, то загружается картинка вводного текста. Если нет картинки вводного текста, то загружается картинка site-og-image.jpg, которую вам нужно создать и поместить в папку images/banners.
  2. Описание (дескрипшн) берется из описания статьи: вкладка Публикация -> Метаданные -> Метатег Description. Если там пусто, то берется начальный текст статьи. Длина ограничена 160 или 200 знаками.
Open Graph

Можете потренироваться с кодом - добавляйте в разметку различные тэги, публикуйте в соц.сетях и смотрите на результат. Там будет опубликовано только то, что является обязательным. fb:app_id не является обязательным, но для фэйсбука желательно, это код вашего приложения фэйсбука Facebook ID. Таким образом facebook связывает вашу статью на сайте с публикацией постов и повышает вам уровень. При обновлении вашей статьи на сайте, она обновляется и на фэйсбуке.

// Протокол Open Graph
$sitename = Factory::getApplication()->getCfg('sitename'); // Название сайта
if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание, дескрипшн
$images = json_decode($this->item->images); // Вывод изображения
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) {$timage = htmlspecialchars(Uri::root().$images->image_fulltext);}
elseif (isset($images->image_intro) and !empty($images->image_intro)) {$timage = htmlspecialchars(Uri::root().$images->image_intro);}
else {$timage = htmlspecialchars(Uri::root() . 'images/banners/site-og-image.jpg');}
$document = Factory::getDocument();
$document -> addCustomTag( '
<meta property="og:site_name" content="'.$sitename.'" />
<meta property="og:title" content="'.$this -> escape($this -> item -> title).'" />
<meta property="og:description" content="'.mb_strimwidth(strip_tags($desc),0,160, " ...").'" />
<meta property="og:type" content="article" />
<meta property="og:url" content="'.str_replace('" ','&quot;',Uri::current()).'" />
<meta property="og:image" content="'.$timage.'">
<meta property="og:image:width" content="1300" />
<meta property="og:image:height" content="600" />
<meta property="fb:app_id" content="xxxxxxxxxx" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="'.$this -> escape($this -> item -> title).'">
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($desc),0,200, " ...").'" >
<meta name="twitter:url" content="'.str_replace('" ','&quot;',Uri::current()).'">
<meta name="twitter:image:src" content="'.$timage.'">
');

Ресурсы проверки:

Что касается сторонних расширений данной тематики - плагины и компоненты. Конечно это удобная и красивая штука, но любое стороннее расширение добавляет ненужный код, запутывает админа или менеджера контента. Эти компоненты имеют широкий функционал и могут перекрывать (отменять) дефолтные данные материалов. Данная фича мне лично не понятна, я считаю ее вредной. К примеру, вы написали статью, сделали привлекательный заголовок статьи, дескрипшн, добавили изображение, значит вы именно этот контент хотите показать читателю. Вопрос - зачем тогда подменять данные? Логики никакой.
Так что, устанавливать или нет сторонние расширения для разметки - это личное дело каждого джумловода. Я стараюсь следовать рекомендациям создателей joomla - незначительные улучшения помещайте в свой шаблон, переопределения для этого и созданы.

Еще один совет опытного сеошника - "не старайтесь обмануть поисковые алгоритмы, создавайте материалы для людей, пишите полезный контент."