Update meta tags in angular universal with external API call

angular universal + api calls
angular universal dynamic content
add angular universal to existing project
angular 6 dynamic meta tags
angular universal deployment
angular 6 meta tags not working
remove angular universal
angular universal cli

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>...

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);

I tried using the angular routing resolve to get the data for meta tags. But my meta tags look https://github.com/Angular-RU/angular-universal-starter Updating meta tags not working(View Page Source) in Angular6 #1045. Closed Successfully merging a pull request may close this issue. None yet. Setting Meta and Title Tags in Angular 9 for SEO Purposes. Angular provides the Meta and Title services that allows you to either get or set the HTML meta tags and title. In the previous tutorial, we've performed the following steps: Step 1 - Setting up Angular 9 CLI and Initializing a Project; Step 2 - Setting up Angular 9 Universal

Stumbled upon this looking for same solution. Using a setTimeout worked for me. Make sure to refresh cache or use incognito mode or you'll miss seeing the metadata (I made this mistake). My research suggests that subscribe for API data must be waited upon before SSR renders page so observable must stay open (but I'm not an expert). https://angular.io/guide/observables. Also, the only way to make it work is to put the response from subscription right into metaService. I'll show what I mean in my code.

setTimeout( () =>
              this.seo.setFromJson({
              title: this.content.title,
              image: this.content.main_image,
              description: this.content.blog,
              author: this.content.name,
              keyword: ''
            });
    ,0);

My code with solution:

this.publicFeedService.getPublicProfile(data).subscribe((response:any) => {
        this.memberProfile = response[this.userId];
        setTimeout( () => 
        //Define the meta title using profile data
        this.titleService.setTitle('The best investment ideas from ' + response[this.userId].firstName + ' ' + response[this.userId].lastName), 0);
        setTimeout( () =>         
        //Define the meta tags using the user profile data
        this.metaService.addTags([
          {name: 'keywords', content: 'investing ideas, stock ideas, financial profile'},
          {name: 'description', content: response[this.userId].about},
          {name: 'robots', content: 'index, follow'}
        ]), 0);

Last Updated: 24 April 2020 local_offer Angular Universal directives; Leveraging the Angular State Transfer API; Code Sample (Github Repo); Conclusions to be server-side rendered and fill in some special meta tags (we will show how to do that). and use it to render the application by calling renderModuleFactory() . GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up update meta tag after API call does not work #553

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.

API call. While it works in your browser and you see your meta tags being updated as… Angular 6: SEO Meta tags for Twitter/Facebook loaded through API call. for that issue: Implementing Server Side Rendering thanks to Angular Universal. Calling the Wordpress API Rest to fetch data for the post I want to display 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:

Server-side rendering to the rescue: Angular Universal; Doing 404s the Smart usage of Web API; SPA Pagespeed: Optimize Angular loading There is also a moderate group that thinks (some) bots can execute Less robust alternative to the above solution is a dirty 404 fix with robots noindex meta tag,  I tried using the angular routing resolve to get the data for meta tags. But my meta tags doesnot add to the page source even the code excutes. Please help me in these.

It's much easier to build an Angular universal website or app today Therefor they parse the title and meta tags that can be found in the <head> tag. a batch of pages, which can also be done programmaticaly via their API. the data first and then call the same services to update the meta and title tags. Also can it update pages meta tags means can i see it when view the page source ? I assume you mean the updated meta-tags per route should be rendered server-side. Did you pull this off? Because with the @matiishyn solution, it updates meta-tags, but not on the server-side. If you guys know how to render the tags server-side, that'd be awesome!

[HELP WANTED] - angular universal update meta tags with dynamic content. Hey I'm having an issue I have this blogs page that brings in dynamic data, and  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.

Comments
  • This question appears to be off-topic because it is not within the bounds of discussion as described in the help center.
  • Can you please tell how this question is off topic and the questions I linked are not. AFAIK it is allowed to ask the same question if the other one does not have an accepted answer. @Will That's why you can't mark my question a dup. So how is this off topic. I'll edit if need but please let me know
  • You're needing to make an API call to get meta tag information when serving your index.html via Angular SSR?
  • Yes When I see the page source in an incognito window the meta tags are updated in view-source page but when I try to share to fb it isn't updated @Brandon
  • Gotcha. Are you modifying the meta tags after the initial render?
  • I don't think setTimeout awaits the rendering so it shouldn't fix it. Anyways I'll give it a try although it don't seem to help.
  • I agree... trust me I've been frustrated about this as well and I'm thinking my answer may fix it by accident. However, I checked today and Facebook is taking the meta data that was set by the API.
  • Which Angular version are you using might be fixed in the latest version. I asked this question back in v6.
  • Version 8 with angular universal
  • Just following up. I've gotten multiple pages to work now with API data used to set the meta tags. I've also been able to do two different API calls and addTags twice and it still updates the page source. Really curious what issues you may be happening in case I'm missing something
  • Now press ctrl+u to view page source. You and the crawler won't see the updated meta tags.
  • The issue is with API calls they take time to update but crawlers don't wait for response
  • Please add code and data as text (using code formatting), not images. Images: A) don't allow us to copy-&-paste the code/errors/data for testing; B) don't permit searching based on the code/error/data contents; and many more reasons. In general, code/errors/data in text format >>>> code/errors/data as an image >> nothing. Images should only be used, in addition to text in code format, if having the image adds something significant that is not conveyed by just the text code/error/data.