Як виправити проблеми OpenCart у кеші Google

OpenCart є дуже гнучкою системою для ефективної SEO оптимізації. Існує також багато SEO модулів для OpenCart для полегшення ручної роботи. Але деякі особливості системи, які не заважають нормальному функціонуванню веб-сайту і невидимі для звичайного ока, можуть бути критичною проблемою для SEO. Однією з таких проблем є неправильне відображення сторінок сайту, побудованого на CMS OpenCart, у кеші Google, а точніше те, як ваші сторінки "бачать" боти Google.

Використання кешу Google дозволяє зрозуміти, який контент Google бачить, аналізує та сканує під час відвідування сторінки. Це допомагає визначити, чи доступні певні елементи сайту для Google і чи сторінка для бота рендериться так само, як і для звичайного користувача.

Суть проблеми

Коли Google індексує сайт, він зберігає кешовану копію сторінки, яка використовується для швидкого доступу до її змісту. Ця кешована версія може використовуватися пошуковими системами для визначення релевантності сторінки до певних запитів користувачів. Проблема виникає, через те, що в кеші Google в тег <base> прописується URL поточної сторінки, а не головної. Нагадаємо, що тег <base> задає базову URL-адресу для всіх відносних URL-адрес на сторінці. Це призводить до того, що всі відносні URL-адреси, за якими підключаються скрипти, стилі, шрифти та зображення, стають невірними, їх відповідь - 404. В результаті сторінка рендериться без стилів і скриптів, шрифтів і картино, що мають відносні URL. Це негативно впливає на вигляд сторінки та її функціональність для пошукових ботів.

Як це впливає на SEO

1. Неправильний рендеринг сторінки

Коли Googlebot індексує сторінку і не може знайти необхідні скрипти, стилі або зображення, він бачить сторінку, яка сильно відрізняється від тієї, яку бачить звичайний користувач. Це може призвести до неправильного індексування сторінки, оскільки бот не розуміє її вмісту належним чином.

2. Зниження рейтингу сторінки

Пошукові системи, такі як Google, оцінюють користувацький досвід (UX) при визначенні рейтингу сторінок. Якщо бот бачить сторінку, яка виглядає неправильно або не функціонує як слід, він може вважати її менш релевантною та знизити її рейтинг у пошукових результатах.

3. Втрата трафіку

Неправильне індексування та зниження рейтингу призводять до зменшення видимості сторінки у пошукових системах, що, у свою чергу, зменшує органічний трафік на сайт. Це може негативно вплинути на бізнес, особливо якщо велика частка відвідувачів приходить через пошукові системи.

Як перевірити проблему

Для того, щоб перевірити як виглядає певна сторінка у кеші Google - додайте у адресному рядку браузера Google Chrome перед URL-адресою префікс "cache:", наприклад так "cache:https://shop.com/product". Відкриється сторінка в кеші, де буде вказано дату кешування. Перевірити всі проблемні ресурси, які не підключились на сторінці, можна в консолі браузера (на прикладі Google Chrome), натиснувши кнопку F12 на сторінці кешу та перейшовши у вкладку Console.

Приклад проблеми

Розглянемо конкретний приклад сторінки товару в OpenCart: https://demo.opencartbot.net/ua/macbook
А ось як виглядає ця сторінка у кеші Google: http://webcache.googleusercontent.com/search?q=cache%3Ahttps%3A%2F%2Fdemo.opencartbot.net%2Fua%2Fmacbook

При переході за цим посиланням можна побачити, що сторінка завантажується без стилів, скриптів та деяких зображень. Це є наслідком неправильної базової URL-адреси в тегу <base> на сторінці кешу, що робить всі відносні URL-адреси невірними. Таким чином, бот Google бачить сторінку як незрозумілу та нефункціональну, що призводить до всіх вищезазначених проблем. На жаль, вплинути на те, який URL Google додає в тег <base> на сторінках кешу ми не можемо, але є інші способи вирішення, про які розповімо нижче. 

Як вирішити проблему

1. Додати слеш перед відносними адресами

Цей метод буде працювати, лише якщо головна сторінка сайту є адресою домену, тобто якщо сайт не розміщений у окремій папці на домені. В першу чергу, необхідно перевірити всі відносні адреси, які є у шаблонах header та footer, адже саме там зазвичай підключаються стилі та скрипти. Додаємо перед цими відносними адресами слеш.
Ось реальний приклад: відкриваємо файл catalog/view/theme/default/template/common/header.twig
Шукаємо там:

<script src="catalog/...

і додаємо слеш перед адресою скрипта:

<script src="/catalog/...

Аналогічно для підключених стилів:

<link href="catalog/...

має виглядати так:

<link href="/catalog/

Зберігаємо, оновлюємо кеш модифікаторів, кеш теми та інші кеші, які є.

2. Використання абсолютних URL

Ще одним рішенням може бути перехід на використання абсолютних URL-адрес для всіх ресурсів (скриптів, стилів, зображень тощо). Це забезпечить їх правильне підключення незалежно від того, як відображається сторінка (у кеші або в реальному часі). Тобто, перед всіма відносними адресами додаємо адресу домену та, при необхідності, папки в якій знаходиться сайт.

3. Перевірка через інструменти Google

Регулярно перевіряйте, як ваш сайт індексується за допомогою інструментів для веб-майстрів Google Search Console (GSC). Це дозволить швидко виявляти та виправляти будь-які проблеми, пов'язані з рендерингом сторінок. Вставивши URL в поле пошуку GSC, ви можете перевірити як завантажуються всі ресурси сторінки. Майте на увазі, що при завантаженні сторінки Google ігнорує деякі картинки, шрифти і зовнішні скрипти, це нормально.

4. Відправка на переіндексацію виправлених URL-адрес

Це можна зробити через ту ж панель Google Search Console, але значно швидше і зручніше вийде за допомогою спеціального модуля для OpenCart, який працює через Google Indexing API.

Висновок

Проблеми з завантаженням деяких ресурсів на сторінках у кеші Google можуть мати серйозний вплив на SEO сайту. Правильне налаштування тегу відносних URL або використання абсолютних URL-адрес допоможуть уникнути неправильного рендерингу сторінок для пошукових ботів, що забезпечить правильне індексування та вищий рейтинг у пошукових результатах.

Бонус

Іноді, в консолі браузера в кеші Google ви також можете побачити проблему з підключенням шрифтів через кросс-сайтову політику сервера. Саме на сайтах побудованих на OpenCart частою є проблема з підключенням шрифту іконок - FontAwesome. Ця проблема вирішується додавання правила передавання відповідного HTTP заголовка у файл .htaccess, який знаходиться в кореневому каталозі сайту. Додайте наступне правило в кінець файлу .htaccess:

<IfModule mod_headers.c>
 <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
 Header set Access-Control-Allow-Origin "*"
 </FilesMatch>
</IfModule>