Оба поисковика утверждают, что что-то уже могут по индексированию SPA приложений. В статье показаны результаты проведенного эксперимента по индексации чистого SPA вебсайта.
Результат: Google - хорошо, Yandex - не очень.
SPA
SPA приложения получают данные и отображают их на странице асинхронно, через AJAX запросы. В связи с чем, для индексации таких сайтов поисковик должен понимать JavaScript и грузить и обрабатывать не только основной HTML страницы, как он это делал много лет, но и сопутствующие ресурсы.
Это требует значительно больше усилий на стороне поисковика (на порядки больше обычного html парсинга) из-за необходимости запускать виртуальный браузер для каждой такой страницы. Потому данная техника очень долго была недоступна, в связи с чем сайтам, жаждущим быть проиндексированным, нужно было применять обходные маневры, как то:
SSG
Prerendering
SSR (с Node.js и гидратацией - Nuxt, Next.js и др.)
Отдельная облегченная версия сайта для поисковиков с генерацией контента на сервере и SPA для людей
Обычная серверная генерация (PHP и пр.)
Основная причина делать сайты как гибридные SSR - требование иметь SEO. Разрабатывать SPA приложения намного легче, комфортней (DX), они поддерживаемей и расширяемей, их разработка дешевле и быстрей. Поэтому SEO оптимизация - давняя боль фронтенд разработки.
С целью проверки текущего положения дел у поисковиков в плане понимания JavaScript-a при индексации страниц было проведено два эксперимента. Первый со страницей на голом JavaScript и запросами на fetch()
, и второй - простое Vue приложение.
Несмотря на достаточно оптимистичные результаты, нужно отметить, что например мой рабочий (уже не такой элементарный) Vue 3 проект на Google не индексируется, то есть, успешность всего этого зависит, естественно, от логики приложения, а также, вероятно, от используемых библиотек.
Vanilla JavaScript
Код страницы - https://github.com/vuesence/spa-seo/blob/main/public/vanilla-js.html
В тело страницы последовательно добавлялись уникальные фразы (чтобы потом по ним можно было искать в поисковике) - в скрипте самой страницы, после события DOMContentLoaded
, а также после возврата данных функцией fetch()
для первого и второго случая.
Сама страница - https://vuesence.github.io/spa-seo/vanilla-js.html
Отобразил страницу корректно в Live test preview:
![](https://habrastorage.org/getpro/habr/upload_files/37e/3bf/4d1/37e3bf4d17d59014411f8c3f7c232f61.png)
Через несколько часов показал ее в результатах выдачи, причем с корректным title (он тоже ставился динамически) и полным описанием в сниппете:
![](https://habrastorage.org/getpro/habr/upload_files/6e5/a30/e7d/6e5a30e7dc7d0edf9dbf2536d10c0354.png)
Yandex
При явном указании рендерить через JavaScript правильно показал скриншот страницы:
![](https://habrastorage.org/getpro/habr/upload_files/7c4/4c9/85d/7c44c985dcf44de365ac507083379031.png)
Индексирование также прошло успешно, однако title - статичный.
![](https://habrastorage.org/getpro/habr/upload_files/588/3e4/513/5883e4513f97693f6dfd73b1cd98af78.png)
Vue приложение
Простое Vue 3 приложения с vue-router
и тремя страницами. Репозиторий проекта - https://github.com/vuesence/spa-seo/
В методе onMounted()
компонента главной страницы через fetch()
получаются данные с https://jsonplaceholder.typicode.com/ и затем добавляются в html шаблон.
Live preview отображено правильно:
![](https://habrastorage.org/getpro/habr/upload_files/87f/271/e1e/87f271e1eb702fcbe752485496eabb57.png)
Построенный HTML код так же содержит весь нужный текст. Через несколько часов сайт появился в результатах выдачи:
![](https://habrastorage.org/getpro/habr/upload_files/6b5/4e5/0ce/6b54e50cee0b35b7008b173fbd1d9b55.png)
Yandex
В Live preview - белый лист. В результатах поиска - пусто, хотя отмечено, что робот эти страницы уже обошел.
![](https://habrastorage.org/getpro/habr/upload_files/65a/585/dbb/65a585dbb95db623a08369cab11b66df.png)
Выводы
Требуется проверка работы других фронтенд фреймворков и каждого приложения индивидуально, но поддержка индексирования SPA у Google уже на очень приличном уровне. У Yandex - нет.
В англоязычном сегменте интернета при опоре на Google использование SSR становится не обязательным.
![](https://habrastorage.org/getpro/habr/upload_files/35f/a21/289/35fa21289609c8c3b772664d63ae3bc3.png)
Open graph
Еще одним фактором использования генерации на сервере являются свои open graph мета-теги для каждой страницы для построения сниппетов Фейсбуком, Телеграмом и другими соцсетями. К сожалению, они JavaScript не понимают от слова "совсем", поэтому при необходимости использовать прикладную логику на сервере фронтенда придется.
Однако, сгенерировать и вставить несколько строчек в head
секцию html страницы намного проще, и вполне реализуется одним скриптом на Python, PHP, вместо поднимания сервера на Node.js.
Ну в очередной раз можно посоветовать использовать две версии сайта - SPA для людей, и с простой серверной генерацией - для поисковых роботов. Они это разрешают.
Узнать интересную и полезную информацию о Vue.js и фронтенде в целом, а также изучить фреймворк по переводу лучшего учебника по данной теме «Vue.js 3 — Шаблоны проектирования и Лучшие практики» можно на нашем сайте: Vue‑FAQ.org.
Также заходите на наш Телеграм‑канал: https://t.me/vuefaq