Verificador de Open Graph
Pega una URL pública y obtendremos su og:title, og:image, og:description y la tarjeta de Twitter, tal como la mostrarán Slack, LinkedIn y X.
Cómo arreglar una previsualización que no aparece
- 01
Confirma que las etiquetas existen en la URL que se comparte
No en la página de inicio, ni en la versión que hay detrás de una redirección: en la URL exacta que la gente pega. Las previsualizaciones se leen de la respuesta final, así que una etiqueta que solo existe en la página previa a la redirección es como si no existiera.
- 02
Haz que la imagen sea totalmente accesible
og:image necesita una URL https completa que cualquier desconocido pueda obtener: sin ruta relativa, sin inicio de sesión, sin protección antihotlinking, sin redirección. Si no puedes abrirla en una ventana privada, la plataforma tampoco podrá.
- 03
Dale la forma que esperan las plataformas
1200 por 630 píxeles es la opción segura por defecto, que equivale aproximadamente a 1,91:1. Mantente por debajo de unos pocos megabytes, usa JPEG o PNG, y deja cualquier texto bien dentro del marco, porque cada plataforma recorta bordes distintos.
- 04
Vuelve a rastrear, no te limites a reintentar
Cada red guarda en caché lo que obtuvo la primera vez, incluido un fallo. Después de una corrección, usa el depurador propio de esa plataforma para forzar una nueva obtención de datos; si no, estás mirando un error en caché y cambiando cosas que nunca estuvieron rotas.
Qué hace cada etiqueta
og:title y og:description
El titular y el subtexto de la tarjeta. Sustituyen al título de la página y a la meta description a la hora de compartir, lo cual es útil: la redacción que funciona en un resultado de búsqueda casi nunca es la que funciona en un feed.
Etiqueta og:image
La que más se nota y la que más falla, casi siempre porque es inaccesible y no porque esté mal puesta. Indica ancho y alto explícitos siempre que puedas: algunas plataformas montan la tarjeta antes de que termine de descargarse la imagen.
Etiqueta og:url
La dirección canónica de lo que se comparte. Consolida los recuentos de interacción cuando la misma página circula con distintos parámetros de seguimiento, así que debería ser la URL limpia, no la etiquetada.
Etiqueta twitter:card
Elige entre una miniatura pequeña y una imagen grande. X recurre a las etiquetas de Open Graph para todo lo demás, así que esta suele ser la única etiqueta twitter: que merece la pena añadir.
Preguntas frecuentes sobre previsualizaciones de enlaces
¿Por qué mi enlace muestra una previsualización en blanco?
Nueve de cada diez veces la imagen es inaccesible: una ruta relativa, un bucket privado o una redirección que el rastreador no sigue. El resto son páginas que generan sus etiquetas con JavaScript, algo que la mayoría de rastreadores de previsualización nunca ejecutan.
¿Cómo elimino una previsualización en caché?
A través del depurador propio de cada plataforma, porque cada una mantiene su propia caché: el Sharing Debugger de Facebook, el Post Inspector de LinkedIn, el validador de tarjetas de X. No existe una purga universal, y volver a compartir el enlace sin más no sirve.
¿Necesito etiquetas twitter: si ya tengo etiquetas de Open Graph?
Solo twitter:card, y solo si quieres el diseño de imagen grande. Los títulos, las descripciones y las imágenes recurren siempre a sus equivalentes og:.
¿La previsualización afecta al SEO?
No directamente: las etiquetas de Open Graph no son señales de posicionamiento. Afectan a si alguien hace clic en el enlace cuando se comparte, que es una cifra distinta y a menudo mayor.
¿Por qué el mismo enlace se ve distinto en cada plataforma?
Distintas proporciones de recorte, distintas longitudes de descripción y distintas cachés con distintas antigüedades. Diseña la imagen para que se siga entendiendo aunque se corten los bordes y la descripción quede truncada.