i am currently working on implementing dynamic open graph meta tags using this code snippet
async asyncData({ app, route }) {
let postDetails = await app.$axios.get(`/api/v1/news/single/${route.params.id}`);
postDetails = postDetails.data.post;
return { postDetails };
},
head() {
return {
meta: [
{ hid: 'title', name: "title", content: this.postDetails.title },
{ hid: "description", name: "description", content: this.postDetails.body },
{ hid: "twitter:image", name: "twitter:image", content: this.postDetails.image },
{ hid: "twitter:card", name: "twitter:card", content: "summary_large_image" },
{ hid: "og:image",name: "og:image", content: this.postDetails.image },
{ hid: "og:image:secure_url", name: "og:image:secure_url", content: this.postDetails.image },
{ hid: "og:title", name: "og:title", content: this.postDetails.title },
{ hid: "og:description", name: "og:description", content: this.postDetails.body },
{ hid: "description", name: "description", content: this.postDetails.body },
{ hid: "og:url", name: "og:url", content: window.location.href }
]
};
},
After checking the logged postDetails in the asyncData function and seeing that the data is present, I noticed that when I open the page and inspect it, the meta tags are correctly updated. However, when I try to share the link on Facebook or view the HTML source code, only the default open graph tags are displayed. What could be the issue here? Any help would be greatly appreciated.