web-dev-qa-db-ja.com

REACTのようなJavaScript Webアプリケーションで検索エンジンのインデックスはどのように機能しますか？

アプリケーションにreact.jsを実装する予定です。私は反応するのが初めてなので、Googleがどのように反応コンポーネントをインデックス化するのか疑問がありますか？また、Google検索でアプリケーションを適切に表示するために必要なベストプラクティスは何ですか。

誰もがこれを手伝ってください。

javascriptreactjsseoreact-reduxbabeljs
26
suyesh

したがって、Googlebotで完全にレンダリングするためのAPI呼び出しを備えたリアクションSPAを取得したと安全に言うことができます（フェッチとレンダリング）。したがって、これは不可能な作業ではありませんが、その過程で役立つドキュメントはあまりないと思います。

あなたは新しいアプリを手に入れたように聞こえるので、潜在的にダウンする可能性のある両方の手段の概要を説明します。

サーバー側の事前レンダリング（SSR）

サーバー側の事前レンダリング（SSR）から始めて、それに固執します。反応でこれを行う方法はたくさんありますが、これは最終的に、SSRをサポートする同形ライブラリに固執する必要があることを意味します。

ただし、SSRパスをたどると、Googleでインデックス登録される可能性が非常に高くなります。これは、JSで動作するgooglebotにまったく依存する必要がないためです。

クライアント側レンダリング（通常のJSアプリ）

通常のReact SSRのないアプリを構築するだけです。基本的には通常通りのビジネスです。利点は、SSRの追加された複雑さに対処する必要がなく、ライブラリに制限されないことです。基本的にこれは最も簡単ですが、JSがコンパイルされ、Googlebotによって正しく実行されることを期待する必要があります。

私の観察

サーバー側の事前レンダリングは、多くのライブラリでサポートされていない可能性があり、処理したくない複雑さをもたらすため、動作させるのが非常に難しい場合があります。

クライアント側のレンダリングルートは通常通りビジネスに過ぎず、実際にGooglebotで機能することを確認できます。クライアント側のレンダリングを機能させるために私がやったことは次のとおりです。

  1. インポートリストにできるだけ早く「babel-polyfill」を追加しました

  2. Javascriptをインライン化して、全体の読み込み時間を短縮し、不要な呼び出しを最小限に抑えました。 Razor（C＃） でこれを実行しましたが、これは任意の方法で実行できます。

  3. Financial times polyfillに外部呼び出しを追加しました（これが必要かどうかわかりません）

  4. NODE_ENV = productionもここで役立ちます。バンドル全体のサイズが削減されます

C＃のユーザーにとって、これは次のように見えるものです。

clientWithRender.jsx（私のjsxのエントリポイント）

import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';

import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";

ReactDOM.render(
<App></App>,
document.getElementById('App'));

Index.cshtml

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")
17
WillHua

Google Webmaster Central Blogの2015年の記事 を見ると、Googleは、単一ページ（またはAJAXと呼ばれる）アプリケーションでSEOに対して何もしないことを推奨していることがわかります。反応が含まれます。

それらは、それがどのように行われるかについてはあまり詳しく説明しませんが、アプリケーションがセマンティックに構築され、非常に迅速にレンダリングされる限り、ランク付けする必要があります。

レンダリング時間を短縮し、ランキングを上げることで、パフォーマンスを重視しています。これにより、すべての単一ページアプリケーションがサーバー側レンダリングよりも大きな欠点になります。

より具体的なガイダンスが必要な場合は、- これは開始するのに本当に良い場所のようです 。

12
mikegeyser