Comment faire des images Open Graph dans un SPA JS Vue?

Question

J'essaie d'inclure une image graphique ouverte dans mon application VueJS Single Page.

https://developers.facebook.com/tools/debug/

me Rendements cet aperçu du lien:

Je pense que je peux bloquer les balises meta graphique ouvert dans le haut de la page si je veux tous les itinéraires de retourner le même image, mais j'aimerais que différentes pages montrent des images différentes.

J'ai essayé https://github.com/declandewet/vue-meta et https://github.com/ktquez/vue-head, mais ceux-ci ne semblent pas aider, sans doute parce qu'ils injectent les balises META via JS après le chargement de la page.

Existe-t-il un autre moyen que le préchargement avec Nuxt ou Vue SSR?

Answer 1

prerender-spa-plugin en conjonction avec vue-tête/vue-meta devrait faire l'affaire pour vous! Tant que vous connaissez toutes vos routes à l'avance, cela rendra les fichiers index.html que vous pouvez servir pour les bots.

Si vous avez un contenu dynamique, vous devrez utiliser captureAfterDocumentEvent ou captureAfterTime afin de capturer le contenu asynchrone a été rendu.

Si vous avez besoin de quelque chose de plus robuste, Vuejs SSR pourrait être une meilleure option.