Update meta tags in angular universal with external API call

问题

I've spent more than 2 months but could not found a clear solution of how to proceed with angular universal. I've already spent about 6 months in implementing angular universal on a project for which I don't get a much time and now I'm stuck with this issue. Can anyone help me with this as it seems the whole world want to know a solution for Angular SSR.

Here's my code(Meta tag service):

import {Injectable} from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import {commonMetas} from './meta-data.model';

@Injectable()
export class SeoService {
    public commonMetas = commonMetas;
    constructor(public meta: Meta, public title: Title) {}

    setAutomatically (key = 'none') {
        const detail = this.commonMetas[key];
        /** setting defaults */
        this.setTitle(detail.title);
        this.setAuthor();
        this.setDescription(detail.description);
        this.setKeywords(detail.keyword);
    }
    setFromJson(key: {
        title: any,
        description: any,
        image: any,
        keyword: any,
        author: any
    }) {
        key.title = key.title ? key.title : this.commonMetas['none'].title;
        key.description = key.description ? key.description : this.commonMetas['none'].description;

    }
    setTitle(titleToSet = '') {
        this.title.setTitle(titleToSet);
    }
    setAuthor (nameToSet = '') {
        this.meta.addTag({ name: 'author',   content: 'havemybooks.com'});
    }
    setKeywords (keyword = '') {
        this.meta.addTag({ name: 'keywords', content: keyword});
    }
    }
}

And my component.ts

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id'];
      this.api.getParticular({id: this.id}).subscribe((response) => {
        this.content = response.blog_data[0];
        this.content.main_image = this.getImage(this.content.main_image);
        this.content.metaCreatedAt = moment(this.content.created_at).format('YYYY-MM-DD');
        this.content.displayCreatedAt = moment.utc(new Date(this.content.created_at)).fromNow();
        this.content.name = this.handleName(this.content.name);
        this.seo.setFromJson({
          title: this.content.title,
          image: this.content.main_image,
          description: this.content.blog,
          author: this.content.name,
          keyword: ''
        });
      });
   });
  }

Here are some linked StackOverflow questions and GitHub issues:

Angular universal Server Side Rendering, Meta tags

Updating meta tags for SEO using angular universal

Angular Universal + External API

https://github.com/fulls1z3/ngx-meta/issues/101

Angular Universal - OG meta tags not working with child routes

https://github.com/fulls1z3/ngx-meta/issues/118(I tried to get help here from someone who successfully implemented but got no help)

https://github.com/maciejtreder/ng-toolkit/issues/460 (I opened it)

The list goes on I've seen a number of discussions which were never concluded. Anyone who can suggest how to make an API call before rendering in ng-express.

I have implemented SSR and use ngx-meta tag but still, fb crawler shows the default meta tags I used in the head tag.

UPDATE: I'm able to get the source updated with view source option in chrome but the Facebook and Google crawler show the default meta tags which are there by default. It's very tough to launch my website with it remaining any help is appreciated. @Brandon guided me a lot I spent quite some time on implementing node with Jade and Nunchucks but since angular universal use angular-express by default so I wasn't able to use the above-mentioned render engines.

So is there a way to render meta tags using ng express engine.

Like this <title>{{meta.title}}</title>...

回答1:

I implemented setting title on Angular 2 Universal. It should be done using Renderer, like this:

1.Import Renderer inside of component:

import {Renderer } from '@angular/core';

2.Add dependency inside of constructor:

constructor
    (
        ...
        private renderer: Renderer
    ) {}

3.Use it now for setting title:

renderer.setText(renderer.selectRootElement('title'), value);

回答2:

First Add all required meta tags in index.html file like this

Then update the meta tags in each required component, use meta.updateTag() as below

This one worked for me.

I try to create service to update but that not worked, its working only when meta update added in the same component.

来源：https://stackoverflow.com/questions/52765453/update-meta-tags-in-angular-universal-with-external-api-call

标签

angular

seo

meta-tags

angular-universal

ssr