Dynamic Meta Tags In Html5 And Javascript/jquery

we are developing a corporate website, where all the navigation is done using hashs (http://xxx/#/content/xpto), and the content is dynamically loaded using AJAX. The role stuff is

Solution 1:

You can't do dynamic meta tags (or well, you can, but Google and Facebook won't run your JavaScript so they won't do you any good), but you can follow Google's guide for making AJAX applications crawlable. I don't know if Facebook has a similar guide.

Solution 2:

It seems that you can use JS to change the meta tags dynamically, as mentioned in this post: https://developers.google.com/search/docs/guides/javascript-seo-basics#titles-and-snippets

Solution 3:

If anyone is struggling with the same problem that I was, the answer is not quite simple. Unfortunately, for situations where the page is created using complex JS processes, the most common "headless" browsers in the market (including the one's Google recommends - HtmlUnit, watiji or Crawjax) don't do the trick.

The solution I found wasn't very elegant, but it worked. I've implemented a C++ indexing service using http://www.awesomium.com/. They have a very straightforward solution based on Google's chromium API. Of Course, a few "JS" animations had to be removed, but anyways, the HTML snapshots are being generated as expected.

Solution flow:

1. Created a sitemap;
2. Made the indexing service (using Awesomium) read and generate a HTML snapshot for every page defined in the sitemap file;
3. The files (HTML snapshots) were saved in a secure location in the server, with the same directory structure and file name defined in the browser URL;
4. Created a Servlet (we are using Java EE) to read the HTML snapshots requested by Google's indexing drone: the "?_escaped_fragment_=" querystring parameter.

A detail information on how to construct full crawler drones for Google can be found here (as OX stated - thx): https://developers.google.com/webmasters/ajax-crawling/docs/getting-started