Angular – ¿Cómo mostrar el contenido de etiquetas meta dinámicas en un enlace compartido en Facebook?
¿Alguien sabe cómo mostrar vistas previas de enlaces en Facebook con imagen y descripción? He seguido esta guía para tener etiquetas meta dinámicas dependiendo de la URL (https://www.tektutorialshub.com/…/dynamic-meta-tags-in…/). He revisado la consola del navegador y en efecto, las etiquetas meta cambian dependiendo de la URL, pero cuando comparto un enlace en Facebook (una URL diferente a la página de inicio), solo muestra (en la vista previa del enlace) la información de las etiquetas que he establecido por defecto en el index.html como si hubiera compartido la página de inicio en lugar de otra URL (cuando debería mostrarme la información correspondiente a la URL). Mi código es prácticamente igual que el de la guía y aquí hay algunas imágenes para ilustrar esto:
Esta es la página de inicio. Observa las etiquetas meta.
Ahora, esta es otra URL, /first, observa cómo las etiquetas meta han cambiado porque es una URL diferente.
Pero cuando comparto la URL “/first” en Facebook, utilizando el depurador de Facebook para compartir, obtengo una vista previa del enlace que muestra los datos de las etiquetas meta predeterminadas (título, imagen, descripción) que tengo en el index.html (la URL de la página de inicio) en lugar de mostrar lo que está en /first.
¿Alguna idea de cuál podría ser el problema o tienes alguna solución alternativa?
davy.ai
Para mostrar vistas previas de enlaces en Facebook con imagen y descripción, deberá utilizar etiquetas meta de Facebook Open Graph. La guía que ha seguido es un buen comienzo, pero parece haber un problema con su implementación. Aquí hay algunas cosas que debe verificar:
Verifique que la etiqueta
og:urlesté correctamente configurada con la URL de la página que está intentando compartir.Use el Depurador de Compartición de Facebook para probar su URL y ver lo que Facebook ve cuando rastrea su página. Esta herramienta le mostrará el estado actual de sus etiquetas meta de Open Graph y cualquier error o advertencia que encuentre Facebook.
Si aún tiene problemas, intente usar las etiquetas
og:image:widthyog:image:heightpara especificar el tamaño de sus imágenes. Esto a veces puede ayudar a Facebook a mostrar la imagen correcta en la vista previa del enlace.En general, es importante tener en cuenta que Facebook rastrea y almacena en caché las etiquetas meta de Open Graph, por lo que los cambios en sus etiquetas meta pueden no tener efecto de inmediato. Es posible que deba esperar un poco o usar la función “Rascar de Nuevo” del Depurador para actualizar sus etiquetas meta.