Оба поисковика утверждают, что что-то уже могут по индексированию 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

Google

Отобразил страницу корректно в Live test preview:

Через несколько часов показал ее в результатах выдачи, причем с корректным title (он тоже ставился динамически) и полным описанием в сниппете:

Yandex

При явном указании рендерить через JavaScript правильно показал скриншот страницы:

Индексирование также прошло успешно, однако title - статичный.

Vue приложение

Простое Vue 3 приложения с vue-router и тремя страницами. Репозиторий проекта - https://github.com/vuesence/spa-seo/

В методе onMounted() компонента главной страницы через fetch() получаются данные с https://jsonplaceholder.typicode.com/ и затем добавляются в html шаблон.

Google

Live preview отображено правильно:

Построенный HTML код так же содержит весь нужный текст. Через несколько часов сайт появился в результатах выдачи:

Yandex

В Live preview - белый лист. В результатах поиска - пусто, хотя отмечено, что робот эти страницы уже обошел.

Выводы

Требуется проверка работы других фронтенд фреймворков и каждого приложения индивидуально, но поддержка индексирования SPA у Google уже на очень приличном уровне. У Yandex - нет.

В англоязычном сегменте интернета при опоре на Google использование SSR становится не обязательным.

Open graph

Еще одним фактором использования генерации на сервере являются свои open graph мета-теги для каждой страницы для построения сниппетов Фейсбуком, Телеграмом и другими соцсетями. К сожалению, они JavaScript не понимают от слова "совсем", поэтому при необходимости использовать прикладную логику на сервере фронтенда придется.

Однако, сгенерировать и вставить несколько строчек в head секцию html страницы намного проще, и вполне реализуется одним скриптом на Python, PHP, вместо поднимания сервера на Node.js.

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

Узнать интересную и полезную информацию о Vue.js и фронтенде в целом, а также изучить фреймворк по переводу лучшего учебника по данной теме «Vue.js 3 — Шаблоны проектирования и Лучшие практики» можно на нашем сайте: Vue‑FAQ.org.

Также заходите на наш Телеграм‑канал: https://t.me/vuefaq