When I visit my internal pages vue-meta will not get updated by new page values.
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
By the time I published this question it was about not getting updated then after doing some researches I've and playing around with my code I've realized that my vue-meta gets updated but, late and it causes social network websites and SEO checkers not be able to retrieve my URLs correctly.
Clarify
- Vue-meta gets update but late
- This late update causes SEO not be presented by the time link being shared and validate.
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
Recently I've read an article that because vue-meta (Vue in general) loads based on JavaScript Social media crawlers will not cache them therefore it's impossible to see my link details when I share them in FB or Twitter etc.
The suggested solution there was to use Nuxt and return meta data server side.
Questions
- I'm not sure how much #1 above is correct but its a possibility
- My app in general doesn't use Nuxt but I just installed npm package of it so it might be worth to try (as I mentioned I never used Nuxt so if that's the case of your helping solution I would be appreciate if you include a bit extra details into your answers about that).
UPDATEpart and I've read the article but I didn't get how I'm suppose to return for instance my post meta tags (as my of my code above) there was nothing about returning actual data from database. – Breland