Estoy trabajando en un sitio que está hecho con Node, vue y Nuxt, este sitio trata con productos múltiples y dinámicos, los productos tienen una tarjeta principal que se procesa sobre la marcha y se muestra a los clientes, estoy tratando de configurar el encabezado html de Open Graph meta etiquetas dinámicamente para compartir en Whatsapp, Linkedin, Facebook y mostrar la vista previa cuando se comparte el enlace, pero no tengo éxito.
Puse el meta en el área del componente vue "exportar por defecto" así:
head () { const title = (MasterKeys.ENV !== 'production' ? '[' + MasterKeys.ENV.toUpperCase() + '] ' : '') + '%s - ' + (process.env.npm_package_name || '') + this.title return { titleTemplate: title, meta: [ { hid: 'og:site-name', property: 'og:site_name', content: process.env.npm_package_name }, { hid: 'og-url', property: 'og:url', content: document.location.href }, { hid: 'og-type', property: 'og:type', content: 'website' }, { hid: 'og-title', property: 'og:title', content: title }, { hid: 'og-description', property: 'og:description', content: this.description }, { hid: 'og-image', property: 'og:image', content: this.image }, { hid: 'twitter-card', name: 'twitter:card', content: 'summary_large_image' } ] } },El sitio está configurado con la opción ssr desactivada en nuxt.config.js :
export default { ssr: false, . . . .Puedo resumir todo lo que investigué:
En una solicitud de cliente, Vue envía al cliente HTML mínimo y Javascript para ejecutar el resto de la lógica.
El renderizador Open-Graph del cliente (Twitter, Facebook, etc.) no tiene un motor Javascript que procese la lógica enviada por nuxt en formato Javascript.
Hay un formulario en Nuxt - Vue para lograr eso?