Question

我正在使用$ routeProvider和$ locationProvider在单页面应用程序（SPA）中处理pushstate URLS，如下所示：

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注意丢失或移动的内容。

比如说我点击了这样的网址：

http://example.com/pet/123456

并且说数据库中没有这样的宠物，我的SPA如何在该内容上返回404.

如果没有这个，是否有其他方法可以正确地提醒用户或搜索引擎所请求的URL不存在？还有其他一些我不考虑的解决方案吗？

Answer 1

真正的问题是http://example.com/pet/123456是否会返回任何内容？

如果您的起点为http://example.com/且有http://example.com/pet/123456的链接，则Angular会调用petController，而http://example.com/api/pet/123456会调用http://example.com/pet/123456进行AJAX调用。

抓取工具不会这样做，而是尝试直接调用123456。

因此您的服务器必须能够处理该呼叫。如果没有标识为{{1}}的宠物，那么它应该返回404.问题解决了。如果有，那么它应该返回SPA。然后，应用程序应该相应地处理这种情况。

Answer 2

根据这个答案How do search engines deal with AngularJS applications?，您应该使用Headless Browser来处理爬虫请求，并使用相应的响应代码回送页面的快照。 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">

然后，他们的无头浏览器会检测到这个元标记，并且响应代码会被更改。

Answer 3

试试这个

＆＃13;

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

＆＃13;

如何使用Angular pushstate URL抛出真实的404或301

3 个答案: