Vista previa de Open Graph
Pega el <head> de tu página (o solo sus metaetiquetas) y mira cómo se verá tu enlace al compartirlo en Facebook, X, LinkedIn y apps de chat. El comprobador señala etiquetas que faltan, títulos demasiado largos y tamaños de imagen incorrectos, y puedes copiar un conjunto limpio de etiquetas.
Última actualización:
🔒 Las vistas previas se crean solo a partir de las etiquetas que pegas o escribes. Esta herramienta no lee tu URL desde un servidor y nada sale de tu navegador.
Vistas previas de enlaces
X · summary_large_image en uso
X · summary en uso
Slack
Discord
Las vistas previas son maquetas neutras del diseño de tarjeta de cada plataforma. Las apps reales cambian sus diseños y pueden recortar las imágenes de otra forma.
Comprobador
Etiquetas generadas
Cómo usar Vista previa de Open Graph
- Pega tu HTML: abre tu página, mira el código fuente y copia la sección
<head>(o solo las metaetiquetas) en el cuadro. - O rellena los campos a mano. Los cambios se escriben automáticamente en el HTML pegado.
- Revisa las vistas previas de Facebook, X, LinkedIn y las apps de chat. Cambia de pestaña o míralas todas a la vez.
- Corrige los avisos del comprobador, como una og:image que falta, un título demasiado largo o una URL relativa.
- Pulsa Copiar en Etiquetas generadas y pega el resultado en el
<head>de tu página.
Las etiquetas Open Graph y de Twitter esenciales
Una buena vista previa de enlace solo necesita unas pocas etiquetas en el <head> de tu página. Las etiquetas Open Graph usan el atributo property; las de Twitter usan name.
| Etiqueta | Qué hace | Recomendación |
|---|---|---|
og:title | Titular de la tarjeta | Hasta 60 caracteres; no hace falta el nombre del sitio si og:site_name está definido |
og:description | Una o dos líneas bajo el título | 55–200 caracteres, escritos para personas, no para palabras clave |
og:image | La imagen de vista previa | URL https absoluta, 1200 × 630 px, JPG o PNG |
og:url | Dirección canónica de la página | URL absoluta, igual que tu enlace canónico |
og:type | Tipo de objeto | website para la mayoría de las páginas, article para entradas |
og:site_name | Marca mostrada encima o debajo del título | El nombre de tu sitio o empresa |
twitter:card | Diseño de la tarjeta en X | summary_large_image para una imagen grande, summary para una miniatura cuadrada |
Tamaños de imagen para cada plataforma
Una sola imagen de 1200 × 630 px (relación de aspecto 1.91:1) funciona casi en todas partes. Las plataformas recortan a su propia forma, así que mantén los logotipos y el texto dentro de la zona central.
| Plataforma | Forma de la tarjeta | Recomendado | Mínimo |
|---|---|---|---|
| Imagen grande 1.91:1 | 1200 × 630 px | 200 × 200 px (se muestra pequeña por debajo de 600 × 315) | |
| Tarjeta de imagen grande de X | 1.91:1 (2:1 también sirve) | 1200 × 630 px | 300 × 157 px |
| Tarjeta summary de X | Miniatura 1:1 | 600 × 600 px | 144 × 144 px |
| 1.91:1 | 1200 × 627 px | 200 × 200 px | |
| WhatsApp, iMessage | Miniatura cuadrada o ancha | 1200 × 630 px, menos de 300 KB para WhatsApp | 300 × 200 px |
Una plantilla lista para copiar
Sustituye los valores y pega esto en el head de tu página; después pega el head de tu página en la herramienta para comprobarlo:
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:title" content="Page title under 60 characters">
<meta property="og:description" content="A one or two sentence summary of the page.">
<meta property="og:image" content="https://example.com/images/share-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Example">
<meta name="twitter:card" content="summary_large_image">Motivos habituales por los que falla una vista previa de enlace
- Ruta de imagen relativa:
/img/share.jpgen lugar dehttps://example.com/img/share.jpg. - Etiquetas añadidas con JavaScript: la mayoría de los rastreadores no ejecutan scripts, así que las etiquetas deben estar en el HTML que envía el servidor.
- Imagen bloqueada: un muro de inicio de sesión, una regla de robots.txt, un firewall o una protección contra hotlinking impiden que el rastreador descargue la imagen.
- Caché antigua: la plataforma guardó una vista previa anterior. Vuelve a rastrear la URL con el depurador de la plataforma.
- Etiquetas duplicadas: dos etiquetas og:title, de un tema y de un plugin. Las plataformas suelen tomar la primera.
Preguntas frecuentes
¿Qué son las etiquetas Open Graph?
Las etiquetas Open Graph son metaetiquetas en el head de una página web, como og:title, og:description y og:image. Facebook creó el protocolo, y hoy LinkedIn, Slack, Discord, WhatsApp, iMessage y muchas otras apps las leen para crear la tarjeta de vista previa que aparece cuando alguien comparte un enlace.
¿Qué tamaño debe tener una og:image?
Usa 1200 × 630 píxeles, una relación de aspecto de aproximadamente 1.91:1. Ese tamaño se ve nítido en Facebook, LinkedIn y las tarjetas de imagen grande de X. Mantén el texto importante lejos de los bordes, usa JPG o PNG y que el archivo no pase de unos pocos megabytes (X permite hasta 5 MB).
¿Qué longitud debe tener un og:title?
Procura no superar los 60 caracteres para que el título completo se vea en todas las plataformas. Facebook puede mostrar hasta unos 88 caracteres en escritorio antes de cortarlo, pero los feeds móviles y las apps de chat lo truncan antes. Para og:description, entre 55 y 200 caracteres funciona bien.
¿X (Twitter) usa etiquetas Open Graph?
Sí. X busca primero twitter:title, twitter:description y twitter:image, y si no están usa og:title, og:description y og:image. Aun así necesitas twitter:card, con el valor summary_large_image para una imagen grande o summary para una miniatura cuadrada pequeña.
¿Por qué no se actualiza la vista previa de mi enlace después de cambiar las etiquetas?
Las plataformas guardan en caché las vistas previas, a menudo durante días. Después de publicar las etiquetas nuevas, pide a la plataforma que vuelva a rastrear la página con su propio depurador de contenido compartido o inspector de publicaciones, o añade un parámetro como ?v=2 a la URL compartida para forzar una nueva lectura.
¿Por qué esta herramienta no lee mi URL directamente?
Los navegadores impiden que las páginas web lean el HTML de otros sitios (CORS), así que una herramienta que funciona solo en el navegador no puede descargar tu página. Pega el HTML en su lugar. Nada de lo que pegas se envía a ningún sitio, lo que también significa que puedes revisar páginas que aún no son públicas.
¿og:image y og:url deben ser URL absolutas?
Sí. Los rastreadores leen las etiquetas sin conocer la URL base de tu página, así que usa URL completas que empiecen por https://, por ejemplo https://example.com/images/share.jpg. Las rutas relativas como /images/share.jpg a menudo se ignoran y la vista previa no muestra ninguna imagen.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.