Есть четыре основных способа создания сайтов – использование готовых CMS, создание при помощи сервисов-конструкторов, написание с нуля и разработка на основе фреймворков. Если при работе с CMS серьезных проблем с SEO-оптимизацией как правило не возникает, то при использовании самописных решений и фреймворков на Java Script, необходимо провести определенные подготовительные работы.

Такие типы сайтов обозначаются аббревиатурой SPA (Single Page Application), что переводится с английского как «одностраничное приложение». Вот какое определение дает нам Википедия:

Одностраничное приложение (SPA) — это веб-приложение или веб-сайт, использующий единственный HTML-документ как оболочку для всех веб-страниц и организующий взаимодействие с пользователем через динамически подгружаемые HTML, CSS и JavaScript, обычно посредством AJAX.  

Человеку, далекому от технической части, это мало о чем говорит. Так что в этой статье мы подробнее разберемся в особенностях работы такого типа сайтов, объясним в чем здесь проблемы в плане SEO и как подружить такой проект с поисковиками.

Как SPA сайты работают и почему при их индексации возникают проблемы

Особенность работы SPA-приложения в том, что для взаимодействия с пользователем используется одна и та же страница. Часть элементов на ней остаются неизменными, а остальное содержимое загружается при наличии запроса со стороны пользователя. То есть браузеру при помощи Java Script возвращается только та часть информации, которую требуется заменить, и каждый раз не создается новая страницы.

Как работает Single Page Application (SPA)

Например, можно организовать сортировку товаров в каталоге по фильтру практически мгновенно, не перезагружая содержимое страницы с десятками позиций. 

Это дает ряд важных преимуществ:

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

Наиболее популярные фреймворки для создания SPA-сайтов: Angular, React, Vue. 

Примеры Single Page Application

Несмотря на весомые преимущества, есть у технологии и свои недостатки. В первую очередь нас интересуют проблемы в контексте SEO. Дело в том, что поисковые боты изначально предназначены для загрузки отдельных статичных страниц, и когда дело доходит до SPA, возникает проблема: большая часть внутренних ссылок не является частью исходного HTML-кода, поэтому боту доступно только ограниченное количество URL для индексации.

В итоге, Google научился хорошо индексировать SPA-сайты только в 2017 году, а в Яндексе с индексацией AJAX-сайтов до сих пор проблемы и необходимо создавать для каждой из страниц сайта HTML-версию.

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

Как подружить поисковые системы и SPA-сайт, чтобы избежать проблем с SEO

Становится понятно, что оптимизация и продвижение такого типа сайтов является задачей не из простых. Хорошая новость в том, что сообщество оптимизаторов и разработчиков, да и сами поисковые системы в итоге нашли решения. SEO для SPA – это трудно, но не невозможно.

  1. Использовать «?_escaped_fragment_=» (для Яндекса). Для AJAX-страниц генерируются их HTML-копии, доступные по отдельному адресу с использованием данного параметра. Подробная инструкция доступна в справке Яндекс.Вебмастера.

Googlebot AJAX crawling

  1. Определять робота по user-agent и отдавать ему HTML-копию страницы. Например, если адреса AJAX-страниц формируются с использованием «#», заменить данное значение на «#!». Тогда бот Google будет сканировать содержимое по основному адресу, а Яндекс запросит снимок страницы и проиндексирует ее с добавлением «?_escaped_fragment_=». 

Для некоторых фреймворков есть готовые решения, например HTML5 mode для Angular. Если SPA-сайт использует традиционные URL, это еще проще – просто отдаем HTML-копию вместо традиционной страницы.

  1. Рендеринг HTML-копий страниц на стороне сервера. Чтобы отдавать поисковикам HTML-версии страниц, нужно их предварительно сгенерировать. Для этого применяется визуализация в рамках цикла запросов/ответов сервера (SSR). Основной минус – большие ресурсные затраты, которые требуются для выполнения таких операций.

Рендеринг SPA страниц на стороне сервера

  1. Предварительная визуализация статических страниц. Отличия в логике создания HTML-копий следующие – визуализация происходит во время предварительного развертывания, а не на работающем сервере. Затем созданная версия страницы хранится на хостинге и отдается роботу поисковой системы во время запроса. Таким образом, отпадает необходимость в наличии больших серверных ресурсов. 

Существуют специальные инструменты, например Prerender.io, которые позволяют выполнять такие операции с любым Java Script фреймворком.

  1. SEO-дружественные URL. Хэштеги и фрагменты при навигации по SPA-сайту или приложению использовалось на заре появления технологии, что создавало беспорядок для поисковых роботов и самих разработчиков. Сейчас этого можно избежать при помощи маршрутизаторов (slug URL), и даже Google недавно объявил, что использование хэштегов больше не рекомендуется.

В дополнение к перечисленным пунктам важно вспомнить и о веб-аналитике. Как и поисковые роботы, системы веб-аналитики изначально создавались для отслеживания и мониторинга многостраничных сайтов. В случае со SPA, основная задача – сделать так, чтобы при подгрузке контента и обновлении URL в адресной строке данные в счетчике тоже обновлялись. 

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

Подведем итоги

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

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

На сегодняшний день Google уже умеет индексировать SPA-сайты в исходном виде, а Яндексу в этом можно помочь. Поэтому не стоит отказываться от современной технологии как таковой, главное уделите время адаптации для нужд SEO. 

Надеюсь, эта статья была для вас полезной. Если есть вопросы – пишите в комментариях!