SEO и JavaScript рендеринг

Тема языка JavaScript и его влияние на SEO все чаще обсуждается специалистами. Часто на странице, представленной для анализа, возникают проблемы с отображением сайта. Речь идет не только о чтении контента, предоставляемого пользователю с помощью JS, но и о загрузке другого контента Google. В статье рассказано, что такое JavaScript, почему он может вызывать проблемы и как их предотвратить.

Что такое JavaScript и почему он используется на сайтах?

JavaScript является обязательным элементом веб-программирования. Это часто используемый язык программирования, предназначенный для обеспечения возможности динамического генерирования данных на веб-сайте. HTML и CSS по-прежнему являются основной опорой для создания веб-сайтов, но без присутствия JS вышеупомянутая динамика в отображении данных не будет существовать.

Как JS реализуется на сайтах?

Одним из примеров являются новостные сайты, которые предоставляют прямую трансляцию событий. Здесь работает автоматическое обновление.
Другое использование JavaScript – прямая трансляция спортивных событий (например, футбольных матчей) или модулей комментариев в реальном времени. Наряду с развитием технологии веб-сайтов, количество использования языка JS продолжает расти. Помимо создания динамического контента, он также используется для извлечения данных из действий сайта и отправки их в аналитику.

Влияние наличия JavaScript на SEO сайта

Каждый, вероятно слышал, что JS на сайте негативно влияет на SEO или даже делает невозможным чтение сайта. Однако это не так. Нет четкой связи между наличием кодов JS и невозможностью визуализировать контент. Google продолжает совершенствовать свою технологию и заявляет о возможности загрузки большинства кодов JS.
Если Google может иметь дело с JS, почему до сих пор говорят, что это проблема SEO? Причина такого подхода в том, что Google не всегда может правильно прочитать этот скрипт.
Проблемные ситуации возникают в двух случаях:
• Google не может прочитать код JS
• У Google нет достаточно времени, чтобы загрузить код JS

По этим двум причинам могут быть проблемы с SEO сайта. Такие проблемы поисковой системы проистекают из того, как работает система, отвечающая за рендеринг и индексацию в Google.

WRS (веб-рендеринг)

Что такое WRS? Это система, которая отвечает за загрузку и рендеринг сайтов.

Как работает WRS? Google основывает свою систему рендеринга на движке браузера Chrome. В мае 2019 года Google объявил, что WRS основан на последней стабильной версии Chromium. Важно отметить, что постоянное обновление Chromium, используемого для этой цели, было объявлено с появлением более стабильных версий. Вот почему этот робот Google был назван “вечнозеленым роботом Google”.
Google читает HTML-контент страницы и немедленно индексирует ее. Однако это не относится к страницам с кодом JS.

Google работает следующим образом: он загружает сгенерированный HTML-контент и индексирует его, и независимо от того, получает ли он содержимое файлов JS и пытается его прочитать. Именно в этот момент могут возникнуть проблемы с загрузкой файла и с SEO сайта.
Основными причинами проблем с загрузкой кода JS, поддерживаемого Google, являются:
• получение доступа к файлам (например, в robots.txt)
• слишком долгая загрузка ресурса и Google отказывается от попытки его прочесть.
Важно упомянуть, что Google все еще развивает свой сервис и пытается определить ресурсы, которые не влияют на визуализацию сайта. Он отмечает их, а затем, на основании своих предыдущих анализов, исключает их. Это означает, что не все ресурсы сайта загружаются и читаются Google. Это действие ограничивает ненужную трату аппаратных ресурсов поисковой системы.

Ограниченные ресурсы Google

