J'essaye de configurer des balises meta de graphique ouvert dynamique en utilisant le code suivant

    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 }
            ]
        };
    },

J'ai connecté postDetails et les données sont là dans la fonction asyncData. Maintenant, lorsque j'ouvre la page et inspecte les balises méta sont parfaitement modifiées, mais lorsque j'ouvre Facebook et que j'y colle ou que j'appuie sur ctrl + u, il ne montre que ses balises graphiques ouvertes par défaut. Qu'est-ce que je fais de mal ici? Puis-je avoir une aide s'il vous plait?

0
Areg 27 févr. 2021 à 17:37

1 réponse

Meilleure réponse

J'ai essayé des tonnes de choses, malheureusement, cela n'a pas fonctionné. J'ai donc trouvé un moyen de «pirater» les balises meta en les injectant simplement dans l'objet app, dans asyncData. Et maintenant cela fonctionne comme un charme, je ne sais pas quel était le problème, j'ai même essayé d'installer manuellement vue-meta.

async asyncData({ app, route }) {
        let postDetails = await app.$axios.get(`/api/v1/news/single/${route.params.id}`);
        postDetails = postDetails.data.post;
        const mutation = app.head.meta.map(i => {
            if(i && i.hid){
                if(i.hid === 'title'){
                    i.content = postDetails.title
                }
                if(i.hid === 'description'){
                    i.content = postDetails.body;
                }
                if(i.hid === 'twitter:image'){
                    i.content = postDetails.image
                }
                if(i.hid === 'twitter:card'){
                    i.content = 'summary_large_image'
                }
                if(i.hid === 'og:image'){
                    i.content = postDetails.image
                }
                if(i.hid === 'og:image:secure_url'){
                    i.content = postDetails.title;
                }
                if(i.hid === 'og:title'){
                    i.content = postDetails.title
                }
                if(i.hid === 'og:description'){
                    i.content = postDetails.body
                }
                if(i.hid === 'description'){
                    i.content = postDetails.body
                }
                if(i.hid === 'og:url'){
                    i.content = route.fullPath
                }
            }
            return i;
        });
      app.head.meta = mutation;
      return { postDetails };
},
0
Areg 8 mars 2021 à 12:56