Angular is single-page applications, so this platform can be beneficial for user interactions and increased conversion rates. But it’s a bit challenging for a search engine optimization strategy. Basically, search engines require plain HTML for SEO.  But to be precise, Angular apps do not search engine friendly, why because If you try to view the page source of regular Angular App in a browser, it will only show what’s inside the regular index.html.

So, How can we overcome this?

If you need SEO for angular apps, then it’s good to start with Angular Universal to achieve your goals because Angular universal supports server-side rendering for SEO optimization.  On the other hands, If you have already developed an Angular application then we can migrate to angular universal. But here the big plot is that angular universal should support all the included modules & libraries of your angular application otherwise we can’t migrate.
So this blog mainly focused on those who couldn’t able to use Angular universal in their applications and struggling to find alternative solutions.
Even if your Angular application is not supported by Angular Universal then don’t worry, you still have a solution. Here we come up with the required procedure to get it done.
For SEO, below steps are required to implement pre render server side HTML in existing angular apps.

Step 1

Clone the below prerender git repo to your server.
Note: Prerender is a node server that uses Headless Chrome for rendering HTML

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

For example, it looks likes the below path
home/prerender

Step 2

If you don’t have chrome, install the chrome browser, It’s used for pre-rendering the Html before viewing the search engine.

Step 3

To configure the middleware. In my case, I’m using nginx. You can also use apache.
 Click here Nginx Configuration code

Step 4

Run the prerender app

> node  /home/prerender/server.js

Also Read: Tips To Optimize Angular Application To Increase The Website Speed

Step 5

Now server-side pre-render is done, next, we need to add SEO tags & modules in the application,
a) Now 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) Now add the meta tags in app.component for SEO

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 ' });
}
}

Finally, We are done with Angular Application SEO. Now you can apply SEO for any of your angular applications, eventually, Google will start indexing and crawling your angular application just like any other website.
Now start making your Angular application SEO friendly and let us know your valuable feedback and results with us in the comment section.
For more details reach us at info@agiratech.com