AngularJS SEO using HTML5 mode: Would love some clarity on how this functions behind-the-scenes

Question

There are numerous resources out there for implementing SEO-friendly versions of AngularJS applications, of course. Despite reading all of them numerous times, I'm still a bit unclear on a few things, particularly regarding the distinction between the hashbang and HTML5 mode models:

1. For hashbang (#!, or "HTML4") apps, the following setting is given on the location provider:

   $location.hashPrefix('!');
   

   Is this setting required for HTML5 mode as well? Why or why not?

2. For HTML5 mode apps, the following meta tag is included in the index.html page:

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

   Is this meta tag required for hashbang apps as well? Why or why not?

3. Using HTML5 mode, my URLs look similar to:

   http://sample.com/landing/home
   

   Even with the meta tag from #2 specified in my index.html, I'm still unable to navigate to my URLs as a crawler would, such as to:

   http://sample.com/#!/landing/home
   

   Is this normal? Should I expect to be able to navigate to my app hashbang-style, if it's an HTML5 mode app, after adding the location provider settings and/or meta tag?

---

More than anything, I guess my actual question would be: what's specifically required for HTML5 mode crawling, and what's specifically required for hashbang-style crawling? How do they overlap? Additionally, how does the HTML5 mode configuration actually work, behind the scenes, if no hashbang-style route is ever produced/usable?

Note that these questions are separate from the issue of generating/serving snapshots, which I generally understand.

AngularJS SEO-friendly configuration generally makes sense when it comes to classical hashbang-style apps, but for HTML5 mode, I'm a bit confused. Would love some clarity.

Answer 1

Answers

1. Hashbang isn't required for HTML4 either. But if you want to implement SEO it's good that you do use it as search bots will see those links and request a different URL:

   original

   http://somesite.com/#!/crazy/101
   

   bot:

   http://somesite.com/?_escaped_fragment_=crazy/101
   

2. Meta tag is included so search bot will automatically append ?_escaped_fragment_ to requests. Since it can't know which part is actually part of SPA the value will be empty.

   original with meta tag

   http://somesite/crazy/101
   

   bot

   http://somesite/crazy/101?_escaped_fragment_=
   

3. See #2

How HTML5 mode works behind the scenes?

It works using History API implemented in HTML5 that allows changng browser's URL and history entry manipulation. Basically it allows developers to change browser's URL address without the browser to actually make a request.

Additional HTML5 mode explanation

Suppose your SPA runs at domain root http://somesite.com. So whenever URL in browser changes it means that it's been manipulated on the client. This means that there is no actual content on the server at some sub-content URL.

That's why bot appends _escaped_fragment_ at the end so you can serve static content instead of 404 or 301 to root (as content doesn't exists on the server). This static content does nothing else but returns content. No processing no SPA scripts. Pure content.