4 min de lectura
Por qué tus vistas previas de enlaces se ven mal (y cómo arreglarlas)
Una vista previa vacía o incorrecta cuando pegas tu enlace en Slack, iMessage o X casi siempre se reduce a un puñado de etiquetas Open Graph. Aquí tienes la lista de comprobación.
Publicas una página, pegas el enlace en Slack y obtienes una URL pelada sin imagen o, peor aún, el título del mes pasado. Las vistas previas de enlaces las controlan las metaetiquetas de Open Graph y Twitter, y cuando faltan o están mal, todas las plataformas recurren a algo feo.
Las etiquetas que controlan la vista previa
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />Los culpables habituales
- og:image es una ruta relativa: tiene que ser una URL absoluta.
- La imagen es demasiado pequeña; apunta a 1200×630.
- Las etiquetas se inyectan en el cliente, así que los rastreadores nunca las ven.
- Una caché sirve la vista previa antigua: vuelve a rastrearla para actualizarla.
La herramienta de Imagen OG genera una tarjeta con tu marca para cada página y previsualiza cómo se despliega el enlace en Slack, iMessage, X y LinkedIn antes de publicar; después la skill conecta las etiquetas en tu repositorio para que se rendericen en el servidor.