facebook 开放图和 AngularJs答案

【问题标题】：facebook open graph and AngularJsfacebook 开放图和 AngularJs
【发布时间】：2015-03-03 19:59:43
【问题描述】：

我正在尝试将开放图形功能添加到我正在开发的 AngularJs 应用程序中。我希望我的应用程序的用户与他们的 Facebook 朋友分享一个 URL。我知道要共享工作，您需要向页面添加开放图形元数据标签（网址、描述、图像、标题等）。我需要我的用户共享的 URL 是动态的，并且具有以下结构：

http://example.com/game/invitation/1118

其中 1118 是要分享的游戏 ID。下面的文章描述了在 Angular 应用中启用社交共享：

http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

但是，本文指出 Facebook 爬虫无法呈现动态内容。因此，当 Facebook 爬虫访问 http://example.com/game/invitation/1118 时，我需要将请求重定向到我的服务器以生成正确的开放图元标记。我正在使用 IIS（文章解释了如何通过 Apache 执行此操作）。这是我的重写规则：

    <rule name="Imported Rule 1" stopProcessing="true">
        <match url="invitation/([_0-9a-z-]+)" ignoreCase="false" />
        <conditions>
            <add input="{HTTP_USER_AGENT}" pattern="facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet" />
        </conditions>
        <action type="Redirect" url="http://meta.example.com/social/meta/{R:1}" appendQueryString="false" />
    </rule>

因此，每当一个 url 包含邀请/[游戏 ID] 并且用户代理是 Facebook（或 Twitter、Pinterest、Google 等）时，将它们重定向到“http://meta.example.com/social/meta/[id]”。这很好用。我已经建立了一个单独的网站 (http://meta.example.com) 来呈现开放的图形元标记，供爬虫索引。

问题是我需要使用http://example.com/game/invitation/1118 作为 og:url 元标记值（这是用户的朋友点击查看邀请的链接，我的大多数用户的朋友不会是 Facebook 爬虫）。如果我包括

<meta property="og:url" content="http://example.com/game/invitation/1118" />

在http://meta.example.com/social/meta/1118 生成的页面中，我在 Facebook 的 Open Graph 对象调试器中收到循环引用错误。 Facebook 的爬虫正在从http://meta.example.com/social/meta/1118 生成的元标签中挑选出标题、描述等。但是，它似乎从 og:url 元标记中挑选出http://example.com/game/invitation/1118 并再次重新运行它。据我所知，这会导致循环引用。

那么，当用户代理是 Facebook 时，如何配置 IIS 以将 http://example.com/game/invitation/1118 的请求重定向到 http://meta.example.com/social/meta/1118，以便生成适当的开放图元标记并重用启动此过程的原始 URL（@ 987654332@)?

上面的文章 (http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app) 提到了如何为 Apache 执行此操作。我不知道如何将其转换为 IIS：

[P] 标志使 Apache 使用 mod_proxy 和 mod_proxy_http，而不是常规重定向。如果 301 重定向是使用，例如 Facebook 将链接到“static-page.php” URL 而不是原来的网址。

感谢您的帮助。我正在使用 IIS 8。

【问题讨论】：

嗨，汤姆！请告诉我在 angularjs 应用程序中添加开放图形功能的当前技术是什么。我正在使用 Nodejs 和 express。

标签： angularjs facebook facebook-graph-api facebook-opengraph iis-8

【解决方案1】：

而不是重定向操作：

<action type="Redirect" url="http://meta.example.com/social/meta/{R:1}" appendQueryString="false" />

你应该使用重写操作：

<action type="Rewrite" url="/social/meta/{R:1}" appendQueryString="false" />

请注意，您应该在同一域上使用相对路径。

【讨论】：