Question

我正在尝试将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可能会更改此元标记的最佳方式是什么？

Answer 1

我遇到了同样的问题。

有两种方法可以解决这个问题：

最近加入＆＃34; spiderable＆＃34;包（目前在＆＃34; devel＆＃34;分支）也允许你更改＆＃34; head＆＃34;标记在客户端代码中（追加你的og：title等等）并且有＃34;神奇地＆＃34;从您的服务器服务到Facebook 。

（注意：您可能需要不使用 autopublish包与此解决方案，因为＆＃34; spiderable＆＃34;停止页面呈现，同时依赖于标记＆＃34; autopublish＆＃34;在客户端启动时设置为＆＃34; true＆＃34;

一个更轻量级的解决方案将是＆＃34; headly＆＃34;流星包：

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>" />'; }});

Answer 2

Spiderable包是要走的路......

路由器中的

执行类似这样的操作......（这是coffee-sciprt）

#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抓取是否与其调试工具一起使用...只需输入此页面的网址并检查错误等。

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

Answer 3

您需要meteor add spiderable。

从meteor 0.4.2开始，如果包含spiderable软件包，您只需在客户端HTML <meta>中包含相关的<head>元素。

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

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

3 个答案: