loader image

How to make Angular Application SEO Friendly Using Pre Render?

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.

Quote - Banner-Blog

Step 1

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

For example, it looks likes the below path


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

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

b) import the module

c) Now add the meta tags in app.component for SEO

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

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
The following two tabs change content below.


An ideal Full Stack Developer, having around 5+ years of experience in web development arena, expertise in AngularJS, Nodejs, PHP and also scoring 6 years of experience in Networking & Window servers. A perfect all-rounder has fondness to play diverse role. he always strives to match perfection and likely remains the best in whatever role he takes.

Leave a Reply

Your email address will not be published. Required fields are marked *

Join our 30,000+ subscribers, never miss out anything on our latest blogs, tips, tutorials, updates & more.