Facebook Open graph with GWT

Question

We are developing a page with GWT that has a list view and selecting an item it opens a detail with ajax style, there is no refresh in the page and a new view is shown in the client. When that detail is shown( or accessed directly by its url), the meta tags for the Open Graph are set in the header. That detail is our Open Graph object.

The problem is that setting meta tags by code (even at the beginning of the onModuleLoad method) doesn't work because Facebook doesn't detect them when a user performs an action and Facebook thinks that the page is not an Open Graph one. We suppose FB reads the page directly without executing any javascript.

Any ideas or workaround with that?

Thanks in advance.

Answer 1

Some more recent information to refer to:

Put the OpenGraph tags in your server side HTML rendering, like detailed here: http://www.gwtproject.org/articles/dynamic_host_page.html#servlet

Since Google considers AJAX crawling deprecated, they recommend using the HTML rendering on the server side as well: https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html

Answer 2

You'll need to this server-side, with a handler that takes an object id from the query string or path, and does two things:

1. write out the correct tags for facebook.
2. 'deep-link' into your GWT app to show the detail view for the object.

So for URLs like:

http://myapp.com/og/?type=movie&id=1234
http://myapp.com/og/?type=film&id=6789

The HTML output should have all the tags for the object specified, and it should launch your GWT app with a 'bookmark' or some other info it needs to navigate to the detail view.

Each object needs its own permanent, distinct URL. So when you pass it to the facebook API, facebook can 'crawl' it, and they can publish it as a link in news feed stories etc. (so machine readable, and shows the relevant content for non-machines!)

It should pass the test here: http://developers.facebook.com/tools/debug