facebook开放图和AngularJs

Question

我正在尝试将开放图形功能添加到我正在开发的AngularJs应用程序中。我希望我的应用程序的用户与他们的Facebook好友共享一个URL。我理解为了共享工作，您需要向页面添加开放图元数据标记（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爬虫访问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 of game]且用户代理是Facebook（或Twitter、Pinterest、Google等）时，将其重定向到“http://meta.example.com/social/meta/[id]”。这很有效。我已经建立了一个单独的网站(http://meta.example.com)呈现开放图元标记以供html" target="_blank">爬虫索引。

问题是我需要使用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的爬虫程序正在从http://meta.example.com/social/meta/1118.生成的元标签中挑选标题、描述等。然而，它似乎从og： url元标签中挑选出http://example.com/game/invitation/1118并重新运行它。这导致了我所能告诉的循环引用。

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

上述文章(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而不是原始URL。

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

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

请注意，您应该在同一域上创建一个相对路径。