SEO & SSR

In this chapter, we will explain the SEO module of Nzoni Boilerplate

Seo Service

export class SeoService {

  constructor(private title: Title,
              private meta: Meta,
              @Inject(DOCUMENT) private dom: Document) { }

  setCanonicalUrl(url:string){
    const head = this.dom.getElementsByTagName('head')[0];
    let element: HTMLLinkElement = this.dom.querySelector(`link[rel='canonical']`) || null
    if (element === null) {
      element = this.dom.createElement('link') as HTMLLinkElement;
      head.appendChild(element);
    }
    element.setAttribute('rel', 'canonical')
    element.setAttribute('href', url)
  }

  setLang(lang: string) {
    const head = this.dom.getElementsByTagName('html')[0];
    head.setAttribute('lang', lang)
  }

  setMetaTitle(title: string) {
    this.title.setTitle(title);
  }

  setMetaDescription(content: string) {
    this.meta.updateTag({
      name: 'description',
      content
    });
  }

  addMetaTag(content: string, name: string) {
    this.meta.addTag({
      name,
      content
    });
  }
}

How to set meta title, meta description and canonical url?

	constructor(private seoService: SeoService) {
	}

        ngOnit() {
            // Set up meta title
	    this.seoService.setMetaTitle('your_title_here');
	    // Set up meta description
	    this.seoService.setMetaDescription('your_description_here');
	    // set up canonical url
	    this.seoService.setCanonicalUrl('your_url')
        }

How build ssr

ng build ssr
ng build prerender