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