angularjs - 在 Angular UI-Router 的动态 View 中添加一个 SEO 友好的 Url Slug

Question

在 Angular 设置中，我选择了 Angular UI-router 来在 View 之间切换。

我的配置如下:

.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/app/home');

  $stateProvider

    // Nav
    .state('app', {
      url: '/app',
      templateUrl: 'templates/navbar.html',
      abstract: true,
      controller:'AppCtrl as app',
    })

    // Home
    .state('app.home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller:'HomeCtrl as home',
    })

    .state('app.browse', {
      url: '/browse',
      templateUrl: 'templates/browse.html',
      controller:'BrowseCtrl as browse',
    })

    .state('app.browse-detail', {
      url: '/browse/:productId',
      templateUrl: 'templates/browse-detail.html',
      controller:'BrowseDetailCtrl as detail',
    })

})

这将导致产品的 url 显示如下:

www.website.com/app/#/browse/productId

相反，我希望看到类似的内容:

www.website.com/browse/productId/most-awesome-product

most-awesome-product 是一个 Url Slug。

我的问题是:

• 使用路由使 Angular 网站 SEO 友好的一般原则是什么？
• 如何通过添加 url slug(见上文)更改我的 Angular 路由器的 url？
• 更改 url 是否会使我的网站 SEO 友好？

谢谢!

Answer 1

Google 一直在尝试使单页应用程序对 SEO 更友好，但不确定他们已经取得了多大进展，这就是为什么当我需要一个网站对 SEO 友好时我坚持使用非单页应用程序 url 结构。

使用您的设置完成此操作的一种方法是添加到您的配置 $locationProvider.html5Mode(true);并在您的 HTML 标题下添加 <base href="/app/" />这将把你的 url

www.website.com/app/#/browse/productId

到:

www.website.com/app/browse/productId

我发现此设置的问题是您需要将服务器配置为仅向前端输出一个入口点，例如 www.website.com/app。这是一个tutorial关于设置。