How to Make Angular Application SEO Friendly?

Many Angular developers keep struggling in making their single page application SEO friendly. We know that Angular is beneficial in user interactions and there are also higher conversion rates. But Search Engine Optimization is a challenge in such reactive applications. This happens because when you view the source of a web page, there is nothing inside it, as everything loads via javascript. So we will check out today how we can accomplish an SEO friendly Angular application.

How to overcome this issue?

Angular Universal is a good start to make angular app SEO friendly. It supports server side rendering for SEO optimization. We can also migrate existing developed Angular apps to Angular Universal but the only thing is that existing app’s libraries should be supported by Universal.

If you have already developed an Angular application, then there is nothing to worry about. We at Creensight can help you out in building and optimizing web apps to make it SEO friendly.

Here are the steps you can follow to make an SEO optimized Angular app.

Step 1

Clone the below repo in your localhost or server. Prerender is a node server which uses headless chrome for rendering HTML.

https://github.com/prerender/prerender.git

home>git clone https://github.com/prerender/prerender.git

Step 2

If you don’t have a chrome browser then install it to view pre-rendered HTML.

Step 3

You can configure middleware using Nginx or Apache.

Here you can find Nginx configuration code: https://github.com/agiratech-manigandan/angularseo-middleware/blob/master/nginx-config

Step 4

Run pre-render app using node command:

> node /home/prerender/server.js

Step 5

Server side pre-render is done and now we have to include SEO tags and modules in our web app,

a) Install platform module

> npm install @angular/platform-browser –save

b) Import the module

import { BrowserModule } from ‘@angular/platform-browser’;

import { AppComponent } from ‘./app.component’;

@NgModule({

declarations: [ AppComponent ],

imports: [BrowserModule],

bootstrap: [AppComponent]

})

c) Adding meta tags in app component

import { Title, Meta } from ‘@angular/platform-browser’;

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-home’,

templateUrl: ‘./app.component.html’

});

export class AppComponent implements OnInit {

constructor(private _title: Title, private _meta: Meta)

ngOnInit() {

this._title.setTitle(‘ Here is your title to display heading ’);

this._meta.updateTag({ name: ‘description’, content: ‘ here is your description’});

this._meta.updateTag({ name: ‘url’, content: here is your Page url });

this._meta.updateTag({ property: ‘og:Title’, content: ‘ Here is your title to display heading ’ });

this._meta.updateTag({ property: ‘og:description’, content:‘ here is your description’ });

this._meta.updateTag({ property: ‘og:url’, content: here is your Page url });

this._meta.updateTag({ property: ‘og:type’, content: ‘website’ });

this._meta.updateTag({ property: ‘twitter:title’, content: ‘ Here is your title to display heading ’ });

this._meta.updateTag({ property: ‘twitter:description’, content: ‘ here is your description’ });

this._meta.updateTag({ property: ‘twitter:card’, content: ‘summary_large_image’ });

this._meta.updateTag({ name: ‘og:image’, content: ‘image_URL ‘ });

this._meta.updateTag({ name: ‘twitter:image’, content: ‘image_URL ‘ });

}

Now SEO is done, you can add proper meta tags and Google will start indexing your web application. If you think this was helpful, share with your colleagues and friends also.

If you have any doubts, then you definitely contact us and we will be ready to help you out.