Как вы используете React.js для SEO?

Статьи о React.js любят указывать, что React.js отлично подходит для SEO-целей. К сожалению, я никогда не читал, как вы на самом деле это делаете. Вы просто реализуете _escaped_fragment_, как в https://developers.google.com/webmasters/ajax-crawling/docs/getting-started, и пусть React отображает страницу на сервере, когда url содержит _escaped_fragment_, или есть еще больше

Возможность не полагаться на _escaped_fragment_ была бы замечательной, поскольку, возможно, не все потенциально сканирующие сайты (например, в функциях совместного доступа) реализуют _escaped_fragment_.

Ответ 1

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

Создание сервера стало возможным благодаря ReactDOMServer.renderToString. Посетитель получит уже обработанную страницу разметки, которую приложение React обнаружит после ее загрузки и запуска. Вместо замены содержимого при вызове ReactDOM.render он просто добавит привязки событий. Для остальной части визита приложение React займется, и дальнейшие страницы будут отображаться на клиенте.

Если вам интересно узнать больше об этом, я предлагаю искать "Universal JavaScript" или "Universal React" (ранее известный как "изоморфный ответ" ), поскольку это становится термином для приложений JavaScript, в которых используется один код базу для рендеринга как на сервере, так и на клиенте.

Ответ 2

Как сказал другой респондент, вы ищете изоморфный подход. Это позволяет странице поступать с сервера с обработанным содержимым, которое будет проанализировано поисковыми системами. Как упомянул другой комментатор, это может создать впечатление, что вы застряли, используя node.js в качестве языка на стороне сервера. Хотя это правда, что для этой работы необходим запуск javascript на сервере, вам не нужно делать все в узле. Например, в этой статье обсуждается, как создать изоморфную страницу с помощью Scala и реагировать:

Изоморфный веб-дизайн с React и Scala

В этой статье также описываются преимущества UX и SEO такого рода изоморфного подхода.

Ответ 3

Две красивые реализации примеров:

https://github.com/erikras/react-redux-universal-hot-example: использует Redux, моя любимая инфраструктура управления государственными приложениями
https://github.com/webpack/react-starter: использует Flux и имеет очень сложную настройку webpack.

Попробуйте посещать https://react-redux.herokuapp.com/ с включенным и выключенным javascript и следить за сетью в инструментах браузера dev, чтобы увидеть разницу...

Ответ 4

Также возможно через ReactDOMServer.renderToStaticMarkup:

Аналогично renderToString, кроме этого не создается дополнительная DOM атрибуты, такие как data-react-id, которые React использует внутренне. Это полезно, если вы хотите использовать React как простой статический генератор страниц, так как отключение дополнительных атрибутов может сэкономить много байтов.

Ответ 5

Теперь нужно не согласиться с множеством ответов, так как мне удалось заставить приложение React для клиентской стороны работать с googlebot с абсолютно никакой SSR.

Посмотрите на ответ SO здесь. Мне только удалось заставить его работать в последнее время, но я могу подтвердить, что до сих пор нет проблем, и googlebot может фактически выполнять вызовы API и индексировать возвращаемый контент.

Ответ 6

Вам ничего не нужно делать, если вы заботитесь о своем рейтинге сайта в Google, потому что искатель Google очень хорошо справляется с JavaScript! Вы можете проверить результат своего SEO-поиска по поиску site:your-site-url.

Если вам также небезразличен рейтинг вашего сайта, например Baidu, а ваша сторона на стороне сервера реализована PHP, возможно, вам понадобится следующее: react-php-v8js.