С появлением AJAX, а совсем недавно и с AngularJS, устройство клиента стало все чаще выполнять большую часть тяжелой работы при создании веб-страницы. JavaScript — отличный язык, и поскольку сегодня практически каждое устройство в мире использует JavaScript, мы можем создавать наши веб-сайты и веб-приложения, используя только JavaScript (мы можем запускать JavaScript на сервере!). Однако использование JavaScript исключительно для создания веб-сайта или веб-приложения имеет некоторые существенные недостатки SEO.
Проблема возникает из-за структуры сайтов JavaScript. Если за последние несколько лет вы научились разрабатывать веб-сайты с помощью таких фреймворков, как AngularJS, Ember.js или Meteor (Blaze), вы, вероятно, создавали исключительно одностраничные приложения; СПА короче. На веб-сайте SPA или веб-приложении весь необходимый код (HTML, JavaScript и CSS) передается в браузер при загрузке одной страницы. Дополнительная информация или ресурсы могут динамически загружаться и добавляться на страницу по мере необходимости, но все необходимое для работы сайта есть.
Так чем же это отличается от того, что было раньше? В предыдущие годы на рынке доминировали такие языки и фреймворки, как PHP (WAMP, Drupal, WordPress), ASP.NET или Ruby on Rails. В отличие от SPA, приложения, созданные в этих средах, будут обслуживать только одну страницу за раз, загружая только содержимое просматриваемой страницы. Пользователь посещал веб-сайт, сервер обрабатывал PHP-код, связанный с этим маршрутом, механизмом рендеринга, и когда страница отображалась, он отправлял этот HTML-код в браузер. Когда вы щелкаете ссылку на странице, на сервер будет отправлен новый запрос, и новая страница будет отображена и отправлена обратно.
Это не был обычный HTML, который был закодирован и отправлен. Каждая страница была написана на каком-то языке программирования, преобразована в HTML, который затем мог отображать браузер. Это называется рендерингом на стороне сервера (SSR), потому что каждая страница (и код, используемый для ее создания) рендерится на стороне сервера и отправляется клиенту.
Такие вещи, как SEO (поисковая оптимизация) и сканируемость (проклятие существования каждого веб-разработчика) тогда были проще. Все, что вам нужно было сделать, это включить правильные ключевые слова и соответствующим образом структурировать теги; весь контент был обработан до того, как он попал на устройство клиента. Это означало, что поисковые системы без проблем просматривали ваш контент, просматривая и обрабатывая каждую страницу и весь ее контент.
Однако для нашего SPA с большим количеством JavaScript это может стать проблемой. Не все поисковые системы, сканирующие ваш сайт, будут использовать JavaScript. Многие, за исключением Google на момент написания этой статьи, запускают сканирование AJAX. Поисковая система запрашивает страницу с вашего сервера, и ваш сервер отправляет обратно единственную HTML-страницу, где в заголовке указан ваш пакет JS или CSS, но ни один из этих кодов не выполняется во время обхода страницы. Вместо этого поисковая система просто видит пустую страницу. Хотя Google на самом деле запустит часть вашего JavaScript и отобразит контент, который вы хотите просканировать, все же могут возникнуть некоторые проблемы. Google будет запускать код JavaScript только до 5 секунд; если ваша полезная нагрузка слишком велика и не может загрузиться за это время, Google все равно увидит только пустую страницу.
Однако многие новые фреймворки JavaScript, такие как Angular и React, начинают поддерживать SSR. В следующем посте я расскажу, как Angular обрабатывает представление и как мы можем воспользоваться этим для возможности сканирования. И, может быть, что-то еще более интересное я приберегу на потом…
17.05.2017 - Первая часть этой серии официально опубликована! Если вам интересно узнать, как Angular строит веб-представление, прочитайте наш пост здесь!!!
