facebook open graph and AngularJs

Question

I'm trying to add open graph capability to an AngularJs app I'm developing. I want my app's user to share a URL with their Facebook friends. I understand for sharing to work, you need to add open graph meta data tags to the page (url, description, image, title, etc). The URL I need my users to share is dynamic and has this structure:

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

Where 1118 is the Id of the game to share. The article below describes enabling social sharing in an Angular app:

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

However, this article points out that Facebook crawlers cannot render dynamic content. Therefore, when Facebook crawlers access http://example.com/game/invitation/1118, I need to redirect the request to my server to generate the proper open graph meta tags. I'm using IIS (the article explains how to do this via Apache). Here's my rewrite rule:

    <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>

So, whenever a url contains invitation/[id of game] and the user agent is Facebook (or Twitter, Pinterest, Google, etc.), redirect them to "http://meta.example.com/social/meta/[id]". This is working great. I've setup a separate website (http://meta.example.com) to render open graph meta tags for the crawlers to index.

The problem is I need to use http://example.com/game/invitation/1118 as the og:url meta tag value (this is the link the user's friends click on to view the invitation, most of my user's friends will not be Facebook crawlers). If I include

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

in the page generated at http://meta.example.com/social/meta/1118, then I get circular reference errors in Facebook's Open Graph Object Debugger. Facebook's crawler is picking out title, description, etc. from the meta tags generated in http://meta.example.com/social/meta/1118. However, it seems to pick out the http://example.com/game/invitation/1118 from og:url meta tag and rerun it again. This causes a circular reference from what I can tell.

So, how do you configure IIS to redirect a request for http://example.com/game/invitation/1118 to http://meta.example.com/social/meta/1118 when the user agent is Facebook in order to generate the appropriate open graph meta-tags and reuse the original URL that started this process (http://example.com/game/invitation/1118)?

The article above (http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app) mentions how to do this for Apache. I do not know how to translate this into IIS:

The [P] flag causes Apache to perform a remap using mod_proxy and mod_proxy_http, rather than a regular redirect. If a 301 redirect is used, Facebook for example will link to the “static-page.php” URL rather than the original URL.

Thanks for your help. I'm using IIS 8.

Hi Tom! Please tell me what is current technique to add open graph capabilities in angularjs application. I'm using Nodejs and express. — Nirmal Bajpai

Ers Ers · Accepted Answer · 2015-03-04T23:29:02

instead of Redirect action:

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

you should use Rewrite action:

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

note that you should you a relative path on the same domain.

facebook open graph and AngularJs

1 Answers