Vista previa en redes sociales
Lo que ve alguien cuando tu dirección cae en un chat, un muro o un mensaje. Un enlace sin imagen es una caja gris, y una caja gris es la diferencia entre que lo pulsen y que pase de largo — normalmente por una etiqueta que nadie sabía que había que poner.
Qué comprueba
- Las etiquetas Open Graph y de tarjeta de Twitter de la página, y cuál usaría de verdad cada plataforma.
- Qué está tirando de un sustituto: una página sin og:title no es una página sin título, y esa diferencia decide si hay algo que arreglar.
- Problemas de imagen que impiden que se dibuje la vista previa: una dirección relativa que ninguna plataforma va a resolver, una insegura, o ninguna.
- Títulos y descripciones lo bastante largos como para que se corten, y falta de texto alternativo en la imagen de vista previa.
Lo que esto no puede decirte
- Las tarjetas de aquí son ilustraciones. Cada plataforma lo dibuja distinto y lo cambia sin avisar, así que tómalas como lo que dicen las etiquetas y no como una foto del resultado.
- Las plataformas guardan copia durante mucho tiempo. Una página que arreglaste esta mañana puede seguir enseñando la tarjeta de ayer durante días, y casi todas tienen su propia herramienta para refrescarla.
- Leemos las etiquetas y enseñamos la imagen por su dirección sin pedirla, así que no podemos decirte si la imagen carga, qué tamaño tiene ni si se recorta mal.
Preguntas que nos hacen
¿Por qué mi enlace no sale con imagen?
Casi siempre por una de tres cosas: no hay etiqueta og:image, la dirección de la imagen está escrita relativa a la página en vez de entera, o la imagen se sirve por http simple en una página segura. La primera es la más común y la segunda la más frustrante, porque en el código parece correcta y ninguna plataforma la va a resolver.
He arreglado las etiquetas y la vista previa no cambia.
Eso es la caché, no un error. Facebook, LinkedIn y X guardan cada uno su copia de lo que decía tu página la última vez que la miraron, a veces durante días. Todos publican una herramienta para volver a leer una página cuando se lo pides, y esa es la forma de forzar la tarjeta nueva.
¿Necesito etiquetas Open Graph y de Twitter?
Normalmente no. X recurre a Open Graph cuando faltan las suyas, así que un juego completo de etiquetas og: cubre casi todo. La única de Twitter que merece la pena añadir es twitter:card, que decide si sales con miniatura pequeña o con imagen grande.