Розмітка схеми Статті

 

Я не займаюся професійно розробкою сайтів, тому прочитавши в минулому кілька статей в Інтернеті про те, що Joomla автоматично забезпечує підтримку мікророзмітки для схеми "Стаття", я не став витрачати час на вивчення цієї теми. Але нещодавно, заради цікавості відкрив у 'Google Developers' одну зі сторінок свого сайту і картинка якось не надала оптимізму ... Ситуацію прояснила стаття "Enabling Rich Snippets for Articles", а також перегляд коду шаблону сторінки Protostar, про стандартною процедурою заміщення деяких файлів якого і піде мова. Не сумніваюся, що розробники Joomla запропонують у майбутньому елегантний варіант підтримки цієї та інших схем, і пропоную в цій статті тимчасовий варіант для пошуковика Google.

Головною умовою при розробці визначимо максимальне використання можлівостей настройки, які вже надає Joomla. Спочатку розглянемо список вимог Google до розмітки схеми "Стаття". При цьому, для опису поточного стану підтримки з боку Графічного Інтерфейсу Користувача (GUI) Joomla, буде використовуватися наступна колірна гамма:

Зеленій повна
Помаранчовій частково
Червоній не підтримуеться

 

 

 

 

Обов'язкові елементи:

  • author (Object)
    - name (Text)
  • headline (Text - заголовок статті підтримується, але має інше ім'я в коді програми)
  • image (Object)
    - url (URL - посилання на репрезентативну картинку статті)
    - height (Number)
    - width (Number)
  • publisher (Object)
    - name (Text)
    - logo (Object)
      - url(URL)
      - height (Number)
      - width (Number)
  • datePublished (DateTime)

Желательные элементы:

  • mainEntityOfPage (URL)
  • dateModified (DateTime)

Перевіримо які з перелічених вище елементів підтримуються GUI Joomla.
Авторство, заголовок, а також дати публікації і модифікації статті визначаються на закладці 'Публікація' в діалозі редагування статті: 

md author
Репрезентативну картинку статті можна призначити на закладці 'Зображення та посилання':

md author image
Назва організації-видавця і її логотип можна призначити в діалозі редагування стилю шаблону:

organization
Додамо Просте Заміщення

Таким чином, GUI підтримує всі необхідні параметри і нам не доведеться його доопрацьовувати. Спочатку створимо заміщення файлу Зовнішнього Віда Контенту. Для цього активуємо діалог 'Extensions/Templates', де виберемо шаблон Protostar і створимо заміщення 'Layouts/content':

template override
 

ПРИМІТКА: можливо нам доведеться замінити також один з файлів групи 'Components / article', який також відзначений червоним на цьому малюнку. На даний момент просто запам'ятаємо його розташування, але активувати не будемо.

Редактор Joomla забезпечує цілком повноцінне середовище для модифікації шаблону, що дозволяє внести зміни в необхідні файли. Перейдемо на закладку 'Редактор' і відкриємо файл 'block.php'.

template editor
Додамо наступний код в самий кінець списку <dl class="article-info muted"> цього файлу (перед тегом '</dl>'):

microdata article cond
У 61-му рядку оголошена змінна 'gmd_follow_google_recommendations_for images_size', якою я призначив значення 'true'. Справа в тому, що Google рекомендує встановлювати для зображень деякі граничні розміри, значення яких визначено в рядках 83-85. Хоча, я спеціально тестував сторінки із зображеннями, розміри яких не відповідали зазначеним рекомендаціям, і при цьому 'Google Developers' не повертав помилки. Тому, Ви можете на свій розсуд встановити 'gmd_follow_google_recommendations_for_images_size = false'. Але тому що значення розмірів зображень нам потрібні в будь-якому випадку, то в рядках 62-80 обчислюємо їх і перевіряємо можливість додавання відповідних елементів мікророзмітки на сторінку. У рядках 82-93 проводиться перевірка розмірів зображень і встановлюється остаточне значення змінної 'gmd_add_extended_microdata', яке в підсумку визначає чи буде виводиться наша додаткова інформація на сторінку.

Тепер додамо власне обробник виведення мікророзмітки на сторінку, для чого вставимо наступний блок коду відразу після описаного вище:

microdata article output
Т.к. всі перевірки ми вже виконали, то код гранично простий для розуміння. У рядку 99 ми перевіряємо стан змінної 'gmd_add_extended_microdata' і дозволяємо показ якщо вона має значення 'true'. Для цього вставляємо двокрапку (':') в код рядка умови. Т.к. Joomla самостійно управляє показом видимих елементів сторінки, а нам необхідна тільки мікророзмітки, яку користувач не повинен бачити, то активно застосовуємо тег 'meta'. Тепер все готово для повторної перевірки нашої роботи в 'Google Developers'.

Цілком імовірно, що Ви отримаєте повідомлення про помилку щодо зображення 'image_fulltext', але її джерело знаходитиметься поза нашого коду. У такому випадку, повернемося до закладці 'Створити Заміщення' і зробимо його для 'Components/com_content/article'. Повернемося на закладку 'Редактор', відкриємо файл '/html/com_content/article/default.php' нашого Заміщення і знайдемо рядок, що відповідає за виведення зображення 'image_fulltext':

microdata article last edit
Т.к. ми вже описали властивості цього зображення в коді файлу 'block.php', то не будемо завантажувати сервер додатковими обчисленнями, а просто видалимо частина коду, виділену в червоний рамці і добавимо підстроку в зелений. Перевірте ще раз свою сторінку в Google Developers і, сподіваюся, тепер Ви не побачите повідомлень про помилки.

 

У даній статті вказана модифікація стандартного шаблону Joomla, але думаю, ідея цілком застосовна і для інших шаблонів. Додам, що ми могли б повністю автоматизувати процес вставки мікророзмітки використовуючи, наприклад, методи класу JImage, що дозволяють на льоту змінювати розміри зображень. Але, на мій погляд SEO має представляти собою осмислений процес, і розробнику сайту все ж треба вручну потрудитися над визначенням і відповідним оформленням тих сторінок, які він вважає важливими для представлення пошуковій системі.

 

Ви можете завантажити вказаний код за цим посиланням