Solveduniversal starter How to set meta data in index.html

Here i have seen angular2-meta.ts

but how can i set meta data for pages?
Also can it update pages meta tags means can i see it when view the page source ?

Thanks in advance

24 Answers

✔️Accepted Answer

@nicky-lenaers
My solution should work on server-side,
at leats it works for me, otherwise it makes no sense for SEO :)
https://github.com/matiishyn/vs-seo/blob/master/src/angular2-meta.ts#L68 - this should work
but as you can see it's the 'update', so maybe you need those tags already present in index.html (may be empty), like I have here: https://github.com/matiishyn/vs-seo/blob/master/src/index.html#L9

If you need to create an element you may take a look how I do it for canonical - https://github.com/matiishyn/vs-seo/blob/master/src/angular2-meta.ts#L174

Other Answers:

Hello, I was looking for the solution too. Just build an angular5 project and wanted seo to work with angular-universal. I didn't find it here so I am adding it:

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';
}

So people can find this:

I wanted to change meta tags and page title in angular5 during the prerender phase. 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.

Related Issues:

36
universal starter How to deploy Angular Universal to production (port 80)
The @kalyan1102 answer is correct After make the app how to deploy it? I see that on package.json th...
13
universal starter Can't get current request (or more specifically cookies)
Fixed by adding empty array to deps for the provider: Hi again ! Going deeper and deeper in the use ...
13
universal starter Error: No module factory available for dependency type: ContextElementDependency
You can get this working off a project that has webpack already installed by doing: 1.npm ls webpack...
11
universal starter How add a translate module to universal starter?
So I lost half a day figuring out how to use ngx-translate with universal-starter therefore find out...
6
universal starter not implemented in Parse5DomAdapter: getElementsByTagName
Okay just in case anyone else lands here and needs this Hi I may be running away with things that ar...
3
universal starter How to set meta data in index.html
@nicky-lenaers My solution should work on server-side at leats it works for me Here i have seen angu...