Vista Previa Open Graph: Cómo Ver Cómo Aparece tu Enlace al Compartirlo
Antes de compartir un enlace importante en redes sociales, deberías saber exactamente cómo aparecerá: qué título mostrará, qué fragmento de texto acompañará y, especialmente, qué imagen se mostrará como miniatura. Si las etiquetas Open Graph no están correctamente configuradas, el resultado puede ser una vista previa con imágenes equivocadas, texto irrelevante o, peor, sin imagen alguna. La herramienta de Vista Previa Open Graph de WikiPlus simula cómo se verá tu URL en las principales plataformas sociales, ayudándote a detectar problemas antes de publicar.
Qué es una vista previa Open Graph y cómo funciona técnicamente
Cuando alguien pega una URL en Facebook, Twitter, LinkedIn o WhatsApp, la plataforma envía un «scraper» (un bot) a visitar esa URL y leer sus meta tags Open Graph. Con esa información, construye automáticamente una tarjeta visual que se muestra en el feed en lugar de una URL desnuda. El scraper busca específicamente las etiquetas `og:title`, `og:description`, `og:image` y `og:url` en el `<head>` del HTML de la página. Si no las encuentra, usa el `<title>` y `<meta description>` estándar como fallback, y elige una imagen arbitraria de las disponibles en la página. El proceso ocurre en el momento en que el usuario pega la URL, pero los resultados se cachean por cada plataforma. Facebook puede cachear una vista previa durante días o semanas, lo que significa que si cambias tus etiquetas OG después de que alguien ya haya compartido el enlace, los seguidores que lo vean más tarde seguirán viendo la versión en caché. La herramienta de Vista Previa OG de WikiPlus simula este proceso: introduce tu URL, la herramienta la analiza y te muestra una representación visual de cómo aparecería en cada red social principal.
Cómo usar la Vista Previa Open Graph de WikiPlus paso a paso
El uso de la herramienta es muy directo. Primero, copia la URL completa de la página que quieres analizar, incluyendo el protocolo `https://`. Pégala en el campo de la herramienta y haz clic en «Analizar» o «Vista previa». La herramienta mostrará en segundos cuatro secciones: **1. Datos detectados:** lista todas las etiquetas OG encontradas en la página, con su valor exacto. Si alguna etiqueta falta, aparece marcada en rojo con una sugerencia de solución. **2. Vista previa de Facebook/LinkedIn:** muestra la tarjeta tal como aparecería en el feed de estas plataformas, con la imagen, el título y la descripción en el formato visual correcto. **3. Vista previa de Twitter/X:** muestra la tarjeta en el formato de Twitter, que puede ser `summary` (imagen pequeña a la izquierda) o `summary_large_image` (imagen grande de ancho completo), dependiendo de la etiqueta `twitter:card` detectada. **4. Vista previa de WhatsApp:** muestra la miniatura simplificada que aparece en los chats de WhatsApp, donde el espacio es más limitado y solo se muestra el título, descripción e imagen pequeña.
Errores frecuentes detectados en la vista previa y cómo corregirlos
Los errores más comunes que detecta la vista previa son fácilmente corregibles una vez que sabes dónde están. **Imagen no encontrada o rota:** la URL de la imagen OG no es accesible. Causas: la imagen tiene una ruta relativa en lugar de absoluta, el servidor bloquea requests de bots externos, o la imagen fue eliminada. Solución: usa siempre rutas absolutas (`https://dominio.com/imagen.jpg`) y verifica que la imagen sea públicamente accesible. **Imagen demasiado pequeña:** la imagen existe pero tiene menos de 200×200 píxeles, por lo que Facebook la descarta. Usa siempre imágenes de al menos 1200×630 px para obtener la vista previa grande y atractiva. **Título truncado:** el `og:title` supera los 90 caracteres y se corta en la vista previa. Reescríbelo en 60-70 caracteres para que siempre aparezca completo. **Sin descripción OG:** si falta `og:description`, las plataformas usan texto aleatorio de la página. Añade siempre una descripción de 2-3 líneas orientada a motivar el clic. **Etiqueta og:url incorrecta:** la URL canónica en `og:url` no coincide con la URL real de la página. Esto puede causar inconsistencias en los contadores de likes y shares entre diferentes versiones de la misma URL.
Diferencias entre la vista previa en cada plataforma social
Aunque todas las plataformas leen las mismas etiquetas OG, las muestran de forma diferente, por lo que una imagen que se ve perfecta en Facebook puede estar recortada en Twitter. **Facebook y LinkedIn** usan una proporción de aspecto 1.91:1 (aproximadamente 1200×628 px). La imagen se muestra encima del título y descripción en un recuadro con esquinas redondeadas. El título aparece en negrita y la descripción debajo en texto más pequeño. **Twitter/X** con `summary_large_image` muestra la imagen ocupando la mayor parte del espacio, con título y descripción debajo. Con el tipo `summary`, la imagen aparece como un cuadrado pequeño a la izquierda del texto. La imagen en Twitter es recortada al centro, así que coloca el contenido importante en el centro de la imagen. **WhatsApp** muestra una miniatura cuadrada pequeña a la izquierda con el título y dominio a la derecha. En grupos y conversaciones, las previsualizaciones son más pequeñas que en el chat individual. El texto de descripción puede no mostrarse en todos los dispositivos. **Telegram** tiene la vista previa más grande y completa: puede mostrar imágenes a todo el ancho del canal y admite tanto imágenes horizontales como verticales sin recorte agresivo.
Preguntas frecuentes
- ¿Por qué la vista previa en Facebook sigue mostrando la imagen antigua aunque la cambié?
- Facebook cachea las vistas previas de URL agresivamente. Para forzar la actualización, ve al Facebook Sharing Debugger (developers.facebook.com/tools/debug), introduce tu URL y haz clic en «Scrape Again». Esto limpia la caché de Facebook para ese enlace específico.
- ¿La herramienta de vista previa funciona con páginas protegidas con contraseña?
- No. Tanto la herramienta de WikiPlus como los scrapers reales de las redes sociales necesitan acceso público a la página para leer sus meta tags. Las páginas con login, restricción por IP o en entornos de desarrollo local no pueden ser analizadas externamente.
- ¿Cuántas etiquetas OG son realmente obligatorias para que funcione la vista previa?
- Las cuatro etiquetas mínimas recomendadas son `og:title`, `og:description`, `og:image` y `og:url`. Sin `og:image`, muchas plataformas no muestran ninguna imagen o eligen una aleatoriamente. Sin las demás, usan el `<title>` y `<meta description>` estándar como fallback.