在单页应用程序中使用开放图（与 FB、G+、twitter 共享）

Question

我正在为我的单页应用程序使用敲除（应用程序只有一个入口点，并且应用程序的视图正在通过调用 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'); 所有社交网络都采用旧内容（这是意料之中的，它是用theseresources 编写的）。

我的应用程序使用 JS 路由，因此每个不同的页面都有自己的特定地址，如下所示：http://domain.com/#!route/123。读了两个类似的问题，我得到了相互矛盾的答案：

• 这是not possible
• 这可以通过实现specific server-side logic 来实现，它基于跟踪 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's documentation，但这种方法理论上适用于任何社会服务）

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

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

但是这种方法有多个缺点：

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

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

Prerender.io

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