在单页面应用程序中使用开放图形(与FB,G +,twitter共享)

Question

我在我的单页应用程序中使用knockout(应用程序只有一个入口点,应用程序的视图通过进行ajax调用和修改页面而改变).

我的应用程序,我希望人们利用通过fb,twitter,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用户代理.

当然第二个只适用于FB.

我的问题是:2014年引擎解析开放图形信息的方式是否有任何改进,是否可以在单页面应用程序中正确使用它.特别是我有兴趣在FB,Twitter,G +上很好地展示共享内容.

Answer 1

我的操作假设您了解 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&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

（根据Facebook 的文档，但这种方法理论上适用于任何社交服务）

关键位是data-href属性和属性u的查询字符串参数href。该页面将呈现如下内容：

<!html>
  <meta property="og:title" content="page title">
  <script>
    document.location.href = 'https://example.com/articles/some-article'
  </script>
</html>

然而这种方法有多个缺点：

• 直接从浏览器复制/粘贴 URL 将导致丢失元标记。您可能会检测服务器上的用户代理以重定向到/share自动渲染此无关项，但这也需要更改为 HTML5 路由，在这种情况下您不妨使用第一个解决方案
• 与后退按钮行为混乱。您的用户最终会遇到这样的情况：在单击共享链接之前，他们必须双击后退按钮才能返回到原来所在的页面。
• 每个社交服务都需要一个按钮（或者如上所述进行基于用户代理的重定向）

认为这是一个“是的，它有效，但它确实不是一个好主意”的解决方案。

预渲染io

最终（也是最简单的）解决方案是使用类似prerender.io的东西。我从未亲自使用过它，所以这就是我的输入以这个结束的地方，但值得一提的是，因为这正是它创建的场景。