JavaScript & SEO - просування сайтів на JavaScript фреймворк

1. Що таке JavaScript?
2. Бібліотеки та фреймворки JavaScript:
3. Що таке об'єктна модель документа (DOM)?
4. Перегляд без графічного інтерфейсу (headless browsing)
5. Складнощі пошукового просування (і як їх виправити)
6. можливість сканування
7. Чому блокування JavaScript - проблема?
8. внутрішні посилання
9. структура URL
10. Можливість доступу ботів до контенту
11. Як перевірити, що контент сайту доступний Google
12. Процес візуалізації веб-сторінок

Розуміти JavaScript і його потенційний вплив на ефективність пошуку дуже важливо. Якщо пошукові системи з якихось причин не можуть сканувати сайт і аналізувати його контент, нічого індексуватися не буде, і веб-сайт не з'явиться в пошуковій видачі.

Головне питання, яке відноситься до JavaScript: чи можуть пошукові системи «бачити» контент? Якщо немає, що тоді слід виправити?

Що таке JavaScript?

У сучасній веб-сторінки є три головні компоненти:

1. HTML - мова гіпертекстової розмітки служить становим хребтом всього контенту на сайті. Це структура веб-сайту (заголовки, параграфи, списки елементів та ін.)
2. CSS - каскадні таблиці стилів - дизайн і елементи, які формують стиль сайту. Це презентаційний рівень веб-ресурсу.
3. JavaScript - JavaScript - це інтерактивність, узгодженість всіх складових частин і ключовий компонент динамічного інтернету.

JavaScript поміщається або в HTML-документа в тегах <script> (тобто вбудований в HTML), або в якості зовнішнього скрипта. Існує безліч бібліотек і фреймворків JavaScript, в т.ч. jQuery, AngularJS, ReactJS, EmberJS.

Бібліотеки та фреймворки JavaScript:

Що таке AJAX?

AJAX, або «асинхронний JavaScript і XML» - це набір технік по веб-розробки , Який поєднує JavaScript і XML, що дозволяє веб-додаткам взаємодіяти з сервером у фоновому режимі. Асинхронний означає, що інші функції або лінії коду можуть запускатися, коли запущений скрипт async. XML колись була основною мовою передачі даних; проте AJAX використовується для всіх типів передачі даних (включаючи JSON).

AJAX служить для оновлення контенту або шару веб-сторінки без повного перезавантаження сторінки. У класичній моделі при завантаженні сторінки запитуються всі елементи (assets) на сторінці і витягуються з сервера, а потім відбувається їх отрисовка на сторінці.

Сервер генерує абсолютно нову сторінку, відправляє її браузеру, потім браузер перезавантажує всю сторінку.

Однак для AJAX завантажуються лише ті елементи, які відрізняються на сторінках.

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

Наочний приклад робота AJAX - Google Maps. Тут теж немає повного перезавантаження: коли користувач робить різні маніпуляції на екрані і вибирає маршрут, відбуваються міні-запити до сервера для завантаження контенту.

Що таке об'єктна модель документа (DOM)?

DOM - це кроки, які браузер робить для візуалізації веб-сторінки, після отримання HTML-документа.

Перше, що браузер отримує, це HTML-документ, потім починається парсинг контенту в цьому документі, додаються додаткові ресурси, такі як зображення, CSS і файли JavaScript

DOM - це те, що формує парсинг інформації та ресурсів.

У сучасному світі DOM часто відрізняється від первинного HTML-документа, в силу того, що називають dynamic HTML.

Динамічний HTML - це здатність сторінки міняти свій вміст в залежності від вхідних даних, умов оточення (час дня) та інших змінних даних, HTML, CSS і JavaScript.

Простий приклад - тег <title>

Перегляд без графічного інтерфейсу (headless browsing)

Перегляд без графічного інтерфейсу (або headless browsing) - це просто отримання веб-сторінок без користувальницького інтерфейсу. Google, а тепер і Baidu , Використовують це, щоб краще розуміти структуру і контент веб-сторінок.

PhantomJS і Zombie.js - це скріптові браузери без інтерфейсу, їх зазвичай використовують для автоматизації веб-взаємодій при тестуванні.

Складнощі пошукового просування (і як їх виправити)

Ось основні складності, пов'язані з JavaScript:

1. Можливість сканування.
2. Можливість доступу ботів до інформації та аналізу контенту.
3. Затримка завантаження або латентність (процес візуалізації веб-сторінок).

можливість сканування

Чи можуть боти знаходити URL і розуміти архітектуру сайту?

Два головні елементи:

1. Блокується доступ пошукових систем до JavaScript (навіть випадково).
2. Правильні внутрішні посилання, події JavaScript не використовуються як заміна тегів HTML.

Чому блокування JavaScript - проблема?

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

Інструменти тестування, такі як Fetch as Google , robots.txt компанії TechnicalSEO.com і Fetch and Render , Можуть допомогти з пошуком ресурсів, які заблоковані для Googlebot.

Найпростіший спосіб вирішити цю проблему - надати пошуковим системам доступ до ресурсів, які їм потрібні, щоб зрозуміти UX сайту.

внутрішні посилання

