2018 February 05 Archive - EXEIdeas

In the world of digital businesses, the word traffic defines success. Sure, there are other things of importance. But driving traffic is what fundamentally generates income. That’s why it goes without saying that any online business, from a marketplace to a blog, should optimize their traffic generation. SEO has been the method used years over years now for the job. In a nutshell, people use search engines in order to find almost everything on the web. When you think about how many times you end up using google a day, the number is surprising. So in theory, if you can make it such that the search engine would bring your page on the first results page, you’ll be generating a lot of traffic. It has been found that the first page of Google’s results, for example, takes up to 95% of all traffic generated by Google. The margin between the first page and the second page is no joke. However, things might not turn out as you please. What Is Angular?Angular is a JavaScript framework like Backbone or VueJS. In fact, Angular is one of the very first frameworks to appear for JS. It’s widely adopted by large companies like The Guardian, Upwork, and PayPal. Its compatibility with JQuery with the addition to its light nature among other things makes it a very suitable candidate to work with. Angular allows for easy, quick and robust development cycles that can be easily tested. Angular provides a lot of features that are great for creating responsive websites and single page applications (SPA). As for the community, Angular has 6 thousand contributors on GitHub, which makes it the largest community for a web JS framework. AngularJS was primarily developed by Google, so it gives you the sensation that it’s supposed to be SEO friendly. The stunning fact is that it’s actually the total opposite.Why Angular?Angular is all about optimising the user experience. The 2-way data binding allows for a swift and smooth user experience. Whatever changes happen on the backend reflects immediately on the front end. There are many scenarios where this drastically enhances the user experience. Retail websites, selling clothes, for example, would need to present different perspectives on a product. If you’re checking out a T-shirt you might want to change the colors, or change the sizes or check out the patterns. In static HTML you’d need to reload the entire content of the page or serve a different webpage. In Angular, however, all these features can be preloaded to allow the user to change between them just by hovering the mouse. The difference in both user experiences is huge and that’s the motto behind Angular. For this purpose there is a wide demand of learning materials on the internet and comes a need for Angular tutorials and courses.Since Angular is so great, what’s the problem? The problem goes back to the enmity between Google’s engine and Javascript in general. There are a lot of cool things that you can do with Javascript, but rendering content served in JS has been one of Googlebot’s greatest challenges throughout history. Google has stated that their ability to crawl and index Javascript has improved a lot. However, it’s still not reliable. It’s said that there’s still trouble indexing certain aspects of Javascript and especially Angular.How Bad Is The Situation?A famous healthcare company decided to use Angular on their e-commerce section for a handful number of product pages. The pages were only varied in color or size, to make use of the features we mentioned earlier. When they observed the traffic results, there was a 40% drop from their previous year. Some websites drive over 16 million visitors per month, so such a drop would equate to 6.4 million visitors per month. The numbers are utterly overwhelming!How To Overcome The Problem?The secret of overcoming this problem is to use prerendering, also known as creating an HTML snapshot. Instead of relying on google’s ability ( or any other engine’s) to properly render your angular web page, you serve the snapshot in the source code. This will allow Google to fully index all the Angular content on your website and will unleash the power of Angular. Furthermore, the other search engines will be able to see the content on your page as well You can setup your snapshot yourself, here’s a guide to help you do that: https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal.Otherwise, you can use a pre-rendering platform to do the job. These platforms will host a cached version of your content after executing all JS files. While a normal visitor would be directed to the angular page, the search engine bot will receive the cached version. It might look like cloaking, which is a black hat SEO practice used to fool search engines with content that is not there. Google stated that it’s not, and it’s totally legal to use such platforms. While pre-rendering and serving snapshots is critical. There are other stuff that you can do as well for maximum efficiency. Changing the URL structure is one of these things. Maintaining a user-friendly URL is actually a very good practice for SEO. It’s a lot better to change the gibberish hash garbage in your URL from site.com/#/ into something more friendly. You’ll need to leverage $routeProvider and $locationProvider to set your routing to HTML5 in order to do that. Here’s a link to how you can do this: https://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting.There are some great tools that can help you too:Browseo: A great tool that renders the page, counts the words, list of links meta description and keywords among other cool things.Fetch as Google: Allows you to see what Google sees. This is really effective in finding the problems in your page indexing.Final Thoughts:Things look promising for Angular in the future. Google is giving it its full support and is constantly working on advancing their ability to crawl and index JS properly. At some point, this problem will come to an end. However, it’s advised to adhere to progressive enhancements principles and not let your page be a victim of search engine failures. While Google is 100% committed to Angular, you should also be committed to your page and not let search engines toy around with it. Take control of your web pages render and indexing. Good luck to everyone!About the Author:Saurabh Hooda has worked globally for telecom and finance giants in various capacities. After working for a decade in Infosys and Sapient, he started his first startup, Lenro, to solve a hyperlocal book-sharing problem. He is interested in product, marketing, and analytics. His latest venture Hackr.io recommends the best Android tutorial and online programming courses for every programming language. All the tutorials are submitted and voted by the programming community.Find Me On GooglePlus | Twitter