AngularJS、Google SEO 和页面标题

Question

我在使用 google 网站管理员工具和我的 angular 应用程序时遇到问题。
由于某种原因，页面标题没有被显示。
我正在使用 ui-router 所以我已经设置了这个:

<title ng-bind="'Page title | ' + $state.current.data.pageTitle"></title>

在我的索引页然后我的应用程序有这个:

.run(['$rootScope', '$state', 'AccountService', 'SettingsService', function ($rootScope, $state, account, settings) {

    // Apply the state to the rootscope
    $rootScope.$state = $state;
}

在定义状态时，我有这样的数据集:

$stateProvider.state('home', {
    url: "/",
    templateUrl: '/assets/tpl/home.tpl.html',
    controller: 'HomeController',
    controllerAs: 'controller',
    data: {
        pageTitle: 'Home'
    }
})

但这不是通过网站管理员工具获取的。所以我有一些谷歌，有人遇到了同样的问题，他们通过创建服务解决了这个问题。
所以我创建了一个这样的服务:

.service('PageTitle', function() {
    var title = 'Kudos Sports';
    return {
        title: function() { 
            return title; 
        },

        setTitle: function(newTitle) { 
            title = newTitle; 
        }
    };
})

然后在我的索引页面上，我这样做了:

<!-- Required to make our application crawlable -->
<meta name="fragment" content="!" />

<meta charset="utf-8" />
<title ng-bind="controller.title()"></title>

<!-- Removed for brevity -->

我的 HeadController，看起来像这样:

.controller('HeadController', ['PageTitle', function (service) {
var self = this;

self.title = service.title;

}]);;

然后在我的状态声明中，我这样做了:

$stateProvider.state('home', {
    url: "/",
    templateUrl: '/assets/tpl/home.tpl.html',
    controller: 'HomeController',
    controllerAs: 'controller',
    resolve: {
        pageTitle: ['PageTitle', function (service) {
            service.setTitle('Kudos Sports - Home');
        }]
    }
})

几周后，我再次查看，但仍然没有看到我的页面标题。

有谁知道我该如何解决这个问题？

Answer 1

AngualrJS 已经过时了，所以我不建议使用它，不过，如果你已经使用过它，请更新到更高的 angular 版本或 REact 或 Veu。仍然是 SEO 的修复，更新元标记。

  <update-link rel="canonical" href="{{url}}"></update-link>
  <update-meta name="keywords" content="{{keywords}}"></update-meta>
  <update-meta name="description" content="{{description}}"></update-meta>
  <update-meta name="twitter:title" content="{{title}}"></update-meta>
  <update-meta name="twitter:description" content="{{description}}"></update-meta>
  <update-meta name="twitter:image" content="{{image}}"></update-meta>