Generador de Vista Previa Social — Revisa Tarjetas de Facebook, X y WhatsApp

Escribe tu título, descripción y dirección de imagen, y mira al instante cómo se ve la tarjeta de tu enlace en Facebook, X y WhatsApp. Las vistas previas se actualizan mientras escribes. Cuando la tarjeta se vea bien, copia las etiquetas meta ya preparadas y pégalas en la sección de encabezado de tu página, para que las plataformas reales muestren la misma tarjeta cuando alguien comparta tu enlace.

Por qué las vistas previas cambian según la aplicación

Cada plataforma lee las mismas etiquetas meta pero dibuja la tarjeta a su manera. Facebook muestra una imagen ancha con el nombre del dominio en mayúsculas pequeñas sobre un título en negrita. X muestra una tarjeta parecida con esquinas redondeadas y sus propios colores de texto. WhatsApp muestra una burbuja compacta con un título corto y un par de líneas de texto. Las mismas etiquetas pueden verse muy bien en una aplicación y apretadas en otra. Por eso importa revisar las tres antes de publicar: un título que cabe en Facebook puede cortarse en WhatsApp, y una descripción que se lee bien en X puede perder su final en Facebook.

Cómo usar las etiquetas meta

Las etiquetas que escribe esta herramienta son las estándar Open Graph y Twitter Card: og:title, og:description, og:image, og:url, og:type y las etiquetas twitter correspondientes. Pega todo el bloque en la sección de encabezado de tu página, antes de la etiqueta de cierre del encabezado, y asegúrate de que la dirección de la imagen sea una URL pública completa que cualquiera pueda abrir. Si tu página ya tiene etiquetas meta, reemplaza las antiguas de título, descripción e imagen en lugar de añadir un segundo juego, porque dos juegos en conflicto confunden a los rastreadores y el resultado es impredecible.

Reglas de imagen y texto que te evitan problemas

Usa una imagen de al menos 1200 píxeles de ancho para el diseño de tarjeta grande, en JPG o PNG, alojada en una dirección pública rápida. Mantén los títulos por debajo de unos 60 caracteres y las descripciones por debajo de unos 150, para que el texto sobreviva incluso a la tarjeta más ajustada. Evita texto incrustado en la propia imagen, porque las tarjetas pequeñas lo reducen hasta hacerlo ilegible. Y prueba siempre con un envío real a un chat privado o una página de prueba antes de un gran lanzamiento: esta herramienta muestra maquetas fieles, pero la imagen final es el código propio de cada plataforma, y las plataformas cambian sus estilos de tarjeta sin aviso.

Caché: por qué una tarjeta vieja puede quedarse

Facebook, X y WhatsApp guardan vistas previas en caché. Si corriges un título o cambias una imagen, las publicaciones y chats antiguos pueden conservar la tarjeta anterior durante horas o días. Cada plataforma tiene una herramienta de depuración o validación que puede pedir una lectura nueva, y usarla es la solución normal. Nada en esta página puede limpiar la caché de otra plataforma por ti, así que planifica tu tarjeta antes de publicar en muchos sitios, no después. Una tarjeta revisada aquí primero te ahorra toda esa ronda de arreglos.

Límites que debes conocer, dichos con claridad

Estas vistas previas son maquetas dibujadas en tu navegador para imitar el diseño habitual de cada plataforma. No son imágenes reales de Facebook, X o WhatsApp, y no pueden mostrarte exactamente qué hará el rastreador de una plataforma con una página complicada, una imagen bloqueada o una cadena de redirecciones. Las etiquetas meta en sí son reales y estándar, y pegarlas en tu página es exactamente lo que leen las plataformas. Pero si una plataforma no puede descargar tu imagen, o tu página bloquea su rastreador, la tarjeta real será distinta, y ninguna herramienta de vista previa puede evitarlo. Prueba con un envío real cuando importe.

Herramientas relacionadas

Generador de Enlaces Enmascarados · Acortador de URLs · English version: Social Preview Card Generator · Herramientas Gratis en Español.

