My internal pages do not update the vue-meta with new page values when I visit them.
Code
app.js
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
refreshOnceOnNavigation: true
})
App.vue (main component)
export default {
metaInfo() {
return {
title: process.env.MIX_APP_NAME,
titleTemplate: `%s | ${process.env.MIX_APP_NAME}`,
meta: [
{ name: "robots", content: "index,follow" },
{
vmid: "description",
name: "description",
content:
"..........",
},
// and many more....
],
}
}
}
post.vue (internal component)
export default {
name: "singePost",
data() {
return {
post: "",
};
},
metaInfo() {
return {
title: this.post.name, // not receiving data
meta: [
{
vmid: "description",
name: "description",
content: this.post.metas[0].description, // not receiving data
},
// others......
],
}
},
mounted() {
this.getPost();
},
methods: {
getPost() {
axios
.get("/api/articles/" + this.$route.params.slug, {
headers: {
Authorization: localStorage.getItem("access_token"),
},
})
.then((response) => {
this.post = response.data.data;
})
.catch((error) => {
//....
});
},
},
Any idea?
Update
I have noticed that my vue-meta updates but with a delay. This delayed update is causing issues for social network websites and SEO checkers to retrieve my URLs accurately.
Clarify
- Vue-meta gets updated but late
- The delayed update hampers proper presentation of SEO information when links are shared and validated.
My full meta tags code
metaInfo() {
return {
title: this.post.name,
meta: [
{
vmid: "keyword",
name: "keyword",
content: this.post.metas[0].tags,
},
{
vmid: "description",
name: "description",
content: this.post.metas[0].description,
},
// Open Graph / Facebook
{ vmid: "og:type", name: "og:type", content: "website" },
{
vmid: "og:url",
name: "og:url",
content: process.env.MIX_APP_URL + this.$router.currentRoute.fullPath,
},
{
vmid: "og:site_name",
name: "og:site_name",
content: `"${process.env.MIX_APP_NAME}"`,
},
{
vmid: "og:title",
name: "og:title",
content: this.post.name,
},
{
vmid: "og:description",
name: "og:description",
content: this.post.metas[0].description,
},
{
vmid: "og:image",
name: "og:image",
content: this.post.imagebig,
},
// Twitter
{
vmid: "twitter:card",
name: "twitter:card",
content: "summary",
},
{
vmid: "twitter:author",
name: "twitter:author",
content: "@xxxxxx",
},
{
vmid: "twitter:site",
name: "twitter:site",
content: "@xxxxxx",
},
{
vmid: "twitter:creator",
name: "twitter:creator",
content: "@xxxxxx",
},
{
vmid: "twitter:url",
name: "twitter:url",
content: process.env.MIX_APP_URL + this.$router.currentRoute.fullPath,
},
{
vmid: "twitter:title",
name: "twitter:title",
content: this.post.name,
},
{
vmid: "twitter:description",
name: "twitter:description",
content: this.post.metas[0].description,
},
{
vmid: "twitter:image",
name: "twitter:image",
content: this.post.imagebig,
},
],
};
},
Extra
I recently read an article stating that due to vue-meta (Vue in general) loading based on JavaScript, social media crawlers cannot cache the information. Hence, the link details cannot be displayed accurately when shared on platforms like FB or Twitter.
The suggested solution was to use Nuxt and return metadata server-side.
Questions
- I am uncertain about the accuracy of point #1 above, but it is a possibility.
- Although my app does not primarily use Nuxt, I have installed the npm package. It might be worth trying out as a potential solution (however, since I am unfamiliar with Nuxt, additional details in your answer would be very helpful).