Google не может позволить себе бесконечно долго ждать загрузки ресурсов, так как это помешает всему процессу и уменьшит количество отображаемых веб-страниц. Рендеринг битых страниц может нарушить работу всей системы.
Причинами остановки обработки JS для защиты своих ресурсов Google называет:
• слишком много загруженных ресурсов
• слишком большой объем ресурсов,
• нет кеша для ресурсов страницы (по мнению Google, это существенно влияет на время загрузки страницы и прерывание процесса).
Сотрудник Google также указывает на причины экстремальных проблем рендеринга. Google приостанавливает рендеринг, когда:
• повреждены циклы файлов JS
• используется JS для маскировки (отображение другого контента Google другим пользователям)
• есть так называемые майнеры криптовалюты

Внешние ресурсы – влияние на структуру ресурсов

 

В случае добавления кода в HTML и внутренних ссылок оказывается влияние на структуру ресурсов и можно их оптимизировать, объединять их друг с другом или разделять. В случае, если внешние ресурсы сайта замедляют его рендеринг – рекомендуем поискать информацию о так называемых сторонних JavaScript. Когда загрузка HTML заблокирована и это вызвано слишком долгой загрузкой ресурсов, можно использовать специальные атрибуты, чтобы отложить его до периода после загрузки полного кода HTML.

 

Зачем использовать атрибуты async и defer?

При медленной загрузке ресурсов существует риск того, что Google прервет процесс рендеринга и не достигнет остальной части HTML-кода, поэтому рекомендуется отложить загрузку сценариев, чтобы сначала обеспечить доступ к HTML и его содержимому.
Сценарий с атрибутом async запускается при первой загрузке страницы. Важным примечанием является то, что такие сценарии могут не загружаться в том порядке, в котором они расположены в коде HTML.

 

Как защитить себя от проблем с JS?

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

Также стоит помнить, что Google работает на движке Chrome, но выглядит не так, как при использовании его в качестве пользователя. Если какой-либо важный контент веб-сайта предоставляется только после выполнения прокрутки, принятия файлов cookie или сопоставления местоположения пользователя – Google не сможет его прочитать. Он не будет нажимать кнопку или прокручивать дальше вниз.
Решением для страниц, использующих JS, есть простые рекомендации:
• если у вас есть JS на вашем веб-сайте, попробуйте загрузить контент и ссылки в HTML
• использовать кеш ресурсов, чтобы ограничить их влияние на бюджет рендеринга
• использовать асинхронную загрузку внешних ресурсов
• в ситуации, когда JS влияет на содержание и важные элементы страницы – не блокируйте их от Googlebot
• Генерация адресов в удобочитаемом виде

 

Различные способы рендеринга страниц

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

 

Рендеринг на стороне клиента

До сих пор стандарт рендеринга на стороне клиента (на стороне клиента визуализации). И браузер, и GoogleBot предназначены для чтения страницы, ее ресурсов и визуализации. Именно в этот момент размер ресурсов, блокировка доступа к ним оказывает огромное влияние на правильность создания ресурсов, однако это не единственный метод рендеринга веб-сайтов.

 

Рендеринг на стороне сервера

Другой подход к этой теме – выполнение рендеринга на стороне сервера. Это рекомендуемое решение, когда Google Bot не может обрабатывать рендеринг на стороне клиента.
Принципы этого решения следующие:
1. Рендеринг полностью выполняется на стороне сервера.
2. Сервер отправляет контент в браузер (и в Google Bot) в виде чистого HTML.
3. Google Bot и различные типы ботов в социальных сетях без проблем читают контент.
Также стоит отметить, что это решение оказывает огромное влияние на скорость. Сервер отправляет загруженные данные в кэш браузера, а затем нет необходимости снова запрашивать сервер.
JavaScript является неотъемлемой частью технологии создания страниц и не должен демонизироваться. Самое безопасное, что нужно сделать – это сгенерировать контент непосредственно в коде HTML и настроить ресурсы таким образом, чтобы они не блокировали отображение элементов HTML.
Если, несмотря на оптимизацию и перестройку страницы, Google по-прежнему не может справиться с контентом, созданным с использованием JS – рассмотрите возможность изменения технологии рендеринга контента. Иногда единственный выход – передать чистый HTML, который является результатом рендеринга на стороне сервера.

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *