Сайты на JavaScript-движках: стоит ли игра свеч? — мнение экспертов


Какие подводные камни у продвижения таких сайтов?

Однако реальность такова, что «творение разработчиков» не всегда можно адаптировать под требования поискового робота. Хотя Google и заявляет, что они довольно хороши в рендеринге JavaScript-сайтов, но заявления разнятся с действительным положением дел:
1. JavaScript очень чувствительный к ошибкам. Одна ошибка в вашем коде JavaScript может привести к тому, что Google не сможет отобразить вашу страницу.
2. Проблемы сканирование JS-файлов.
- Разбор, компиляция и запуск JS-файлов занимает очень много времени.
- В случае веб-сайта, который «кишит» JavaScript, Google Bot должен подождать, пока все шаги компоненты JS-файлов будут выполнены, и только потом он сможет проиндексировать контент.
- Сканирования ссылок. На JS вебсайтах очень часто Google не может обнаружить новые URL-адреса и должным образом просканировать их, как результат не всегда «SEO-фишки» оптимизаторов смогут сработать.


С Google ситуация несколько проще, но даже его представители говорят о том, что сначала робот забирает html-код и лишь затем, при втором и последующих заходах начинает анализировать JS на странице. Соответственно, сроки в которые ваш сайт начнет ранжироваться существенно увеличиваются.
Есть несколько вариантов, как бороться с этой ситуацией:
- Использовать meta name="fragment" content="!"
- Добавлять параметр #!
- Отдавать HTML копию страницы по основному URL в зависимости от User-Agent.

Во-первых, с момента релиза первых полноценных JavaScript-фреймворков прошел уже не один год. Успешных кейсов по переезду статичных проектов на динамичные SPA до сих пор крайне мало. Это наталкивает на мысль, что любой JavaScript-движок заранее обречен на проблемы с индексацией и ранжированием в поисковых системах, хотя это не так. Об одном таком кейсе я буду рассказывать на All in Top 2019.
Во-вторых, рекомендации ПС Google и Яндекс по вопросам индексации JavaScript сайтов противоположны. Google проиндексирует и обработает большую часть контента. Для обработки JavaScript используется механизм на основе браузера Google Chrome (WRS или, по-другому, CSR). Яндекс же до сих пор обрабатывает динамический контент (JavaScript, AJAX), от слова «никак». Более того, для показа обработанных в HTML динамических страниц Яндекс рекомендует использовать AJAX Crawling Scheme, которая помечена Google как «нежелательная» еще с 2015 года, а с лета 2018 не поддерживается.
В то же время уже давно существуют рабочие решения с использованием SSR и изоморфного JavaScript, сторонних сервисов (например, Prerender.io).
В-третьих, SEO специалисты редко разбираются в архитектуре проекта. А разработка не всегда «дружит» с SEO. Многие разработчики (не все конечно же), считают SEO шаманством, а сеошников необязательными и ненадежными. Хотя, по сути, у них много общего и возможно совмещение таких специалистов на одном проекте, вплоть до совместных команд по SCRUM-методологии.

- Поисковики способны распознать контент, передающийся через JS, но не во всех случаях. Например, если код слишком сложный, запутанный или содержит ошибки, то поисковик может его и не распознать. По возможности желательно весь важный контент отдавать в HTML, в этом случае можно избежать большинства проблем.
- Если контент загружается через JavaScript около 5 секунд, то поисковики могут вообще его не «увидеть».
- Довольно частая и очень глупая ошибка — в файле /robots.txt блокируются от индексации скрипты, вследствие чего поисковики могут не проиндексировать загружаемый контент.
- В сайтах на JS-движках часто вместо ссылок используются браузерные события onclick, поисковики такие «ссылки» видят, но ссылочный вес по ним не передается, либо передается неполностью.
- Индексация контента JS происходит очень долго по сравнению с HTML контентом. Если сайт не написан полностью на JS (что бывает крайне редко), то при посещении страницы поисковым ботом сначала индексируется HTML контент, а к содержимому JS поисковик может подойти только после нескольких таких итераций.

