单页应用程序和开放图答案

【问题标题】：Single Page Applications and Open Graph单页应用程序和开放图
【发布时间】：2013-04-17 20:18:55
【问题描述】：

我正在编写一个使用下划线模板的 SPA。该应用程序搜索并评价音乐专辑并通过 ajax 返回结果。如果 facebook 打开图元标签无法动态更改，并且无论搜索结果如何，页面的 url 都是恒定的，我该如何制作它以便用户可以分享他们对某个专辑的评分。

即）

<meta property="fb:app_id"      content="118454308341351" /> 
<meta property="og:url"         content="http://www.appurl.com" /> 
<meta property="og:title"       content="Fleetwood Mac's Rumors" /> 
<meta property="og:image"       content="AppImg.jpg" />

并更新这些属性以反映给定的搜索结果。

【问题讨论】：

标签： ajax facebook facebook-opengraph underscore.js single-page-application

【解决方案1】：

我处理这个问题的方法是创建一个动态页面，用作我的打开图形对象，它只是从 url 参数填充并使用元重定向重定向回我的 SPA。

<meta http-equiv="refresh" content="0;URL=http://YOUR_WEBSITE_WITH_DYNAMIC_CONTENT">

【讨论】：

通过创建一个单独的 OpenGraph 控制器解决了这个问题，该控制器将由 FB.api 对费率的调用指向。控制器返回一个带有 OG 元标记的 html 页面，这些元标记由包含标题、图像等的模型填充。
@AesopWaits，你愿意分享那个解决方案吗？我遇到了在 SPA 上运行的不同“页面”需要不同 OG 标签的问题。
试过了，但 facebook 也遵循了重定向，所以当用户代理没有以 'facebookexternalhit' 开头时，我从后端链接重定向到服务器中的前端链接。

【解决方案2】：

感谢本教程，我找到了解决方案：https://speakerdeck.com/sienatime/facebook-sharing-for-single-page-apps?slide=15

如果 http 请求的 user-agent 包含“facebookexternalhit”，我只发送元标记。

下面是一些带有 node 和 express 的后端代码：

app.get('/', (req,res) => {
  if(req.header('user-agent').includes('facebookexternalhit'){
    res.send(`
      <meta property="og:title" content="The Slits' Cut" />
    `);
  } else {
    res.sendFile(index.html);
  }  
})

您也可以为此编写自己的中间件。

【讨论】：

【解决方案3】：

我们的解决方案是使用 Netlify pre-rendering，它会预渲染然后缓存渲染的 HTML，以便专门为爬虫和机器人提供服务。

这似乎运作良好。它允许我们动态更新 OG 元标记，然后由 Netlify 缓存并提供给爬虫，以便它们看到正确的内容。

它也很容易设置，所以如果您使用的是 Netlify，这可能是一个不错的解决方案。

【讨论】：