Vista Previa Open Graph Gratuito en Línea
Previsualiza cómo se verá tu página en redes sociales pegando su HTML.
Paste your page's HTML source to preview how it appears when shared on social media. Use Ctrl+U in your browser to view source.
También te puede gustar:📋 Formateador JSON🔐 Codificador Base64🏠 Calculadora de Hipoteca💱 Conversor de Divisas
Related guideHow to Check DNS Records Online — A Practical Guide
→Who uses the Vista Previa Open Graph?
- Marketers de contenido verificando la apariencia al compartir en redes sociales antes de publicar artículos.
- Desarrolladores verificando la implementación de etiquetas meta OG después de añadir Open Graph a un sitio nuevo.
- Gestores de redes sociales revisando vistas previas de enlaces para páginas de destino de campañas de marca.
How the Vista Previa Open Graph works
1
Consulta el código fuente HTML de tu página (Ctrl+U en la mayoría de navegadores), selecciona todo y pégalo en el área de texto.
2
Haz clic en Generate Preview para extraer las etiquetas Open Graph y Twitter Card del HTML pegado.
3
Consulta la tarjeta de vista previa de Facebook/LinkedIn y la tarjeta de vista previa separada de Twitter/X, generadas a partir de tus etiquetas.
4
Desplázate hasta la lista Detected Tags para ver cada etiqueta meta og: y twitter: encontrada, con su valor sin procesar.
Tips & tricks
- No hay obtención de URL en vivo — pega el código fuente HTML real de tu página, no la URL, o la herramienta no tendrá nada que analizar.
- Solo se renderizan dos tarjetas de vista previa: una tarjeta combinada Facebook/LinkedIn y una tarjeta Twitter/X — no hay una vista previa separada de WhatsApp ni una interfaz de pestañas para alternar entre plataformas una por una.
- No hay una lista de verificación de validación dedicada con marcadores de aprobado/reprobado — verifica tú mismo la lista Detected Tags contra los campos og: requeridos (como mínimo title, description, image, url).
- Si faltan og:title u og:description, la herramienta recurre a tu etiqueta
y meta descripción — útil para ver qué mostrarán las plataformas por defecto cuando falten las etiquetas OG.</li></ul></section><section class="faq-section" aria-label="Frequently asked questions"><h2 class="faq-heading">Frequently Asked Questions</h2><details class="faq-item" open><summary class="faq-q">¿Puedo simplemente introducir la URL de mi página en lugar de pegar HTML?</summary><div class="faq-a"><p>No — esta herramienta solo analiza el HTML que pegas directamente. Consulta el código fuente de tu página (Ctrl+U), selecciona todo, copia y pégalo en el área de texto — no hay opción de obtención de URL en vivo.</p></div></details><details class="faq-item"><summary class="faq-q">¿Qué son las etiquetas Open Graph?</summary><div class="faq-a"><p>Las etiquetas Open Graph (OG) son etiquetas meta en el <head> de tu HTML que controlan cómo aparece tu página al compartirla en redes sociales. Las etiquetas clave: og:title, og:description, og:image, og:url, og:type. Sin ellas, las plataformas sociales usan contenido arbitrario de tu página.</p></div></details><details class="faq-item"><summary class="faq-q">¿Esta herramienta muestra una vista previa de WhatsApp?</summary><div class="faq-a"><p>No — genera dos tarjetas de vista previa: una tarjeta combinada al estilo Facebook/LinkedIn y una tarjeta de Twitter/X, ambas construidas a partir de las mismas etiquetas og: y twitter:. No hay una vista previa dedicada al estilo WhatsApp ni un selector de pestañas entre plataformas.</p></div></details><details class="faq-item"><summary class="faq-q">¿Qué tamaño de imagen se recomienda para Open Graph?</summary><div class="faq-a"><p>Recomendado: 1200×630 píxeles (relación 1,91:1) para todas las principales plataformas. Mínimo: 600×315 píxeles. Las imágenes deben pesar menos de 8 MB. PNG o JPG son los más fiables. Evita imágenes con texto cerca de los bordes, ya que algunas plataformas los recortan.</p></div></details><details class="faq-item"><summary class="faq-q">Mis etiquetas OG están configuradas pero al compartir aún se muestran datos antiguos — ¿por qué?</summary><div class="faq-a"><p>Las plataformas sociales almacenan en caché los datos OG de forma agresiva. Usa el Facebook Sharing Debugger, el Twitter Card Validator y el LinkedIn Post Inspector para forzar una actualización de caché. Esta herramienta previsualiza tus etiquetas localmente — no puede borrar la caché de una plataforma por ti.</p></div></details><details class="faq-item"><summary class="faq-q">Is my data safe when using the Vista Previa Open Graph?</summary><div class="faq-a"><p>Completely safe. The Vista Previa Open Graph processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.</p></div></details><details class="faq-item"><summary class="faq-q">How current is the data returned by the Vista Previa Open Graph?</summary><div class="faq-a"><p>The Vista Previa Open Graph fetches live data in real time each time you run it. Results reflect the current state of the server or domain at the moment of the request.</p></div></details><details class="faq-item"><summary class="faq-q">Why does the Vista Previa Open Graph sometimes return different results than other tools?</summary><div class="faq-a"><p>Results depend on the real-time state of the target server and DNS propagation, which can vary by geographic region and caching TTL. If you see inconsistencies, wait a few minutes and re-test — DNS changes can take up to 48 hours to propagate fully worldwide.</p></div></details></section><div class="ad-slot ad-slot--banner_bottom ad-ph"><div class="ad-ph-banner"><span>💼 Reach 100K+ developers & creators — Advertise on Allio Tools</span><a href="/partnerships/" class="ad-ph-btn">Learn More →</a></div></div></div><aside class="tool-sidebar-panel" aria-label="Sidebar"><div class="sidebar-widget"><p class="sidebar-widget-title">More Herramientas Web</p><div class="sidebar-links"><a class="sidebar-link" href="/es/ip-address-lookup/"><span class="tool-icon">🌐</span><span>Búsqueda de IP</span></a><a class="sidebar-link" href="/es/website-speed-test/"><span class="tool-icon">🚀</span><span>Prueba de Velocidad Web</span></a><a class="sidebar-link" href="/es/dns-lookup/"><span class="tool-icon">🔍</span><span>Búsqueda DNS</span></a><a class="sidebar-link" href="/es/http-status-codes/"><span class="tool-icon">📋</span><span>Códigos de Estado HTTP</span></a><a class="sidebar-link" href="/es/subnet-calculator/"><span class="tool-icon">🌐</span><span>Calculadora de Subred</span></a><a class="sidebar-link" href="/es/email-validator/"><span class="tool-icon">✉️</span><span>Validador de Email</span></a><a class="sidebar-link" href="/es/password-strength-checker/"><span class="tool-icon">🔒</span><span>Verificador de Fortaleza de Contraseña</span></a><a class="sidebar-link" href="/es/server-status-checker/"><span class="tool-icon">🟢</span><span>Verificador de Estado del Servidor</span></a></div><a href="/es/tools/web/" class="sidebar-see-all">See all Herramientas Web →</a></div><div class="sidebar-widget rv-widget"><p class="sidebar-widget-title">🕐 Recently Viewed</p><ul class="rv-list" id="rv-list"><li style="font-size:.78rem;color:var(--muted);padding:.2rem .4rem">Your recently used tools appear here.</li></ul></div><div class="sidebar-widget"><p class="sidebar-widget-title">⭐ Your Favorites</p><div id="fav-sidebar-list"><p class="text-muted text-sm" style="padding:.2rem .4rem">No favorites yet.<br>Click ♡ on any tool.</p></div><a href="/es/favorites/" class="sidebar-see-all">View all favorites →</a></div><div class="ad-slot ad-slot--tool_sidebar ad-ph"><div class="ad-ph-card"><span class="ad-ph-icon">🚀</span><strong>Allio Tools Pro</strong><ul><li>Zero ads everywhere</li><li>Bulk processing</li><li>Save history</li></ul><a href="/pro/" class="ad-ph-btn">Upgrade — $2.99/mo</a><span class="ad-ph-note">No signup required</span></div></div></aside></div></div></main> <script> window.gCurr=function(){var s=document.getElementById('g-curr');return s?s.value:'$';}; window.fmtM=function(n,d){var sym=window.gCurr();var v=Math.abs(n).toLocaleString(undefined,{minimumFractionDigits:d===undefined?2:d,maximumFractionDigits:d===undefined?2:d});return(n<0?'-':'')+sym+v;}; (function(){ function getFavs(){try{return JSON.parse(localStorage.getItem('allio_favs')||'[]');}catch(e){return[];}} function setFavs(a){localStorage.setItem('allio_favs',JSON.stringify(a));} window.toggleFav=function(btn){ var id=btn.dataset.id,title=btn.dataset.title||id,icon=btn.dataset.icon||'',url=btn.dataset.url||'/tools/'; var favs=getFavs(); var idx=-1;for(var i=0;i<favs.length;i++){if(favs[i].id===id){idx=i;break;}} if(idx===-1){ favs.push({id:id,title:title,icon:icon,url:url}); btn.textContent='\u2665';btn.classList.add('is-fav');btn.title='Remove from favorites';btn.setAttribute('aria-label','Remove from favorites'); }else{ favs.splice(idx,1); btn.textContent='\u2661';btn.classList.remove('is-fav');btn.title='Add to favorites';btn.setAttribute('aria-label','Save to favorites'); } setFavs(favs); if(window._updateFavWidgets)window._updateFavWidgets(favs); }; document.addEventListener('DOMContentLoaded',function(){ var favs=getFavs(); var ids=favs.map(function(f){return f.id;}); document.querySelectorAll('.fav-btn[data-id]').forEach(function(btn){ if(ids.indexOf(btn.dataset.id)!==-1){btn.textContent='\u2665';btn.classList.add('is-fav');btn.title='Remove from favorites';btn.setAttribute('aria-label','Remove from favorites');} else{btn.title='Add to favorites';} }); var authLink=document.getElementById('acct-auth-link'); if(authLink){ var isLoggedIn=!!localStorage.getItem('allio_user'); function doLogout(){ fetch('/api/auth/logout',{method:'POST',credentials:'include'}).catch(function(){}).finally(function(){ localStorage.removeItem('allio_user'); localStorage.removeItem('allio_pro'); document.documentElement.classList.remove('is-pro'); location.href='/'; }); } if(isLoggedIn){ authLink.textContent='Sign Out'; authLink.href='#'; authLink.addEventListener('click',function(e){e.preventDefault();authLink.textContent='Signing out…';doLogout();}); var mobileOut=document.getElementById('mobile-signout-link'); if(mobileOut){mobileOut.style.display='';mobileOut.addEventListener('click',function(e){e.preventDefault();doLogout();});} } else { authLink.textContent='Sign In'; authLink.href='/login/'; } } }); })(); </script> <footer><div class="container"><div class="footer-top"><div class="footer-brand"><img src="/favicon.svg" alt="" width="28" height="28" class="footer-brand-mark"><span class="footer-brand-name">Allio Tools</span></div><div class="footer-lang"><span class="footer-lang-label">Available in 11 languages:</span><div class="lang-switcher" aria-label="Language"><a href="/open-graph-preview/">EN</a><a href="/zh/open-graph-preview/">ZH</a><a href="/es/open-graph-preview/" class="active">ES</a><a href="/ar/open-graph-preview/">AR</a><a href="/id/open-graph-preview/">ID</a><a href="/pt/open-graph-preview/">PT</a><a href="/fr/open-graph-preview/">FR</a><a href="/ja/open-graph-preview/">JA</a><a href="/ru/open-graph-preview/">RU</a><a href="/de/open-graph-preview/">DE</a><a href="/hi/open-graph-preview/">HI</a></div></div></div><nav class="footer-cols" aria-label="Footer"><div class="footer-col"><h3>Product</h3><a href="/es/">Inicio</a><a href="/es/tools/">Todas las herramientas</a><a href="/pro/">Pro ✦</a></div><div class="footer-col"><h3>Resources</h3><a href="/faq/">FAQ</a><a href="/glossary/">Glossary</a></div><div class="footer-col"><h3>Company</h3><a href="/about/">About</a><a href="/contact/">Contact</a><a href="/sitemap.xml">Sitemap</a><a href="/methodology/">Methodology</a></div><div class="footer-col"><h3>Legal</h3><a href="/privacy/">Privacy Policy</a><a href="/terms/">Terms</a><a href="/disclaimer/">Disclaimer</a><a href="/refund-policy/">Refund Policy</a></div><div class="footer-col"><h3>Account</h3><a href="/account/">My Account</a><a href="/register/">Register</a><a href="/favorites/">Favorites</a><a href="/contact/">Feedback</a></div></nav><div class="footer-social"><a href="https://www.instagram.com/alliotools/" aria-label="Instagram" rel="noopener" target="_blank"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85C2.38 3.92 3.9 2.38 7.15 2.23 8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.26 2.7.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.35 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.62-6.78-6.98-6.98C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.41-11.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z"/></svg></a><a href="https://x.com/alliotools" aria-label="X (Twitter)" rel="noopener" target="_blank"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-7.2 8.2L23 22h-6.9l-5.4-7-6.2 7H1.3l7.7-8.8L1 2h7l4.9 6.4L18.9 2z"/></svg></a><a href="https://www.linkedin.com/company/alliotools-" aria-label="LinkedIn" rel="noopener" target="_blank"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.93 6 2.5 6S0 4.88 0 3.5 1.05 1 2.5 1s2.48 1.12 2.48 2.5zM.4 8.5h4.2V23H.4V8.5zM8.4 8.5h4v2c.6-1 1.9-2.3 4.1-2.3 4.4 0 5.2 2.9 5.2 6.6V23h-4.2v-6.7c0-1.6 0-3.7-2.2-3.7s-2.6 1.8-2.6 3.6V23H8.4V8.5z"/></svg></a></div><div class="footer-bottom"><span class="footer-copy">© 2026 Allio Tools. All rights reserved.</span></div></div></footer><button class="scroll-top" id="scroll-top" aria-label="Back to top" title="Back to top">↑</button> <script> (function(){ var btn=document.getElementById('scroll-top'); if(!btn)return; window.addEventListener('scroll',function(){btn.classList.toggle('visible',window.scrollY>320);},{passive:true}); btn.addEventListener('click',function(){window.scrollTo({top:0,behavior:'smooth'});}); })(); </script> <script> (function(){ function getFavs(){try{return JSON.parse(localStorage.getItem('allio_favs')||'[]');}catch(e){return[];}} function render(favs){ var el=document.getElementById('fav-sidebar-list');if(!el)return; if(!favs.length){el.innerHTML='<p class="text-muted text-sm" style="padding:.2rem .4rem">No favorites yet.<br>Click ♡ on any tool.</p>';return;} el.innerHTML=favs.slice(-6).reverse().map(function(f){ return '<a href="'+f.url+'" class="sidebar-link"><span class="tool-icon">'+(f.icon||'🔧')+'</span><span>'+f.title+'</span></a>'; }).join(''); } window._updateFavWidgets=render; function getRV(){try{return JSON.parse(localStorage.getItem('allio_rv')||'[]');}catch(e){return[];}} function recordRV(){ var m=document.querySelector('meta[name="tool-id"]'); if(!m)return; var id=m.content,title=document.title.split(' — ')[0],icon=(document.querySelector('.tool-title-row h1')||{}).textContent||'',url=location.pathname; var rv=getRV().filter(function(r){return r.id!==id;}); rv.unshift({id:id,title:title,url:url}); rv=rv.slice(0,8); localStorage.setItem('allio_rv',JSON.stringify(rv)); } function renderRV(){ var el=document.getElementById('rv-list');if(!el)return; var rv=getRV().filter(function(r){return r.url!==location.pathname;}).slice(0,6); if(!rv.length){el.innerHTML='<li style="font-size:.78rem;color:var(--muted);padding:.2rem .4rem">Your recently used tools appear here.</li>';return;} el.innerHTML=rv.map(function(r){ return '<li class="rv-item"><a href="'+r.url+'"><span class="rv-icon">🔧</span>'+r.title+'</a></li>'; }).join(''); } document.addEventListener('DOMContentLoaded',function(){render(getFavs());recordRV();renderRV();}); })(); </script> <script>(function(){ function ogpFetch(){ var src=document.getElementById('ogp-html').value.trim(); var out=document.getElementById('ogp-out'); if(!src){out.innerHTML='<p style="opacity:.6">Paste HTML source first.</p>';return;} var parser=new DOMParser(); var doc=parser.parseFromString(src,'text/html'); var tags={}; doc.querySelectorAll('meta').forEach(function(m){ var prop=m.getAttribute('property')||m.getAttribute('name')||''; var content=m.getAttribute('content')||''; if(prop&&content)tags[prop.toLowerCase()]=content; }); var titleEl=doc.querySelector('title'); var pageTitle=titleEl?titleEl.textContent.trim():''; var ogTitle=tags['og:title']||tags['twitter:title']||pageTitle||'(No title found)'; var ogDesc=tags['og:description']||tags['twitter:description']||tags['description']||'(No description found)'; var ogImg=tags['og:image']||tags['twitter:image']||''; var ogSite=tags['og:site_name']||''; var ogUrl=tags['og:url']||''; var html=''; // Facebook / LinkedIn card html+='<div style="margin-bottom:1.25rem">'; html+='<div style="font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.5;margin-bottom:.4rem">Facebook / LinkedIn Preview</div>'; html+='<div style="border:1px solid var(--border);border-radius:8px;overflow:hidden;max-width:440px;background:var(--surface)">'; if(ogImg){html+='<img src="'+escH(ogImg)+'" alt="" style="width:100%;max-height:210px;object-fit:cover;display:block">';} else{html+='<div style="background:var(--border);height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8rem">No og:image found</div>';} html+='<div style="padding:.75rem">'; if(ogSite)html+='<div style="font-size:.7rem;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem">'+escH(ogSite)+'</div>'; html+='<div style="font-weight:700;font-size:.9rem;color:var(--fg)">'+escH(ogTitle)+'</div>'; html+='<div style="font-size:.8rem;color:var(--muted);margin-top:.2rem">'+escH(ogDesc.substring(0,120))+'</div>'; html+='</div></div></div>'; // Twitter / X card html+='<div style="margin-bottom:1.25rem">'; html+='<div style="font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.5;margin-bottom:.4rem">Twitter / X Preview</div>'; html+='<div style="border:1px solid var(--border);border-radius:12px;overflow:hidden;max-width:440px;background:var(--surface)">'; if(ogImg){html+='<img src="'+escH(ogImg)+'" alt="" style="width:100%;max-height:210px;object-fit:cover;display:block">';} html+='<div style="padding:.75rem">'; html+='<div style="font-weight:700;font-size:.9rem;color:var(--fg)">'+escH(ogTitle)+'</div>'; html+='<div style="font-size:.8rem;color:var(--muted);margin:.15rem 0">'+escH(ogDesc.substring(0,100))+'</div>'; if(ogUrl)html+='<div style="font-size:.75rem;color:var(--muted);margin-top:.25rem">🔗 '+escH(ogUrl.replace(/^https?:\/\//,'').substring(0,50))+'</div>'; html+='</div></div></div>'; // Tag table var tagKeys=Object.keys(tags).sort(); if(tagKeys.length){ html+='<div style="font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.5;margin-bottom:.4rem">Detected Tags ('+tagKeys.length+')</div>'; html+='<div style="display:grid;grid-template-columns:minmax(130px,auto) 1fr;gap:.2rem .5rem;font-size:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.5rem">'; tagKeys.forEach(function(k){ html+='<code style="color:var(--acc);opacity:.85">'+escH(k)+'</code><span style="word-break:break-all;opacity:.85">'+escH(tags[k].substring(0,200))+'</span>'; }); html+='</div>'; } else { html+='<p style="color:#f59e0b;font-size:.85rem">⚠ No Open Graph or Twitter Card meta tags found in this HTML.</p>'; } out.innerHTML=html; } function escH(s){return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');} window.ogpFetch=ogpFetch; })();</script> <script> (function(){ var KEY='allio_hist_open-graph-preview'; if(document.documentElement.classList.contains('is-pro')){ var saved=localStorage.getItem(KEY); if(saved){ var el=document.querySelector('.tool-wrap .output,.tool-wrap [id$="-result"],.tool-wrap [id$="-out"]'); if(el&&el.innerHTML.trim()==='')try{el.innerHTML=saved;}catch(e){} } } var obs=new MutationObserver(function(){ if(!document.documentElement.classList.contains('is-pro'))return; var el=document.querySelector('.tool-wrap .output,.tool-wrap [id$="-result"],.tool-wrap [id$="-out"]'); if(el&&el.innerHTML.trim())localStorage.setItem(KEY,el.innerHTML); }); var wrap=document.querySelector('.tool-wrap'); if(wrap)obs.observe(wrap,{childList:true,subtree:true,characterData:true}); })(); </script> </body></html>