React Router + AWSバックエンド、SEOの方法

Question

私は単一のページWebアプリケーションでReactとReact Routerを使用しています。私はクライアントサイドのレンダリングを行っているので、静的なファイル（HTML、CSS、JS）をすべてCDNで提供したいと思います。 Amazon S3を使用してファイルをホストし、Amazon CloudFrontをCDNとして使用しています。

ユーザが/css/styles.cssを要求すると、ファイルは、S3はそれを楽しめそう存在します。 ユーザが/ foo/barを要求すると、これは動的URLであるため、S3はhashbang：/＃！/ foo/barを追加します。これはindex.htmlに役立ちます。私のクライアント側では、私のURLがきれいなので、私はhashbangを削除します。

これはすべて私のユーザーの100％にとって素晴らしい作品です。

• すべての静的ファイルは、動的URLがindex.htmlを（私の単一ページのアプリケーション）を提供/＃！/ {...}にルーティングされますCDN
• を介して提供されている
• 私のクライアント側URLは、問題は、Googleがウェブサイトをクロールしないことである

  かなり再び問題

あるのでhashbangを削除します。彼らはリンクの束を参照してください

• Googleの要求/
• 例えば、：ここではなぜですFOO /バー
• Googleのリクエスト/ fooの/バー
• /に彼らは、彼らがhashbangを削除し、要求/

はなぜです/＃！/ fooの/バー（302が見つかりました。）

にリダイレクトハッシュバンが削除されていますか？私のアプリはユーザーの100％の人にとってうまくいっています。そのため、Googleが正しくクロールするためには、なぜそれを再設計する必要がありますか？それはちょうどhashbangに従ってください...

< /暴言>

、2016年だ私が何か間違ったことをやっていますか？ S3がパスを認識できないときにindex.htmlを提供するには、より良い方法がありますか？すなわちCDNを有する全体目的を無効にするので、これらのパスを処理するために、ノードサーバの設定

は正しい解決策ではありません。

In this thread React RouterのトップコントリビューターMichael Jacksonは、「Thankfully hashbangはもはや普及していません」と述べています。どのように私の設定を変更して、hashbangを使わないようにしますか？あなたはSEOフレンドリーウェブサイトを作りたいとき

Answer 1

また、このtrickをチェックアウトすることができます。クラウドフロントディストリビューションをセットアップし、ディストリビューションの「エラーページ」セクションで404の動作を変更する必要があります。そうすれば、domain.com/foo/barリンクを再度利用することができます:)

Answer 2

ハッシュ強打は、そのグーグルにインデックスを付け、ページが少しだけと薄いコンテンツを表示する場合でも、推奨されません。

あなたのウェブサイトを行うための最善の方法は、Googleでそれのための「プログレッシブウェブの強化」の検索であり、あなたはそれについて多くの記事を見つける最新のトレンドと技術を使用することです。

主に、あなたは、ページごとに個別のリンクを行う必要があり、ユーザーが任意のページをクリックしたとき、彼はあなたが、あるいはそれ単一ページのウェブサイトならば好きな効果を使用してこのページにリダイレクトされます。

この場合、Googleはそれぞれのページに固有のリンクを持ち、ユーザーは素晴らしい効果と優れたUXを持ちます。

EX：

<a href="http://www.example.com/contact-us" onclick="fancyEffects();">Contact Us</a> 

Answer 3

これは数ヶ月前ですが、同じ問題を抱えている人にとっては、単に「index.html」をS3のエラー文書。バケットプロパティ=>静的ウェブサイトホスティング=>ウェブサイトホスティングを有効にするとエラー文書のプロパティが見つかります。

このアプローチを取ることは、あなた自身のアプリケーションで404などのHTTPエラーを他のhttpエラーとともに処理することを意味することに注意してください。