Несколько шагов, которые сделают ваш сайт на React приглядным для SEO

На React создано более 9 миллионов веб-сайтов. Среди них Facebook, Instagram, Netflix, Airbnb и другие всемирно известные сайты. И хотя есть опасения по поводу совместимости React с методами поисковой оптимизации (SEO), если вы введете в Google запрос «смотреть сериалы онлайн» или «забронировать квартиру», Netflix и Airbnb окажутся в самом верху результатов поиска.

Так в чем же секрет? Что сложного в сочетании jаvascript и SEO, и как вы можете создавать оптимизированные для SEO приложения React? Читайте дальше, чтобы узнать ответы.

Почему SEO важно и как работает поисковая система?

Поисковая оптимизация — это практика увеличения качественного трафика на ваш сайт за счет использования методов, которые генерируют органические клики из результатов поиска. Если вы решили создать веб-приложение, вы обязательно захотите, чтобы его можно было найти в Google. Вот почему вам нужно решить, как обеспечить поисковую оптимизацию вашего сайта, прежде чем приступить к его разработке. А чтобы сделать ваше веб-приложение оптимизированным для SEO, вам нужно знать, как Google проверяет страницы веб-сайта и определяет их приоритет. Грубо говоря, этот процесс можно разделить на три этапа: сканирование, индексирование и ранжирование.

Как Google генерирует результаты поиска

Шаг 1. Ползание

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

Шаг 2. Индексация

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

Шаг 3. Рейтинг

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

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

Но в чем проблема с React и SEO и почему часто возникает вопрос об их совместимости? Давайте углубимся в технологию, чтобы понять, как связаны React и SEO.

React и SEO: в чем проблема?

React — это библиотека jаvascript с открытым исходным кодом, используемая для создания быстрых и отзывчивых пользовательских интерфейсов (UI). Это популярный выбор для создания статических приложений, динамических веб-приложений и одностраничных приложений (SPA). Интересно, что веб-сайты, созданные с использованием одного и того же стека технологий, могут демонстрировать разные уровни SEO-дружественности. Давайте посмотрим, как и почему разные типы приложений React отличаются с точки зрения поисковой оптимизации.

Приложения React и их SEO-дружественность

Статические веб-приложения — это веб-сайты с информацией, которая не часто меняется. Целевые страницы и блоги являются примерами статических веб-сайтов. Информация на этих веб-сайтах хранится в виде файлов HTML, которые генерируются на сервере в процессе разработки. Когда пользователь делает запрос на статическом сайте, запрос мгновенно попадает на сервер, который получает готовый файл и возвращает его в браузер пользователя.

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

Динамические приложения имеют динамический контент, который часто меняется и который вы не можете предсказать. Например, если вы создаете интернет-магазин или торговую площадку, вы не можете заранее знать, как будет выглядеть корзина для каждого покупателя. Для формирования страницы корзины на сервер отправляются запросы с пользовательскими данными, сервер получает необходимую информацию из баз данных, на сервере генерируется HTML-файл, который отправляется в браузер клиента. Благодаря этому сканеры Google могут быстро распознавать и ранжировать динамические страницы.

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

В то же время у SPA есть некоторые недостатки, одним из которых является рендеринг на стороне клиента, который может повлиять на поисковую оптимизацию. Давайте посмотрим, что мы подразумеваем под этим.

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

В то время как статические и динамические веб-сайты генерируют файлы с содержимым HTML, которые Google легко понимает, SPA предоставляют файлы jаvascript, которые сложно интерпретировать.

Во время рендеринга SPA на стороне клиента, когда пользователь делает запрос в браузере, файл HTML с несколькими строками кода отправляется обратно в браузер. Этого кода недостаточно, чтобы Google понял содержимое сайта и проиндексировал страницу. Следовательно, Google должен ждать, пока браузер загрузит содержимое jаvascript. Поскольку для загрузки jаvascript требуется некоторое время, поисковые роботы Google могут просто не дождаться его получения. В результате они могут пропустить страницу, которая долго загружается, и перейти на следующую страницу.

Что все это значит для React и SEO, а также для вашего приложения React?

Есть два основных вывода:

• Не все приложения React подвержены трудностям с поисковой оптимизацией.
• Поисковым роботам Google обычно сложно индексировать и ранжировать SPA.

Однако можно создать оптимизированное для SEO приложение React, даже одностраничное. Как вы можете это сделать? Узнайте в следующем разделе.

Практические подходы к созданию оптимизированного для SEO приложения React
Знание того, что приложения React могут иметь некоторые трудности с поисковой оптимизацией, не должно останавливать вас от разработки приложения React. Учитывая, что с 2015 года Google рендерит jаvascript намного лучше, чем раньше, проблемы, связанные с SEO, легко предотвратить. Давайте посмотрим, что вы можете сделать, чтобы React и ваше SEO не конфликтовали.

Создавайте статические или динамические веб-приложения
Мы уже упоминали, что одностраничные приложения React склонны к проблемам с SEO. Статические и динамические приложения используют отрисовку на стороне сервера, что помогает поисковым роботам легко получать доступ к своим страницам. Хорошая новость заключается в том, что вам не всегда нужно выбирать СПА. Все зависит от онлайн-бизнеса, который вы хотите построить.

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

Использовать рендеринг на стороне сервера

Если вы решили создать одностраничное приложение, есть два способа обеспечить его видимость в результатах поиска. Использование рендеринга на стороне сервера является одним из них.

Как вы уже знаете, робот Googlebot лучше индексирует и ранжирует страницы, отображаемые на сервере. Чтобы обеспечить рендеринг на стороне сервера (SSR) для вашего SPA, вы должны применить Next.js, платформу React, специально предназначенную для включения SSR. С Next.js процесс рендеринга выглядит следующим образом:

Рендеринг на стороне сервера с помощью Next.js

Запрос отправляется на сервер Next.js, где он сопоставляется с компонентом React.
Компонент React запрашивает данные из базы данных или API. Затем данные отправляются обратно на сервер.
Файлы HTML и CSS создаются на сервере Next.js и отправляются в браузер.
С опытным разработчиком React и небольшими усилиями сделать одностраничное приложение React оптимизированным для SEO не невозможно. Более того, есть еще один способ добиться SEO-оптимизации с помощью приложения React.

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

Еще один популярный способ сделать SPA видимым для поисковых роботов — использовать так называемые предварительные рендереры: программы, которые могут обнаруживать запросы Googlebot. Как только пререндерер понимает, что бот сканирует ваш сайт, он предоставляет боту статическую HTML-версию вашего SPA с сервера, чтобы бот мог ее проиндексировать. Но как HTML-страница появляется на сервере? В случае предварительного рендеринга все HTML-страницы предварительно загружаются и кэшируются с помощью Headless Chrome, инструмента, который помогает инженерам-программистам легко работать с серверными средами.

Возможно, вы захотите выбрать предварительный рендеринг, потому что его легко реализовать. Как правило, вам не нужно вносить какие-либо изменения в существующую кодовую базу, а если возникнет необходимость, изменения будут минимальными. Наконец, пререндереры могут преобразовывать любой код jаvascript в статические HTML-файлы.

Однако следует помнить, что пререндереры — это платные инструменты, которые могут плохо работать с веб-сайтами, данные которых часто меняются.

Вывод

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

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