Rellena los datos
Título, descripción, dirección de la imagen y dirección de la página.
Vista previa de enlace y etiquetas Open Graph
Escribe el título, la descripción y la imagen de una página y mira las tarjetas de vista previa que muestran las redes sociales y las apps de mensajería. Después copia las etiquetas meta de Open Graph y de Twitter para tu página.
- Gratis
- Sin registro
- Funciona en tu navegador
100 % privado — el cálculo se hace en tu navegador y no se envía nada a ningún servidor.
Siguiente paso
Sigue con tu resultado en otra herramienta. No se sube nada.
Cómo funciona
Mira las vistas previas
Facebook, LinkedIn, X y apps de mensajería.
Copia las etiquetas
Pégalas dentro del head de tu página.
La tarjeta que ve la gente antes de hacer clic
Cuando se pega un enlace en Facebook, LinkedIn, WhatsApp, Slack o X, la plataforma no muestra la dirección en bruto. Muestra una tarjeta con una imagen, un título y una descripción corta, construida a partir de etiquetas meta especiales en el head de la página. Una buena tarjeta consigue clics, y una que falta o está rota, sin imagen o con el título equivocado, hace que un enlace parezca poco fiable. Configurar estas etiquetas lleva unos minutos, y esta herramienta te muestra el resultado antes de publicar.
Las etiquetas que importan
- og:title es el titular de la tarjeta. Mantenlo claro y por debajo de unos 60 a 70 caracteres.
- og:description son una o dos frases bajo el título. Muchas plataformas solo muestran los primeros 100 a 200 caracteres.
- og:image es la imagen. Usa una imagen de unos 1200 × 630 píxeles, en proporción 1,91 a 1, como JPG o PNG, alojada en una dirección web pública.
- og:url es la dirección que debe tratarse como la oficial de la página.
- og:site_name es el nombre de tu sitio o marca.
- twitter:card elige entre una tarjeta de imagen grande y una pequeña en X, que también lee las etiquetas Open Graph cuando faltan las suyas.
Cómo usar esta herramienta
Rellena los campos y aparecen las vistas previas de las principales plataformas, una junto a otra. La imagen se carga desde la dirección que escribes, así que tiene que ser una dirección web pública, y la herramienta indica su tamaño real y avisa si es demasiado pequeña o de forma equivocada. Cuando te guste el resultado, copia las etiquetas meta y pégalas en el head de tu página. La herramienta no puede leer una página existente por ti, porque los navegadores no dejan que una página web descargue el contenido de otro sitio.
Por qué un enlace compartido puede mostrar una tarjeta antigua
Las plataformas guardan en caché la tarjeta de un enlace. Si arreglas las etiquetas y sigue apareciendo la antigua, usa el depurador de la plataforma, como el Depurador de uso compartido de Facebook o el Inspector de publicaciones de LinkedIn, para pedirle que vuelva a leer la página.
Límites
Las vistas previas son aproximaciones cercanas. Cada plataforma tiene su propio diseño y lo cambia de vez en cuando. Se contacta con la dirección de la imagen solo para mostrar la imagen, y ninguno de tus textos se envía a ningún sitio. Para comprobar la longitud del título y la descripción en los resultados de búsqueda, usa el comprobador de longitud de título y descripción.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen Open Graph?
Unos 1200 × 630 píxeles, en proporción 1,91 a 1, como JPG o PNG de pocos megabytes, en una dirección web pública.
¿Por qué mi enlace no muestra imagen al compartirlo?
Puede faltar la etiqueta og:image, la dirección puede no ser pública o la plataforma puede haber guardado una versión antigua. Usa el depurador de la plataforma para actualizarla.
¿Necesito etiquetas distintas para X (Twitter)?
No siempre. X usa las etiquetas Open Graph si faltan las suyas, pero twitter:card te deja elegir entre una tarjeta de imagen grande y una pequeña.
¿Puede esta herramienta leer las etiquetas de mi página a partir de su dirección?
No. Una página de navegador no puede descargar el contenido de otro sitio, así que escribes los valores y la herramienta construye la vista previa y el código.
¿Qué longitud deben tener el título y la descripción?
Apunta a un título de menos de unos 60 a 70 caracteres y una descripción de menos de unos 150 a 200. Las plataformas cortan el texto más largo.
¿Se envía mi texto a algún sitio?
No. Solo se carga la imagen desde la dirección que escribes, para mostrarla en la vista previa.
Más herramientas
Otras utilidades que también funcionan sin salir de tu navegador.
Comprobador de enlaces rotosPega una lista de URL y mira cuáles no responden.
Comprobar la longitud del título y la meta descripciónComprueba la longitud de un título y una meta descripción y mira la vista previa del resultado de búsqueda.
Comprobar un faviconComprueba un archivo de favicon y mira cómo se ve a tamaños reales.
Limpiar enlacesQuita los parámetros de rastreo de los enlaces antes de compartirlos.
Convertir SVG a PNGConvierte un SVG a PNG, en un tamaño o en varios a la vez.
Generador de firma de correoCrea una firma de correo HTML profesional y cópiala en tu programa de correo.