シングルページアプリケーションで、間違ったURL（404エラー）を処理する正しい方法は何ですか？

Question

私は現在angularjsを使用してWebアプリケーションを作成していますが、この質問はクライアントサイド（as angular does）でルーティングするクライアントサイドのJavaScriptフレームワークに適用されると思います。

シングルページアプリでは、間違ったURLを処理する正しい方法は何ですか？

いくつかの主要なサイトを見ると、https://mail.google.com/mail/以下の任意のURLを入力すると、Gmailが受信トレイにリダイレクトされることがわかります。これは、＃文字の前後に間違ったパスがあるかどうかによって、サーバー側（HTTP 300コード付き）またはクライアント側で発生します。一方、twitterは無効なURLに対して実際のHTTP 404を表示します。第3の選択肢は、純粋にクライアント側のエラーページである「ソフト」404を表示することです。

これらのソリューションは、さまざまな状況に適しているようです。 Twitterはユーザーやツイートへのリンクを実際のリンクにしたいので、共有したり、ニュース記事などに投稿したりすることができます。私のウェブサイト、単純なクロールは私にそれを教えてくれる）。一方、Gmailでは、あなたはあなたの受信トレイへのリンクを共有することは期待されていませんし、リンクが本当に永続的/永続的であるかどうかもわかりません。シングルページアプリ。ソフトエラーを与える第3のアプローチは、gmailに似た状況に適しているかもしれませんが、合理的な "デフォルト"のページがないところです。

• は、それが今まで許容できる代わりに404エラーの「ソフト」エラーページを与えることである、または単一ページのアプリケーションは、常ににリダイレクトする必要があります。

  この長い導入後、ここにいくつかの具体的な質問があります本当の404 URLが無効な場合は？

• Gmailのコードはまったく問題ないかもしれませんが、無効なリンクが原因で受信トレイにリダイレクトされるバグがあった場合、エラーページよりもユーザーにとって混乱する可能性があります。そこにあるほとんどのWebアプリケーションでは、Gmailと同様にテストされていませんが、エラーページを表示する方が良いでしょうか？
• シングルページアプリケーション用のリアル404を実装するには、サーバー側でルーティングロジックを複製する必要があるようです。これを回避する方法はありますか？
• 404にリダイレクトすると、ユーザーはURLバーにエラーの原因となったURLを表示できるはずです。 html5ヒストリAPIを使用すると、これは前述のサーバー側のルーティングと組み合わせて、間違ったURLを持つ現在のページのリロードをトリガーするだけで実現できます。これをサポートしていないブラウザや、hashbangの表記を使用する場合、これは可能ではないようです。すべてのブラウザをサポートする最善の方法は何ですか？

Answer 1

TL; DR：ドロップhashbangサポートとあなたがSEOを気にしている場合の挙動のようなPJAXを選びます。

あなたはアプリやウェブサイトを作っていますか？ウェブサイトが404を返す必要がある場合は、Googleを混乱させないようにしてください。実際には404のページが見つからないというメッセージを表示するだけでなく（メッセージ「ページが見つかりません」という200は非常に悪い）表示する必要はありません。また、どのブラウザをサポートしていますか？

私の意見では、ハッシュバングサーバー側のレンダリング全体を避けるべきです（つまり、厄介なGoogle SEO #!ハック）。 pushstateをサポートしていないブラウザ（ハッシュ変更ではない）のURLが変更された場合、実際のプッシュステートを使用するか、ページ全体を再レンダリングします。

さて、これが重要な理由は、サーバーはJavascriptを実行しているうちにいただきました！#!後に取得することはありませんので、それはサーバ側を模倣する意味とその不可能をしないので、#!が404を返すことは決してありませんということです。

SEOについて本当に気にしているのなら、私はPJAXのようなことをして、ルーティング用に真のプッシュステートだけを使用し、古いウェブ1.0には失敗します。結果として、私はあなたが本当に404であることができる共有することをお勧めします#!（伝統的な#は、ページの内容が大幅に変更されない限り、細かいです）。

最後に、404はほとんど問題ではなく、むしろ30Xすなわちリダイレクト応答です。これはブラウザが自動的にリダイレクトを処理するため、JavaScriptのAJAX呼び出しでは30Xが表示されないため（代わりにリダイレクトレスポンス、つまり200）表示されます。 30Xレスポンスを処理するためには、リダイレクトされたURLが何であるか（つまり、リダイレクトされたもの）を示すために、すべての要求に対してヘッダを送り返して、Pushstate Historyを台無しにしないようにする必要があります。

Twitterのようにハッシュバングを使用する必要がある場合は（and they are the ones that even killed hashbang）、Googleサイトマップとrel=nofollowを活用して悪いSEOを軽減できます。