在Angular UI-Router的动态视图中添加SEO友好的Url Slug

Question

在Angular设置中,我选择了Angular UI-router来在视图之间切换.

我的配置如下:

.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',
    })

})

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

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

相反,我希望看到类似的东西:

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

其中most-awesome-product是一个地址段塞.

我的问题是:

• 一般来说使用路由使Angular Websites SEO友好的原则是什么？
• 如何通过添加url slug来更改我的角度路由器的URL(见上文)？
• 将更改网址使我的网站SEO友好？

谢谢!

Answer 1

谷歌一直试图使一个页面的应用程序更加SEO友好,但不知道他们有多远,这就是为什么我坚持一个非单页应用程序网址结构,当我需要一个网站是SEO友好.

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

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

至:

www.website.com/app/browse/productId

我发现这个设置的问题是你需要配置你的服务器只输出一个入口点到你的前端,如www.website.com/app.这是一个关于设置它的教程.