🔗 Vista previa OpenGraph ☆

Previsualiza cómo se ve tu enlace al compartirlo

Vista Previa OpenGraph Gratis lee las etiquetas Open Graph y Twitter Card de cualquier URL y muestra la vista previa que verían Facebook, X, LinkedIn, WhatsApp y Slack. Pega un enlace y comprueba el título, la descripción y la imagen tal como aparecerán.

Qué revisar antes de publicar

• Título, claro, único y de unos 60 caracteres
• Descripción, atractiva y de unos 155 caracteres
• Imagen, al menos 1200×630 para tarjetas grandes
• Etiquetas og: ausentes o duplicadas

La herramienta también lista las etiquetas encontradas en crudo, para detectar erratas, rutas de imagen relativas o páginas que solo muestran un enlace básico. Gratis, sin registro y sin guardar nada.

Cómo se construye la vista previa

Se obtiene el HTML de la página y se analizan sus etiquetas Open Graph y Twitter Card: og:title, og:description, og:image (con las dimensiones declaradas), og:url, og:type y sus equivalentes twitter:. El resultado se renderiza como aparecería en una tarjeta de enlace compartido, y la lista de etiquetas en crudo revela los culpables habituales: títulos truncados, og:image ausente, URL de imagen relativas que fallan al rastrearse desde fuera o etiquetas duplicadas por un plugin. Las URL absolutas de imagen con el tamaño correcto son lo que realmente necesitan las plataformas.

Detalles de proceso y límites

Privacidad: se obtiene desde tu navegador

La petición se hace en tu conexión, así que el sitio destino ve tu solicitud como una visita normal. 0Appz no actúa de proxy ni almacena las etiquetas; no hay historial de las URL que previsualizas.

Arreglar problemas comunes de vista previa

• Usa URL absolutas https para og:image: las rutas relativas fallan fuera del sitio.
• Ofrece imágenes de 1200×630 para tarjetas grandes; las menores pasan a miniatura.
• Mantén títulos por debajo de unos 60 caracteres y descripciones de 150-200.
• Configura etiquetas Open Graph y Twitter Card para vistas coherentes.
• Tras cambiar etiquetas, vuelve a rastrear en el depurador de la plataforma: las cachés son tenaces.

Relacionado: explora las herramientas de desarrollo para meta etiquetas, cabeceras y SSL.

Qué etiquetas controlan realmente la vista previa

Las plataformas leen un conjunto pequeño de etiquetas al construir la tarjeta y ignoran el resto. og:title fija el titular; si falta, el rastreador usa el title HTML, que a menudo incluye un sufijo del sitio que no querías. og:description controla las dos o tres líneas bajo el titular, y og:url indica a la plataforma a qué dirección canónica pertenece la tarjeta: un desajuste aquí es causa habitual de tarjetas que apuntan a la página equivocada. La imagen es la parte que más falla: og:image debe ser una URL https absoluta, idealmente de 1200×630 píxeles para una proporción 1,91:1 y por debajo de unos 5 MB para que el rastreador no agote el tiempo. og:image:width y og:image:height permiten reservar espacio antes de que cargue la imagen. En X, twitter:card elige el diseño, summary_large_image es lo que suele querer un sitio, y twitter:title, twitter:description y twitter:image pueden sobrescribir los valores de OpenGraph cuando ambas redes necesitan textos distintos. Dos comprobaciones prácticas ahorran tiempo: confirma que la URL previsualizada responde 200 sin cadena de redirecciones, y recuerda que las plataformas cachean las tarjetas de forma agresiva, así que usa el depurador de cada red para forzar la actualización tras cambiar las etiquetas.