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 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.
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
$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.
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!