Meteor 中的 Facebook OG 标签不工作答案

【问题标题】：Facebook OG Tags in Meteor Not WorkingMeteor 中的 Facebook OG 标签不工作
【发布时间】：2017-05-21 12:55:29
【问题描述】：

我只在客户端使用 Meteor，并且一直在尝试优化开放图元标记。我使用了kadira:dochead，并在路由器中输入了以下代码：

Router.route('/', function() {
  setupOg();
  if (isMobile()) {
    this.render('landing_mobile');
    $('body').css("overflow", "visible");
  }
  else {
    this.render('landing');
    $('body').css("overflow", "hidden");
  }
});

function setupOg() {
  var title = { property: "og:title", content: "Blah" };
  var type = { property: "og:type", content: "website" };
  var url = { property: "og:url", content: "https://blah.io" };
  var image = { property: "og:image", content: "http://i63.tinypic.com/2howf4k.png" };
  var siteName = { property: "og:site_name", content: "Blah" };
  var description = { property: "blah blah blah." };

  DocHead.addMeta(title);
  DocHead.addMeta(type);
  DocHead.addMeta(url);
  DocHead.addMeta(image);
  DocHead.addMeta(siteName);
  DocHead.addMeta(description);
}

在浏览器中，检查 HEAD 内容后，上面每个属性的内容都为 <meta property="og:title" content="Blah" dochead="1"> 等。

但是，当我查看 Facebook Sharing Debugger 时，它似乎没有发现任何这些优化，当我尝试在 Linkedin 上分享时，同样的事情。这是为什么呢？

注意，我的main.html 看起来像这样：

<head>
  <link rel="icon" sizes="16x16 32x32" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Blah</title>
</head>

【问题讨论】：

你应该使用已经提到的预渲染库或服务，其他一些链接：enhanced spiderable package，prerendering with ES6 support

标签： html meteor share facebook-opengraph meta

【解决方案1】：

我可以区分的原因有两个：

Meteor 有客户端渲染，也就是说当 Facebook 打开 URL 分析 OG 标签时，它没有看到任何，所以你需要告诉 Facebook bot 它需要等到你的页面加载完毕，取一个看看这个 Meteor 包：https://atmospherejs.com/meteor/spiderable
可能会缓存该 URL 的数据。

【讨论】：

如果您非常关心 SEO，您可以使用 prerender.io 服务