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是 Url Slug 。

我的问题是：

一般来说，使用路由制作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。这是一个tutorial来设置它。

Answer 2

您需要使用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 3

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

$locationProvider.html5Mode(true);

并在index.html中添加：

<base href="/">

它将解决您的问题。

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

3 个答案: