Angular & SEO — Making Angular 6 Single-Page Web Apps Search-Engine Friendly

This post has been published first on CodingTheSmartWay.com.

Subscribe On YouTube

Angular is great for building powerful single-page web applications. However, as with all single-page web applications, there is one disadvantage when it comes to SEO (search engine optimization). Usually SPAs are rendered client side and therefore web crawlers of search engines are not able to see the see the complete structure and content of websites. With this limitation in place it’s not possible to list your website correctly in search engine results.


If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot! Become A Patron!


In the following tutorial we’re going to take a look at the most easiest approach which is available to get rid of that limitation for your Angular 6 application by using server-side rendering with Angular Universal.

To get started lets first setup a new Angular application in the following steps.

Setting Up The Angular Application Using Angular CLI

To setup a new Angular application we’re using Angular CLI. To install Angular CLI on your system use the Node.js Package Manager in the following way on your command line:

$ npm install -g @angular/cli

Having installed Angular CLI successfully makes it possible to use the new command ng to setup a new Angular project from scratch:

$ ng new ngseo --routing

With the option new we’re saying that a new Angular project should be create, ngseo is the name of the new project and by using option — routing we’re making sure that a basic routing configuration is added to the project as well.

Once the project has been setup successfully we’re able to switch into the newly created project folder:

$ cd ngseo

And start the development web server by using Angular CLI again in the following way:

$ ng serve -o

You should now be able to see the following result in the browser:

How Crawlers See Single-Page Web Apps

Now that we have a running Angular application let’s explore how crawlers of search engines are seeing our website. We’re getting a good impression when we’re using the command line tool curl to access our site:

$ curl localhost:4200

The result you’re getting back should look similar to the following:

Here you can see that the main content of the website is not part of that HTML document. Instead you’ll find the placeholder element <app-root> inside the body section. This is very Angular is inserting the content of the website when the JavaScript code of the side is executed. However the crawler is not able to see that content because JavaScript code is not executed.

Angular Universal For Server-Side Rendering

So what could be a solution for that problem? Yes, it’s server-side rendering (SSR). When server-side rendering is performed the JavaScript code of the Angular application is already executed on the server and the complete HTML structure and content will be available to web crawlers as well.

The technology which enables server-side rendering for Angular applications is called Angular Universal. Angular Universal generates static application pages on the server through a process called server-side rendering.

A detailed description of how to use Angular Universal is available at https://angular.io/guide/universal. However there is another approach which makes adding Angular Universal very simple: using the package @ng-toolkit/universal.

Adding Angular Universal With @ng-toolkit/universal To Make Your Angular Application Search-Engine Friendly

The @ng-toolkit/universal package is added to out project by using the ng command once again in the following way:

$ ng add @ng-toolkit/universal

After having added the package, open package.json and make sure that the webpack-cli package is listed in the dependencies section with at least version 3.1:

"webpack-cli": "^3.1.0"

If that’s not the case change this entry accordingly and execute the following command:

$ npm install

Next, instead of running ng serve -o you run:

$ npm run build:prod

and

$ npm run server

The server is started on localhost:8080 and if you’re accessing that URL in the browser you should be able to see the website of the default angular application again.

Let’s try out to access the website again via curl:

$ curl localhost:8080

The output should now looks like what you can see in the following screenshot:

This time the complete content of the HTML site is included. The reason for that is, that the HTML side has been rendered as part of the build process (server-side) and is now available without the need to execute JavaScript code client-side. Thus a crawler of a search engine is able to find the content of the side and can make sure that it is added to the search results correctly.

Conclusion

By default Angular uses client-side rendering which is a problem when your website should be listed in search engine results. The solution is to render the application server-side and generate final HTML elements which search engine crawlers can interpret easily.

Server-side rendering for Angular applications can be achieved with Angular Universal. Adding Angular Universal to your existing Angular application is very easy by using the package @ng-toolkit/universal.

This post has been published first on CodingTheSmartWay.com.

#1 Angular 6 — The Complete Guide

Master Angular (Angular 2+, incl. Angular 6) and build awesome, reactive web apps with the successor of Angular.js
Go To Course …

Disclaimer: This post contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support this blog!