2

¡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&amp;width=720&amp;height=720&amp;scale=true&amp;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&amp;width=720&amp;height=720&amp;scale=true&amp;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.

1 respuesta 1

0

Tuve un problema igual y probando varias cosas encontré que agregándole la property

<meta property="og:image:secure_url"  content="https://pagina.com/imagen.jpg" />

debajo de og:image (ambas con la misma url) me devolvía la imagen. Además, si la imagen no es jpg, al parecer no la toma como válida.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.