¡Hola buenas! Estoy algo desesperado porque he de insertar los meta tags con los Open Graph y twitter:card.
El tema es que los tengo que meter mediante js por cómo está estructurado el proyecto.
Hay un componente de React llamado meta que es un componente que coge valores y te genera las etiquetas.
Tengo hecha una función que lo que hace es meter dichas etiquetas. Os dejo trozo de código.
const ogType = document.createElement('meta');
ogType.setAttribute('property', 'og:type');
ogType.setAttribute('content', 'article');
Repito el mismo código por cada meta tag que necesito y luego los inserto de esta manera.
document.head.prepend(ogType); //También lo hice con .append
...
Al final del todo pues el buen hook de UseEffect para que se inserte bien:
React.useEffect(function () {
setSomething();
setAnotherSomething();
setMetaTags(); //-> Esa es mi función que crea e inserta los tags
}, []);
Al desplegar la página veo que dentro del campo head se llena correctamente con los meta tags.
<meta property="og:title" content="Blablabla blablabal blablabla">
<meta property="og:image" content="https://miWeb.com/imagen.jpg?format=WEBP&width=720&height=720&scale=true&is_admin=true">
<meta property="og:url" content="http://miWeb.com/este_articulo">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="blablabla blablabla">
<meta name="twitter:image" content="https://miWeb.com/imagen.jpg?format=WEBP&width=720&height=720&scale=true&is_admin=true">
<meta name="twitter:site" content="@miWeb">
Pues cuando lo pasamos al servidor de desarollo para probar mediante las Herramientas de depuracion de Twitter, Facebook y linkedIn:
Twitter: Card Validator Twitter
Facebook: Depurador de contenido compartido
linkedIn: Post Inspector
Me encuentro que en twitter me lanza esto:
INFO: Page fetched successfully
INFO: 5 metatags were found // ¿5? Como podéis haber visto arriba son bastantes más (mas otros que no he puesto aquí)
ERROR: No card found (Card error)
Facebook me lanza esto, Pero se previsualiza todo menos la imagen:
Propiedad inferida
La propiedad "og:image" debe proporcionarse de forma explícita, incluso si puede deducirse su valor a partir de otras etiquetas.
LinkedIn me lanza esto, pero también se previsualiza todo menos la imagen:
Add an og:image tag to the page to have control over the content's image on LinkedIn.
Como podéis ver, aparece claramente el tag de og:image y por alguna razón no lo está leyendo. Al igual que el twitter:card. Directamente dice que no existe cuando podéis ver que sí está.
¿Algún samaritano que pueda arrojarme algo de luz para solucionar esto? ¿Me falta algún meta tag por implementar y lo he obviado? ¿Qué requisitos exactos necesito para que se previsualice todo correctamente?
Un saludo.