Лучшие практики SEO для веб-сайтов электронной коммерции React

React стал одной из ведущих сред JavaScript, используемых на различных веб-сайтах, особенно на сайтах электронной коммерции.

Из-за того, как они построены, веб-сайты React имеют некоторые особенности, когда речь идет о поисковой оптимизации (SEO), с определенным набором передовых методов SEO для одностраничных приложений React (SPA).

В этом руководстве мы рассмотрим, как обеспечить правильную настройку сайта электронной коммерции React для SEO, а также некоторые плюсы и минусы использования React на веб-сайте электронной коммерции, оптимизированном для поиска.

Что такое Реакт?

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

Поскольку React имеет открытый исходный код, его также можно использовать бесплатно. Он может формировать базовую структуру одностраничного приложения (упомянутые выше SPA) или мобильного приложения.

Почему React хорош для электронной коммерции?

Сосредоточенность React на пользовательском интерфейсе означает, что это полезный инструмент для создания плавных, бесшовных веб-сайтов электронной коммерции, в основе дизайна которых лежит пользовательский опыт (UX).

Контент обслуживается на стороне клиента, и страницы не нужно обновлять, что делает навигацию по веб-сайту для клиентов быстрее и проще, а задержки сервера меньше влияют на скорость загрузки страниц.

Универсальность React означает, что его можно использовать как на сайтах электронной коммерции для настольных компьютеров, так и в мобильных приложениях, что делает его одним из самых простых вариантов для разработчиков, которые хотят создавать прогрессивные веб-приложения.

Могут ли поисковые системы сканировать сайты React?

Как и в случае с любым веб-сайтом, оптимизированным для поиска, важно понимать, как роботы (и особенно Googlebot) видят контент на сайте React.

Как правило, Google сканирует веб-сайт в два этапа, определяя содержимое по мере его поступления.

Сканировать исходный код

Сначала робот Googlebot просканирует веб-сайт и извлечет исходный код, включая HTML, заголовки страниц и т. д.

Рендеринг DOM

Во-вторых, робот Googlebot отображает объектную модель домена (DOM), включая любой JavaScript, используемый на странице — вы можете определить это с помощью встроенных инструментов разработчика Chrome и эквивалентных функций в других браузерах.

React — это среда JavaScript на стороне клиента, что означает, что Googlebot может испытывать трудности с идентификацией страниц. Это связано с тем, что, в отличие от традиционного веб-сайта, React не отправляет запросы на сервер при переходе с одной страницы на другую, что затрудняет просмотр Google разных страниц.

Вы можете настроить React для использования рендеринга на стороне сервера, но робот Googlebot по-прежнему не будет отображать файлы JavaScript и другие ресурсы на основе сервера при навигации по вашему сайту. Из-за этого важно настроить свой веб-сайт электронной коммерции React для SEO в соответствии с передовой практикой.

Общие проблемы SEO с React

Есть несколько распространенных проблем SEO с веб-сайтами электронной коммерции React:

Контент не обнаружен / медленно индексируется

Робот Googlebot выделяет «бюджет рендеринга» для каждого веб-сайта, который он сканирует, и обычно покидает сайт после того, как этот бюджет будет израсходован. Это гарантирует, что небольшие веб-сайты получат свою долю внимания сканера и предотвратят бесконечные циклы сканирования, например, на веб-сайтах, которые генерируют динамические URL-адреса во время навигации.

Поскольку веб-сайты React функционируют как SPA, весь сайт должен быть отрендерен, прежде чем можно будет сканировать весь его контент. Это может задержать обнаружение контента и потреблять дополнительные ресурсы на стороне поискового робота, что может привести к уменьшению количества просканированных и проиндексированных страниц.

Рендеринг на стороне сервера и предварительный рендеринг могут снять часть нагрузки с роботов, помогая повысить скорость появления новых страниц в индексе.

Поисковые роботы медленно замечают обновленный контент

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

Опять же, это связано с тем, как страницы отображаются при использовании React, что может привести к тому, что обновленные страницы дольше останутся незамеченными ограниченными ресурсами поискового робота Google.

«Глубокие» страницы сканируются редко (или никогда)

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

Опять же, предварительный рендеринг может быть ценным инструментом, помогающим поисковым роботам глубже проникнуть в структуру папок вашего веб-сайта, прежде чем они исчерпают назначаемый краулинговый бюджет.

[Электронная книга] Сканируемость

Убедитесь, что ваши веб-сайты соответствуют требованиям поисковых систем для сканирования, чтобы повысить эффективность SEO.

Читать электронную книгу

Как оптимизировать сайты электронной коммерции React

Используя некоторые передовые методы SEO для электронной коммерции React, вы можете дать своему сайту и отдельным страницам больше шансов попасть в поисковый индекс.

Уникальные URL-адреса страниц

Лучшей практикой решения проблемы с динамическими URL-адресами, упомянутой выше, является предоставление каждой странице собственного уникального и статического URL-адреса на вашем веб-сайте. Затем контент связывается с одним постоянным местоположением — каноническим URL-адресом страницы — который поисковые системы могут сканировать, индексировать и уверенно ранжировать на своих страницах результатов.

React Router — это способ добиться этого на веб-сайтах React. React Router может присвоить каждой странице сайта собственный постоянный URL-адрес, а также согласовать пользовательский интерфейс с определенным URL-адресом.

Изоморфная реакция

Isomorphic React — это способ включить рендеринг на стороне сервера, чтобы уменьшить нагрузку на бюджеты рендеринга сканеров. Он работает, обнаруживая, когда JavaScript отключен на стороне клиента, и создавая форму HTML веб-сайта, отображаемую на стороне сервера. Если доступен рендеринг на стороне клиента, веб-сайт будет загружаться как React SPA обычным способом.

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

Предварительный рендеринг

Предварительный рендеринг — это еще один способ добиться результата, аналогичного Isomorphic React. Он работает, создавая кешированную версию обработанного HTML, к которой поисковые роботы затем могут получить доступ вместо необработанного исходного кода.

Посетители-люди получают веб-сайт React на стороне клиента, снова предоставляя им все преимущества плавного и молниеносного SPA. Существует множество сервисов предварительного рендеринга, включая Google Puppeteer, Prerender.io и SEO4Ajax.

Оптимизация метаданных

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

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

React Helmet — хороший способ добиться этого, предоставляя прямой доступ к редактированию метаданных SEO на веб-сайтах электронной коммерции React. Таким образом, вы можете сочетать лучшие практики поисковой оптимизации старой школы и классическое использование ключевых слов метаданных со всеми преимуществами современного мобильного веб-сайта электронной коммерции React.