在 Angular UI-路由器的动态视图中添加 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 弹头。

我的问题是：

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

谢谢！

Answer 1

您需要保留#！网址作为旧版浏览器的后备。

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

站点地图
不带“#!”的推送状态网址
规范标签
可使用#!访问内容和正常路由一样，canonical 必须指向您希望在索引中的 url。（我有 https + html5 ui 路由器 url）

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

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

Answer 2

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

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

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

至：

www.website.com/app/browse/productId

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

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="/">

它将解决您的问题。

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

Adding a SEO friendly Url Slug in Dynamic Views of Angular UI-Router

seo

angularjs

angular-routing

angular-ui-router