Як зробити SPA сайти краще - інструкція з налаштування індексації сайтів на Angular, Meteor, React - Netpeak Blog

Що таке SPA

SPA (Single Page Application) - односторінкове JavaScript додаток, що запускається і працює в браузері. На відміну від «традиційного» сайту, архітектура на SPA-сайтах побудована так, що рендеринг сторінки повністю відбувається на стороні клієнта, а не на стороні сервера.

У браузері користувача запускається JavaScript-додаток, а все необхідне вміст сторінок динамічно завантажується за допомогою AJAX. Навігація по сайту відбувається без перезавантаження сторінок. За рахунок такої архітектури, SPA-сайти працюють швидше, ніж «традиційні» сайти.

Розглянемо детальніше, як відбувається завантаження і рендеринг вмісту на SPA-сайтах:

1. Користувач запитує HTML вміст сайту.
2. У відповідь приходить JavaScript-додаток.
3. Додаток визначає, на якій сторінці знаходиться користувач, і який вміст йому потрібно відобразити.
4. За допомогою AJAX користувач отримує необхідний контент: CSS, JS, HTML і текстовий контент.
5. JavaScript-додаток обробляє отримані дані і відображає їх в браузері.
6. При навігації по сайту оновлюється не вся сторінка, а тільки необхідне вміст.

Плюси SPA-сайтів:

• висока швидкість роботи;
• швидка розробка;
• створення версій для різних платформ на основі готового коду (desktop і mobile додатки).

Мінуси SPA-сайтів:

• JavaScript не обробляється більшістю пошукових систем;
• SPA-сайти не працюють без включеного JS в браузері;
• їх не можна аналізувати на предмет помилок популярними програмами та інструментами (наприклад, Netpeak Spider ).

Популярні JavaScript фреймворки:

Які пошукові системи індексують SPA-сайти

На сьогоднішній день тільки пошуковий робот Google вміє рендерить вміст SPA-сайтів, так як використовує для рендеринга інструменти на базі Chrome 41. ASK.com використовує видачу Google. Для інших пошукових систем необхідна наявність контенту в коді в форматі HTML.

Оптимізація індексації SPA-сайтів

Роботи Google і Yandex можуть проіндексувати Single Page Application, якщо структура сайту відповідає певним правилам. При цьому, для Яндекса необхідна обов'язкова наявність повної HTML-копії сторінки.

Для Google потрібно використовувати тільки правильний формат URL. влітку 2018 Google перестане індексувати HTML-копії сторінок , А буде використовувати тільки рендеринг.

(!) Не можна забороняти індексування JS і CSS файлів для пошукових роботів Google. Обмеживши їх індексацію, Google не зможе проіндексувати вміст SPA-сайтів.

Існує два способи «змусити» пошукових роботів індексувати AJAX-сторінки:

1. Використовувати «? _Escaped_fragment_ =».
2. Віддавати роботу HTML-копії визначаючи його по user-agent.

Використання «? _Escaped_fragment_ =»

Цей спосіб має на увазі генерацію HTML-копій сторінок (знімків) за окремим URL з використанням параметра «? _Escaped_fragment_».

Використання URL c «#!»

Якщо адреси AJAX сторінок формуються за допомогою «#» (хеш), значить потрібно замінити їх на «#!» (Хешбенг). Наприклад, з https://example.com/#url на https://example.com/#!url.

Google просканує вміст за основним URL, а робот Яндекса, виявивши в URL «#!», Запросить знімок сторінки. Він замінить «#!» На «? _Escaped_fragment_ =» і просканує її за адресою https://example.com/?_escaped_fragment_=url.

Приклади адрес c «#!» І HTML-копій сторінок:

• https://example.com/home#!page → https://example.com/home?_escaped_fragment_=page;
• https://example.com/index/#!main → https://example.com/index/?_escaped_fragment_=main;
• https://example.com/#!home/index → https://example.com/?_escaped_fragment_=home/index.

Використання «традиційних» URL

