如何在 Meteor 应用程序中集成 Facebook 的 Open Graph？答案

【问题标题】：How to integrate Facebook's Open Graph in a Meteor application?如何在 Meteor 应用程序中集成 Facebook 的 Open Graph？
【发布时间】：2014-12-30 20:44:43
【问题描述】：

我正在尝试将我的 Meteor 应用程序与 Facebook Open Graph 集成，以在时间线中发布操作。

Facebook API 通过在 HTML 头中定义对象特定的元标记来工作，这些元标记将由 API 读取。例如：

<head prefix="og: http://ogp.me/ns# [YOUR_APP_NAMESPACE]: 
                     http://ogp.me/ns/apps/[YOUR_APP_NAMESPACE]#">
    <title>OG Tutorial App</title>
    <meta property="fb:app_id" content="[YOUR_APP_ID]" /> 
    <meta property="og:type" content="[YOUR_APP_NAMESPACE]:recipe" /> 
    <meta property="og:title" content="Stuffed Cookies" /> 
    <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" /> 
    <meta property="og:description" content="The Turducken of Cookies" /> 
    <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
</head>

但是，Facebook API 在检查任何 URL 时看到的是这样的：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/ed99236548322b46a7562b49cd6ee0e0f059e506.css">
  <script type="text/javascript" src="/c16ff21884b1f831d91ebf271236ef78b03b552e.js"></script>
  <title>Made with Meteor!</title>
</head>
<body>
</body>
</html>

在 Meteor 应用程序中集成此元标记的最佳方式是什么？可能会根据 URL 发生变化？

【问题讨论】：

你读过这个吗？ meteor.com/faq/can-meteor-serve-static-html
谢谢劳埃德。但这是否意味着在当前的 Meteor 版本 (0.3.7) 中无法实现这一目标？没有解决办法？
Meteor 不会在 body 中提供静态内容，但您的 Open Graph meta 标签应该出现在 head 中。至少，它对我有用。
仍在努力，但在 Meteor 实现正确的服务器路由之前，目前的解决方案是编写我们自己的路由逻辑（参见 stackoverflow.com/questions/10119777/…）。
只是指出这在 server.js 中没有被黑。只需将其添加到服务器端的 Meteor.startup() 即可。

标签： meteor

【解决方案1】：

我遇到了同样的问题。

两种处理方式：

最近添加到“spiderable”包（目前在“devel”分支中）还允许您更改客户端代码中的“head”标签（附加您的 og:title 等）和将其“神奇地”从您的服务器提供给 Facebook。

（注意：您可能需要不使用 autopublish 包与此解决方案，因为“spiderable”会在依赖“autopublish”设置为“true”的标志时停止页面呈现客户端启动）

更轻量级的解决方案是 Meteor 的“headly”包：

https://github.com/ayal/headly

安装后你可以这样使用它：

Meteor.headly.config({tagsForRequest: function(req) {
  ... do something dynamic here, i.e get title from db based on url param ...
  return '<meta property="og:title" content="<DYNAMIC TITLE>" />';
}});

【讨论】：

如果我查询一个基于_id的文档，那么这需要进入url。 url 参数是查询数据库的正确方法吗？
@Prashant，是的，我认为在 url 中有一个 id（作为查询参数或在路径中）并用它查询数据库是很常见的。
headly 包有问题吗？流星坠毁。

【解决方案2】：

Spiderable 包是要走的路...

在你的路由器中做这样的事情......（这是咖啡脚本）

#Spiderable stuff to set meta tags for crawl
$("meta[property='fb:app_id']").attr "content", "YOUR_APP_ID"
$("meta[property='og:type']").attr "content", "YOUR_APP:OPEN_GRAPH_CUSTOM_EVENT"
$("meta[property='og:url']").attr "content", "https://apps.facebook.com/YOURAPP"+ @canonicalPath
$("meta[property='og:title']").attr "content", "some title:
$("meta[property='og:description']").attr "content", "some description"
$("meta[property='og:image']").attr "content", "thumb image url"

您可以测试此页面的 Facebook 抓取是否与他们的调试工具一起工作...只需输入此页面的 URL 并检查错误等。

https://developers.facebook.com/tools/debug

【讨论】：

不要忘记在布局的头部添加存根的元标记！在玉... "meta(property='fb:app_id', content='foobar')"

【解决方案3】：

你需要meteor add spiderable。

从流星 0.4.2 开始，包含 spiderable 包，您所要做的就是在客户端 HTML 的 <head> 中包含相关的 <meta> 元素。

<head>
  <meta property="og:type" content="website" />
  <title>HTML head test</title>
</head>

【讨论】：

嘿，丹，只是为了强调一下——据我所知，这个问题是关于动态在头部设置元标记。即使不使用“spiderable”，您的解决方案也可以工作，因为无论如何服务器服务的内容中都包含一个静态头。它不适用于动态 og:title、og:image 等。但是最近对可蜘蛛的更改可以让您实现这一点。（见我上面的回答）