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

})

这将导致产品的 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（见上文）？
• 更改网址会让我的网站对 SEO 友好吗？

谢谢！

Answer 1

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

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

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

到：

www.website.com/app/browse/productId

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

Answer 2

您需要保留 #! url 作为旧版浏览器的后备。

要让 google 为您的网站编制索引，您不再需要 html 快照。 我有一个使用以下设置索引的网站

1. 网站地图
2. 不带“#!”的推送状态网址
3. 规范标签
4. 使用 #! 访问的内容！和普通路由一样，canonical 必须指向索引中所需的 url。 （我有 https + html5 ui 路由器网址）

为了使用带有参数的规范标签，我使用了这个 sn-p：https://github.com/w11k/w11k-angular-seo-header

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

Answer 3

您需要为此使用 html5Mode

在 web.config 中添加

$locationProvider.html5Mode(true);

在 index.html 页面中

<base href="/">

足够了，但是刷新页面时会报错，所以需要使用url重写，所以在web.config中添加

<system.webServer>
    <rewrite>
     <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
    </rewrite>
</system.webServer>

你的状态需要改变，像这样

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

更多详情见AngularJS HTML5 mode reloading page not found solution

Answer 4

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

$locationProvider.html5Mode(true);

并在 index.html 中添加：

<base href="/">

它会解决你的问题。