如何在共享的 angularJS 页面中显示动态页面描述（例如通过 google +1）答案

【问题标题】：How to display dynamic page description in a shared angularJS page (via google +1 for instance)如何在共享的 angularJS 页面中显示动态页面描述（例如通过 google +1）
【发布时间】：2014-04-21 19:34:06
【问题描述】：

我正在尝试在我们的应用程序中为 google+ 和 facebook +1 启用元数据，但我没有得到任何信息、页面的 url 或帖子中的 {{pageDesc}}。现在我正在使用一个动态设置元描述的指令：

HTML：

<meta meta-description>

指令：

app.directive('metaDescription', [ 'metaData', function(metaData){
  return {
    restrict: 'A',
    replace: true,
    template: '<meta name="description" content="{{description}}">',
    link: function(scope,element){
      scope.metaData = metaData;
      scope.description = scope.metaData.pageDesc;

    }
  };
}]);

这样做时，google api 不识别标题和描述，只是将当前页面的 url 和站点的 url 设置为标题/描述。

我正在使用 prerender.io，但我不得不禁用它，因为它使 +1 插件崩溃。

【问题讨论】：

标签： facebook angularjs seo google-plus meta

【解决方案1】：

您必须在呈现文档之前在 HTML 中设置这些值。抓取页面的 Facebook/Google/etc 机器人通常不执行 JavaScript。

【讨论】：

好吧，有一个问题，当我使用共享功能时，爬虫机器人是否正在查看我的网站？在那种情况下，如果我在 robots.txt 中阻止抓取，他们不会捕获页面上的元数据？我正在尝试使用 prerender.io 使我们的应用程序对 seo 更友好，但现在我们正在阻止机器人，所以测试起来有点困难。
使用 G+ 共享会导致 Google 服务器获取并解析页面。我不认为 fetch 尊重 robots.txt，因为它不会抓取您的网站，而是请求特定页面。（我可能错了）。您应该使用Google data testing tool 和Facebook debugger 来测试您的标记。
如果你使用 prerender.io，meta 标签会被渲染到页面中，并以静态 HTML 的形式返回给爬虫。