Angular: how do I add or update the meta-tags using Meta service, for SEO

user_4136337 0
Viewed 125

I've seen a number of posts addressing similar issues, but despite my best effort to follow the recommended approach, adding tags using the Meta service still doesn't work for me. So I decided to create a simple Angular app adding the Meta service with no other functionality and try to add a meta-tag.

Here's my AppComponent:

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

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

    constructor(private metaService: Meta) {
        this.metaService.addTag({ property: 'og:title', content: 'constructor'});
    }

    ngOnInit() {
        this.metaService.addTag({ property: 'og:title', content: 'ngOnInit'});
    }

    title = 'ng-app';
}

What I expect here is that after opening the main page and viewing the source, I will see the following meta-tag:

<meta property="og:title" content="constructor">

or

<meta property="og:title" content="constructor">

But, neither appears when I view the source. Here's the output:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

I'm really puzzled. Either I don't understand how this should work and it won't work the way I would like by design, or I'm missing something.

For full transparency, I've uploaded this very basic project to my github: https://github.com/0x4ndy/ng-app

If you can have a look and try this out, I will be grateful. Any hints are very much appreciated!

EDIT: as it is explained in the answer to this question, it won't be possible to update the static meta-tags and the backend rendering of the page is required to achieve this.

angular meta-tags html
1 Answers

So the problem with your approach is that you want to set the meta tag in JavaScript however social media like LinkedIn or so won't execute your JavaScript code (which could potentially be kinda dangerous if you think about it). So it will only load the index.html file in your src directory and not the JavaScript file (or will at least not execute it).

What you can do without backend is set the meta tag in the src/index.html However: this will only allow you to set one title/description/image for the entire website (i.e all pages).

You can find a list of all available tags here: https://ogp.me/

If you want to have different titles or pictures for different pages (like for example blog posts), I'm pretty sure you have to get some sort of backend.

Angular Universal runs in node and would certainly be the first thing that comes to my mind. Of course, it's still node which kinda sucks but it would allow you to render your website (at least to some degree) on the backend. This is great for search engine optimization because then the search engine bots can properly scan your page. It would also allow you to set the meta tags dynamically for every page.

If you don't care about search engine optimization I guess you could try to hack something together with your own backend or even with some Nginx modules and populate the tags on request... But then again, that will probably be more a "hack" than a proper solution.

user_89786640
Related