Inserta esta herramienta en tu web — gratis

Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;es&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Generador de Vista Previa Social&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin:0 0 6px;color:#0f3d3e;font-size:22px} p.sub{margin:0 0 14px;color:#555;font-size:14px} label{font-weight:600;font-size:14px;display:block;margin:10px 0 4px} input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:11px;font-size:16px;border:1px solid #cbd5e1;border-radius:6px;background:#fff} .row{display:flex;gap:10px;flex-wrap:wrap} .row&gt;*{flex:1;min-width:140px} button{background:#0f766e;color:#fff;border:0;padding:11px 22px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px} button:hover{background:#115e59} button:disabled{background:#94a3b8;cursor:wait} #status{font-size:13px;color:#666;margin-top:10px;min-height:16px} .err{color:#b91c1c} .card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin-top:12px;background:#f8fafc} .big{font-size:26px;font-weight:700;color:#0f3d3e} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #e2e8f0} th{color:#0f3d3e} .bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden} .bar&gt;i{display:block;height:100%;background:#0f766e} img.cover{max-width:120px;border-radius:6px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;Generador de Vista Previa Social&lt;/h2&gt;&lt;p class=&quot;sub&quot;&gt;Mira cómo se ve tu enlace en Facebook, X y WhatsApp antes de compartirlo. Gratis, sin registro.&lt;/p&gt; &lt;label&gt;Título de la página&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;title&quot; placeholder=&quot;Mi guía increíble&quot;&gt; &lt;label&gt;Descripción&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;desc&quot; placeholder=&quot;Una frase corta sobre la página&quot;&gt; &lt;label&gt;URL de la imagen&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;image&quot; placeholder=&quot;https://ejemplo.com/imagen.jpg&quot;&gt; &lt;label&gt;URL de la página (se muestra debajo de la tarjeta)&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;url&quot; placeholder=&quot;ejemplo.com/mi-pagina&quot;&gt; &lt;h3 style=&quot;margin-top:16px&quot;&gt;Estilo Facebook&lt;/h3&gt;&lt;div id=&quot;fb&quot;&gt;&lt;/div&gt; &lt;h3 style=&quot;margin-top:16px&quot;&gt;Estilo X&lt;/h3&gt;&lt;div id=&quot;x&quot;&gt;&lt;/div&gt; &lt;h3 style=&quot;margin-top:16px&quot;&gt;Estilo WhatsApp&lt;/h3&gt;&lt;div id=&quot;wa&quot;&gt;&lt;/div&gt; &lt;label style=&quot;margin-top:16px&quot;&gt;Etiquetas meta — pégalas en el encabezado de tu página&lt;/label&gt;&lt;textarea id=&quot;tags&quot; rows=&quot;8&quot; style=&quot;width:100%;box-sizing:border-box;font-size:13px&quot;&gt;&lt;/textarea&gt; &lt;p&gt;&lt;button id=&quot;cp&quot;&gt;Copiar etiquetas meta&lt;/button&gt;&lt;/p&gt;&lt;div id=&quot;status&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6548, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); //__CORE_START__ function escapeHtmlP(s) { return String(s).replace(/&amp;/g, &#x27;&amp;amp;&#x27;).replace(/&lt;/g, &#x27;&amp;lt;&#x27;).replace(/&gt;/g, &#x27;&amp;gt;&#x27;).replace(/&quot;/g, &#x27;&amp;quot;&#x27;); } function truncate(s, n) { s = String(s || &#x27;&#x27;); if (s.length &lt;= n) return s; return s.slice(0, n - 1) + &#x27;…&#x27;; } function buildMetaTags(d) { var t = d.title || &#x27;&#x27;; var de = d.description || &#x27;&#x27;; var im = d.image || &#x27;&#x27;; var u = d.url || &#x27;&#x27;; var out = []; if (t) out.push(&#x27;&lt;meta property=&quot;og:title&quot; content=&quot;&#x27; + t + &#x27;&quot;&gt;&#x27;); if (de) out.push(&#x27;&lt;meta property=&quot;og:description&quot; content=&quot;&#x27; + de + &#x27;&quot;&gt;&#x27;); out.push(&#x27;&lt;meta property=&quot;og:type&quot; content=&quot;website&quot;&gt;&#x27;); if (u) out.push(&#x27;&lt;meta property=&quot;og:url&quot; content=&quot;&#x27; + u + &#x27;&quot;&gt;&#x27;); if (im) out.push(&#x27;&lt;meta property=&quot;og:image&quot; content=&quot;&#x27; + im + &#x27;&quot;&gt;&#x27;); out.push(&#x27;&lt;meta name=&quot;twitter:card&quot; content=&quot;&#x27; + (im ? &#x27;summary_large_image&#x27; : &#x27;summary&#x27;) + &#x27;&quot;&gt;&#x27;); if (t) out.push(&#x27;&lt;meta name=&quot;twitter:title&quot; content=&quot;&#x27; + t + &#x27;&quot;&gt;&#x27;); if (de) out.push(&#x27;&lt;meta name=&quot;twitter:description&quot; content=&quot;&#x27; + de + &#x27;&quot;&gt;&#x27;); if (im) out.push(&#x27;&lt;meta name=&quot;twitter:image&quot; content=&quot;&#x27; + im + &#x27;&quot;&gt;&#x27;); return out.join(&#x27;\n&#x27;); } //__CORE_END__ var $ = function(id) { return document.getElementById(id); }; function render() { var t = $(&#x27;title&#x27;).value.trim() || &#x27;El título de tu página&#x27;; var de = $(&#x27;desc&#x27;).value.trim() || &#x27;Una descripción corta de tu página.&#x27;; var im = $(&#x27;image&#x27;).value.trim(); var u = $(&#x27;url&#x27;).value.trim() || &#x27;ejemplo.com&#x27;; var img = im ? &#x27;&lt;img src=&quot;&#x27; + im + &#x27;&quot; style=&quot;width:100%;display:block&quot; onerror=&quot;this.style.display=\&#x27;none\&#x27;&quot;&gt;&#x27; : &#x27;&lt;div style=&quot;background:#e2e8f0;height:140px;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:13px&quot;&gt;Sin imagen — añade una arriba&lt;/div&gt;&#x27;; $(&#x27;fb&#x27;).innerHTML = &#x27;&lt;div style=&quot;border:1px solid #ddd;border-radius:8px;overflow:hidden;max-width:480px;background:#fff&quot;&gt;&#x27; + img + &#x27;&lt;div style=&quot;padding:10px 12px&quot;&gt;&lt;div style=&quot;font-size:12px;color:#65676b;text-transform:uppercase&quot;&gt;&#x27; + u + &#x27;&lt;/div&gt;&lt;div style=&quot;font-weight:700&quot;&gt;&#x27; + truncate(t, 90) + &#x27;&lt;/div&gt;&lt;div style=&quot;color:#65676b;font-size:14px&quot;&gt;&#x27; + truncate(de, 130) + &#x27;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#x27;; $(&#x27;x&#x27;).innerHTML = &#x27;&lt;div style=&quot;border:1px solid #cfd9de;border-radius:12px;overflow:hidden;max-width:480px;background:#fff&quot;&gt;&#x27; + img + &#x27;&lt;div style=&quot;padding:10px 12px&quot;&gt;&lt;div style=&quot;font-weight:700&quot;&gt;&#x27; + truncate(t, 70) + &#x27;&lt;/div&gt;&lt;div style=&quot;color:#536471;font-size:14px&quot;&gt;&#x27; + truncate(de, 110) + &#x27;&lt;/div&gt;&lt;div style=&quot;color:#536471;font-size:13px&quot;&gt;&#x27; + u + &#x27;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#x27;; $(&#x27;wa&#x27;).innerHTML = &#x27;&lt;div style=&quot;background:#dcf8c6;border-radius:8px;padding:10px 12px;max-width:360px&quot;&gt;&lt;div style=&quot;font-weight:700;font-size:14px&quot;&gt;&#x27; + truncate(t, 60) + &#x27;&lt;/div&gt;&lt;div style=&quot;font-size:13px;color:#334155&quot;&gt;&#x27; + truncate(de, 100) + &#x27;&lt;/div&gt;&lt;div style=&quot;font-size:12px;color:#667781&quot;&gt;&#x27; + u + &#x27;&lt;/div&gt;&lt;/div&gt;&#x27;; $(&#x27;tags&#x27;).value = buildMetaTags({ title: $(&#x27;title&#x27;).value.trim(), description: $(&#x27;desc&#x27;).value.trim(), image: im, url: $(&#x27;url&#x27;).value.trim() }); } [&#x27;title&#x27;, &#x27;desc&#x27;, &#x27;image&#x27;, &#x27;url&#x27;].forEach(function(id) { $(id).addEventListener(&#x27;input&#x27;, render); }); $(&#x27;cp&#x27;).onclick = function() { if (navigator.clipboard) navigator.clipboard.writeText($(&#x27;tags&#x27;).value); $(&#x27;status&#x27;).textContent = &#x27;Etiquetas meta copiadas.&#x27;; }; render(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6548" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/generador-de-vista-previa-social/" target="_blank" rel="noopener">Generador de Vista Previa Social — Revisa Tarjetas de Facebook, X y WhatsApp</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — herramientas gratis en línea</p>