Якщо на сайті використовуються «традиційні» URL (https://example.com/url), необхідно вказати на всіх сторінках мета-тег:

<Meta name = "fragment" content = "!">

Google просканує вміст за основним URL, а робот Яндекса, виявивши на сторінці мета-тег <meta name = "fragment" content = "!">, Запросить HTML-копію сторінки. Також додасть в URL параметр «? _Escaped_fragment_ =» і просканує її за адресою https://example.com/url?_escaped_fragment_=

Для популярних фреймворків є готові рішення, які замінюють «#!» На «традиційні» URL, наприклад, HTML5 mode для Angular .

(!) В HTML-копії документа мета-тег розміщувати не слід: в цьому випадку стаття не буде проіндексована.
(!) На сторінках HTML-копій canonical повинен або відсутні, або вести сам на себе.

Наприклад, на сторінці https://example.com/home?_escaped_fragment_= повинен бути зазначений наступний canonical:

<Link rel = "canonical" href = "https://example.com/home?_escaped_fragment_=" />

Віддавати HTML-копії сторінки за основним URL

Цей спосіб підходить для SPA-сайту з «традиційними» URL. У чому суть: пошуковий робот, запитуючи сторінку за основним URL, замість динамічної версії отримує HTML-копію сторінки.

Визначити пошукового робота можна по User-Agent. Наприклад, за списком роботів Яндекса .

Рендеринг HTML-копій

Для того, щоб пошукові системи змогли проіндексувати вміст, необхідно реалізувати створення HTML-копій сторінок.

HTML-копії - це відрендерені версії сторінок SPA-сайту. Наприклад, вміст вихідного коду сторінки SPA-сайту виглядає так:

<Html lang = "ru"> <head> <title> Single Page Application </ title> <meta name = "fragment" content = "!"> </ Head> <body> <script type = "text / javascript" src = "/ assets / js / app.min.js? 554997697"> </ script> </ body> </ html>

А ось відрендерене HTML-копія цієї сторінки:

<Html lang = "ru"> <head> <title> TITLE сторінки </ title> <meta name = "keywords" content = "ключові слова"> <meta name = "description" content = "Опис сторінки"> <meta name = "viewport" content = "width = device-width, maximum-scale = 1, initial-scale = 1, user-scalable = 0, shrink-to-fit = no"> <link rel = "canonical" href = "https://site.com/"> <link href = "/ favicon.ico" type = "image / x-icon" rel = "shortcut icon"> <meta name = "robots" content = "index, follow "> <link rel =" stylesheet "type =" text / css "media =" screen "href =" / style.css "> </ head> <body> <div> ЗМІСТ СТОРІНКИ </ div> </ body> </ html>

Для створення HTML-копій сторінок можна:

1. Використовувати рендеринг на своїх серверах.
2. Використовувати рендеринг на аутсорс.
3. Використовувати ізоморфний JavaScript.

Існує багато готових рішень для рендеринга HTML-копій, тому, якщо ви використовуєте популярний фреймворк (наприклад, Angular), на впровадження HTML-копій сторінок повинно піти лише кілька годин розробника.

Візуалізація на своїх серверах

Підходить для великих проектів. Для рендеринга HTML-копій на своїх серверах можна використовувати такі інструменти:

Візуалізація на аутсорс

Підходить для невеликих проектів. Для рендеринга HTML-копій на сторонніх серверах можна використовувати такі інструменти:

ізоморфний JavaScript

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

Такий підхід до розробки сайту дозволяє вбити відразу двох зайців: сайт отримує всі переваги SPA-сайту і можливість просування в пошукових системах без додаткових впроваджень.

Обробка 404 сторінок

Рендеринг сторінки на SPA-сайтах відбувається на стороні клієнта, тому без додаткових доробок код відповіді неіснуючої сторінки буде 200 ОК.

SPA-сайти повинні коректно обробляти неіснуючі сторінки і віддавати в якості заголовка сторінки 404 помилку.

Налаштування Google Analytics

Стандартний код Universal Analytics виконується під час завантаження кожної нової сторінки, а SPA-сайти підвантажують контент динамічно, «імітуючи» перехід між сторінками. Для того, щоб Google Analytics коректно обробляв переходи на сторінках, необхідно зробити так, щоб лічильник Universal Analytics активувався кожен раз, коли на сайті змінюється URL.

Налаштувати Google Analytics для SPA-сайтів можна, використовуючи Tag Manager і тригер «History» або - передаючи дані вручну.

За допомогою Tag Manager і тригера «History»

Використання HTML5 History API на SPA-сайтах дозволяє налаштувати коректну роботу лічильника Google Analytics в GTM за допомогою тригера «History». Кожен раз при оновленні історії (зміни URL, Title), тег Google Analytics має використовуватися повторно.

Для цього необхідно в налаштуваннях тега в якості тригера вказати додатковий тригер:

Передача даних вручну

Кожен раз, коли в рядку браузера змінюється URL, необхідно передавати про це інформацію в Google Analytics.

Щоб оновити лічильник, потрібно використовувати команду «set» і вказувати нове значення змінної «page»:

ga ( 'set', 'page', '/new-page.html');

Тепер всі наступні звернення будуть прив'язані до нового URL. Щоб передати інформацію про перегляд сторінки, потрібно використовувати команду «send» і вказувати значення «pageview» відразу після поновлення лічильника:

ga ( 'send', 'pageview');

Більш детальну інформацію можна дізнатися в довідці Google Analytics для односторінкових додатків .

висновки

SPA-сайти - це сьогодення і майбутнє, тому не потрібно боятися брати в роботу такі проекти. Single Page Application можна «подружити» з пошуковими системами. Щоб ваш SPA-сайт був доброзичливий як до SEO, так і до користувачів я рекомендую:

1. Використовувати «традиційні» URL.
2. Використовувати ізоморфні додатки або рендеринг HTML-копій.
3. Налаштувати правильну віддачу заголовка «404 Not Found».
4. Налаштувати коректну роботу Google Analytics.