JavaScript (JS) чрезвычайно популярен в мире электронной коммерции, потому что он помогает создать беспрепятственный и удобный интерфейс для покупателей.
Возьмем, к примеру, загрузку элементов на страницах категорий или динамическое обновление продуктов на сайте с помощью JS.
Хотя это отличная новость для сайтов электронной коммерции, JavaScript создает несколько проблем для SEO-специалистов.
Google постоянно работает над улучшением своей поисковой системы, и большая часть его усилий направлена на то, чтобы его поисковые роботы могли получать доступ к содержимому JavaScript.
Но гарантировать, что Google беспрепятственно сканирует сайты JS, непросто.
В этом посте я поделюсь всем, что вам нужно знать о JS SEO для электронной коммерции и о том, как вы можете улучшить свою органическую производительность.
Давайте начнем!
Как работает JavaScript для сайтов электронной коммерции
При создании сайта электронной коммерции разработчики используют HTML для содержания и организации, CSS для дизайна и JavaScript для взаимодействия с внутренними серверами.
JavaScript играет три важных роли на сайтах электронной коммерции.
1. Добавление интерактивности на веб-страницу
Цель добавления интерактивности — позволить пользователям видеть изменения в зависимости от их действий, таких как прокрутка или заполнение форм.
Например: изображение товара меняется, когда покупатель наводит на него указатель мыши. Или при наведении курсора изображение поворачивается на 360 градусов, позволяя покупателю лучше рассмотреть товар.
Все это улучшает пользовательский опыт (UX) и помогает покупателям принимать решения о своих покупках.
JavaScript добавляет такую интерактивность сайтам, позволяя маркетологам привлекать посетителей и стимулировать продажи.
2. Подключение к внутренним серверам
JavaScript обеспечивает лучшую интеграцию с серверной частью с помощью асинхронного JavaScript (AJAX) и расширяемого языка разметки (XML).
Это позволяет веб-приложениям асинхронно отправлять и получать данные с сервера, поддерживая UX.
Другими словами, процесс не влияет на отображение или поведение страницы.
В противном случае, если бы посетители захотели загрузить другую страницу, им пришлось бы ждать, пока сервер ответит новой страницей. Это раздражает и может заставить покупателей покинуть сайт.
Таким образом, JavaScript позволяет выполнять динамические взаимодействия, поддерживаемые серверной частью, например, обновлять элемент и видеть его обновленным в корзине — сразу.
Точно так же он дает возможность перетаскивать элементы на веб-странице.
3. Веб-отслеживание и аналитика
JavaScript предлагает отслеживание просмотров страниц в режиме реального времени и тепловые карты, которые сообщают вам, насколько глубоко люди читают ваш контент.
Например, он может сказать вам, где находится их мышь или что они нажали (отслеживание кликов).
Вот как JS позволяет отслеживать поведение пользователей и взаимодействие на веб-страницах.
Как поисковые боты обрабатывают JS?
Google обрабатывает JS в три этапа, а именно: сканирование, рендеринг и индексирование.
Изображение из Google Search Central, сентябрь 2022 г. Как вы можете видеть на этом изображении, боты Google помещают страницы в очередь для сканирования и рендеринга. На этом этапе боты сканируют страницы, чтобы оценить новый контент.
Когда URL-адрес извлекается из очереди сканирования путем отправки HTTP-запроса, он сначала обращается к вашему файлу robots.txt, чтобы проверить, разрешили ли вы Google сканировать страницу.
Если он запрещен, боты проигнорируют его и не отправят HTTP-запрос.
На втором этапе рендеринга файлы HTML, CSS и JavaScript обрабатываются и преобразуются в формат, который может быть легко проиндексирован Google.
На заключительном этапе индексации обработанный контент добавляется в индекс Google, что позволяет ему появляться в поисковой выдаче.
Общие проблемы JavaScript SEO с сайтами электронной коммерции
Сканирование JavaScript намного сложнее, чем традиционные HTML-сайты.
В последнем случае процесс идет быстрее.
Проверьте это быстрое сравнение.
| Традиционное сканирование HTML-сайта | Сканирование JavaScript | ||
| 1 | Боты загружают файл HTML | 1 | Боты загружают файл HTML |
| 2 | Они извлекают ссылки, чтобы добавить их в свою очередь сканирования. | 2 | Они не находят ссылки в исходном коде, потому что внедряются только после выполнения JS. |
| 3 | Они загружают файлы CSS | 3 | Боты загружают файлы CSS и JS |
| 4 | Они отправляют загруженные ресурсы в Caffeine, индексатор Google. | 4 | Боты используют службу веб-рендеринга Google (WRS) для анализа и выполнения JS. |
| 5 | Вуаля! Страницы проиндексированы | 5 | WRS извлекает данные из базы данных и внешних API. |
| 6 | Контент проиндексирован | ||
| 7 | Боты, наконец, могут обнаруживать новые ссылки и добавлять их в очередь сканирования. |
Таким образом, с сайтами электронной коммерции, богатыми JS, Google сложно индексировать контент или обнаруживать ссылки до того, как страница будет отображена.
Фактически, на вебинаре о том, как перенести веб-сайт на JavaScript, София Ватуляк, известный эксперт по JS SEO, поделилась:
«Хотя JavaScript предлагает несколько полезных функций и экономит ресурсы веб-сервера, не все поисковые системы могут его обрабатывать. Google нужно время для отображения и индексации JS-страниц. Таким образом, внедрение JS при сохранении SEO является сложной задачей».
Вот основные проблемы JS SEO, о которых должны знать маркетологи электронной коммерции.
Ограниченный бюджет сканирования
Веб-сайты электронной коммерции часто имеют огромный (и растущий!) объем плохо организованных страниц.
Эти сайты предъявляют высокие требования к бюджету сканирования, а в случае веб-сайтов JS процесс сканирования занимает много времени.
Кроме того, устаревший контент, такой как страницы-сироты и страницы-зомби, может привести к огромной трате краулингового бюджета.
Ограниченный бюджет рендеринга
Как упоминалось ранее, чтобы иметь возможность видеть контент, загруженный JS в браузере, поисковые роботы должны его отобразить. Но рендеринг в масштабе требует времени и вычислительных ресурсов.
Другими словами, как и краулинговый бюджет, у каждого веб-сайта есть бюджет рендеринга. Если этот бюджет будет израсходован, бот уйдет, задерживая обнаружение контента и потребляя дополнительные ресурсы.
Google отображает контент JS во втором раунде индексации.
Важно отображать ваш контент в формате HTML, позволяя Google получить к нему доступ.
Изображение из Google Search Central, сентябрь 2022 г. Перейдите к элементу «Проверить » на своей странице и найдите часть контента. Если вы не сможете найти его там, у поисковых систем возникнут проблемы с доступом к нему.
Устранение неполадок с веб-сайтами JavaScript — это сложно
Большинство веб-сайтов JS сталкиваются с проблемами сканирования и доступа.
Например, содержимое JS ограничивает возможности бота по навигации по страницам. Это влияет на его индексируемость.
Точно так же боты не могут определить контекст контента на странице JS, что ограничивает их способность ранжировать страницу по определенным ключевым словам.
Из-за таких проблем маркетологам электронной коммерции сложно определить статус отображения своих веб-страниц.
В таком случае может помочь использование расширенного сканера или анализатора журналов.
Такие инструменты, как Semrush Log File Analyzer, Google Search Console Crawl Stats и JetOctopus, среди прочих, предлагают комплексное решение для управления журналами, позволяющее веб-мастерам лучше понять, как поисковые роботы взаимодействуют с веб-страницами.
JetOctopus, например, имеет функцию рендеринга JS.
Посмотрите этот GIF-файл, который показывает, как инструмент просматривает страницы JS как бот Google.
Скриншот с JetOctopus, сентябрь 2022 г. Точно так же Google Search Console Crawl Stats предоставляет полезный обзор эффективности сканирования вашего сайта.
Скриншот из статистики сканирования Google Search Console, сентябрь 2022 г. Статистика обхода сортируется по:
- Килобайты, загруженные в день , показывают количество килобайт, загружаемых ботами каждый раз, когда они посещают веб-сайт.
- Страницы, просканированные за день , показывает количество страниц, просматриваемых ботами в день (низкое, среднее или высокое).
- Время, затраченное на загрузку страницы , показывает, сколько времени требуется ботам для выполнения HTTP-запроса для сканирования. Меньшее количество времени означает более быстрое сканирование и индексирование.
Рендеринг на стороне клиента по умолчанию
Сайты электронной коммерции, созданные в таких средах JS, как React, Angular или Vue, по умолчанию настроены на рендеринг на стороне клиента (CSR).
С этим параметром боты не смогут видеть, что находится на странице, что вызовет проблемы с рендерингом и индексированием.
Большие и неоптимизированные файлы JS
Код JS предотвращает быструю загрузку важных ресурсов веб-сайта. Это негативно влияет на UX и SEO.
Лучшие тактики оптимизации для сайтов электронной коммерции JavaScript
1. Проверьте, есть ли у вашего JavaScript проблемы с SEO
Вот три быстрых теста, которые можно запустить на разных шаблонах страниц вашего сайта, а именно на домашней странице, страницах категорий или товаров, страницах продуктов, страницах блога и дополнительных страницах.
Инструмент проверки URL
Получите доступ к отчету о проверке URL в консоли поиска Google.
Скриншот из Google Search Console, сентябрь 2022 г. Введите URL-адрес, который вы хотите протестировать.
Скриншот из Google Search Console, сентябрь 2022 г. Далее нажмите View Tested Page и перейдите к скриншоту страницы. Если вы видите этот раздел пустым (как на этом снимке экрана), у Google есть проблемы с отображением этой страницы.
Скриншот из Google Search Console, сентябрь 2022 г. Повторите эти шаги для всех соответствующих шаблонов страниц электронной коммерции, опубликованных ранее.
Запустите поиск в Google
Выполнение поиска по сайту поможет вам определить, находится ли URL-адрес в индексе Google.
Во-первых, проверьте теги no-index и canonical. Вы хотите убедиться, что ваши канонические ссылки ссылаются на самих себя и на странице нет индексного тега.
Затем перейдите в поиск Google и введите — Site:yourdomain.com inurl:your url
Скриншот из поиска [Site:target.com inurl:], Google, сентябрь 2022 г. На этом снимке экрана показано, что страница Target «О нас» индексируется Google.
Если есть какая-то проблема с JS вашего сайта, вы либо не увидите этот результат, либо получите результат, похожий на этот, но у Google не будет никакой метаинформации или чего-либо читаемого.
Скриншот из поиска [Site:made.com inurl:hallway], Google, сентябрь 2022 г. 
Скриншот из поиска [Site:made.com inurl:homewares], Google, сентябрь 2022 г. Перейти к поиску контента
Иногда Google может индексировать страницы, но их содержимое невозможно прочитать. Этот последний тест поможет вам оценить, может ли Google читать ваш контент.
Соберите кучу контента из шаблонов ваших страниц и введите его в Google, чтобы увидеть результаты.
Возьмем немного контента от Macy’s.
Скриншот Macy’s, сентябрь 2022 г.
Скриншот из поиска по запросу [alfani Essential Capri Pull-on with tummy control], Google, сентябрь 2022 г. Здесь нет проблем!
Но посмотрите, что происходит с этим контентом на Kroger. Это кошмар!
Скриншот Крюгера, сентябрь 2022 г. 
Скриншот из поиска по запросу [получите пачку сморов на 8 долларов при покупке 1 Hershey], Google, сентябрь 2022 г. Хотя выявление проблем с SEO в JavaScript является более сложным, эти три теста помогут вам быстро оценить, есть ли проблемы с SEO в вашем Javascript для электронной коммерции.
Выполните эти тесты с подробным аудитом веб-сайта JS с помощью сканера SEO, который может помочь определить, не произошел ли сбой вашего веб-сайта при выполнении JS и не работает ли какой-либо код должным образом.
Например, у некоторых поисковых роботов есть список функций, которые помогут вам понять это в деталях:
- Отчет «Производительность JavaScript» предлагает список всех ошибок.
- Диаграмма «События производительности браузера» показывает время событий жизненного цикла при загрузке JS-страниц. Это поможет вам определить элементы страницы, которые загружаются медленнее всего.
- Отчет «Распределение времени загрузки» показывает страницы, которые работают быстро или медленно. Если вы нажмете на эти столбцы данных, вы сможете более подробно проанализировать медленные страницы.
2. Реализуйте динамический рендеринг
То, как ваш веб-сайт отображает код, влияет на то, как Google будет индексировать ваш JS-контент. Следовательно, вам нужно знать, как происходит рендеринг JavaScript.
Рендеринг на стороне сервера
При этом визуализированная страница (рендеринг страниц происходит на сервере) отправляется сканеру или браузеру (клиенту). Сканирование и индексирование аналогичны HTML-страницам.
Но реализация рендеринга на стороне сервера (SSR) часто является сложной задачей для разработчиков и может увеличить нагрузку на сервер.
Кроме того, время до первого байта (TTFB) медленное, поскольку сервер отображает страницы на ходу.
При реализации SSR разработчики должны помнить одну вещь: воздерживаться от использования функций, работающих непосредственно в DOM.
на стороне клиента Рендеринг
Здесь JavaScript визуализируется клиентом с использованием DOM. Это вызывает несколько вычислительных проблем, когда поисковые роботы пытаются сканировать, отображать и индексировать контент.
Жизнеспособной альтернативой SSR и CSR является динамическая визуализация, которая переключается между клиентским и серверным содержимым для конкретных пользовательских агентов.
Это позволяет разработчикам доставлять содержимое сайта пользователям, которые получают к нему доступ, используя код JS, сгенерированный в браузере.
Однако он представляет ботам только статическую версию. Google официально поддерживает реализацию динамического рендеринга.
Изображение из Google Search Central, сентябрь 2022 г. Для развертывания динамического рендеринга вы можете использовать такие инструменты, как Prerender.io или Puppeteer.
Это может помочь вам предоставить сканерам статическую HTML-версию вашего веб-сайта Javascript без какого-либо негативного влияния на CX.
Динамический рендеринг — отличное решение для веб-сайтов электронной коммерции, которые обычно содержат много контента, который часто меняется или зависит от обмена в социальных сетях (содержащих встраиваемые стены социальных сетей или виджеты).
3. Правильно направляйте свои URL-адреса
Фреймворки JavaScript используют маршрутизатор для сопоставления чистых URL-адресов. Следовательно, очень важно обновлять URL-адреса страниц при обновлении контента.
Например, JS-фреймворки, такие как Angular и Vue, генерируют URL-адреса с решеткой (#), например www.example.com/#/about-us.
Такие URL-адреса игнорируются ботами Google в процессе индексации. Поэтому не рекомендуется использовать #.
Вместо этого используйте статические URL-адреса, такие как
4. Придерживайтесь внутреннего протокола связывания
Внутренние ссылки помогают Google эффективно сканировать сайт и выделять важные страницы.
Плохая структура ссылок может быть вредна для SEO, особенно для сайтов с большим количеством JS.
Одна из распространенных проблем, с которой мы столкнулись, — это когда сайты электронной коммерции используют JS для ссылок, которые Google не может сканировать, таких как ссылки по клику или кнопки.
Проверь это:
<a href=»/important-link»onclick=»changePage(‘important-link’)»>Просканировать</a>
Если вы хотите, чтобы роботы Google обнаруживали ваши ссылки и переходили по ним, убедитесь, что они представляют собой простой HTML.
Google рекомендует связывать страницы с помощью тегов привязки HTML с атрибутами href и просит веб-мастеров избегать обработчиков событий JS.
5. Используйте пагинацию
Разбивка на страницы имеет решающее значение для веб-сайтов электронной коммерции, насыщенных JS, с тысячами продуктов, которые розничные продавцы часто предпочитают распределять по нескольким страницам для лучшего UX.
Предоставление пользователям возможности бесконечной прокрутки может быть полезным для UX, но не всегда оптимизировано для SEO. Это связано с тем, что боты не взаимодействуют с такими страницами и не могут инициировать события для загрузки большего количества контента.
В конце концов, Google достигнет предела (остановит прокрутку) и уйдет. Таким образом, большая часть вашего контента игнорируется, что приводит к плохому рейтингу.
Убедитесь, что вы используете ссылки <a href>, чтобы Google мог видеть вторую страницу нумерации страниц.
Например, используйте это:
<ссылка =”
6. Ленивая загрузка изображений
Хотя Google поддерживает отложенную загрузку, он не прокручивает контент при посещении страницы.
Он изменяет размер виртуального окна просмотра страницы, делая его длиннее в процессе сканирования. А поскольку прослушиватель событий «прокрутки» не запускается, этот контент не отображается.
Таким образом, если у вас есть изображения ниже сгиба, как и на большинстве веб-сайтов электронной коммерции, очень важно лениво загружать их, позволяя Google видеть весь ваш контент.
7. Разрешить ботам сканировать JS
Это может показаться очевидным, но несколько раз мы видели, как сайты электронной коммерции случайно блокировали сканирование файлов JavaScript (.js).
Это вызовет проблемы JS SEO, так как боты не смогут отображать и индексировать этот код.
Проверьте файл robots.txt, чтобы убедиться, что файлы JS открыты и доступны для сканирования.
8. Аудит вашего JS-кода
Наконец, убедитесь, что вы проверяете свой код JavaScript, чтобы оптимизировать его для поисковых систем.
Используйте такие инструменты, как Google Webmaster Tools, Chrome Dev Tools и Ahrefs, а также поисковый робот, такой как JetOctopus, для успешного проведения SEO-аудита JS.
Консоль поиска Google
Эта платформа может помочь вам оптимизировать ваш сайт и отслеживать органическую производительность. Используйте GSC для мониторинга активности Googlebot и WRS.
Для веб-сайтов JS GSC позволяет увидеть проблемы с рендерингом. Он сообщает об ошибках сканирования и выдает уведомления об отсутствующих элементах JS, которые были заблокированы для сканирования.
Инструменты разработчика Chrome
Эти инструменты веб-разработчика встроены в Chrome для простоты использования.
Платформа позволяет вам проверять отображаемый HTML (или DOM) и сетевую активность ваших веб-страниц.
На вкладке «Сеть» вы можете легко определить ресурсы JS и CSS, загруженные до DOM.
Снимок экрана из Chrome Dev Tools, сентябрь 2022 г. Арефс
Ahrefs позволяет вам эффективно управлять созданием обратных ссылок, аудитом контента, исследованием ключевых слов и многим другим. Он может отображать веб-страницы в масштабе и позволяет проверять наличие перенаправлений JavaScript.
Вы также можете включить JS в обходах аудита сайта, чтобы получить больше информации.
Скриншот из Ahrefs, сентябрь 2022 г. Панель инструментов Ahrefs поддерживает JavaScript и показывает сравнение HTML с отрендеренными версиями тегов.
JetOctopus SEO Crawler и анализатор логов
JetOctopus — это поисковый робот и анализатор журналов, который позволяет вам легко проверять распространенные SEO-проблемы электронной коммерции.
Поскольку он может просматривать и отображать JS как бот Google, маркетологи электронной коммерции могут решать проблемы JavaScript SEO в масштабе.
Его вкладка «Производительность JS» предлагает исчерпывающую информацию о выполнении JavaScript — First Paint, First Contentful Paint и загрузке страницы.
Он также разделяет время, необходимое для выполнения всех запросов JavaScript, с ошибками JS, требующими немедленного внимания.
Интеграция GSC с JetOctopus может помочь вам увидеть полную динамику производительности вашего сайта.
UX-инструмент Ryte
Ryte — еще один инструмент, способный сканировать и проверять ваши страницы JavaScript. Он будет отображать страницы и проверять наличие ошибок, помогая вам устранять проблемы и проверять удобство использования ваших динамических страниц.
SEOClarity
seoClarity — это корпоративная платформа с множеством функций. Как и другие инструменты, он имеет динамическую отрисовку, позволяя вам проверить, как работает javascript на вашем веб-сайте.
Подводя итоги
Сайты электронной коммерции — это реальные примеры динамического контента, внедряемого с помощью JS.
Следовательно, разработчики электронной коммерции в восторге от того, как JS позволяет им создавать интерактивные страницы электронной коммерции.
С другой стороны, многие SEO-специалисты боятся JS, потому что они столкнулись со снижением органического трафика после того, как их сайт начал полагаться на рендеринг на стороне клиента.
Хотя оба они правы, факт в том, что веб-сайты, основанные на JS, тоже могут хорошо работать в поисковой выдаче.
Следуйте советам, приведенным в этом руководстве, чтобы стать на шаг ближе к максимально эффективному использованию JavaScript, сохраняя при этом позиции своего сайта в поисковой выдаче.
Дополнительные ресурсы:
Рекомендуемое изображение: Visual Generation/Shutterstock
Подборка статей по SEO оптимизации сайта. Выбора стратегии продвижения. Продвижение сайта в поисковых системах и социальных сетях. Обучение востребованным профессиям в сфере IT. Настройка рекламных кампаний в интернет. Маркетинг. Анализ рынка. Полезные секреты проведения рекламных кампаний. Все для PR — менеджера.
Специальная подборка для Вас