0

Hello i want to using share facebook and other social media to share the meta tags from my website's url https://rovespier.com/media?msg_id=644.

My webiste is Ionic 5 angular 12 and capacitor 5

on my index.html i have this

<title>Rovespier</title>
<meta name="description" content="Everyone is an Artist">
<meta property="og:type" content="website" />
<meta property="og:image" content="https://rovespier.com/assets/img/logo2.png">

and on the media page component which the url is from i have this

@Component({
    selector: 'app-media',
    templateUrl: './media.page.html',
    styleUrls: ['./media.page.scss'],
    providers: [SocialProvider]
  })
  export class MediaPage implements OnInit {
  
    mediaDetails: any = {};
    mediaDetail: any = {};
    msg_id: any;
    constructor(
      public userData: UserData,
      private meta: Meta,
      public title: Title,
      public router: Router,
      private activateRoute: ActivatedRoute
    ) {
      this.activateRoute.queryParams.subscribe(params => {
        this.msg_id = params['msg_id'];
        // Do something with the msgId value
      });
  
      if (this.router.getCurrentNavigation().extras.state) {
        this.mediaDetails = this.router.getCurrentNavigation().extras.state.media;
      }
      this.peopleViewedTheMedia();
      this.mediaEditorsSet();
      this.peopleGivePointsSet();
      this.getActicityMedia();
      this.allMediaSet();
      this.allArtistsSet();
      this.flowListSet();
      this.mediaListSet();
      this.friendsListSet();
      this.mediaAdsSet();
      this.events.subscribe('lang_changed', () => {
        this.initialiseTranslation();
      });
    }
  
    ngOnInit() {
      this.activateRoute.queryParams.subscribe((params) => {
        this.msg_id = params['msg_id'];
        if (this.router.getCurrentNavigation().extras.state) {
          this.mediaDetail = this.router.getCurrentNavigation().extras.state.media;
        }
      });
      
      if (this.msg_id) {
        this.userData.mediaDetail(this.msg_id).pipe(
          map((data: any) => {
            if (data.success) {
              this.mediaDetail = data.mediaDetails;
              this.goMedia(this.mediaDetail);
              this.setMetaTags();
            }
          })
        ).subscribe()
        this.mediaDetailsSet();
      }
  
      this.type = +this.activateRoute.snapshot.paramMap.get('typeData');
      
      this.initialiseTranslation();
    
    }
  
    mediaDetailsSet() {
      this.userData
        .mediaDetail(this.msg_id)
        .pipe(
          map((data: any) => {
            if (data.success) {
              this.mediaDetail = data.mediaDetails;
            } else {
              (error: any) => {
                console.log(error);
              };
            }
          })
        )
        .subscribe(() => {
          this.setMetaTags();
        });
    }
  
    goMedia(media) {
      this.mediaDetail = media;
      this.userData
        .mediaViewed(media)
        .pipe(
          map((data: any) => {
            if (data.success) {
              const navigationExtras: NavigationExtras = {
                state: {
                  media: media
                }
              };
             
              if (this.user.username === 'guest') {
                this.callReload(media);
                this.section = 'activity';
              } else {
                // this.router.navigateByUrl('/app/tablinks/home/media')one minu
                // this.router.navigate(['app/tablinks/home/media/'], navigationExtras);
                this.callReload(media);
                this.section = 'activity';
              }
            }
          })
        )
        .subscribe();
    }
  
    setMetaTags() {
        const timestamp = new Date().getTime(); // current timestamp
        const image_path = this.mediaDetail.image_path + '?t=' + timestamp; // append timestamp
        const title = this.mediaDetail.title ? this.mediaDetail.title : 'Rovespier - The Media Network';
        const description = this.mediaDetail.description ? this.mediaDetail.description : 'Download the App to see more Media';
      
        this.meta.updateTag({ property: 'og:url', content: 'https://rovespier.com/media?msg_id=' + this.msg_id });
        this.meta.updateTag({ property: 'og:type', content: 'website' });
        this.meta.updateTag({ property: 'og:title', content: title });
        this.meta.updateTag({ property: 'og:description', content: description });
        this.meta.updateTag({ property: 'og:image', content: image_path });
        this.meta.updateTag({ property: 'og:image:secure_url', content: image_path });
        this.meta.updateTag({ property: 'fb:app_id', content: '395244542321' });
      }

on the inspector of the https://rovespier.com/media?msg_id=644 i am getting the meta tags just fine but on the facebook debugger i am getting

Warnings That Should Be Fixed

    Missing Properties
    The following required properties are missing: og:url, og:type, og:title, og:description

When and how we last scraped the URL
Time Scraped    
3 seconds ago
Response Code   200
Fetched URL https://rovespier.com/media?msg_id=644
Canonical URL   
https://rovespier.com/media?msg_id=644
0 likes, shares and comments (More Info)
Link Preview    
Based on the raw tags, we constructed the following Open Graph properties
fb:app_id   395244831152391
og:url  https://rovespier.com/media?msg_id=644
og:title    Rovespier
og:image    https://rovespier.com/assets/img/logo2.png
og:description  Everyone is an Artist
og:updated_time 1678963149

The problem is that on the head section the meta tags are shown but not on the facebook debugger. I tried for the last 4 days and scrapped again and again but still the same

6
  • Facebook does not care for any client-side JavaScript when scraping URLs for OG meta tags, only what is contained in the initial HTML code the server returned for the requested URL, counts. You need a pre-rendering solution, if you want this to work.
    – CBroe
    Mar 17 at 6:56
  • can you send me a link?
    – SimonIoa
    Mar 17 at 9:28
  • Ah sorry you mean everything that i have to do i have to do it in the index.html right?
    – SimonIoa
    Mar 17 at 9:33
  • If you have any way to make it dynamic at this point, so that what the server returns is the correct set of meta tags for the actually requested URL ...? I don't know.
    – CBroe
    Mar 17 at 10:01
  • I don't know if You can do that with Angular. I post it to see if anyone did it in Angular and how
    – SimonIoa
    Mar 17 at 21:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy