"Подводный камень" при продвижении сайта на JavaScript

Если честно, мне дико лень придумывать какое-то необычное вступление для статьи, поэтому давайте сразу перейдем к мясу.

Делюсь опытом оптимизации сайта на JavaScript. Статья написана для обычных смертных. Столкнувшиеся с данной темой люди не найдут тут ничего нового.

Год назад я решил переквалифицироваться и выучить пару новых технологий. Мой интерес пал в сторону бурно развивающегося JavaScript, и поэтому я, поддавшись модным течениям, решил сделать себе “реактивный” блог на Vue.js.

Я начитался разных ***но (плохих) статей в интернете, которые кричали, что поисковые системы прекрасно индексируют сайты, сделанные на JavaScript. Естественно, на кураже я выбросил в помойку свой любимый ModX (надеюсь, он простит) и написал свой простенький блог на Vue. Уже через 3 недели я потерял весь трафик из Яндекса….

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

Но что же видит поисковая система, когда попадает на стандартный vue/react сайт и обращается к серверу за страницами? А ничего.

Дело в том, что сервер отдает пустую HTML-обертку, которую наполняет контентом JavaScript. Сам JavaScript не инициализируется на сервере (без специальных технологий), а только в браузере. Поэтому поисковая система при запросе на каждую страницу получает одну и ту же “пустую” HTML-обертку, в последствии не видя контента. Для нее все страницы это дубли.

Именно так работают JavaScript сайты. Данные компонуются не на сервере, а в браузере пользователя.

Многие слышали, что поисковые системы Яндекс и Google умеют в запуск JavaScript на сайте. Это полная правда, хотя делают они это с огромной неохотой. Давайте на примере моего блога.

За месяц Google умудрился проиндексировать внешний вид моего нового сайта. После, я опубликовал большую статью и Google ее даже проиндексировал и добавил в поиск. Правда, через полтора месяца после публикации.

С Яндексом дела обстояли намного хуже. Видимо потому, что “реактивные” сайты довольно редки в рунете. Яндекс Бот не способен их индексировать без специальных танцев с бубном.

Яндекс наотрез отказался видеть мой сайт, выплюнул все статьи из индекса и сказал: “Везде дубли главной страницы”. Я даже решил через специальный инструмент проверить, а точно ли Яндекс Бот умеет в JavaScript? Все же сумел, но индексировать сайт не хотел.

Метод от Яндекса я не внедрил. Посчитал это полумерой, ведь с Google тоже было дело не гладко. Но зато я понял, что мой проект изначально был сделан не правильно. Нужны были изменения.

Я снес все и построил заново, опираясь на технологию SSR.

SSR - Server Side Rendering. Данная технология позволяет инициализировать часть JavaScript на сервере и выдавать готовые данные пользователю. Сайт, сделаный через SSR, ничем не будет отличаться для поискового робота от любого другого сайта, например, сделанного на WordPress.

Самый первый скриншот, который я вам показал в начале статьи, это страница сайта без SSR. А вот та же самая страница, но к сайту был подключен SSR.

Как видите, текст есть, и сайт прекрасно индексируется поисковыми системами. Уже через 8 дней Яндекс вернул мои статьи в поиск, а Google стал значительно быстрее забирать мои статьи в индекс. Примерно за 1-2 часа.

Технология SSR работает только на серверах с Node.js, поэтому часть бэкенда мне пришлось переписать с родного PHP на Node.js.

Я не сам написал SSR для сайта, а воспользовался готовым “из коробки” от Nuxt.js. Это типо фреймворк для фреймворка (для vue.js). Для react есть интересный проект - Gatsby, в котором тоже есть SSR из коробки.

В целом, это самый большой и главный подводный камень, о котором хотелось рассказать. Если SSR реализован, дальше проект можно оптимизировать самыми стандартными методами без каких либо проблем. Поэтому, если вы услышали, что ваш сайт будет разрабатываться с помощью Vue.js или React, уточняйте, будет ли присутствовать в нем SSR.

Об авторе: Максим Колмогоров, JavaScript-программист, веб-разработчик компании vverh.digital.