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

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


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.