单页应用程序和开放图谱

Question

我正在编写一个使用underscore模板的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" /> 

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

- AesopWaits

Answer 1

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

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

- Joe T

---

通过创建一个单独的OpenGraph控制器来解决这个问题，FB.api调用rates时会指向该控制器。该控制器返回一个HTML页面，其中包含OG元标记，这些元标记是从模型中获取的，包括标题、图像等。 - AesopWaits

@AesopWaits，你能分享一下解决方案吗？我遇到了一个问题，需要在单页应用程序上运行的不同“页面”上使用不同的OG标签。 - Martin Adams

尝试过这种方法，但Facebook也跟随了重定向，所以我选择在服务器上从后端链接重定向到前端链接，当用户代理不以'facebookexternalhit'开头时。 - Kris

Answer 2

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

如果http请求的user-agent包含“facebookexternalhit”，则仅发送meta标签。

以下是使用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);
  }  
})

你也可以编写自己的中间件进行处理。

- dyedwiper

Answer 3

我们的解决方案是使用Netlify预渲染，它会预先呈现并缓存呈现的HTML以专门为网络爬虫和机器人提供服务。

这似乎很有效。它允许我们动态更新OG元标记，然后由Netlify缓存并提供给网络爬虫，因此它们可以看到正确的内容。

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

- Adam Reis