skip to Main Content

My component uses setTitle and updateTag to update the title and tags. Remaining data on the screen is updated via template binding to an object obtained via a host request. Google search console shows the correct screen data but the default title and meta tags.

Is there a way to address this issue without Universal?

constructor(private dataService: DataService, private route: ActivatedRoute, private meta: Meta,
  private title: Title, private canonicalService: CanonicalService) {}

ngOnInit() {
  this.canonicalService.setCanonicalURL();
  this.route.params.subscribe(
    params => {
      const id = +params['id'];
      this.getLicense(id);
    }
  );
  let list = sessionStorage.getItem('liclist');
  if (list) {
    this.licList = JSON.parse(list);
  }
  this.dataService.getEnum().subscribe((data: Enum[]) => {
    this.enums = data;
  });
}

getLicense(id) {
  this.dataService.getLicense(id).subscribe((data: License) => {
    this.license = data;
    this.licListPtr = this.licList.findIndex(x => x === id);
    this.meta.updateTag({
      name: "keywords",
      content: !!this.license.keywords ? this.license.keywords.toLowerCase().replace("~", ", ") : ' '
    });
    let desc = this.license.licDesc;
    if (!!this.license.occs) {
      this.license.occs.forEach(o => {
        desc += `nOccupation ${o.occCode} ${o.occTitle.toLowerCase()}`;
      });
      this.meta.updateTag({
        name: "description",
        content: desc
      });
      this.title.setTitle(`Licensing for ${this.license.licTitle}`);
    }

  })
}

2

Answers


  1. I do not think it’s currently possible without SSR like Angular Universal.

    I’ve had this same problem with a few projects. Your meta tags are indeed being updated, but the web crawler likely is only looking at them once. I’ve noticed the same limitation on crawlers for certain social networks as well. I think as SPAs become more prevalent, we might see crawlers start to adapt.

    Login or Signup to reply.
  2. Check out @angular/platform-browser.

    setTitle('blah blah') with a constructor:
      constructor(private titleService: Title) {
        const title = 'MyPage-Title'; // set from the server
        this.titleService.setTitle(title);
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search