Розмітка Open Graph у Joomla-4

: Joomla-4; 09 жовтня 2021

Щоб репостинг статей сайту був красивий, необхідно зробити розмітку 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 види картинок:

Зображення вступного тексту - image_intro
Зображення повного тексту - image_fulltext
Зображення у тексті матеріалу.
Немає зображення.

В алгоритмі коду, який представлений нижче, сувора логіка – публікації зверху донизу. Я завжди публікую першу картинку повного тексту. Це правильно. Трапляється таке - читач побачив у соц.мережі цікавий пост з картинкою, клацнув по ній і перейшов на сайт, а там зовсім інша картинка та текст. Реакція однозначна - легке збентеження, нерви та невтішні слова на адресу автора, таке бісить.

Куди встановити код розмітки 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 наступна логіка:

Зображення завантажується з повного тексту. Якщо там зображення не виявлено, то завантажується картинка вступного тексту. Якщо немає картинки вступного тексту, то завантажується картинка site-og-image.jpg, яку вам потрібно створити та помістити в папку images/banners.
Опис (дескрипшн) береться з опису статті: вкладка Публікація -> Метадані -> Метатег Description. Якщо там порожньо, береться початковий текст статті. Довжина обмежена 160 чи 200 знаками.

Можете потренуватися з кодом - додавайте в розмітку різні теги, публікуйте в соцмережах і дивіться на результат. Там буде опубліковано лише те, що обов'язкове. 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 - незначні покращення поміщайте у свій шаблон, перевизначення для цього й створені.

Ще одна порада досвідченого сеошника – "не намагайтеся обдурити пошукові алгоритми, створюйте матеріали для людей, пишіть корисний контент."