WikiPlus

Vista Previa Open Graph

Previsualiza cómo se ve tu sitio web al compartirlo en redes sociales. 100% gratis, funciona en tu navegador.

Procesamiento local
1.4s promedio
4.8 de 5 — basado en 1,247 usos

Por Sergio Robles — Fundador

Vista previa de Facebook

example.comIntroduce el título de la página...Introduce la descripción de la página...

Vista previa de Twitter

Introduce el título de la página...Introduce la descripción de la página...example.com
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
Tus archivos se procesan localmente en tu navegador. Nunca subimos ni almacenamos tus datos.

¿Qué es Vista Previa Open Graph?

OG Preview de WikiPlus muestra exacto como se ve tu enlace al compartirlo en Facebook, X, LinkedIn, Slack, Discord, WhatsApp e iMessage. Obtiene y renderiza las etiquetas Open Graph en vivo de cualquier URL. Los marketers verifican una campana antes del lanzamiento. Nada de sorpresas por una imagen faltante. Los community managers depuran por que la vista previa de un post se rompio despues de un cambio en el CMS. Los consultores SEO auditan sitios de clientes en busca de etiquetas og:image faltantes o sobredimensionadas. Puedes usar el fetcher de URL en vivo o pegar meta tags directamente. Las vistas previas se renderizan en tu navegador. URLs de pre-lanzamiento y copy de campana sin publicar se mantienen privados. El fetcher obtiene la respuesta HTTP en vivo de la URL que envias. Pasa por un proxy del lado del servidor para evitar CORS. Luego parsea las meta tags del head y renderiza una vista previa pixel-accurate para cada plataforma. Cada vista previa muestra el comportamiento real de respaldo cuando og:image falta, es muy grande o tiene la proporcion incorrecta.

¿Cuándo debo usar esta herramienta?

  • Verifica la vista previa de una entrada de blog antes de anunciarla en Twitter
  • Depura por qué una URL compartida muestra la imagen incorrecta en LinkedIn
  • Confirma que Facebook lea la imagen de Open Graph actualizada después de un despliegue
  • Haz QA de la vista previa de una landing page del cliente antes de una campaña de marketing

¿Cómo previsualizar etiquetas Open Graph?

  1. 1Pega la URL completa de la página que quieres previsualizar.
  2. 2Haz clic en Obtener para extraer las meta tags y Open Graph de la página.
  3. 3Revisa las maquetas renderizadas para Facebook, Twitter y LinkedIn.
  4. 4Detecta campos faltantes como og:image o twitter:card en el reporte.
  5. 5Corrige las meta tags en tu sitio y vuelve a ejecutar la vista previa.

Preguntas frecuentes

¿Qué es una vista previa Open Graph y por qué importa?

An Open Graph preview is the rich link card that appears automatically when you paste a URL into Facebook, LinkedIn, WhatsApp, Discord, Slack, X, iMessage, Telegram, Reddit, or virtually any modern messaging platform that supports link unfurling. Instead of displaying a bare URL, the platform renders a structured card containing a large image, a title, a short description, and the source domain. This transformation is driven entirely by meta tags placed in the HTML head of the linked page — specifically og:title, og:description, og:image, og:url, og:type, and optionally og:image:width and og:image:height. The visual impact on engagement is substantial. Research consistently shows that posts with rich image previews receive two to three times more clicks than posts sharing bare URLs, because the card communicates content, context, and credibility before the user decides whether to follow the link. For marketing teams, a broken or missing OG preview on a campaign URL is a direct revenue leak — every social post, email footer link, or Slack announcement that fails to render a preview loses a significant fraction of its potential click-through traffic. For developers and SEO practitioners, OG previews are also a signal of overall meta-tag health. A page with correctly configured OG tags is also more likely to have a coherent title, description, and canonical setup. The WikiPlus OG Preview tool lets you inspect and debug the OG card for any URL before you share it publicly, catching missing images, truncated titles, and wrong aspect ratios while you can still fix them.

¿Por qué mis vistas previas a veces muestran la imagen equivocada o contenido viejo?

