Html5mode (true) affects Google search bots

Question

I read this specification , which is an agreement between web servers and search engines, which allows dynamically generated content to be visible to crawlers. It was pointed out that in order for the crawler to index the html5 application, it is necessary to implement routing using #! in the urls. In angular html5mode(true) we get rid of this hashed part of the URL. I am wondering if this will impede the indexing of crawlers on my site.

Answer 1

The short answer is No, html5mode will not ruin your indexing, but read on.

---

Important Note: Both Google and Bing can crawl AJAX-based content without HTML snapshots

I know the documentation you refer to says differently, but about a year or two ago they officially announced that they process AJAX content without having to create HTML snapshots if you use pushstates, but most of the documentation is outdated and, unfortunately, not updated.

SEO using pushstates

The requirement to bypass AJAX to work out of the box is that you change your URL using pushstates. This is exactly what html5mode does in Angular (and also what many other frameworks do). When pushstates on scanners will wait for ajax and javascript calls to complete to refresh the page before indexing it. You can even update things like page title or even meta tags in your router, and it will index correctly. Basically, you do not need to do anything, in this case there is no difference between server and client sites.

To be clear, many SEO tools (like Moz) will spit out warnings on pages using pushstates. This is because these tools (and their representatives, if you are talking to them) were not updated at the time of writing, so ignore them.

Finally, make sure you are not using the fragment meta tag below when doing this. If you have this tag, the scanners will think that you want to use the non-pushstates method, and everything can be confusing.

SEO without pushstates

There is very little reason not to use pushstates with Angular, but if you do not, you need to follow the recommendations related to the question. In short, you create html snapshots on your server and then use the snippet meta tag to change your url snippet as "#!". instead of "#".

 <meta name="fragment" content="!" /> 

When the crawler finds such a page, it will remove the URL fragmentation and instead request a URL with the _escaped_fragment_ parameter, and you can send your snapshot page in response. Providing a workaround with a standard static page for indexing.

Note that the fragment meta tag should only be used if you want to trigger this behavior. If you use pushstates and want the page indexed this way, do not use this tag.

Also, when using snapshots in Angular, you may have html5mode enabled. In html5mode, the fragment is hidden, but it still technically exists and will still trigger the same behavior, assuming the fragment meta tag is set.

Warning - Facebook Scanner

Although Google and Bing will crawl your AJAX pages without problems (if you use pushstates), Facebook will not. Facebook does not understand ajax content and still needs special solutions, such as html snapshots, designed specifically for the facebook botman (user agent facebookexternalhit / 1.1).

---

Change Perhaps I should mention that I have deployed sites with all of these versions. Both with html5mode, snippet meta tags and snapshots and without any snapshots and just rely on pushstate scans. Everything works fine, except for pushstates and Facebook, as mentioned above.

Answer 2

To enable indexing of your AJAX application, you need to add a special meta tag in the section of the chapter of your document:

 <meta name="fragment" content="!" /> 

Source: https://docs.angularjs.org/guide/$location # crawling-your-app

At the bottom of the screen, find your application’s scan.