Search code examples
angularangular7meta-tags

Meta tags angular 7


I want to share link in messengers like whatsapp telegram , I added to my angular meta tags, but when I put link to messenger it doesnt work what I expected. Here is my code:

constructor(
    private titleService: Title,
    private meta: Meta,
    private service: DataService,
    private route: ActivatedRoute,
    ) {
    this.meta.addTags([
        {name: 'Search', content: 'Ho.com'},
        { property: 'og:image', content: 'http://ho.com/assets/img/header/nav-logo-default.jpg' }
      ], true); 
    this.showLoader=true;
console.log("meta TagS")
        console.log("Id: "+this.route.snapshot.paramMap.get('id'));
        var id= this.route.snapshot.paramMap.get('id');

        this.service.getDetails(+id).subscribe(
              data => {
                  console.log("detail:"+data);

                    this.home_data = data;
           console.log("home_Data:"+this.home_data);
        this.home_price =
            '$' +
            this.home_data.ownerPrice.toLocaleString(undefined, {
                minimumFractionDigits: 0,
                maximumFractionDigits: 2,
            })
        this.owner_phone = this.home_data.phone.replace(
            /(\d\d\d\d\d)(\d\d\d)(\d\d)(\d\d)/,
            '($1) $2-$3-$4'
        )
        this.meta.addTags([
            {name: 'Title', content: this.home_data.Title},
            {name: 'description', content: this.home_data.description},
            {name: 'Price', content: this.home_data.ownerPrice},
            {name: 'Search', content: 'Ho.com'},
           {property:'og:image',content:this.home_data.buildingPhotos[0] }
          ], true); 
                this.showLoader=false; },
              error => {;}
            ); }}

I want my link shows in messenger like instagram link

enter image description here


Solution

  • Solution is Server-side Rendering (SSR) Angular.