Vista Previa de Open Graph: Cinco Tarjetas de Enlace
Un mismo conjunto de etiquetas og:, cinco resultados distintos. Facebook encabeza con el dominio, X descarta el nombre del sitio, LinkedIn tira la descripción entera, Slack lo sangra todo tras una barra de color y Google ignora tu og:image y muestra la meta descripción. Introduce título, descripción, URL e imagen una vez y revisa las cinco con el recorte propio de cada destino.
Cómo usar esta herramienta
Introduce la URL de la página
Lo que aparece en la tarjeta es el dominio: el protocolo, el prefijo www y la ruta se eliminan igual que los eliminan las plataformas. Pega la URL completa y la vista previa se encarga del resto.
Añade el título y la descripción
Son tu og:title y tu og:description. Cada destino aplica su propio presupuesto, así que el mismo título que cabe en X se corta en Facebook y se corta de otra forma en Google.
Suelta la og:image
Sube la imagen de 1200 por 630 que tengas puesta como og:image. La tarjeta la encaja a 1.91:1 exactamente igual que las plataformas, para que veas si el texto superpuesto sobrevive al recorte.
Recorre los destinos
Pasa por Facebook, X, LinkedIn, Slack y Google. Si un título solo tiene sentido completo, el destino que más te importa es justo el que lo corta con más dureza.
Exporta un PNG
Descarga la tarjeta como PNG a 2x para un ticket, una lista de control de calidad o una nota de traspaso que muestre cómo debe verse el enlace.
Preguntas frecuentes
¿Cuánto debe medir un og:title?
Apunta a 60 caracteres o menos. Facebook corta por ahí, X permite unos 70, LinkedIn es más generoso con unos 119 y el título de búsqueda de Google también se corta cerca de 60. Escribir para el más corto significa que el título sobrevive allá donde se comparta.
¿Qué tamaño debe tener una og:image?
1200 por 630 píxeles, una proporción de 1.91:1, es el tamaño que aceptan todos los destinos importantes. Mantén el texto importante lejos de los bordes: algunas superficies recortan a una forma más cuadrada en maquetas compactas, y un titular que llega al marco es lo primero que se pierde.
¿Por qué LinkedIn ignora mi descripción?
La tarjeta del feed de LinkedIn muestra la imagen, el título y el dominio, y descarta og:description por completo. Por eso la pestaña de LinkedIn aquí no tiene campo de descripción: si tu argumento vive en la descripción, lo que se comparte en LinkedIn no lleva nada de él y el título tiene que hacer el trabajo.
¿Va a leer las etiquetas de mi URL real?
No, y es deliberado. Leer una URL significaría enviarla a un servidor, lo que contradice cómo funciona el resto de este sitio. Pega los valores que tengas puestos, o que pienses poner, y la vista previa muestra lo que producirán una vez publicados.
¿Por qué el resultado de Google se ve distinto?
Google no usa Open Graph en los resultados de búsqueda. Construye el fragmento con el título de tu página y la meta descripción, y no muestra og:image, así que la pestaña de Google dibuja un fragmento de texto en vez de una tarjeta. Está incluida porque el mismo texto suele tener que servir para ambos.
También podrías necesitar
¿Algo no funciona? Informar de un error