Більшість сучасних веб-ресурсів використовують JavaScript для забезпечення динамічності та інтерактивності. Хоча пошукові системи постійно вдосконалюються, вони все ще можуть мати труднощі з обробкою контенту, що базується на JavaScript, що негативно впливає на позицію сайту в пошуковій видачі.
Відображення вмісту JavaScript суттєво залежить від методу, який використовується для рендерингу коду веб-сайту.
Наприклад, при рендерингу на стороні сервера, сервер генерує весь HTML-контент сайту. Коли браузер робить запит, він отримує вже готовий, повністю відрендерений HTML-код.
Натомість, при рендерингу на стороні клієнта, JavaScript обробляється браузером через DOM.
Третій варіант – динамічний рендеринг, коли контент, що обробляється на стороні клієнта, надходить до браузера, а контент, що рендериться на стороні сервера, передається пошуковим системам.
Обрана техніка рендерингу безпосередньо впливає на те, як обробляється JS-код, і, відповідно, на позиції сторінок в пошуковій видачі.
Щоб забезпечити коректну обробку всього JavaScript-коду вашого сайту, необхідно дотримуватися певних принципів SEO для JavaScript. Спочатку давайте розберемося, що таке JavaScript SEO.
Що таке JavaScript SEO?
JavaScript SEO – це набір методів, які дозволяють пошуковим системам ефективно сканувати та індексувати JavaScript-код (динамічний контент) веб-сайту (або окремої веб-сторінки). Google, як і будь-яка інша пошукова система, обробляє JavaScript в три етапи: сканування, рендеринг та індексація. Для того, щоб Google правильно виконував ці дії, JavaScript-контент повинен бути оптимізованим для SEO, тобто бути видимим і доступним для пошукових роботів.
Як Google обробляє JavaScript-контент на сторінці
Googlebot, робот Google, виконує такі кроки для обробки JavaScript:
- Отримує URL-адресу із черги сканування за допомогою HTTP-запиту.
- Перевіряє файл robots.txt на наявність URL-адрес, які сайт забороняє сканувати.
- Ігнорує “заборонені” URL-адреси, аналізує відповіді на інші URL-адреси та додає їх до черги сканування.
- Вносить сторінки в чергу на рендеринг, крім тих, які позначені як неіндексовані.
- Chromium відтворює сторінку, виконує JavaScript та індексує сторінку.
- Знову аналізує відрендерений HTML на наявність посилань.
- Додає знайдені URL-адреси в чергу для сканування.
Коли Google може не індексувати JavaScript-контент?
Google здатен індексувати JavaScript-контент, якщо його реалізовано правильно. Наприклад, якщо деякі JS та CSS файли приховані, Google може мати труднощі зі скануванням веб-сайту. Також, якщо є посилання в початковому HTML-коді, яких немає у відрендереному HTML, Google може їх пропустити при скануванні чи індексації.
Крім того, якщо JavaScript не вбудовано безпосередньо в HTML, Google повинен завантажити файл для його виконання. Також пошукові системи можуть використовувати кешовану версію веб-сторінки (для оптимізації швидкості), і JavaScript на сторінці може не синхронізуватися з цією версією.
Оскільки потрібно обробляти кожен фрагмент JavaScript-коду, надмірне використання JavaScript може сповільнити завантаження сторінки або призвести до помилок тайм-ауту.
Чому JavaScript SEO є важливим?
JavaScript SEO є важливим, оскільки він впливає на багато елементів сторінки та фактори ранжування, які Google (або інші пошукові системи) використовують для SEO:
| Елемент на сторінці | Потенційна проблема SEO | Можливе рішення для SEO |
| Відрендерений вміст | Пошукові системи (наприклад, Google) можуть не відобразити сторінку, якщо її ресурси заблоковано у файлі robots.txt. Google також не може індексувати заблоковані або приховані файли JS та CSS. | Зменшіть JavaScript у основному контенті сторінки, розгляньте альтернативні підходи до рендерингу на стороні клієнта, такі як рендеринг на стороні сервера, динамічний рендеринг або гібридний рендеринг (поєднання клієнта та сервера). |
| Посилання | Якщо деякі посилання є внутрішніми або JavaScript генерує посилання на URL-адресу лише при натисканні користувача, Google може не виявити такі посилання. | Використовуйте теги <a> з атрибутом href, робіть посилання описовими. Псевдопосилання, як наприклад теги <div> та <span>, не скануються пошуковими роботами. |
| Метадані | Якщо сайт не використовує пакети Node.js, такі як vue-meta, пошукові системи можуть обробляти метадані некоректно, або взагалі не мати їх для кожного перегляду чи сторінки. | Використовуйте пакети Node.js, такі як react-helmet, vue-meta, react-meta-tags. |
| Зображення з відкладеним завантаженням | Пошуковий робот не обробляє контент, що позначений для відкладеного завантаження. Пошукова система не може прокручувати сторінку, і тому певний контент може ніколи не з’явитися. | Використовуйте API IntersectionObserver, який визначає видимість та положення елементів DOM. Також можна застосувати вбудовану функцію відкладеного завантаження браузера (Chrome). |
| Час завантаження сторінки | Сторінка з великою кількістю JavaScript-контенту може завантажуватися повільно, що негативно впливає на її позиції в пошуковій видачі. | Розмістіть критичний JS-код безпосередньо у HTML, а некритичний JS-код відкладіть до моменту відображення основного контенту, зменшуючи загальну кількість JS-коду. |
Найкращі практики для JavaScript SEO
Дотримуючись деяких основних рекомендацій, можна покращити процес сканування та відображення сторінок пошуковими системами:
Додавайте посилання та зображення відповідно до встановлених веб-стандартів
Усі посилання повинні бути додані за допомогою тегу <a> з атрибутом href, а не через onclick, #pageurl або window.location.href=’/page-url’. Google може легко сканувати та переходити за такими посиланнями.
<a href="http://techukraine.net.com">Welcome to Geek world</a>
Аналогічно, додавайте зображення, використовуючи тег <img src>, а не <img data-src>:
<img src="myimg.png" />
Надавайте перевагу рендерингу на стороні сервера
Переконайтесь, що контент вашого сайту доступний на сервері, крім браузера користувача.
Перевірте, щоб ваш відрендерений HTML містив весь важливий контент, який ви хочете показати
Відрендерений HTML повинен містити коректний заголовок, мета-роботи, мета-опис, зображення, структуровані дані та канонічні теги.
Як оптимізувати JavaScript веб-сайт для SEO
Щоб перевірити, як працює JavaScript SEO на вашій веб-сторінці, виконайте наступні кроки:
- Визначте, наскільки ваш сайт залежить від JavaScript. Для цього можна вимкнути JavaScript у браузері. Якщо ви побачите значне зменшення контенту, це означає, що ваш сайт сильно залежить від JavaScript.
- Перевірте, чи Googlebot отримує весь важливий контент і теги. Ви можете використовувати Інструмент перевірки зручності для мобільних пристроїв від Google або інструмент тестування розширених результатів, щоб дізнатися, як Googlebot використовує початковий HTML для відтворення контенту.
- Ви також можете скористатися розширенням для Chrome, наприклад, View rendered source, щоб зрозуміти, як JavaScript змінює сторінку, та порівняти вихідний і відрендерений HTML.
- Перевірте наявність важливих тегів (title, метаопис тощо) у відрендереному HTML за допомогою розширення SEO Pro для Chrome.
Висновок
У цій статті ми розглянули, як JavaScript може ускладнити оптимізацію для SEO, та які підходи можна використовувати для вирішення потенційних проблем, пов’язаних з надмірним використанням JavaScript.
Ми також розглянули деякі рекомендації та інструменти, які допоможуть зробити ваш JavaScript веб-сайт оптимізованим для пошукових систем. Інші корисні інструменти, які допомагають Google виявляти та сканувати динамічний контент, це Prerender, AngularJS та Huckabuy.
Окрім цього, ви можете ознайомитися з деякими кращими способами зменшення часу завантаження веб-сайту.
Чи була стаття корисною? Поділіться нею зі світом!