adding/updating meta tags not working in angular5

angular 6 dynamic meta tags
angular universal meta tags
angular-update meta
ngx-meta
angular set canonical url
angular add to head
angular 9 seo
angularjs get meta tag

I used below code for adding or updating meta tags at runtime in angular5

import { Title ,Meta} from '@angular/platform-browser'; 
constructor( private meta:Meta)
 {
 this.meta.addTags([
            {name: 'description', content: 'How to use Angular 4 meta 
       service'},
            {name: 'author', content: 'talkingdotnet'},
            {name: 'keywords', content: 'Angular, Meta Service'}
          ]);
this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service' 
 });
  }

imported meta service in appmodule

But it is not working(not in my page source).can anyone pls help me

Thanks


You need to just change :

this.meta.updateTag({ content: 'Angular 4 meta service'} , 'name="description"' );

WORKING DEMO (Instead of view page source check via inspect element) Reason is explained below

Your method is also working 100% fine , you can check that in my given demo.


Angular is not served from server side , that's why you can see any meta tags via page view source , any thing that is being changed after page loads that won't be shown in page view source

If you want to check the updated meta tags you need to inspect element and check there

If you want to server side rendering then you can go for Angular Universal

update meta tag not working · Issue #9 · jvandemo/angular-update , I have tried to added them to the layout and other views but it didn't work out. update meta tag not working #9. You must first add the meta elements to I am using angularjs 1 and i want to update meta tags dynamically.But when inspect


Please try using this template

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public constructor(public meta: Meta, public pageTitle: Title) {
    pageTitle.setTitle("MySite.COM");
    const keywords: MetaDefinition = {
      name: "keywords",
      content: "angular2, java, javaEE, angular-universal"
    }
    const description: MetaDefinition = {
      name: "description",
      content: "This is a description"
    }
    this.meta.addTags([keywords, description]);
  }

  title = 'app';
}

Refer url for more updates

Updating meta tags not working(View Page Source) in Angular6 , Bug Report We built a website using Angular 6 Universal App, Meta tags are not Updating in the View Page Source. That led me to here. I finally just started searching the documentation and the solution was there clear as day. The solution lets you even change meta tags and page title dynamically in angular5. This is just for demonstration purposes. The code for meta tag update and page title update needs to be probably moved in the real application.


Just use addTags. updateTags is for existing tags.

With just addTags

this.meta.addTags([
  {name: 'description', content: 'How to use Angular 4 meta service'},
  {name: 'author', content: 'talkingdotnet'},
  {name: 'keywords', content: 'Angular, Meta Service'}
]);

You get the following:

Further with updateTag notice the description change:

this.meta.addTags([ {name: 'description', content: 'How to use Angular 4 meta service'}, {name: 'author', content: 'talkingdotnet'}, {name: 'keywords', content: 'Angular, Meta Service'} ]);

this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service'});

adding/updating meta tags not working in angular5, adding/updating meta tags not working in angular5. angular 6 dynamic meta tags angular universal meta tags angular-update-meta ngx-meta angular add to  The Angular Meta service is available for Angular 4 and greater. addTag & addTags. Using the Meta service is as easy as importing it from @angular/platform-browser and injecting it in a component or service of yours. Here’s an example where we add meta tags for a Twitter card when the home component is loaded: home.component.ts


Angular has a security feature which will only show page content provided in index.html file. One way to view this is to inspect your code on same page. You will be able to see you meta tags and it's values. Another solution is to use Angular Universal which is useful for SEO purpose. By using Angular universal you'll be able to see you page content in view source.

Meta service in Angular. Add/Update Meta Tags Example , Learn to add/update HTML Meta tags using the Meta Service in Angular using addTag, addTags, getTag, getTags, updateTag, removeTag, removeTagElement​  In last my article I discussion on how to set Meta Tags. In these article i discuss on How to get,update&remove meta tags in Angular application. Definition of get Meta method. getTag(attrSelector: string): HTMLMetaElement | null getTags(attrSelector: string): HTMLMetaElement getTag gives us single value of the tags name & getTags gives array of the Tags name. Below is the example of the


Angular 8/9/10 SEO: Set Dynamic Page Title and Meta Tags in , Angular offers various Meta services to add, read, update, and remove HTML meta This problem might lead to a duplicate content issue. Angular provides Meta service to add, update, read and remove HTML meta tags. Meta tags are used in HTML to provide structured metadata for a web page. Meta tags has attributes such as name, httpequiv, property, content and charset. Meta tags are helpful in Search Engine Optimization (SEO) for a web page.


Angular 4, How do we add/update meta tags dynamically so that they get picked by I'm using Angular 4 and loading all data via API calls so its not possible to get any  Angular 4 meta service allows you to add, update, get and remove the meta tags. It helps in creating dynamic meta tags based on the Angular app active routes for better SEO. This post shows how to use Angular 4 meta service and all its method with examples.


[HELP WANTED], Hey I'm having an issue I have this blogs page that brings in dynamic data, and with that data I want to use it to populate meta tags so for example I'm doing  But if we need meta tags to set dynamically then it is not working. Which will be very useful in eCommerce product pages where title and description of page can be from api This comment has been minimized.