Angular Search engine optimization SEO friendly page | Angular Universal SEO friendly page guide | How to implement angular SEO friendly page | Angular SEO friendly page setup | Angular Universal with SEO friendly page setup

Why need to implement Angular Universal for make SEO friendly page?

Default Angular Application is not SEO friendly because it render at client side, which is not render at server side that make an indexing issue. Angular single JavaScript bundle can’t index by the search engine. Build of a default angular app make a JavaScript bundle that’s load at client side in browser when user browse. In bowser side angular JavaScript bundle run time render to html code that’s why the final html index file which is getting served in the browser. With the customer delivery solution, you redirect the application to a single HTML file and the server will deliver it without content.

Some Search engine can index JavaScript bundle but not all search engine. Google can index or crawl JavaScript but that process is not so mature till now. Angular server side rendering load in browser faster than client side rendering. When JavaScript bundle size grow up it will load slow in low configuration machine/mobile browser if you use default client side rendering though you use Angular code split or lazy loading.

For that reason we need to implement Angular Universal with SEO friendly page setup.

What is Angular universal?

Angular universal is a process of Server Side Rendering (SSR) of your application on Server ((ie: express nodejs) that generate a static html version on user request.

How to make your application to angular universal app?

please follow our previous angular universal article from below links as requirement

• Angular universal server side rendering
• How do you deploy angular Universal to production?
• Add angular universal to existing project

Make Angular Component page to SEO Friendly Page

You should have a knowledge in “on page SEO” to implement SEO friendly page. Or your have to follow instructions from your DIGITAL/SEO marketing team to change/add meta data in html page elements.

basic SEO implement in component page

Step:1 – Setting Meta Tags and Title

First we will create an About us Component page for this example tutorial

ng g c AboutUs

Implement below code structure as requirement of your project level component structure. Here I given an example with an About us page. Open the src/app/about-us/about-us.component.html file and imports the Meta and Title services as below in code:

import { Component } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

Next, inject both services in the component constructor:

@Component({
  selector: 'app-about-us',
  templateUrl: './about-us.component.html',
  styleUrls: ['./about-us.component.css']
})
export class AboutUsComponent{
  title = 'Angular 11 Universal Tutorial';

  constructor(private titleService: Title, private metaService: Meta) {}
}

Next, add the setAdMetaData method in ngOnInit():

ngOnInit(): void {
   // as per requirement you can load CMS data from API
   this.setAdMetaData([]);
}

setAdMetaData(ad_seo_data: any) {
    this.titleService.setTitle('about us');

    this.metaService.addTags([
      {name: 'keywords', content: 'Angular, Universal, Example'},
      {name: 'description', content: 'Angular Universal Example'},
      {name: 'robots', content: 'index, follow'}
    ]);
   // or you can use below code for single line for single tag
    //this.metaService.updateTag({ name: 'title', content: 'about us meta title' });
    //this.metaService.removeTag('description');
    //this.metaService.updateTag({ name: 'description', content: 'about us description' });
    //this.metaService.removeTag('keywords');
    //this.metaService.updateTag({ name: 'keywords', content: 'about us keyword' });
}

Step:2 – build and your angular seo friendly code

$ npm run build:ssr 
$ npm run serve:ssr

Next article will post soon – Dynamically add meta tags based on route in Angular

Thank you! Please like share and subscribe our Facebook page for more latest interesting update.