Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Angular 6 : Dynamic Meta tag is not working when sharing page on facebook using og:description tag

I want to set dynamic information in meta tag using API call. When I check by inspect, it will show updated data but when I share the link on Facebook it will not reflect updated data.

Index.html

  <meta name="description" content="Create and share your biography">
  <meta name="og:url" content="window.location.href"> 
  <meta name="og:title" content="TEACHERLIFE -SPANISH LESSONS">
  <meta name="og:description" content="So I’m in my classroo...">

In component.ts :

import { Meta, Title } from '@angular/platform-browser';
 constructor(private metaService: MetaService,
    private meta: Meta,) {}
  ngOnInit() {
this.meta.updateTag( {name: 'og:description', content:"testdescription"});
}
Tags:

3

Answers


  1. 0 
    import { Meta } from '@angular/platform-browser';

constructor(private meta: Meta) {}

ngOnInit() {
  this.meta.updateTag(
     {name: 'twitter:title', content:'Front-end Web Development'},
     `name='twitter:title'`
   );
}
    Login or Signup to reply.
  2. 0

    Facebook Share doesnot parse the javascript, so it only intercept the static metadata on index.html page.

    Please refer to full discussion in github community.

    https://github.com/jvandemo/angular-update-meta/issues/13

    Login or Signup to reply.
  3. 0

    By default, angular does not use server side rendering. For SEO purpose, you need to add Angular Universal in your project so that server side rendering gets enabled. Then SEO meta tags will work.

    https://angular.io/guide/universal

    Below is the YouTube tutorial which I came across which explains the concept.
    https://www.youtube.com/watch?v=lncsmB5yfzE

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search