web-dev-qa-db-ja.com

React.jsをSEOにどのように使用しますか？

React.jsの記事では、React.jsがSEOの目的に最適であることが指摘されています。残念ながら、私はあなたが実際にそれをどうやってやったか読んだことがありません。 https://developers.google.com/webmasters/ajax-crawling/docs/getting-started のように単に_escaped_fragment_を実装し、ReactをレンダリングさせますかURLに_escaped_fragment_が含まれる場合、サーバー上のページ、またはそれ以上ありますか？

おそらくすべての潜在的なクロールサイト（機能の共有など）が_escaped_fragment_を実装しているわけではないため、_escaped_fragment_に依存できないことは素晴らしいことです。

javascriptseoreactjs
49
sk904861

React SEOに適しているのは、クライアントに送信する前に、サーバー上で要求されたページをレンダリングできることに関係しているため、React $ ===を宣伝しているのは確かです。検索エンジンに関する限り、他の静的ページと同様にインデックスが作成されます。

ReactDOMServer.renderToStringを介してサーバーレンダリングが可能になりました。訪問者はすでにレンダリングされたマークアップのページを受け取ります。これはReactアプリケーションがダウンロードして実行すると検出します。ReactDOM.renderが呼び出されたときにコンテンツを置き換える代わりに、イベントバインディングを追加します。残りの訪問では、Reactアプリケーションが引き継ぎ、クライアントでさらにページがレンダリングされます。

これについて詳しく知りたい場合は、「Universal JavaScript」または「Universal React」（以前は「isomorphic react」と呼ばれていました）を検索することをお勧めします。これは、単一のコードベースを使用してサーバーとクライアントの両方で。

56
Jack

他のレスポンダーが言ったように、あなたが探しているのは同型アプローチです。これにより、検索エンジンによって解析されるレンダリングされたコンテンツとともにサーバーからページを取得できます。別のコメンターが述べたように、これにより、node.jsをサーバーサイド言語として使用しているように見えるかもしれません。この作業を行うにはサーバーでjavascriptを実行する必要があるのは事実ですが、ノードですべてを行う必要はありません。たとえば、この記事では、Scala=を使用して同型ページを実現し、反応する方法について説明します。

React and Scala を含む同形ウェブデザイン

この記事では、この種の同型アプローチのUXおよびSEOの利点についても概説しています。

5
PFranchise

ニースの2つの実装例：

JavaScriptをオン/オフにして https://react-redux.herokuapp.com/ にアクセスし、ブラウザ開発ツールでネットワークを見て違いを確認してください…

4
w00t

クライアント側ReactアプリはSSRがまったくないgooglebotで動作するようになったため、ここでの多くの回答に同意する必要があります。

SOの回答はこちら をご覧ください。私はそれを最近何とか動作させることができましたが、これまでのところ問題がないことを確認でき、googlebotは実際にAPI呼び出しを実行し、返されたコンテンツのインデックスを作成できます。

1
WillHua

ReactDOMServer.renderToStaticMarkup でも可能です：

renderToStringと似ていますが、Reactが内部的に使用するdata-react-idなどの追加のDOM属性は作成されません。これは、Reactを単純な静的ページジェネレータとして使用する場合に便利です。余分な属性を取り除くと、多くのバイトを節約できるためです。

1
falsarella

GoogleのクローラーはJavaScriptを非常にうまく処理できるので、Googleでのサイトのランクを気にする場合、何もする必要はありません！検索でサイトのSEO結果を確認できますsite:your-site-url。

Baiduなどのサイトのランクも気にし、[〜＃〜]によってサーバー側を実装する場合php [〜＃〜]、おそらくこれが必要です： react-php-v8js 。

1
Alan