Всегда стоит анализировать кэш в Google страниц вашего сайта. Текстовый кэш покажет, видит ли Google bot ваш сайт таким, каким вы его показываете пользователю. В Google Search Console стоит просматривать страницы как Google bot для проверки наличия ошибок.
Важно помнить, что JS-события, которыми наполнен сайт, по-разному выполняются пользователем и роботом Google (например, клик по JS-ссылке, открытие формы с динамически подгружаемым контентом). Это может быть как проблемой для индексации некоторых типов контента (например, блок отзывов), так и инструментом к скрытию контента, нежелательного для глаз Google bot.
Отдельно стоит упомянуть SPA (Single Page Application) — сайты, построенные по принципу «заходишь на одну страницу, все остальное подгружается во фрейме».
Тут два недостатка:
- невозможность SEO-продвижения без специальных настроек;
- проблемы с аналитикой и отслеживанием трафика, что тоже нужно искусно настроить чтобы все правильно отрабатывало.

Основное правило звучит так:
Поисковики, за исключением Google, не отрабатывают JS при сканировании сайта. И неважно, насколько грамотно проведена оптимизация, какая ссылочная масса и возраст домена. Сайт, полностью написанный на JS, будет иметь сложности в продвижении. Даже с Google bot, который отрабатывает JS-скрипты, но не так, как хотелось бы. Например, при сканировании сайта, сделанного на JS, бот может не дойти даже до второго уровня сайта.


Но есть нюансы, которые могут оказать критическое влияние на продвижение таких сайтов. Каждый специалист по SEO, который столкнулся с продвижением сайта на JavaScript-движке должен понимать две очень важные концепции:
1. Стандартный подход: рендеринг (визуализация) на стороне сервера.
2. Рендеринг на стороне клиента (браузер).
При стандартном подходе (это, чаще всего, сайты на PHP), браузер или роботы подгружают с сервера весь описывающий страницу код. После этого браузеру (или роботу) остается лишь обработать и загрузить HTML (плюс CSS) и вывести, готовую к взаимодействию (для пользователя) или анализу (для роботов), страницу. Сайты, использующие серверный рендеринг, чаще всего не испытывают проблем с индексацией поисковыми системами.
При использовании такого движка для сайта, важно убедиться в том, что поисковые системы правильно сканируют страницы сайта. Чтобы не получилось так, что ошибка в скрипте закрыла путь к индексации страницы.
Плюс надо ориентироваться на время, которое потратит движок на то, чтобы собрать код страницы воедино. Если это будет больше 4-5 секунд, то поисковый робот просто не сможет корректно проиндексировать содержимое страниц. А пользователю будет некомфортно работать с сайтом.


- проблемы с индексацией;
- попадание в выдачу не того контента;
- невозможность пользоваться привычными SEO-инструментами для диагностики проблемы и другие.
Даже при использовании Prerender не все так гладко, как в теории: если сервер слабый, контент может генерироваться с задержкой и поисковые системы думают, что сайт медленный. Если разработчики «забывают» добавить на несуществующую страницу нужный код, все 404-е страницы отдают код «200 ОК». Нередко всплывают также проблемы с 301 редиректами и другие сюрпризы.

Наоборот, могут быть значимые плюсы в виде скорости работы приложения.
Что должно быть учтено при разработке?
- Чистый HTML-код, который, содержит в себе контент страницы.
- Отдельные URL для страниц, разделов, новостей, товаров и так далее.
- Управление SEO-тегами (title, h1-h6, meta).
Основные сложности могут возникнуть с поддержкой сайта.




- Основная проблема в использовании JavaScrips — это проблемы с индексацией.
- Высокая чувствительность JavaScript к ошибкам.
- Попадание в выдачу не того контента.
- Технические ограничения Google: множество современных функций недоступны для Google bot.
- Поисковые системы могут не «увидеть» контент на странице, так как через JS он загружается до 5 секунд.
Разработка упрощается или наоборот становится сложнее и дороже?

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





Сама разработка не усложняется, но часто, поддерживать такой код сложней и, в случае ухода из команды специалиста, это может стать существенной головной болью.
По факту, такой вариант можно рекомендовать только проектам, которые планируют иметь в штате от 2-3 специалистов, которые будут поддерживать и развивать сайт на full time.



