Angular + SEO = Universal Toolkit

When talking about Angular, one of the biggest challenge that we used to have is with the SEO. Actually, is not a problem only with Angular, but it is a problem with most frameworks to develop Single Page Application (SPA). Before we go deep, we need to see what is this problem.

How Crawler reads our website?

Crawlers like Google, index our website using the source code. But when developing with Angular we use “Markups” (double curly brace notation) to render our page, something like this:

<h1>{{title}} - {{author}}</h1>

Where the title and author are dynamic variables, which will be changed for some values.

So when Google access our website, it will see this only Markups, not the content, or even just some tags without the markups:

<h1> - </h1>

But this is meaningless for Google, what it needs to see is:

<h1>My Amazing Website - Tulio Castro</h1>

This is the right way to let Google or other Crawlers reading our Website. It is not the Google’s fault, it couldn’t know when your page will finish to overwrite the variables to something more understandable.

The problem in Action …

Lets see the problem in action, then how to solve it. There are many ways to solve this problem for each version of angular. We are going to see how to solve this using Angular 6 (it can work with previous version, but I didn’t test).

We won’t go through steps to create Angular Project, we only going to see the result (You can get the final code here and you can see this problem online here).

Starting with a regular Angular Project, we built a simple project with a single link to show a list of Posts, and when you click on deep link “Posts Page”, it asynchronously load 100 posts (Click here to see online and check the source code):

Great! It is working! In this example, we are using “Route Resolver” to only show the page after the list of posts have been loaded. So you can think: “Nice, if we are showing the page only after the data has been requested, so Google will read everything, right? Right? RIGHT? ” – Sorry, but no.

Lets take a look on the Source Code of this page. Both pages (index and posts) will have the same Source code, note that the code stops on <app-root></app-root>. That is exactly the problem, it doesn’t matter what and how you load the content, it always stops on the first content loader:

Instead of reading <app-root></app-root>, Google should be reading the entire Website content with the whole plaint text.

How we Solve this?

Bad thing right? Are we abandoning Angular because of this ? I don’t think so. Meet the powerful Angular Universal Toolkit!

Now, lets see how this toolkit will solve our problem. First we need to install this toolkit with a !complex command (NOT):

	$ ng add @ng-toolkit/universal

And run the project with:

	$ npm run build:prod
	$ npm run server

At this point, we should see the lovely SEO content present (click here to see online and check the source code):

That is it, is the same code, same framework with different output allowing the Search Engine bots to see the entire page.

Conclusion

We explored how to solve the problem with new versions of Angular with easy steps. We did not see the deep concepts around the Angular Universal to avoid extending this article, but I would recommend reading about this library to understand it better. Hopefully, you have learnt some things and the problem that you used to have with a bad SEO will not stop you from using Angular any more.

The final source code of this example can be found here or you can check this working online here.

References

 

Tulio Castro

Author: Tulio Castro

Fexco Senior Software Engineer

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.