Google и Yandex SEO оптимизация для SPA приложений
Оба поисковика утверждают, что что-то уже могут по индексированию 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:
Через несколько часов показал ее в результатах выдачи, причем с корректным title (он тоже ставился динамически) и полным описанием в сниппете:
Yandex
При явном указании рендерить через JavaScript правильно показал скриншот страницы:
Индексирование также прошло успешно, однако title — статичный.
Vue приложение
Простое Vue 3 приложения с vue-router и тремя страницами. Репозиторий проекта — https://github.com/vuesence/spa-seo/
В методе onMounted() компонента главной страницы через fetch() получаются данные с https://jsonplaceholder.typicode.com/ и затем добавляются в html шаблон.
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
