SEO для сайтов ReactJS

  1. 1. URL должны быть «дружественными к Google» и загружаться независимо
  2. 2. Используйте стандартные <a href> ссылки в вашем HTML
  3. 3. Серверный JavaScript

ReactJS - это популярная библиотека JavaScript, используемая для растущего числа веб-сайтов. Фактически, 5,6% из 10 000 лучших веб-сайтов в настоящее время используют React, согласно данным сайта, посвященного тенденциям в области цифровых технологий, BuiltWith.

Фактически, 5,6% из 10 000 лучших веб-сайтов в настоящее время используют React, согласно данным сайта, посвященного тенденциям в области цифровых технологий, BuiltWith

Создание веб-сайтов и мобильных веб-приложений в React может помочь создать современный пользовательский интерфейс, однако, как и во многих технологиях JavaScript, существуют проблемы, связанные с поисковыми системами. К счастью, React допускает рендеринг JavaScript на стороне клиента или на стороне сервера (что делает его «изоморфным»), что означает, что сайт React может конкурировать за органический трафик.

Ниже перечислены некоторые области, в которых необходимо следить за сохранением и ростом органического трафика при переходе на сайт React JS.

1. URL должны быть «дружественными к Google» и загружаться независимо

URL-адреса должны быть как можно более похожими на статические URL-адреса с каталогами (http://www.alicesbooks.com/fiction/sci-fi/). Еще лучше, убедитесь, что вы используете слова, которые описывают содержание, чтобы каждый мог понять его.

Некоторые сайты с JavaScript-кодом или одностраничные приложения имеют хэштег в URL, который Google, скорее всего, не будет сканировать (например, https://www.alicesbooks.com/#scifi).

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

Примечание разработчика. Одним из методов разработки этих уникальных URL-адресов является навигационный компонент для React, например React Router. https://github.com/ReactTraining/react-router , PMG использует React Router с некоторыми нашими собственными инструментами.

2. Используйте стандартные <a href> ссылки в вашем HTML

Убедитесь, что соответствующий контент связан <a href> ссылками для обеспечения поиска в поисковой системе.

Избегайте размещения важного контента за событием JavaScript. Google может вообще не следить за событиями, происходящими на сайте. Как указано на Мос в прошлом году просто: «не используйте JavaScript-события onclick в качестве замены внутренних ссылок».

3. Серверный JavaScript

Зачем использовать серверный рендеринг? Рендеринг на стороне сервера гарантирует, что Googlebot сможет легко читать простой HTML-код. Да, Google определенно может сканировать и отображать клиентский JavaScript. В конкурентных пространствах слишком дорого полагаться только на рендеринг сложного JavaScript от Google.

  1. Google очень продвинут в своей способности отображать клиентский JavaScript. Однако поисковые системы и другие платформы, такие как Bing, Baidu, Яндекс, Apple и Facebook, которые регулярно сканируют сайты, обычно менее продвинуты и могут привести к значительному сокращению трафика.
  2. Тяжелый рендеринг на стороне клиента, по-видимому, приводит к тому, что Google сканирует меньше страниц для сайта - это означает, что новые страницы будут получать меньше трафика. Google не всегда отображает клиентский JavaScript, чтобы полностью понять страницу. Вероятно, это связано с тем, что затрачиваемое время значительно замедляет сканирование.
  3. Google может просто неправильно понять, с чем у человека не будет проблем при работе с JavaScript. Иногда незначительные ошибки JavaScript могут привести к отсутствию контента в Google.
  4. Даже когда поисковая система сканирует и отображает клиентский JavaScript, это все равно может привести к непредвиденному поведению, такому как сканирование множества нерелевантных файлов JSON. Предварительно отрендеренный HTML проще для поисковых систем (и маркетологов) полностью понять.

Что визуализировать на стороне сервера? Содержимое и ссылки должны быть доступны в формате HTML и должны быть доступны для сканирования, чтобы Google мог надежно прочесть страницу. Файлы JavaScript и CSS также должны быть доступны для сканирования, оставляя их разблокированными файлом robots.txt. Начальный контент, который загружается до взаимодействия с пользователем, должен выполняться на стороне сервера. После этого на стороне клиента рендеринг в порядке.

Замечания разработчика по внедрению

  • Рендеринг HTML на стороне сервера можно выполнить с помощью «ReactDOM.renderToString» вместо «ReactDOM.render». React Helmet может быть полезен для визуализации элементов заголовка, таких как мета-теги.
  • Посмотрите на Следующая структура JS для реакции. Next JS создан специально для рендеринга на стороне сервера и поставляется с собственной библиотекой внутренней маршрутизации. Сборка с нуля проще, чем модификация кода для рендеринга на стороне сервера.

Что визуализировать на стороне сервера?