Как вы используете React.js для SEO?
статьи по React.js хотел бы указать,что реагировать.js отлично подходит для целей SEO. К сожалению, я никогда не читал, как вы это делаете.
Вы просто реализуете _escaped_fragment_ как в https://developers.google.com/webmasters/ajax-crawling/docs/getting-started и пусть React отображает страницу на сервере, когда url содержит _escaped_fragment_, или есть что-то еще?
будучи в состоянии не полагаться на _escaped_fragment_ было бы здорово, так как, вероятно, не все потенциально ползающие сайты (например, в разделе функциональных возможностей) реализовать _escaped_fragment_.
6 ответов
Я уверен, что все, что вы видели в продвижении React как хорошее для SEO, связано с возможностью визуализации запрошенной страницы на сервере, прежде чем отправлять ее клиенту. Таким образом, он будет индексироваться так же, как и любая другая статическая страница, Что касается поисковых систем.
рендеринг сервера стал возможным через ReactDOMServer.renderToString. Посетитель получит уже отрисованную страницу разметки, которую приложение React обнаружит после загрузки и запуска. Вместо замена содержимого, когда , Он просто добавит привязки событий. На оставшуюся часть визита приложение React возьмет на себя и дальнейшие страницы будут отображаться на клиенте.
Если вам интересно узнать больше об этом, я предлагаю искать "универсальный JavaScript" или " универсальный React "(ранее известный как" изоморфный react"), так как это становится термином для приложений JavaScript, которые используют одну базу кода для рендеринга как на сервере, так и на клиент.
Как сказал другой ответчик, то, что вы ищете, является изоморфным подходом. Это позволяет странице поступать с сервера с отображаемым контентом, который будет анализироваться поисковыми системами. Как упоминал другой комментатор, это может показаться, что вы застряли с помощью node.js как ваш серверный язык. Хотя это правда, что javascript, запущенный на сервере, необходим для этой работы, вам не нужно делать все в узле. Например, в этой статье рассматривается, как достичь изоморфная страница с использованием Scala и react:
https://thebhwgroup.com/blog/isomorphic-web-design-react-scala
эта статья также описывает преимущества UX и SEO такого изоморфного подхода.
два хороших примера реализации:
- 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 инструменты, чтобы увидеть разницу...
Это также возможно через ReactDOMServer.renderToStaticMarkup:
аналогично
renderToString, за исключением того, что это не создает дополнительный DOM такие атрибуты, какdata-react-id, что React использует внутренне. Это полезно, если вы хотите использовать React как простой статический генератор страниц, как удаление дополнительных атрибутов может сэкономить много байтов.
придется не согласиться со многими ответами здесь, так как мне удалось заставить мое клиентское приложение React работать с googlebot без абсолютно SSR.
посмотреть Так что ответ тут. Мне удалось заставить его работать только недавно, но я могу подтвердить, что до сих пор нет проблем, и googlebot может фактически выполнять вызовы API и индексировать возвращаемый контент.
вам ничего не нужно делать, если вы заботитесь о ранге вашего сайта в Google, потому что искатель Google может очень хорошо обрабатывать JavaScript! Вы можете проверить результат SEO вашего сайта с помощью search site:your-site-url.
Если вы также заботитесь о ранге вашего сайта, например Байду, и ваша сторона разъединения реализована PHP, может быть, вам нужно это: react-php-v8js.