Angularjs 在AngularUI路由器的动态视图中添加SEO友好的Url段塞

在角度设置中，我选择了角度UI路由器在视图之间切换

我的配置如下所示：

.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

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

.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

其中

最棒的产品

是一个Url Slug

我的问题是：

• 使用路由使网站SEO友好的一般原则是什么
• 如何通过添加url slug（见上文）来更改角度路由器的url
• 更改url会使我的网站SEO友好吗

谢谢

您需要保留#！作为旧浏览器的备用URL

要让谷歌为你的网站编制索引，你不再需要html快照了。 我有一个网站索引与以下设置

网站地图

不带“#！”URL的pushstate

规范标记

可通过#访问的内容！和普通路由一样，canonical必须指向您希望在索引中显示的URL。（我有https+HTML5UI路由器URL）

为了在参数中使用规范标记，我使用以下代码段：

---

删除hashbang时，别忘了将服务器上的所有请求重定向到索引文件。

谷歌一直在尝试使单页应用程序更加SEO友好，但不确定它们已经走了多远，这就是为什么当我需要一个站点对SEO友好时，我坚持使用非单页应用程序url结构

使用设置实现这一点的一种方法是将$locationProvider.html5Mode（true）添加到配置中并在HTML标题下添加

，这将打开您的url

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

致：

---

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

您需要使用HTML5模式来实现这一点

在web.config中添加

$locationProvider.html5Mode(true);

在index.html页面中

<base href="/">

---

有关更多详细信息，请参见

只需在路由配置文件中添加一行代码：

$locationProvider.html5Mode(true);

并在index.html中添加：

<base href="/">

---

这会解决你的问题。

听起来很有希望。你能给我举个例子看看它的样子吗？App.js为什么不从url中删除id并将其映射回应用程序中？接缝是最简单的方法。或者只使用产品名称作为另一个URL参数。要在pagetitle中访问他，只需在提供的指令中使用titleExtend。我还开始研究一个库--预呈现html页面，以帮助进行SEO和漂亮的URL。您将web.config放在哪里？

<base href="/">