Как оптимизировать SPA-сайты

Если вы находитесь на сайте, где шапка и подвал сохраняются неизменными, а остальные элементы динамически подгружаются — перед вами SPA-приложение.

При создании SPA-приложения используется всего один html-документ для обложки. Переменные составляющие подаются пользователю через определенную технологию: Ajax, HTML5, шаблонизатор или фреймворк для JavaScript.

По сути, после запроса браузера к серверу последнему не нужно создавать абсолютно новую страницу. Он возвращает браузеру только ту часть информации, которую требуется заменить по условиям запроса. Это происходит быстро при частичной перезагрузке страницы.

• Нет перезагрузки страницы при каждом нажатии и, соответственно, информация на странице не меняется полностью;
  
  
• информация загружается быстрее из-за упрощенной структуры;
  
  
• как и в обычных сайтах, каждая страница может существовать как отдельный элемент со своей структурой и функциями, а неисправность одной страницы не повлияет на весь сайт.

• Индексация ботами отличается от традиционной подачи в html-коде;
  
  
• нужно досконально изучить JavaScript для создания;
  
  
• SEO-оптимизация сайта проходит чуть сложнее, чем обычно;
  
  
• для отображения в браузере должен быть включен модуль Java.
  
  

Из всех поисковых систем рендерить страницы SPA-приложений умеет только Google и Ask.com, использующий гугловские результаты выдачи. Но вам как оптимизатору нельзя забывать и об остальных поисковиках.

Чтобы боты лучше сканировали страницы, добавьте параметр <meta name="fragment" content="!">.

До лета 2018 года этот метод действовал и для ботов Google. Но теперь они рендерят страницы напрямую. В этом случае вам достаточно использовать верный формат URL.

При обращении к странице бот сначала ее сканирует, затем анализирует и определяет окончательное время для обработки. Тесты показывают: если сканирование превышает порог в 5 секунд, то бот страницу покидает. То же самое происходит при чтении скриптов. Если поисковик посчитает код слишком сложным, он уходит. При сложности, запутанности кодов и наличии ошибок алгоритмы бота сочтут файлы JavaScript неважными.

Даже минимальная ошибка приведет к тому, что страница не будет просканирована. Один из вариантов — создать так называемый полифилл. Это упрощенная версия сайта для ботов, внешне не такая функциональная, как видит пользователь, но содержащая необходимую информацию для ранжирования поисковиками. В любом случае и сам сайт не нужно делать тяжелым.

Чтобы проверить индексацию определенной страницы в Google, используйте оператор site. Для этого в режиме инкогнито введите в поисковой строке:

Проиндексированная страница будет отображаться в поиске. Если информации не будет в выдаче, значит, страница не была просканирована ботом. Чтобы провести непосредственный анализ сайта, лучше сразу смотреть на DOM (Document Object Model). Для этого выделяете часть текста, нажимаете правой кнопкой мышки и выбираете «Посмотреть элемент» прямо в браузере.

Модель DOM используется для отслеживания динамических изменений на странице и представляет собой иерархию метатегов и текстовых строк. В этой структуре есть основные и дочерние узлы, которые доступны для изменений в приложении JavaScript. Например, есть определенная HTML-страница:

Ее структура будет выглядеть так:

Также скачайте браузер Chrome 41. Именно эту версию использует Google для рендеринга страниц. Время от времени полезно проанализировать ошибки в консоли этого браузера.

Если у вас на сайте есть скрытый текст под катом, используйте в ссылках параметр href и не полагайтесь только на onClick. Без указанного параметра страницы под катом будут скорее всего пропущены ботом. В URL не используйте стандартный хештег #, а просто замените его на хешбенг #! — тогда бот прочитает название страницы.

Чтобы посмотреть на сайт со стороны ботов, зайдите в Google Search Console, найдите там параметры Fetch и Render («Получить» и «Отобразить»). Эта информация полностью соответствует реальности за исключением показателей timeout. Для робота они меньше, чем здесь может быть указано.

Продвижение JavaScript-приложений проводите традиционным образом. Бывает, что ошибки индексации вовсе не связаны непосредственно с архитектурой сайта, а возникают по причине неправильных действий с точки зрения SEO. В данном случае помимо стандартных действий необходимо:

Если нужно сделать редирект — смело его используйте! Тестирования показывают, что бот способен прочитать редирект и перейти на нужную страницу. То есть редирект в JavaScript происходит аналогично 301 в html.

Для оптимизации вам также нужно доработать страницу 404. По стандарту в SPA-приложениях для несуществующих страниц выдается результат 200 ОК, что является некорректным. Ваша задача — сделать так, чтобы в заголовке страницы выдавалась ошибка 404.

Для регистрации вашего сайта в Google Analytics используйте Tag Manager и триггер History. Либо передавайте данные о каждой странице вручную через команду set и замены переменного значения на новое.

Создавать дубликаты страниц можно как на своем сервере, так и на стороннем. Первый вариант актуален для крупных проектов, второй — для средних и небольших с привлечением специализированных инструментов. Среди указанных способов оптимизации наилучшим считается третий вариант — создание изоморфного приложения. Его рекомендуют даже в Google:

Суть в том, что пользователи и боты изначально получают весь набор информации, к которой подгружаются скрипты Java. В результате пользователь видит динамические страницы, а боты получают их html-копии.

SPA-приложение представляет собой одну страницу, которая сразу загружает все скрипты и файлы CSS. При действиях пользователя меняются лишь части страницы, а ее оболочка остается неизменной.

Для оптимизации SPA-сайтов необходимо использовать стандартные инструменты по SEO и дополнительно представить URL в понятном виде для ботов.

На сегодняшний день только Google и Ask.com способны индексировать SPA-сайты в оригинальном виде. Для остальных поисковиков нужны html-копии страниц. В идеале пользователь использует функционал JavaScript, а боты считывают упрощенные и понятные дубликаты.