googleads
How to make Angular Application SEO Friendly Using Pre Render
preloder
Standard

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 bit challenging for a search engine optimization strategy. Basically, search engines requires plain HTML for SEO.  But to be precise, Angular apps are 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 other hand, 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 for 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

 

For example, it look likes the below path

home/prerender

Step 2:

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

Step 3:

To configure the middle ware. In my case i’m using nginx. You can also use apache.

 Click here Nginx Configuration code

Setp 4:

Run the prerender app

 

 

[ Related: 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 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 feedbacks and results with us in the comment section.

For more details reach us at info@agiratech.com

The following two tabs change content below.

Manigandan

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 *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call