How to set dynamic page-title meta tags in angular 2/4/5/6/7/8/9/10/11

How to set dynamic page-title meta tags in angular 2/4/5/6/7/8/9/10/11


Published at - Aug 13, 2021

In this tutorial we are going to learn how to implement dynamig page meta data in angular for better seo. To achive the we will use following steps given below –

Stpe 1 –

first we need to import Title and Meta serivice in our component’s head section

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

Step 2 –

Add the following lines in constructor function to use title and meta service in our project –

constructor(private meta: Meta, private title: Title) {
  // code here
}

Stpe 3 –

Change meta tags data in constructor finction

constructor(private meta: Meta, private title: Title) {
  // code here
      this.title.setTitle('hackeradda.com');
      this.meta.addTags([
        { name: 'description', content: '-- desription --' },
        { name: 'keywords', content: '-- keywords --' },
        { name: 'author', content: '-- author name --' },
        { charset: 'UTF-8' },
        { property: 'og:title', content : "-- title --" },
        { property: 'og:image', content : '-- image  url --' },
        { property: 'og:image:width', content : '1000' },
        { property: 'og:image:height', content : '1000' }
      ]);

}

This code will update page title, keywords, description, charset, author, og:title, og:image for your page.





About author

Harendra
Harendra Kanojiya

Hello, I am Harendra Kumar Kanojiya - Owner of this website and a Fullstack web developer. I have expertise in full-stack web development using Angular, PHP, Node JS, Python, Laravel, Codeigniter and, Other web technologies. I also love to write blogs on the latest web technology to keep me and others updated. Thank you for reading the articles.



Follow Us

Follow us on facebook Click Here

Facebook QR
Scan from mobile
Join our telegram channel Click Here
Telegram QR
Scan from mobile