Как Googlebot индексирует сайт, разработанный на JavaScript фреймворке.
Статистика показывает что веб-мастера используют в сайтах популярные JavaScript Фреймворки: React.js, Vue.js, Angular.js и другие. Разрабатываются сложные интерфейсы, эффекты и анимация. Сайты разработанный как SPA (single page application) завоевывают место под солнцем современного интернета. НО в 2018 году еще не решена главная SEO проблема JavaScript сайта. В 2019 году только Googlebot работает с SPA страницами, но даже разработчики поисковика предупреждают о проблемах и рекомендуют искать альтернативу. Bingbot и Yandexbot работают с SPA непредсказуемо.
Еще в 2014 году представители компании Google заявляли, что поисковая машина обрабатывает JavaScript на сайтах, но представители компании рекомендовали относится к JS технологиям осторожно и обдуманно. Для представления проблемы давайте кратко рассмотрим процесс индексации web страницы поисковой машиной Google.
Сканирования происходит в три этапа. В начале поисковик оценивает возможность индексации, Разрабатывайте web-сайты таким образом, чтобы поисковый робот имел возможность сканировать контент, учитывая структуру сайта. Далее оценивается возможность рендеринга и анализа полученной информации. Чтобы завершить операцию, робот должен получить весь необходимый контент. Время сканирования – это время, выделенное поисковой машине на анализ сайта. Время строго ограничено и в индекс попадают только тот контент, который обработан поисковиком.
Проблема с обработкой JavaScript сайта возникают на этапе анализа сайта. Часто логика построена так, что при взаимодействии с элементами страницы скрипт не добавляет элемент, а наоборот удаляет. Получается такая ситуация, при которой Googlebot выполнив скрипты получает полупустой HTML. Второй момент — это бюджет сканирования. Избегайте сложной логики и вложенностей. Googlebot может не успеть выполнить скрипты, часть контента потеряется.
Также стоит не забывать, что остальные браузеры не работают с JavaScript. Bing и Yahoo в США занимают значительную долю рынка, на территории СНГ популярен поисковик Yandex. Задача разрабать коммерческий сайт и хотите современное SPA, на моменте разработки продукта, планируйте, как будет решена проблема индексирования. Одна надежда на техническую продвинутость Google спровоцирует падение рейтинга поисковой выдачи на других площадках.
Способы решения проблемы индексации SPA приложений поисковиками.
Хорошим решением проблемы индексирования SPA сайтов является технология изоморфного рендеринга (Isomorphic JavaScript). Если кратко описать данное решение, необходимо разработать функционал, который будет выполнять SSR (server-side rendering) рендеринг приложения. Проблема индексирования решается статическим HTML, который при первом заходе формируется на стороне сервера и передается пользователю во время первого визита. Поэтому Googlebot проиндексирует стандартный и полный HTML, пользователи в браузере далее будут работать уже с JS компонентами сайта.
Данное решение хоть и решает задачу, но требует большого количества ресурсов для реализации и дальнейшей поддержки. И если это небольшой промо-сайт или сайт с текстовой информацией вариант SSR будет приемлем, но с ростом объема и сложности проекта столкнетесь со сложностями поддержки и развития данного решения в будущем.
Решение проблемы индексации SPA с помощью бесплатного программного обеспечения.
Рассмотрим варианты решения проблемы с помощью бесплатного программного ПО. Клиенту не платить за дорогие лицензии и разрабатывать решение с нуля. Наша задача решить проблемы SPA без дополнительных трат на программистов и софт. Все что нужно это только подключить и настроить готовое решение.
Первое подходящее решение называется Rendora – это новый FOSS (бесплатный и с открытым исходным кодом) проект, написанный на языке GO. Rendora представляет из себя механизм динамического рендеринга, работающего с Google headless. Фактически rendora делает готовый HTML рендер на стороне сервера и отдает рендер поисковой машине, а пользователь работает со стандартным SPA сайтом. Клиент получает стандартный изоморфный рендер, нет необходимости разрабатывать решение с нуля. Нужно только подключить и настроить Rendora.
Rendora работает как обратный HTTP прокси перед основным бекенд сервером. Основной сервер может работать на любой технологии, abiatec для своих проектов используем x4.cms написанную на php либо Django или Node.js.
Сервер Rendora проверяет запросы и если видит что необходимая страница запрошена ботом, программа дает команду Google headless запросить искомую страницу и далее возвращает SSR версию клиенту. Тем самым Googlebot получает статический HTML. Если страница запрошена обычным пользователям, rendora пересылает HTML клиенту в исходном виде, ничего не изменяя, как обычный прокси сервер.
Из видимых преимуществ решения, rendora разработана на Golang, что значительно ускоряет работу по сравнению с аналогичными решениями на Node.js. Реализовано кеширование, для хранения SSR страниц и последующей мгновенной выдачи. Можно настроить игнорирование некоторого неважного для индексации контента, таких как шрифты и изображения, что ускоряет работу Google headless.
Подробнее о настройке и запуске Rendora вы можете прочитать на официальной странице проекта github
В следующей статье мы рассмотрим альтернативные варианты решения проблемы рендеринга и индексации SPA приложений.