Angular

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


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.

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 let’s first setup a new Angular application in the following steps.


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!


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.

ONLINE COURSE: Angular - The Complete Guide

Check out the great Angular – The Complete Guide with thousands of students already enrolled:

Angular – The Complete Guide

  • This course covers Angular 6
  • Develop modern, complex, responsive and scalable web applications with Angular
  • Use their gained, deep understanding of the Angular  fundamentals to quickly establish themselves as frontend developers
  • Fully understand the architecture behind an Angular application and how to use it
  • Create single-page applications with on of the most modern JavaScript frameworks out there

Go To Course

ONLINE COURSE: Angular (Full App) with Angular Material, Angularfire & NgRx

Check out the great Angular (Full App) with Angular Material, Angularfire & NgRx with thousands of students already enrolled:

Angular (Full App) with Angular Material, Angularfire & NgRx

  • Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App
  • Build amazing Angular apps with modern tools like Material, NgRx and Angularfire
  • Build real-time apps that not only work great but also look awesome!

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.