Angular 4: actualiza las metaetiquetas dinámicamente para Facebook (gráfico abierto)

¿Cómo agregamos / actualizamos metaetiquetas dinámicamente para que sean seleccionadas por el diálogo de compartir Facebook / Whatsapp?

Actualicé mi aplicación angular 2 a angular 4 para usar el servicio Meta para agregar / actualizar metaetiquetas dinámicamente una vez que obtenemos los datos en el componente de la API.

Hasta ahora en mi componente, tengo

this.metaService.updateTag({ property: 'og:title', content: pageTitle });
this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });

Estoy usando updateTag porque ya he agregado etiquetas estáticas con valores predeterminados. Este código actualiza con éxito los valores de las metaetiquetas cuando los inspecciono.

Sé que tiene sentido que las herramientas de depuración de Facebook / Whatsapp no ejecuten javascript, por lo que probablemente nunca se ejecutarán en su entorno.

Estoy usandohttps://developers.facebook.com/tools/debug/ y siempre recoge los valores de etiqueta predeterminados, lo que tiene sentido.

Mi pregunta es, ¿cuál es el camino para que Facebook / Whatsapp recoja los valores de etiqueta actualizados dinámicamente? Estoy usando Angular 4 y cargando todos los datos a través de llamadas API, por lo que no es posible obtener ningún tipo de datos antes de que se cargue la página y se ejecute el script.

Respuestas a la pregunta(4)

Su respuesta a la pregunta