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:
Angular Universal For Server-Side Rendering
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:
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
$ 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:
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
- 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
ONLINE COURSE: 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!