11

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

IE）

<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" />

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

4

3 回答 3

5

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

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

于 2013-04-17T21:13:15.550 回答
3

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

user-agent如果http 请求中包含“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);
  }  
})

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

于 2020-07-23T21:59:54.270 回答
0

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

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

它也很容易设置，因此如果您使用的是 Netlify，这对您来说可能是一个很好的解决方案。

于 2021-09-17T02:46:41.223 回答