The root cause is aggressive caching by social platforms. Every major network — Facebook, LinkedIn, X, WhatsApp, and Discord — caches the OG metadata it fetches from a URL the first time that URL is shared on the platform. The cache TTL varies by platform, ranging from a few hours for WhatsApp to several days for LinkedIn and Facebook in some configurations. After you update your og:image, og:title, or og:description tags, the platform's crawler has not yet re-fetched your URL, so it continues serving the stale preview from its cache to every user who shares the link during that window. Each platform provides a dedicated tool to force an immediate cache refresh. Facebook offers the Sharing Debugger at developers.facebook.com/tools/debug — enter your URL and click Debug, then Scrape Again to request a fresh fetch. LinkedIn provides the Post Inspector at linkedin.com/post-inspector. X has the Card Validator at cards-dev.twitter.com/validator. For WhatsApp and iMessage there is no programmatic cache-busting tool; the most reliable approach is to add a cache-busting query parameter to the URL — for example, appending ?v=2 — which the platforms treat as a distinct URL and fetch fresh. The WikiPlus OG Preview tool is not subject to any caching delay. It fetches the live HTTP response of your URL at the moment you submit it, parses the current head tags, and renders a preview that reflects your actual deployed tags right now. This makes it the fastest way to verify a fix before announcing a URL publicly.

¿Qué tamaño y formato de imagen funcionan mejor para OG:image?

The industry-standard size that renders correctly across all major platforms without cropping, letterboxing, or upscaling artifacts is 1200 by 630 pixels at a 1.91:1 aspect ratio. This dimension is documented as recommended by Facebook, LinkedIn, and Discord, and is the trigger size for X's summary_large_image card format — images below 300 px wide display in the compact summary format regardless of the twitter:card setting. The file size should stay under 1 MB to avoid the degraded or missing preview that some mobile clients show when the image is slow to load on a constrained connection. The practical production target is 200–400 KB. For JPEG, quality setting 80–85 at 1200×630 consistently lands in this range for photographic content. For text-heavy OG cards with solid color backgrounds, PNG often produces a smaller file than JPEG because the flat regions compress extremely efficiently. WebP delivers the smallest file sizes and is supported by all browser-based clients including Chrome, Safari, and Firefox on both mobile and desktop. The compatibility concern with WebP is older native messenger apps — specifically Android WhatsApp versions below 2.21 and certain email clients with inline link preview rendering. If any significant portion of your audience uses these clients, JPEG remains the safer choice. Always specify the og:image URL as an absolute HTTPS URL. Relative paths fail when the social crawler fetches the image because it has no document base URL to resolve against. Include og:image:width and og:image:height as numeric attributes to allow crawlers to skip the dimension-probe request and generate previews faster on the first share.

¿Tu herramienta de vista previa coincide con lo que Facebook y LinkedIn realmente muestran?

The WikiPlus OG Preview is engineered to match the documented rendering specifications that Facebook and LinkedIn publish in their developer documentation, producing previews that are visually accurate for the large majority of users across the most common device and app configurations. The preview applies the correct aspect ratio crop rules — Facebook crops og:image to a 1.91:1 rectangle, LinkedIn to a 1.91:1 rectangle for standard posts and a 4:1 strip for company page previews — using the same focal-point centering behavior each platform documents. Typography, font sizes, line clamping, and domain badge placement follow the values published by each platform as of early 2025. The preview also simulates the fallback behavior for missing or malformed tags: what card format renders when og:image is absent, when the image fails to load, when og:description is empty, and when og:title exceeds the character limit. For the highest possible accuracy on a specific platform and app version, use that platform's native debugger: Facebook Sharing Debugger, LinkedIn Post Inspector, or X Card Validator. These tools render the preview using the actual production code of the platform and reflect any quarterly rendering changes immediately. WikiPlus updates its preview rules with each major platform rendering change, but there is an inherent lag of a few weeks. A practical workflow is to use WikiPlus for rapid iteration during development — fix the tags, re-preview instantly without waiting for cache purge — then confirm the final result in the platform's native debugger before launch.

El contenido de esta pagina esta disponible bajo CC BY 4.0.