Cómo usar Vista previa de Open Graph y metaetiquetas
- 1
Pega un enlace
Introduce la dirección de una página pública y haz clic en Previsualizar enlace para leer su título, su descripción y sus etiquetas Open Graph y de tarjeta de X.
- 2
Revisa las tarjetas
Compara el resultado de Google y las tarjetas de Facebook, X, LinkedIn, Slack, Discord y estilo iMessage, y consulta la lista de etiquetas que faltan o son débiles.
- 3
Edita las etiquetas
Haz clic en Editar estas etiquetas, o abre Escribir etiquetas, para cambiar el título, la descripción y la imagen, y mira cómo se actualiza cada vista previa mientras escribes.
- 4
Cópialas en tu página
Copia las metaetiquetas generadas en el head de tu página, publícala y vuelve a comprobar la URL en línea.
Límites y Pro
Gratis: 20 vistas previas de URL por minuto, páginas de hasta 3 MB de HTML con un tiempo de espera de 12 segundos, 7 vistas previas de plataformas por enlace y edición de etiquetas sin límite.
Acerca de Vista previa de Open Graph y metaetiquetas
El previsualizador de metaetiquetas te muestra cómo se verá un enlace antes de compartirlo. Lee las etiquetas con las que se construyen las vistas previas: el título HTML y la meta description, las etiquetas Open Graph como og:title, og:description, og:image y og:site_name, las etiquetas de tarjeta de X como twitter:card, y el color del tema que Discord usa para la franja de su inserción. Después dibuja siete vistas previas: un resultado de búsqueda de Google, publicaciones de enlace de Facebook y LinkedIn, una tarjeta de X con imagen grande o en formato resumen, un desplegado de Slack, una inserción de Discord y una burbuja al estilo iMessage.
Cuando falta un campo, las vistas previas recurren a lo mismo que hacen la mayoría de las plataformas, por ejemplo pasar de og:title al título de la página, y la fuente se indica en las advertencias. También se comprueba la imagen: su tamaño en píxeles y su tipo se leen de la cabecera del archivo, así que sabrás si está por debajo del mínimo de 200 × 200 de Facebook, si es demasiado pesada para el límite de 5 MB de X, si es un SVG no admitido o si tiene una proporción incorrecta para una tarjeta grande de 2:1.
La pestaña Escribir etiquetas funciona sin descargar nada y genera un bloque de metaetiquetas listo para usar. Las vistas previas son aproximadas: las plataformas cambian sus diseños, guardan las tarjetas en caché durante días y algunas muestran textos distintos a quienes han iniciado sesión. Para actualizar una tarjeta que ya se compartió, usa el depurador de la propia plataforma después de publicar.
Privacidad
En Comprobar una URL, la dirección se envía a nuestro servidor, que descarga esa página una vez y los primeros bytes de su og:image para leer las etiquetas y el tamaño de la imagen; no se guarda ni se registra nada. Las imágenes de las vistas previas se cargan después en tu navegador, directamente desde el sitio que las aloja. Escribir etiquetas funciona solo en tu navegador.
Características
Siete vistas previas
Tarjetas de Google, Facebook, X, LinkedIn, Slack, Discord y estilo iMessage, una junto a otra.
Comprobaciones de og:image
Tamaño en píxeles, tipo y peso del archivo leídos de la propia imagen, con los mínimos de cada plataforma.
Generador de etiquetas
Escribe un título, una descripción y una imagen, y copia un bloque completo de Open Graph y tarjeta de X.