如何为 Facebook 分享动态设置 Angular JS 页面的 meta og 标签？答案

【问题标题】：How to dynamically set and Angular JS page's meta og tags for Facebook sharing?如何为 Facebook 分享动态设置 Angular JS 页面的 meta og 标签？
【发布时间】：2017-05-21 03:17:32
【问题描述】：

这个问题与我几天前问的this one密切相关。

我正在构建一个 angularJS 网络应用程序。我目前正在尝试使用ngMeta 模块来允许网络应用程序为页面标题和元标记生成动态条目，以便“Facebook 知道在用户发布链接时显示图像、标题和描述我的网络应用程序。我正在使用Facebook's public-facing debugger 来帮助我解决此问题。

但这对我不起作用。这是我用于网络应用启动页面的状态：

  $stateProvider.state('splash', {
          url: '/',
          templateUrl: 'html/splash.html',
          controller: 'SplashCtrl',
          data: {meta: {'title': 'XXXXXXXXXXXX',
                        'description': 'YYYYYYYYYYYY'}}});

这是我的控制器：

myApp.controller('SplashCtrl', function($scope, ngMeta) {
    var self = this;
    console.log('self = ', self);

    ngMeta.setTag('description', 'DDDDDDDD');

这是我的index.html

这是我在状态声明中引用的模板文件splash.html：

<div ng-controller="SplashCtrl as splashCtrl">
    HELLO WORLD
</div>

当我抓取这个 Splash Page 时，看看 Facebook 的调试器报告了什么（仅供参考，我的私人信息已被清除）：

为什么我在 SplashCtrl ('DDDDDDDD') 中设置的描述没有显示在 Facebook 的抓取工具中？我该如何解决它？

顺便说一句，我已经使用 run() 块成功地初始化了 ngMeta。我知道它可以正常工作，因为当我加载此页面时，来自index.html 的<title>{{ngMeta.title}}</title> 正确显示为AAAAA。

所以 ngMeta.setTitle() 肯定是有效的。那么如何设置和访问其他属性，如描述、图像等？

【问题讨论】：

你用运行块初始化 ngMeta 了吗？
是的。我有。而且我知道它正在工作，因为当我加载此页面时，来自index.html 的<title>{{ngMeta.title}}</title> 正确显示为AAAAA
您好，去掉状态中的[description]，当前状态不能设置2个description，这是一个绑定。
马赫，我做到了。然而，这并没有什么不同。您可以在这里自己查看网站：predictagram.com
Facebook 抓取工具不关心任何客户端 JavaScript。它只关心请求 URL 时服务器返回的 HTML 代码；那个 HTML 代码必须包含 OG 元数据。

标签： javascript html angularjs facebook facebook-graph-api

【解决方案1】：

你所有的元标签都绑定得很好，你可以通过检查你的页面看到它

我认为这个 facebook 工具正在读取您页面的源代码，而不是初始化的 Angular 应用程序（就像您在 chrome 中执行 CTRL + U 以查看您的源代码一样，您会看到数据不是模板）

这对于从您的 Angular 应用程序共享内容无关紧要。 Facebook 会注意读取绑定值而不是作用域变量

但是，如果您不希望源代码中的范围变量， This 答案可能是一个解决方案

【讨论】：