Using open graph in a single-page application (sharing with FB, G+, twitter)

Question

I am using knockout for my single page application (there is just one entry point to the application and the view of the app is changing by making ajax calls and modifying the page).

I my app, I would like people to take advantage of sharing pages through fb, twitter, g+. In a standard application, I would do something like this:

<meta property="og:title" content="page title" /> .. other things like url, image .. 

And people who shared the page on fb, would get a nice title of the page. But in SPA, my title is created in the beginning and nevertheless I am modifying it with JS: $('meta[name="og:title"]').attr('content', 'new title'); all social networks take old content (which is expected and it is written in these resources).

My app is using JS routing, so each different page has it's own specific address like this: http://domain.com/#!route/123. Reading two similar questions I got contradictory answers:

• this is not possible
• this is possible by implementing specific server-side logic, which is based on tracking FB user agent.

Surely the second will work only for FB.

My question is: is there any improvement in 2014 in way how engines parse open graph info and is it possible to properly use it in single page application. In particular I am interested in presenting sharing content nicely on FB, twitter, G+.

Answer 1

I'm operating under the assumption that you understand that the og tags must be rendered on the server (i.e. they don't require JS, if you use view source they should still be there).

Server-side rendering

Your first, and best, option is to use server-side rendering to insert the og meta tags on page load. In order to do this, you'll need to switch to HTML5 (pushState/replaceState) routing instead of hashbang (#!), as the hash is not readable via the server. Then, you'd to duplicate your routes for the pages you want to have meta tags, and serve your app the same as you currently are, only with the meta tags pre-populated.

Explicit share link

Alternatively you could have your share buttons specify an href on your share buttons that points to a page that has nothing but the meta tags and a redirect.

For example, your share button:

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

(as per Facebook's documentation, but this approach would theoretically work with any social service)

with the critical bits being the data-href attribute and u querystring parameter of the href attribute. That page would render something as follows:

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

However this approach has multiple disadvantages:

• copying/pasting the url directly from the browser will result in missing meta tags. You could potentially detect user agents on the server to redirect to /share automatically rendering this irrelevant, but this would require changing to HTML5 routing as well, in which case you might as well use the first solution
• messes with back-button behavior. Your users will end up in a situation where they have to double-click the back button to get back to the page they were originally on before clicking the shared link.
• need a button for every social service (or do user-agent based redirects as stated above)

Consider this to be a "yea it works but it's really not a good idea" solution.

Prerender.io

The final (and easiest) solution is to use something like prerender.io. I've never personally used it, so that's where my input ends with this one, but it is worth mentioning as this is precisely the scenario it was created for.