SEO：谷歌如何索引 Angular 应用程序 2016

Question

Angular 应用程序索引的现状如何？ 有很多谣言说谷歌理解 Angular 客户端编译。但我们仍在努力让它理解我们的动态标题。

您可以查看here。

UPD：也在Google Forums上提问。

UPD2：现在不存在了，只是因为我在里面放了默认文本并使用了 ng-attr-，就像这样：

<meta name="description"
      content="Some default description not to show the variable."
      ng-attr-content="{{ metadata.description | translate }}"/>

Answer 1

Google 在 SPA 上花费的时间似乎比在标准网站上花费的时间更多。当我推动我的投资组合时，我也有同样的想法。 推送大约两周后，结果是“人类可读的”，这是当前结果的屏幕截图：

Answer 2

使用角度 3.17

要更改 url，请在您的配置文件中启用 HTML5。 $locationProvider .html5Mode(true)

并在您的索引页面上将其添加到您的标题中：

<base href="/">

需要 HTML 5 来更新您的网址。 # 根据 Google 的说法是旧的，Google 建议不要使用预渲染，除非它的目的不仅仅是 seo。

这是我使用的指令：

app.directive('someDirective',['$location', function(location){
return {
    restrict: 'EA',
    controller: 'someController',
    link: function(scope,element,attrs){
        scope.$on('event-change', function(event, data){
            //some function prepares new url
            var newUrl = someController.someFunction();

            location.url(url);
        })
    }
}

$location 在指令中传递以允许在链接函数中使用位置。

scope.$on 用于触发指令。这很有帮助，因为您的指令通常会在您的数据准备好之前加载（可能是您面临的问题，请发布更多代码）。

someController 将工厂作为依赖项传递。工厂广播 scope.$on 事件。我经常在页面加载开始时在工厂中设置数据，一旦承诺得到解决。这让我可以避免使用 $watch 或 $observe。

我在创建动态元描述时没有遇到任何问题。网址很难弄清楚。这是一个指令示例：

app.directive('someDirective', function(){
return {
 scope: {
   metaDescription: '@'
 },
 controller: 'someController',
 replace: true,
  template: '<meta name="description" content="{{metaDescription}}">',
 link: function(scope,element, attrs){
 scope.$on('some-event', function(event, data){
 //some controller function that prepares and returns dynamic meta description
 var newMeta = someController.someFunction();
 //assigns value in your template
 scope.metaDescription = newMeta;

  })

} });

我的理解是使用 @ 将范围隔离到指令内部...这意味着您必须从 DOM 传递值或在指令内部创建值。

最后在你的 index.html 文件的头文件中添加指令：

<header>
   <some-directive></some-directive>
</header>

您的输出应该是包含元描述的模板。如果这不起作用，那么您可以尝试在链接功能中添加手表或观察。或者您可以直接从父控制器广播并使用该广播事件来激活您的作用域。$on。