Внутрішні посилання робляться в звичайних анкорний тегах в HTML або DOM (використовується HTML тег hrefs = "www.example.com»).

Не варто використовувати браузерні події JavaScript onclick як заміну внутрішнім посиланням.

Наявність внутрішніх посилань - це потужний сигнал для пошукових систем щодо архітектури сайту і важливих сторінок. Я ряді випадків вони скасовували такі «SEO-натяки», як атрибути canonical .

структура URL

Історично склалося, що сайти на JavaScript (сайти AJAX) використовували в URL ідентифікатори фрагмента (#).

Не рекомендується:

• Хеш (#) - одиничний символ фунта не відсканувалась пошуковими системами. Використовується для ідентифікації анкорний посилання. Це посилання, які дають можливість переходити до інших розділів статті на сторінці. Все, що знаходиться після одиничного хеша URL ніколи не відправляється серверу, сторінка автоматично прокручується до першого елементу з збігається ID. Google не рекомендує використовувати «#» в URL.
• Хешбенг (#!) - був хаком для підтримки краулерів (зараз Google хоче їх уникати і тільки Bing підтримує).

рекомендується:

• pushState History API - PushState - це навігаційна частина History API (як приклад, історія відвідувань в браузері). По суті, pushState оновлює URL в адресному рядку. І оновлюється лише те, що потрібно змінити на сторінці. Це дозволяє JS-сайтам використовувати тільки «чисті» URL. pushState краще використовувати для нескінченного скролінгу (тобто користувач вказує на нові частини сторінки, які URL оновить). В ідеалі, після перезавантаження сторінки, користувач бачить всі ту ж частину контенту. Однак не потрібно оновлювати сторінку, оскільки контент оновлюється при прокручуванні, а URL оновлюється в адресному рядку.
• Приклад: хороший приклад реалізації нескінченного скролінгу для пошукових систем можна знайти тут . Технічно використовується replaceState (), без зворотного кнопки.

Можливість доступу ботів до контенту

Google може обробляти JavaScript і використовувати DOM (замість HTML-документа).

Разом з тим, в деяких випадках у пошукових систем виникають складнощі з розумінням JavaScript. Ніхто не хоче опинитися в положенні Hulu.com (Сайт втратив половину рейтингу в Google через помилки за частиною пошукової оптимізації ).

Якщо ми говоримо про Googlebot, який виконує JavaScript, то потрібно зазначити, що є кілька важливих елементів, завдяки яким пошукові системи одержують контент:

• Якщо від користувача потрібно певним чином впливати, наприклад, щось на сайті включити, знадобиться це перевірити.
• Якщо завантажувальний подія JavaScript триває близько 5 секунд, пошукові системи це можуть і не побачити.
• тести Screaming Frog показують, що на візуалізацію контенту потрібно п'ять секунд.
• Якщо в JavaScript допущені помилки, тоді і браузер, і пошукові системи можуть пропустити деякі частини сторінок.

Як перевірити, що контент сайту доступний Google

Надати Google той же сценарій, що і користувачам - це кращий сценарій.

Вперше Google оголосив, що може «краще розуміти веб (тобто JavaScript)» в травні 2014 . Деякі експерти і раніше припускали, що Googlebot сканує JavaScript. У 2015 з'явилися підтвердження, що Google може сканувати JavaScript і використовувати DOM . Таким чином, якщо ви можете бачити контент в DOM, є ймовірність, що Google його проаналізував.

1. Переконайтеся, що ваш контент з'являється в DOM.
2. Протестуйте підгрупу сторінок, щоб дізнатися, чи може Google індексувати контент.
3. Вручну перевіряйте зовнішні посилання з вашого контенту.
4. Використовуйте інструмент Fetch with Google, який дозволяє дізнатися, чи буде контент доступний Google і не блокується JavaScript у файлі robots.txt. Також можна використовувати інструмент Fetch and Render As Any Bot Tool .

Процес візуалізації веб-сторінок

Коли браузери отримують HTML-документ і створюють DOM (хоча існує певний рівень попереднього сканування), більшість ресурсів завантажуються так, як і з'являються в HTML-документі. Це означає, що якщо у вас є великий файл у верхній частині HTML, браузер завантажить цей великий файл першим.

Google завантажує саме необхідно раніше. Концепт візуалізації веб-сторінок полягає в тому, щоб «показати користувачеві верхню частину екрана якомога раніше».

Але якщо у вас є необов'язкові ресурси або JavaScript-файли, які уповільнюють завантаження сторінки, візуалізація сторінок блокується.

якщо інструменти Page Speed ​​Insights Tool або WebPageTest.org показали, що є блокуючий рендер-ресурс, тоді:

1. Inline: Додайте JavaScript в HTML-докумнетов.
2. Async: Переконайтеся, що JavaScript асинхронний (тобто додайте атрибут async в тег HTML).
3. Defer: JavaScript розміщується нижче в HTML.

Важливо розуміти, що скрипти повинні розміщуватися в порядку черговості. Скрипти, які завантажують контент «вище лінії згину» - це пріоритет, їх не потрібно змінювати. Будь-скрипт, який посилається на ще один файл, можна буде користуватися після завантаження цього файлу.

Перевірте, що ваш контент доступний, і не прихований від Google. Кожен сценарій вимагає тестування. Оцініть потенційні рішення, спираючись на результат.