web-dev-qa-db-ja.com

Angular pushstateURLを使用して実際の404または301をスローするにはどうすればよいですか

$ routeProviderと$ locationProviderを使用して、シングルページアプリ（SPA）でプッシュステートURLを処理しています。次のようになります。

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    });
  })

  .controller('petController', function($scope, petService, $routeParams){
    petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
      $scope.pet = data;
    });
  });

URLは、存在する場合と存在しない場合があるサーバーからコンテンツをプルするために使用されます。

これが通常の複数ページのウェブサイトである場合、コンテンツの欠落をリクエストするとサーバーから404ヘッダー応答がトリガーされ、コンテンツの移動をリクエストすると301がトリガーされます。これにより、コンテンツの欠落または移動がGoogleに警告されます。

たとえば、次のようなURLをヒットしたとします。

http://example.com/pet/123456

データベースにそのようなペットがいないと言うと、私のSPAはどのようにしてそのコンテンツで404を返すことができますか。

これに失敗した場合、要求されたURLが存在しないことをユーザーまたは検索エンジンに正しく警告する他の方法はありますか？私が検討していない他の解決策はありますか？

angularjsseohttp-status-code-404pushstateangular-routing
16
superluminary

本当の問題は、http://example.com/pet/123456が何かを返すのかということです。

開始点がhttp://example.com/で、http://example.com/pet/123456へのリンクがある場合、AngularはpetControllerを呼び出し、これによりAJAX http://example.com/api/pet/123456を呼び出します。

クローラーはそれを行いませんが、代わりにhttp://example.com/pet/123456を直接呼び出そうとします。

したがって、サーバーはその呼び出しを処理できる必要があります。 IDが123456のペットがいない場合は、404が返されます。問題は解決しました。ある場合は、SPAを返す必要があります。その後、アプリケーションはそれに応じて状況を処理する必要があります。

4
a better oliver

この回答によると 検索エンジンはAngularJSアプリケーションをどのように処理しますか？ 、ヘッドレスブラウザーを使用してクローラー要求を処理し、適切な応答コードでページのスナップショットを提供する必要があります。 https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

グーグルの例には、301、302、または404のケースは含まれていませんでした。ただし、スナップショットの内容を分析して応答コードを変更するようにコードを変更することはできます。

prerender.io がこのサービスを提供していることがわかりましたが、無料ではありません。ただし、250ページ未満の場合は無料プランがあります。 Prerenderは、404または301の場合、DOMにメタタグを追加するように求めます。

<meta name="prerender-status-code" content="404">

このメタタグはヘッドレスブラウザによって検出され、応答コードが変更されます。

3
Roman Mik

これを試して

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    }). otherwise({ yourUrl:'/404.html'}) // Render 404 view;
  })
0
Anamika