Перевод статьи с портала Moz.
Интернет находится в золотом веке фронтенд-разработки, а JavaScript и техническая SEO-оптимизация переживают настоящий ренессанс. В связи с этим, как технический SEO-специалист и горячий поклонник веб-разработки в известном агентстве цифрового маркетинга, я хотел бы поделиться своим видением современного положения JavaScript для SEO. За основу я возьму передовой опыт в этой отрасли, а также собственные наблюдения. Из этой статьи вы узнаете, как в 2021 году оптимизировать для поиска свой сайт на JavaScript (JS).
Что такое JavaScript для SEO?
JavaScript для SEO — это техническая специализация, которая служит для поисковой оптимизации сайтов, созданных с помощью JavaScript, и повышения их видимости в поисковых системах. Ее основные задачи:
- Оптимизация контента, созданного с помощью JS, чтобы обеспечить его сканирование, отображение и индексацию поисковыми системами.
- Предотвращение, выявление и устранение проблем ранжирования для сайтов и одностраничных приложений (SPA), созданных на различных JS фреймворках, таких как React, Angular и Vue.
- Использование оптимальных современных решений для улучшения индексации страниц.
- Улучшение времени загрузки страниц для выполнения кода JavaScript, чтобы максимально упростить взаимодействие с пользователем (UX).
JavaScript для SEO: польза или вред?
Когда как! Для современного интернета JavaScript просто необходим, поскольку он обеспечивает масштабируемость при создании сайтов и упрощает их обслуживание. Однако некоторые реализации JS могут серьезно ухудшить видимость сайта в поисковых системах.
Рисунок 1. JavaScript для SEO.
Как JavaScript влияет на SEO?
JavaScript может влиять на следующие элементы страницы и важные факторы ранжирования:
- Отображаемый контент
- Ссылки
- Изображения с отложенной загрузкой
- Время загрузки страницы
- Метаданные
Что представляют собой сайты на JavaScript?
Когда мы говорим о сайтах, созданных на JavaScript, мы не имеем в виду простое добавление интерактивных элементов в HTML-документы (например, анимации JS на статической веб-странице). Речь идет о тех случаях, когда основной контент внедряется в DOM с помощью JavaScript.
Рисунок 2. Модель оболочки приложения.
Этот шаблон называется app shell (оболочка приложения) и служит основой для прогрессивных приложений (PWA). Мы рассмотрим это ниже.
Как проверить, построен ли сайт на JavaScript
Вы можете легко проверить, построен ли сайт на платформе JavaScript, используя такие инструменты, как BuiltWith или Wappalyzer. Вы также можете использовать функции браузера «Проверить элемент» или «Просмотреть исходный код». Ниже представлены наиболее популярные фреймворки JavaScript:
JavaScript для SEO: основной контент
Рассмотрим следующий пример. Современные приложения строятся на JS-фреймворках, таких как Angular, React и Vue. Платформы JS позволяют разработчикам быстро создавать и масштабировать интерактивные приложения. Давайте взглянем на шаблонный проект, созданный с помощью фреймворка от Angular.js — популярной платформы, разработанной Google.
Рисунок 3. Проект на Angular.js
При просмотре в браузере он выглядит как обычная страница: текст, изображения и ссылки. Однако давайте копнем глубже и посмотрим на сам код:
Рисунок 4. Код страницы.
Мы видим, что в этом HTML-документе практически полностью отсутствует какой-либо контент. В теле страницы находится только корневой тег приложения (app-root) и несколько тегов script. Причина заключается в том, что основной контент этого одностраничного приложения (SPA) динамически внедряется в DOM через JavaScript. Другими словами, загрузка основного контента страницы в этом приложении полностью зависит от JavaScript!
Возможные трудности: основной контент отображается для пользователей, но не для поисковых роботов, что является очень серьезной проблемой! Если поисковым системам не удается полностью проиндексировать контент, они могут игнорировать ваш сайт в пользу конкурентов. Ниже мы подробно рассмотрим этот случай.
JavaScript для SEO: внутренние ссылки
Кроме динамического внедрения контента в DOM, JavaScript также оказывает определенное влияние на доступность ссылок к индексации. Ведь исследуя тот или иной сайт, бот Google переходит по всем найденным на странице ссылкам. Google настоятельно рекомендует организовывать перелинковку страниц, используя стандартные теги HTML, а также обязательно включать атрибут href и не забывать про анкорный текст:
Рисунок 5. Код ссылки.
Вместе с тем при создании ссылок Google советует разработчикам не полагаться на другие HTML-элементы, такие как div или span, или обработчики событий JS. Такие ссылки рассматриваются как «псевдоссылки», и они, как правило, не будут индексироваться согласно официальным рекомендациям Google:
Рисунок 6. Код «псевдоссылки».
Однако, несмотря на эти рекомендации, независимое исследование показало, что Googlebot все-таки может индексировать ссылки JS. Тем не менее, исходя из личного опыта, я бы все-таки посоветовал создавать ссылки в виде статических HTML-элементов.
Возможные проблемы: если поисковые системы не индексируют и не переходят по ссылкам на ваши ключевые страницы, то вы лишаетесь перелинковки. Внутренние ссылки помогают поисковым системам более эффективно индексировать ваш сайт и выделять важные страницы. При наихудшем раскладе, если ваши внутренние ссылки созданы неправильно, Google будет стоить больших усилий обнаружить ваши новые страницы (не включенные в карту сайта XML).
JavaScript для SEO: изображения с отложенной загрузкой
JavaScript также влияет на доступность индексирования изображений с отложенной загрузкой. Приведем простой пример. Этот фрагмент кода предназначен для внедрения в DOM изображений с отложенной загрузкой с помощью JS:
Рисунок 7. Код для изображений.
Googlebot поддерживает отложенную загрузку, но, в отличие от человека, не «прокручивает» ваши страницы. Вместо этого, при индексировании контента Googlebot просто удлиняет виртуальное окно просмотра (видимую область). Следовательно, слушатель событий (event listener) не срабатывает как при «прокрутке», и поисковый робот не «видит» контент.
Вот пример кода, который более оптимизирован для SEO:
Рисунок 8. Оптимизированный код.
Этот код показывает, что IntersectionObserver API вызывает callback, когда любой просматриваемый элемент становится видимым. Данный вариант является не только более гибким и надежным, чем приемник событий, срабатывающий при «прокрутке», но и поддерживается последней версией Googlebot. Код срабатывает, когда Googlebot изменяет размер видимой области, чтобы «увидеть» ваш контент (см. ниже).
Рисунок 9. Поведение Googlebot.
Вы также можете использовать встроенную функцию отложенной загрузки в браузере. Она поддерживается в Google Chrome, однако помните, что это все еще экспериментальная функция. При наихудшем раскладе Googlebot просто проигнорирует контент, однако все изображения загрузятся в любом случае:
Рисунок 10. Встроенная функция отложенной загрузки в Google Chrome.
Возможные проблемы: как и в случае, когда основной контент не загружается, важно убедиться, что Google «видит» весь контент на странице, включая изображения. Например, на сайте интернет-магазина с большим списком продуктов отложенная загрузка изображений обеспечивает хорошие поведенческие факторы у пользователей и облегчает работу ботам поисковых систем!
Javascript для SEO: время загрузки страницы
Javascript также может влиять на время загрузки страницы, что является официальным фактором ранжирования Google для мобильных устройств. Это означает, что медленная загрузка страницы потенциально способна ухудшить ранжирование в поиске. Как мы можем помочь разработчикам смягчить возможные последствия?
- Минификация JavaScript.
- Откладывание загрузки второстепенных элементов JS, пока основной контент не отобразится в DOM.
- Встраивание всего важного JS-кода в код страницы.
- Обслуживание JS с меньшим наполнением.
Возможные проблемы: медленная загрузка сайтов создает определенные трудности как для пользователей, так и для поисковых систем. Даже Google откладывает загрузку JavaScript ради экономии ресурсов. Поэтому важно убедиться, что весь контент правильно загружается, размечен и представлен достаточно эффективно.
JavaScript для SEO: метаданные
Также важно отметить, что одностраничные приложения, использующие библиотеки роутинга, такие как response-router или vue-router, должны предпринимать дополнительные действия, например, при изменении метатегов во время перехода между компонентами маршрута. Как правило, это происходит с помощью пакета Node.js, такого как vue-meta или react-meta-tags.
Рисунок 11. Пакет Node.js.
Что такое компоненты маршрута? Ниже описаны пять шагов, показывающих, как ссылки на разные «страницы» в одностраничном приложении работают в React:
1. Когда пользователь посещает сайт React, на сервер отправляется запрос GET для файла ./index.html.
2. Затем сервер отправляет клиенту страницу index.html, которая содержит скрипты для запуска React и React Router.
3. Далее приложение загружается на стороне клиента.
4. Если пользователь нажимает на ссылку, чтобы перейти на новую страницу (/example), на сервер отправляется запрос для нового URL-адреса.
5. React Router перехватывает запрос до того, как он достигнет сервера, и обрабатывает изменение страницы. Это происходит путем локального обновления отображаемых компонентов React и изменения URL-адреса на стороне клиента.
Другими словами, когда пользователи или боты переходят по ссылкам на URL-адреса сайта React, им не предоставляется большого количества статических HTML-файлов. Компоненты React (например, верхние и нижние колонтитулы и основной текст), размещенные в файле root ./index.html, просто реорганизуются, чтобы отобразить другой контент. Вот почему их называют одностраничными приложениями (SPA)!
Возможные проблемы: использование таких пакетов, как React Helmet, гарантирует, что при просмотре каждой страницы SPA пользователям будут предоставлены уникальные метаданные или «компоненты». В противном случае поисковые системы могут индексировать одни и те же метаданные для каждой страницы или, что еще хуже, вообще их игнорировать!
Как все это влияет на общую картину поисковой оптимизации? Для этого давайте разберемся, как Google обрабатывает JavaScript.
Как Google обрабатывает JavaScript?
Чтобы понять, как JavaScript влияет на поисковую оптимизацию, нужно разобраться, что происходит, когда Googlebot индексирует страницу:
1. Сканирование
2. Отображение
3. Индексирование
Сначала Googlebot по очереди, страница за страницей, сканирует URL-адреса. Робот делает запрос GET на сервер, обычно используя мобильный пользовательский агент, а затем сервер отправляет HTML-документ.
Затем Google определяет, какие ресурсы необходимы для отображения основного контента страницы. Как правило, при этом сканируется только статический HTML, а не какие-либо связанные файлы CSS или JS. Почему?
В официальном блоге Google были данные о том, что Googlebot постоянно обходит и перепроверяет порядка 130 триллионов страниц. Поэтому отображение JavaScript в должном масштабе может быть весьма затратной процедурой. Вычислительная мощность, необходимая для массовой загрузки, анализа и выполнения JS, просто огромна.
Вот почему Google может отложить отображение JavaScript на более позднее время. Эти страницы помещаются в очередь на отображение в Google Web Rendering Services (WRS) до тех пор, пока не появятся свободные вычислительные мощности.
В конце концов, Google проиндексирует любой отображаемый HTML-код после выполнения JS.
Рисунок 12. Процесс сканирования, отображения и индексации Google.
Другими словами, Google сканирует и индексирует контент в две волны:
1. Первая волна индексирования — мгновенное сканирование статического HTML, отправленного сервером.
2. Вторая волна индексирования — отложенное сканирование любого дополнительного контента, отображаемого с помощью JavaScript.
Рисунок 13. Волны индексирования Google. Источник: Google I/O’18
Суть заключается в том, что контент, отображение которого зависит от JavaScript, может проходить сканирование и индексирование Google с задержкой. Раньше на это уходили дни, а порой даже недели. Например, исторически Googlebot работал на устаревшем механизме отображения Chrome 41. Однако за последние годы поисковые роботы претерпели значительные изменения в лучшую сторону.
Так, Googlebot был обновлен до последней стабильной версии консольного браузера Chromium в мае 2019 года. Это означает, что поисковый робот теперь постоянно обновляется и полностью совместим с ECMAScript 6 (ES6) и выше, а также с последними версиями JS.
Итак, если технически Googlebot теперь способен запускать JavaScript, почему все еще существуют проблемы с индексированием?
Причина проста — краулинговый бюджет. Это концепция, согласно которой Google ограничивает скорость индексирования определенного сайта из-за ограниченных вычислительных ресурсов. Мы уже знаем, что Google откладывает выполнение JavaScript ради экономии краулингового бюджета.
Хотя задержка между индексированием и отображением сократилась, не существует никакой гарантии, что Google действительно выполнит код JavaScript, стоящий в очереди.
Ниже перечислены причины, по которым Google может вообще никогда не запустить ваш код JavaScript:
- Блокировка в robots.txt.
- Превышение времени ожидания.
- Ошибки.
Таким образом, JavaScript может вызвать определенные проблемы, если основной контент на JS не отображается в Google.
Реальное применение. JavaScript для SEO в электронной коммерции
Интернет-магазины — реальный пример динамического контента, созданного на JavaScript. С его помощью загружают товары на страницы категорий.
JavaScript позволяет таким сайтам динамически обновлять свой ассортимент. В данном случае это более чем оправданно, поскольку количество товаров в продаже постоянно меняется. Однако действительно ли Google может «видеть» ваш контент, если он не выполняет файлы JS?
Для интернет-магазинов, которые зависят от онлайн-продаж, отсутствие индексирования продуктов в Google может иметь поистине катастрофические последствия.
Как тестировать и устранять проблемы SEO с JavaScript
Ниже представлены действия, которые вы можете предпринять, чтобы заранее выявить любые потенциальные проблемы, связанные с JavaScript:
1. Визуализируйте страницу с помощью инструментов Google для вебмастеров. Это поможет вам увидеть страницу так, как ее видит Google.
2. Используйте оператор поиска по сайту, чтобы проверить индекс Google. Убедитесь, что весь ваш контент на JavaScript правильно индексируется, проверив Google вручную.
3. Проведите отладку с помощью встроенных инструментов разработчика Chrome. Сравните и сопоставьте то, что «видит» Google (исходный код) и то, что видят пользователи (обработанный код), и убедитесь, что эти два взгляда на вашу страницу в целом совпадают.
Кроме того, существуют удобные сторонние инструменты и плагины, которые вы также можете использовать. Мы поговорим о них чуть позже.
Инструменты Google для вебмастеров
Лучший способ узнать, возникают ли у Google технические трудности при попытке отобразить ваши страницы, — это протестировать их с помощью инструментов Google для вебмастеров, таких как:
- Инструмент проверки URL в Search Console
- Проверка оптимизации для мобильных устройств
Рисунок 14. Проверка оптимизации для мобильных устройств.
Вам нужно просто визуально сравнить то, как ваш контент отображается в браузере, и то, как он представлен в инструментах, и найти отличия.
Оба этих инструмента используют тот же постоянно обновляемый механизм отображения Chromium, что и Google. Они дают вам точное представление о том, что на самом деле «видит» Googlebot при индексировании вашего сайта.
Существуют также сторонние технические SEO-инструменты, такие как Merkle’s fetch and render. В отличие от инструментов Google, это приложение предоставляет пользователям полноразмерный снимок всей страницы.
Site: Оператор поиска
Если вы не уверены, индексируется ли в Google ваш контент на JavaScript, вы можете выполнить быструю проверку с помощью оператора поиска по сайту (site:).
Скопируйте и вставьте любой контент, индексирование которого в Google вызывает у вас сомнение, после оператора “site:” и названия вашего домена, а затем нажмите клавишу Return. Если ваша страница присутствует в результатах поиска, поводов для беспокойства нет! Google может без проблем сканировать, отображать и индексировать ваш контент. Если страницы нет, то вашему контенту на JavaScript требуется помощь для улучшения видимости.
Вот как это выглядит в поисковой выдаче Google:
Рисунок 15. Поисковая выдача.
Инструменты разработчика Chrome
Встроенные функции инструментов разработчика в браузере Chrome — это еще один метод, который поможет вам при тестировании и устранении проблем с JavaScript для SEO.
Щелкните правой кнопкой мыши в любой области страницы, чтобы отобразить меню параметров. Далее выберите «Просмотреть исходный код», чтобы открыть в новой вкладке статический HTML-документ.
Также в меню параметров вы можете выбрать функцию «Проверить элемент», чтобы просмотреть фактически загруженный в DOM контент, включая JavaScript.
Рисунок 16. Проверка элемента.
Сравните эти два отображения страницы, чтобы увидеть, загружается ли какой-то основной контент только в DOM, при этом не являясь жестко закодированным в источнике. Также могут помочь и сторонние расширения Chrome, например, плагин Web Developer от Криса Педерика (Chris Pederick) или плагин View Rendered Source от Джона Хогга (Jon Hogg).
Как исправить проблемы с отображением JavaScript
Итак, если проблема с отображением JavaScript все-таки была выявлена, как можно ее устранить? Ответ прост: используйте универсальный («изоморфный») JavaScript.
Что это значит? Характеристики «универсальный» и «изоморфный» относятся к приложениям JS, которые могут выполняться либо на стороне сервера, либо на стороне клиента.
Существует несколько реализаций JavaScript, которые более дружелюбны к поисковым системам. Их отличие состоит в том, что они рендерят страницу не на стороне клиента, а на стороне сервера. В этом случае и пользователь, и поисковый бот получают сразу html код, без необходимости рендеринга кода JS:
- Отображение на стороне сервера (SSR). Это означает, что для каждого запроса JavaScript выполняется на сервере. Вы можете реализовать SSR с помощью библиотеки Node.js, например, Puppeteer. Тем не менее это может привести к большой нагрузке на сервер.
- Гибридное отображение. Это комбинация отображения как на стороне сервера, так и на стороне клиента. Так, основной контент отображается на стороне сервера перед отправкой клиенту. Любые дополнительные ресурсы подгружаются клиенту.
- Динамическое отображение. С помощью User-Agent сервер определяет, кто отправляет запрос — поисковый бот или пользователь. Если запрос отправляет бот, то рендеринг происходит на стороне сервера и бот получает чистый html. Если же запрос исходит от пользователя, то полученный JS рендерится на стороне пользователя. В официальном блоге Google рекомендуют использовать Renderton — популярное решение с открытым исходным кодом, предназначенное для динамического отображения.
- Инкрементальная статическая регенерация (обновление статического контента после развертывания сайта). Это можно выполнить с помощью таких платформ, как Next.js для React или Nuxt.js для Vue. Эти фреймворки могут предварительно строить (рендерить) каждую страницу вашего JS-приложения в статические ресурсы (страницы HTML), которые вы можете обслуживать на любом хостинге или хранилище данных. Таким образом, ваш сайт может получить все преимущества SEO-рендеринга на стороне сервера. При этом ресурсы сервера, например, серверная обработка и запросы к базе данных, в этом подходе не используются.
Эти решения гарантируют, что роботы поисковых систем получают полностью отображаемые версии веб-страниц, когда делают запросы на индексирование HTML-документов. Однако некоторые из них чрезвычайно трудно, а порой и невозможно реализовать в полной мере, если ваша инфраструктура уже построена. Вот почему перед разработкой архитектуры вашего следующего приложения важно ознакомиться со всеми необходимыми технологиями JavaScript для SEO.
Обратите внимание: это не касается сайтов, построенных на системах управления контентом (CMS), таких как WordPress или Shopify, которые уже предварительно отображают большую часть контента.
Выводы
В этом руководстве представлены некоторые передовые методы и концепции JavaScript для SEO. Однако JavaScript для поисковой оптимизации — это сложная сфера, с огромным количеством нюансов. Мы рекомендуем вам ознакомиться с официальной документацией Google и руководством по устранению неполадок, где вы сможете больше узнать о JavaScript для SEO.
Автор: Пирс Брелински
Об авторе:
Пирс Брелински — специалист по технической SEO-оптимизации, работающий в крутом агентстве цифрового маркетинга, получившем много наград. Он работал с разными компаниями: от малых предприятий до корпораций из списка Fortune 500. Мастер продвижения сайтов и горячий поклонник веб-разработки.
P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых материалов. Мы публикуем только полезный контент, например, как определить качественный контент сайта, как найти причины падения трафика или как самостоятельно провести seo-аудит сайта.
