Back

Technologies:

javascriptjavascript
typescripttypescript
avatar
Tolerim
22 days ago

In Angular, why do meta tags update dynamically and appear in local view source but not in live view source?

As an Angular developer, I am facing an issue with dynamic meta tags. These tags are updating dynamically and showing correctly in the local view source but not in the live view source. I am looking for a solution to display them on the server as well. Please suggest if there is anything to be done on the server. I also have a code snippet below which is updating the meta tags. 
 getSinglePostInfo(id){
    this.postService.getSinglePostInfo(id).subscribe((data) => {
      console.log(data,  'oppa')
      setTimeout(()=> {
        this.metaTagService.updateTag({ property: 'og:title', content:  data['data'].description  });
        this.metaTagService.updateTag({ property: 'og:url', content: ' this.url + data['data'].id });
        this.metaTagService.updateTag( { property: 'og:description', content:data['data'].description });
      },3000)
     
    })
  }
I have already tried updating the meta tags inside the API call by fetching only the required data, and it is working fine locally. However, the dynamic meta tags are not visible on the live URL. Any assistance would be greatly appreciated.
Answers(2)
avatar
Vogi
22 days ago
Verified Answer
I understand that you are facing an issue with dynamic meta tags not updating on the server. I found a few solutions that might help you. Firstly, Angular is not served from the server-side, which is why you can't see any meta tags via page view source. Anything that is being changed after page loads won't be shown in page view source. If you want to check the updated meta tags, you need to inspect the element and check there. Secondly, if you want server-side rendering, then you can go for Angular Universal. Angular Universal enables server-side rendering, which is useful for SEO purposes. Then SEO meta tags will work. Lastly, make sure that the dynamic (per page) content is available server-side and not just client-side. A quick trick to easily check the server-side HTML is to prepend view-source: to the URL in Chrome or right-click > view page source. I hope this helps! Let me know if you have any other questions.

Sources

adding/updating meta tags not working in angular5Angular 6 : Dynamic Meta tag is not working when sharing page on ...dynamically update og meta tags in angular - Stack Overflowmeta tags are not updating on api calling with api response data in angularAngular universal not updating dynamic meta tags and content received ...
avatar
Tolerim
22 days ago
It seems like the issue may be related to how Angular is rendering the meta tags on the server. One solution could be to use Angular Universal to generate the HTML on the server-side with the updated meta tags. Another solution could be to use a third-party library like prerender.io to generate static HTML files with the updated meta tags for search engines and social media platforms to crawl.
;