SEO для веб-сайтів ReactJS

1. 1. URL-адреси мають бути "Google-friendly" і завантажуватися незалежно
2. 2. Використовуйте стандартні посилання <a href> у вашому HTML
3. 3. На стороні сервера JavaScript

Наша команда-партнер Artmisto

ReactJS - це популярна бібліотека JavaScript, яка використовується для збільшення кількості веб-сайтів. Насправді, 5,6% з 10 000 кращих веб-сайтів тепер використовують React, згідно з цифровою технологією сайту BuiltWith.

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

Деякі з областей, які слід стежити за збереженням і зростанням органічного трафіку під час переходу на сайт React JS, наведені нижче.

1. URL-адреси мають бути "Google-friendly" і завантажуватися незалежно

URL-адреси повинні бути якомога більше схожими на статичні URL-адреси каталогів (http://www.alicesbooks.com/fiction/sci-fi/). Навіть краще, переконайтеся, що ви використовуєте слова, які описують вміст, щоб кожен міг його зрозуміти.

Деякі сайти з жорстким доступом JavaScript або програми з однією сторінкою містять хештег у URL-адресі, який Google, ймовірно, не буде сканувати (наприклад, https://www.alicesbooks.com/#scifi).

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

Примітка для розробників: одним із способів розробки цих типів унікальних URL-адрес є навігаційний компонент React, наприклад, React Router https://github.com/ReactTraining/react-router . PMG використовує React Router з деякими нашими власними інструментами.

2. Використовуйте стандартні посилання <a href> у вашому HTML

Переконайтеся, що послідовний вміст пов'язується посиланнями <a href>, щоб забезпечити виявлення пошукової системи.

Уникайте розміщення важливого вмісту за подією JavaScript. Google може взагалі не стежити за подіями "onclick" на сайті. Як зазначено далі Moz Минулого року, просто, "не використовуйте події JavaScript на onclick як заміну для внутрішніх зв'язків."

3. На стороні сервера JavaScript

Навіщо використовувати візуалізацію на стороні сервера? Візуалізація на сервері забезпечить наявність у Googlebot простого HTML для читання. Так, Google безумовно може сканувати та відтворювати JavaScript на стороні клієнта. У конкурентних приміщеннях це занадто дорого, щоб покладатися лише на надання Google складного JavaScript.

1. Google дуже просунувся у спроможності відтворювати JavaScript на стороні клієнта. Однак пошукові системи та інші платформи, такі як Bing, Baidu, Yandex, Apple та Facebook, які регулярно сканують сайти, зазвичай є менш просунутими і можуть призвести до значного скорочення трафіку.
2. Важке відтворення на стороні клієнта, здається, призводить до того, що Google сканує менше сторінок для сайту - це означає, що новіші сторінки отримають менше трафіку. Google не завжди надає на стороні клієнта JavaScript повністю розуміти сторінку. Ймовірно, це пов'язано з тим, що час, що відбувається, значно сповільнюється.
3. Google може просто неправильно зрозуміти, з чим людина не матиме проблем, коли має справу з JavaScript. Іноді незначні помилки JavaScript можуть призвести до відсутності вмісту Google.
4. Навіть коли пошукова система сканує та надає JavaScript на стороні клієнта, це може призвести до несподіваної поведінки, наприклад сканування тонн неактуальних файлів JSON. Попередньо відтворений HTML просто простіше для пошукових систем (і маркетологів), щоб повністю зрозуміти.

Що зробити на стороні сервера? Вміст і посилання повинні бути доступними в HTML і повинні бути скановані для того, щоб Google надійно читав сторінку. Файли JavaScript і CSS також повинні бути скановані, залишаючи їх розблокованими файлом robots.txt. Початковий вміст, який завантажується до взаємодії з користувачем, має бути виконаний на стороні сервера. Після цього візуалізація на стороні клієнта в порядку.

Примітки щодо розробки для розробника

• Серверну візуалізацію HTML можна зробити за допомогою “ReactDOM.renderToString” замість “ReactDOM.render”. React Helmet може бути корисним для відображення елементів головного розділу, таких як мета-теги.
• Погляньте на Наступна структура JS для React. Далі JS побудовано спеціально для рендеринга на стороні сервера та має власну внутрішню бібліотеку маршрутизації. Будівництво з нуля простіше, ніж модернізація коду, щоб зробити серверну візуалізацію.