Если говорить о написании серверной части целиком на JS, это будет дороже и дольше, поскольку порог входа программиста в полноценный серверный JavaScript выше, чем в тот же PHP. Вдобавок, на PHP есть гораздо больше готовых решений на написания серверной части вебсайтов.
Если речь о клиентской фронтенд-части, то она и раньше всегда использовала JS.


Но, при работе с таким сайтом, важно понимать как быстро вы сможете решить ту или иную проблему, возникшую в процессе продвижения. По количеству информации в сети, то же PHP выигрывает с большим отрывом. С JavaScript с этим вопросом дела обстоят похуже.
Сейчас разработка сайта на JavaScript несомненно дороже, чем на PHP, но тенденция по упрощению растет вместе с популярностью.


Существует два решения: либо создавать server side prerender версию сайта, либо в отдельную директорию, ставить отдельный движок для нужд SEO.


С другой стороны, разработка становится дешевле из-за появления большего кол-ва специалистов на рынке. Вполне возможно, что скоро увидим «бум» сайтов такого типа (при условии того, что поиск тоже научится корректно и эффективно работать с сайтами на JS). А может все закончится как с flash.


Из-за наличия библиотек и расширенных возможностей разработка становится на порядок проще, но такой сайт обойдется дороже. И далеко не каждому ресурсу будет выгодно использование JS.
При каких условиях бизнесу можно думать об использовании JS-движков?

При этом стоит помнить, что полноценная поддержка подобных сайтов — дело не из дешевых.


SPA vs стандартный сайт можно сравнить с разницей кнопочного телефона со смартфоном в самом начале пути. Разница пока не так заметна. И там и там, сначала в основном можно было только звонить, а затем резко функционал смартфона пошел в отрыв, без шансов кнопкам. Проекты на JavaScript создают для себя фору и конкурентное преимущество на годы вперед.
Подводя итог, о плюсах и о том, когда стоит задумываться о переезде на JavaScript фреймворк.
Если для бизнеса или продукта крайне необходима максимальная вовлеченность пользователей. SPA сайты за счет плюсов перед обычными помогут улучшить опыт взаимодействия и сохранить пользователей надолго.
Из главных продуктовых плюсов:
- Скорость. Благодаря отсутствию перезагрузки страниц — максимально быстрое взаимодействие с пользователем.
- Расширенные возможности по персонализации контента.
- Кроссплатформенность — desktop и mobile приложения на основе одного кода. Responsive дизайн.

Подумать о JS движках стоит, если самое главное для вашего сайта — это скорость работы (т.к. при правильной работе сайта на JS движке будут минимальные задержки на стороне сервера и клиента). Как вариант, если вашему бизнесу просто важно быть в тренде (т.е важен сам факт такого сайта).


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

Но, если у вас небольшая компания/агенство — не вижу смысла тратить деньги на такой сайт ради 1000 — 10 000 посетителей в месяц.

- сайт запускается с нуля;
- у компании много денег.
Переносить на JS-движок сайт, который хорошо ранжируется и приносит прибыль — это большой риск на сегодня. Возможно, ситуация изменится в будущем, когда поисковики начнут нормально индексировать SPA-сайты.

Для типовых проектов, по моей оценке, данный способ пока еще слабо подходит. Вероятно, ситуация поменяется в результате развития рынка разработке и роста кадровой базы.
2. Сайты на JavaScript и SEO-оптимизацию можно «подружить», для этого потребуется больше усилий и знаний. Однако, результат стоит этого и есть множество успешных примеров.
3. Сайты на JavaScript имеют большой потенциал для больших, дорогостоящих проектов с обширными функциями.
4. Сайт на JavaScript можно запускать, в случае, если большая часть посетителей приходит через прямые переходы, реферальные ссылки или с помощью контекстной рекламы.
5. Также JS имеет больше преимущество для сайтов с высокой долей интерактивности.
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Используйте лучшие SEO инструменты
Проверка обратных ссылок
Быстрая проверка обратных ссылок вашего сайта и конкурентов
API для SEO
Получите быстро большие объемы данных используя SЕО API
Анализ конкурентов
Сделайте полный анализ сайтов конкурентов для SEO и PPC
Мониторинг позиций
Отслеживайте изменение ранжирования запросов используя мониторинг позиций ключей
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.