OpenGraph on Ajax Based Website

Asked 17/1, 2012 at 14:56 Answered 17/5, 2016 at 16:35

Solved javascript ajax facebook facebook-opengraph

I have a Website, which is Fully Ajax-Based (Hash Navigation).

Is there a way to refresh Open Graph meta-tags for ajax-based websites using Javascript? (When I Click on a link, the Tags, and there values should Change)

Clement answered 17/1, 2012 at 14:56 Comment(0)

No. Open Graph markup must be present on HTML pages which are GETable with pure HTTP.

This is because when a user interacts with an OG object (like, performs an action etc) Facebook will perform an HTTP GET on the OG URL, and expect to see OG tags returned in the markup.

The solution is to create canonical URLs for each of your objects. These URLs contain basic HTML markup including OG tags.

On requests to these URLs, if you see the incoming useragent string containing 'facebookexternalhit' then you render the HTML. If you don't, you serve a 302 which redirects to your ajax URL. On the ajax URLs, your like buttons and any OG actions you publish should point to the canonical URL object

Example:

As a user, I'm on http://yoursite.com/#!/artists/monet. I click a like button, or publish an action, but the like button's href parameter, or the URL of the object when you post the action should be a web hittable canonical URL for the object - in this case, perhaps http://yoursite.com/artists/monet

When a user using a browser hits http://yoursite.com/artists/monet you should redirect them to http://yoursite.com/#!/artists/monet, but if the incoming useragent says it is Facebook's scraper, you just return markup which represents the artist Monet.

For real world examples, see Deezer, Rdio and Mog who all use this design pattern.

Alteration answered 17/1, 2012 at 15:17 Comment(5)

Excellent well written response! – Acheron 17/1, 2012 at 16:54

Great answer but what happens when the user copy/pastes ` yoursite.com/#!/artists/monet` in the facebook box? Imho scraping fails because they don't know they have to copy/paste the canonical url. – Greg 22/2, 2013 at 12:4

Did some research on my own comment, results below ;) – Greg 22/2, 2013 at 13:0

This is wrong! @bitshiftcop answer is right - this is possible (also validated it on my own) – Radicand 16/6, 2014 at 15:38

Thank you for clarifying, but still need some more light: I have this architecture: 1) a web app allows to search, visualize and model JS d3.js objects; 2) a share button will share a url /share?q=title-of-shared-page and archive a JSON model corresponding to the JS object; 3) a user hit the url, which will make an ajax call to visualize the object with D3. Now, it is not clear to me how I could add to open graph the elements, I would like to 'index' the objects to open graph directly. Shall I serve the meta elements from flask server on ajax request? shall I populate meta from ajax ? – Necrology 8/12, 2015 at 18:3

A little bit more investigation lead to the following findings:

Let's say you made an application with a hash that looks like this:

http://yoursite.com/#/artists/monet

The Facebook scraper will call your url without the /#/artists/monet part. This is a problem because you have no way of knowing what information you have to parse into the meta og: tags.

Then try the same with the suggested url as Simon says:

http://yoursite.com/#!/artists/monet

Now you'll notice that the Facebook scraper is respecting the google ajax specifications and it will convert the #! to ?_escaped_fragment_= so the URL looks like this:

http://yoursite.com/?_escaped_fragment_=/artists/monet

You can check this out for yourself with the facebook debugger: https://developers.facebook.com/tools/debug

upload the php script to your server
go to the facebook debugger
enter the url with the /#/ part
click 'See exactly what our scraper sees for your URL' - no hash fragment
enter the url again with /#!/
click 'See exactly what our scraper sees for your URL' - hash fragment has been turned to
?_escaped_fragment_=

The script

<html>
  <head>
    <title>Scraping</title>
  </head>
  <body>
    <?
      print_r($_SERVER);
    ?>
  </body>
</html>

Or summarized: always use /#!/ (hashbang) deeplinks ;)

Greg answered 22/2, 2013 at 12:59 Comment(4)

Thanks for this additional info. Really helpful with w problem I'm working on. – Scipio 5/3, 2013 at 11:41

This answer should be tagged as the right answer(!) – Radicand 16/6, 2014 at 15:38

@Greg and Yaron I add a comment at the answer of Simon, I would appreciate if you could clarify if rewriting redriect with hashbang is necessary and if the set up is sufficient to index og:tags to html objects corresponding to visualizations of D3 of JSON objects - alternatively i ll open another question. – Necrology 8/12, 2015 at 18:9

This is already deprecated webmasters.googleblog.com/2015/10/… – Dichromatic 19/8, 2016 at 23:13

I ran a quick test that seems to work. Dependant on the fact the FB scraper doesn't run JavaScript.

As most of my sites are static Single Page Apps with no server logic, I can generate the static pages quickly with tools such as Grunt and Gulp.

If you Share http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test

Facebook will scrape the test page meta tags, when a user clicks the link the JS redirects to /#/test for my single page app to react and present the correct view.

Seems hacky but works;

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>This is a shared item</title>
</head>
<body>
    <h1>This is a shared item page.</h1>
    <script>
        var path = window.location.pathname;
        window.location = '/#' + path;
    </script>
</body>
</html>

Guarani answered 17/5, 2016 at 16:35 Comment(0)

Recommended topics

Hot tags