angularjsnode.jsexpressseohtml5mode

SEO for AngularJS with HTML5 url mode under ExpressJS


So far, I have been using prerender.io to make my angularjs websites seo friendly. I have worked okay when it comes to urls with hashbangs (website.com/#!).

Currently, I am making my websites go to html5mode, which doesn't contain hashbangs on url and looks a way prettier. However, even since I went to html5 url, prerender.io doesn't work properly.

Also, I came up with a Google article that claims their new technology allow the engine render Javascript framework websites automatically (https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html). However, as I use 'Fetch as Google' tool in Google Search Console. It renders very poorly and my title and meta description spit angularjs syntax ({{seo.tile}} or {{seo.desc}}), which are not rendered.

I am quite lost where I should start and fix the problems I came across with. I tried to get away from prerender.io cause I don't think we necessarily need it anymore.

Sorry for my poorly organized post and questions. Let me try to clear and tie the questions below.

1) Do we still need to teach the Google bot about the angularjs?

2) What is the most stable and best practice for AngularJS+ExpressJS SEO? I don't wanna try unstable and easily crashable method for this.

Thank you very much for your time.


Solution

  • EDIT At the time of writing this article, I didn't know about using javascript compiler such as babel. I will say here make sure use webpack or gulp to compile your ES6 codes into stable ones so that your codes can be written as you expect it to be and works well with any 3rd party tools or pacakges.

    It's the era of ES6!!!


    Finally, I solved my problem and for future reference and others who struggling with the sample problem I had gone through, let me leave what I found.

    First of all, the very reason why I was tremendously confused was that even if I take html snapshot with phantomjs, I saw still bare angular syntax like {{seo.title}} and . Very awkwardly the reason was that I was using ES6 syntax across my angularjs module. Since phantomjs wasn't fully adopted with ES6 syntax, it failed to interpret angularjs module and just spat html with unconpiled angularjs... From this, I came up with a unexpected conclusion that it's not a good time to implement ES6 for production.

    Secondly, I would not count on what Google confidently announced that their bots can handle the websites with dynamic javascript frameworks like angularjs. Even if phantomjs works, 'Fetch as Google' tool doesn't give me a good result. Some times (actually very often) it resulted in just empty html file. Since still Ajax crawling is supported as a 'fall back', but more stable method, I would count it rather than counting on their very unstable smart bots.

    In conclusion, DON'T BE EARLY ADOPTOR especially if you are making business out of it!! For angularJS SEO, (1) follow the Ajax calling guideline even if considered to be deprecated, (2) Don't use ES6 syntax for serious programming stuff.