Динамічний рендеринг JavaScript-сторінок

В даний час складно обробляти JavaScript, і не всі пошукові роботи здатні обробляти його успішно й відразу. В майбутньому в компанії Google сподіваються, що проблема буде вирішена. А наразі спеціалісти рекомендують динамічний рендеринг в якості обхідного вирішення цієї проблеми.

Динамічний рендеринг означає переключення між візуалізацією на стороні клієнта і попередньо відображуваним контентом для конкретних користувацьких агентів.

Сайти, які повинні використовувати динамічний рендеринг

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

Як працює динамічний рендеринг

Динамічний рендеринг складається в перемиканні між контентом, оброблюваних на стороні клієнта (client-side rendered), і попередньо обробленим контентом (pre-rendered) для певних агентів користувача.

Це означає, що за допомогою динамічного рендеринга можна надавати Google HTML-версію сторінки, при цьому користувачу показуючи JavaScript-версію.

У новому керівництві розповідається, в яких випадках слід використовувати Dynamic Rendering і як його впровадити.

Впровадження динамічного рендерингу

Щоб налаштувати динамічний рендеринг для вашого вмісту, потрібно дотримуватись  загальних положень, викладених у інструкції Google. Вам потрібно посилатися на конкретні деталі конфігурації, оскільки вони дуже різняться між реалізаціями.

1. Встановіть та налаштуйте динамічний рендеринг, щоб перетворити ваш вміст у статичний HTML, який простіше сприймається сканерами. Деякими загальними динамічними рендерингами є Puppeteer, Rendertron і prerender.io.
2. Виберіть користувацькі агенти, які, на вашу думку, повинні отримувати ваш статичний HTML-код і посилатися на конкретні відомості про налаштування, як оновити або додати агенти користувача. Нижче наведено приклад списку звичайних агентів користувача в проміжному програмному забезпеченні Rendertron:

   export const botUserAgents = [
     'googlebot',
     'google-structured-data-testing-tool',
     'bingbot',
     'linkedinbot',
     'mediapartners-google',
   ];

3. Якщо попереднє відтворення сповільнює роботу вашого сервера або ви бачите велику кількість запитів на попереднє відтворення, розгляньте можливість впровадження кешу для попередньо відтвореного вмісту або перевірте, чи запити надійшли від законних сканерів.
4. Визначте, чи потрібні агентам користувача настільний або мобільний вміст. Використовуйте динамічне обслуговування, щоб надати відповідну версію для настільних ПК або мобільних пристроїв. Нижче наведено приклад того, як конфігурація може визначити, яка  версія агента користувача настільний або мобільний вміст:
   

   isPrerenderedUA = userAgent.matches(botUserAgents)
   isMobileUA = userAgent.matches(['mobile', 'android'])
   if (!isPrerenderedUA) {
     // serve regular, client-side rendered content
   } else {
     // serve the mobile version if needed
     servePreRendered(isMobileUA)
   }

5. Налаштуйте свій сервер, щоб доставляти статичний HTML до вибраних сканерів. Існує кілька способів зробити це залежно від вашої технології; Ось кілька прикладів.

• Проксі-запити, що надходять від сканерів до динамічного рендеринга
• Попередньо виділіть як частину процесу розгортання, і ваш сервер обслуговує статичний HTML для сканерів
• Створіть динамічне рендеринг у свій користувацький код сервера
• Подавати статичний вміст з попереднього віддачі до сканерів
• Використовуйте проміжну програму для вашого сервера (наприклад, проміжне програмне забезпечення rendertron).

Перевірте свою конфігурацію

Після виконання динамічного рендеринга перевірте, чи все працює, як очікувалося, перевіривши URL-адресу, виконавши наступні тести:

1. Перевірте свій мобільний вміст за допомогою тесту для мобільних пристроїв, щоб переконатися, що Google може переглядати ваш вміст.
   ✔ Успіх: ваш мобільний вміст відповідає тому, що ви очікуєте від користувача.
   ! Спробуйте ще раз: якщо вміст, який ви бачите, не збігається з тим, що ви очікуєте, перегляньте розділ усунення несправностей.

2. Перевірте свій вміст на робочому столі за допомогою пункту “Завантажте як Google”, щоб переконатися, що на рендерингу також відображається вміст на робочому столі (на рендерингу показано, як робот Google бачить вашу сторінку).
✔ Успіх: вміст на робочому столі відповідає тому, що ви очікуєте від користувача.
! Спробуйте ще раз: якщо вміст, який ви бачите, не збігається з тим, що ви очікуєте, перегляньте розділ усунення несправностей.

3. Якщо ви використовуєте структуровані дані, перевірте правильність структурованих даних за допомогою інструмента тестування структурованих даних.
✔ Успіх: структуровані дані з’являються, як ви очікуєте.
! Спробуйте ще раз: якщо структуровані дані не відображаються, як очікуєте, перегляньте розділ усунення несправностей.