在单页应用程序中使用打开的图形(与FB、G+、twitter共享)
我正在为我的单个页面应用程序使用敲除(应用程序只有一个入口点，并且通过进行ajax调用和修改页面，应用程序的视图正在发生变化)。
我的应用程序，我希望人们利用分享网页通过fb，推特，g+。在标准应用程序中，我会这样做：
<meta property="og:title" content="page title" />
.. other things like url, image ..而那些在fb上分享页面的人，会得到一个很好的页面标题。但是在SPA中，我的标题是在一开始就创建的，但是我正在用JS修改它：$('meta[name="og:title"]').attr('content', 'new title');所有的社交网络都采用旧的内容(这是预期的，它是用这些 资源编写的)。
我的应用程序使用JS路由，所以每个不同的页面都有自己的特定地址，比如：http://domain.com/#!route/123。读到两个类似的问题，我得到了自相矛盾的答案：
当然，第二个方案只适用于FB。
我的问题是:在2014年，引擎解析开放图形信息的方式是否有任何改进，是否有可能在单页应用程序中正确地使用它。我特别感兴趣的是在FB、推特、G+上很好地分享内容。
回答 1
Stack Overflow用户
发布于 2019-08-27 12:42:26
我的操作假设您理解og标记必须呈现在服务器上(也就是说，它们不需要JS，如果使用视图源，它们应该仍然存在)。
服务器端呈现
您的第一个也是最好的选项是使用服务器端呈现在页面加载时插入og元标记。为了做到这一点，您需要切换到HTML5 (pushState/replaceState)路由，而不是hashbang (#!)，因为哈希通过服务器是不可读的。然后，你会复制你的路线，你想要有元标签，并服务你的应用程序与你现在是一样的，只与元标签预先填充。
显式共享链接
或者，您可以让您的共享按钮指定一个href在您的共享按钮，指向一个页面，只有元标签和重定向。
例如，您的共享按钮：
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"></script>
<div class="fb-share-button" data-href="https://example.com/articles/some-article/share" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticles%2Fsome-article%2Fshare&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>(根据Facebook文档，但这种方法理论上适用于任何社会服务部门)
关键位是data-href属性和href属性的u querystring参数。该页将呈现如下内容：
<!html>
<meta property="og:title" content="page title">
<script>
document.location.href = 'https://example.com/articles/some-article'
</script>
</html>然而，这种方法有多个缺点：
- 直接从浏览器复制/粘贴url将导致丢失元标记。您可能会检测到服务器上的用户代理自动将其重定向到
/share，但这也需要更改为HTML5路由，在这种情况下，您最好使用第一个解决方案。 - 弄乱了后退按钮的行为。您的用户最终将不得不双击“后退”按钮才能回到他们原来所在的页面，然后再单击共享链接。
- 每个社会服务都需要一个按钮(或者像上面所说的那样，基于用户代理的重定向)
考虑这是一个“是的，它的工作，但这真的不是一个好主意”的解决方案。
Prerender.io
最后(也是最简单的)解决方案是使用类似于prerender.io的东西。我从未亲自使用过它，所以这就是我的输入以这个结尾的地方，但是值得一提的是，这正是它所创建的场景。
https://stackoverflow.com/questions/22646334
复制相似问题
腾讯云开发者
