Requisito:

• Para compartir/publicar el progreso de la aplicación en las redes sociales (Twitter, Facebook)

Criterios de aceptación:

• Cuando el usuario comparte/publica el enlace, debe obtener una vista previa de la imagen del progreso en la publicación de las redes sociales.

Herramientas y Tecnologías:

• Spring Boot REST para servicios
• React Js para desarrollo front-end

Descripción:

Tengo una aplicación de reacción que rastrea el progreso de las metas y objetivos de los usuarios. El progreso se muestra en un componente de tarjeta con barra de progreso. Necesito compartir este componente de progreso en las redes sociales como Twitter, Facebook.

Me gustaría saber cómo generar enlaces de vista previa para poder compartir ese enlace en Twitter, que a su vez debería mostrar el componente de gráfico de barras de progreso como una vista de imagen/miniatura en la plataforma de redes sociales.

Lo que he probado hasta ahora:

Creé una API que extrae las metaetiquetas cuando pasamos el enlace de la URL. La imagen de referencia está abajo,

Realmente no sé cómo agregar etiquetas meta a mi componente de reacción. He investigado sobre el paquete react-helmet npm, pero no tengo idea de cómo generar una imagen a partir de react-component, hacer la imagen como un enlace y crear una URL de enlace de vista previa para eso, para que pueda compartirse con redes sociales.

El componente que me gustaría publicar en las redes sociales es,

Estuve trabajando en ello durante los últimos días, no tengo ninguna información útil hasta ahora, ya que soy nuevo en la tecnología de front-end de reacción.

Agradecería mucho que alguno de ustedes pudiera ayudarme en este sentido.

Muchas gracias por su tiempo.

Nota : Me disculpo si mi publicación no cumple con las reglas y regulaciones de Stackoverflow, estoy abierto a correcciones. Gracias.