Social Media Link Preview Tool
Updated September 2026
Preview how your page looks when shared on Facebook, LinkedIn, and Twitter/X by pasting your HTML source. Test Open Graph and Twitter Card meta tags — free online OG previewer.
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.
You might also like:📋 JSON Formatter🔐 Base64 Encoder / Decoder🏠 Mortgage Calculator💱 Currency Converter
Related guideHow to Check DNS Records Online — A Practical Guide
→Diagnosing web and network issues quickly is critical for site owners, developers, and SEO professionals. The Open Graph Preview delivers actionable data in seconds.
Preview how your page looks when shared on Facebook, LinkedIn, and Twitter/X by pasting your HTML source. Test Open Graph and Twitter Card meta tags — free online OG previewer. Results are immediate — no waiting, no loading screens, no account required.
Who uses the Open Graph Preview?
- Content marketers previewing social sharing appearance before publishing articles.
- Developers verifying OG meta tag implementation after adding Open Graph to a new site.
- Social media managers spot-checking link previews for branded campaign landing pages.
Common uses and search terms
The Open Graph Preview is frequently used for: open graph, social preview, og preview, link preview. Whether you need a quick result or are working through a longer project, the tool handles all common variations without any configuration.
Why use Allio Tools's Open Graph Preview?
Everything runs locally in your browser. No data is sent to a server, logged, or stored anywhere. The tool is completely free with no usage limits, no premium tiers, and no account required. Available in 11 languages and optimised for all screen sizes, the Open Graph Preview works on desktop, tablet, and mobile with no app download needed.
See also:IP Address Lookup · Website Speed Test · DNS Lookup
How the Open Graph Preview works
1
View your page's HTML source (Ctrl+U in most browsers), select all, and paste it into the text area.
2
Click Generate Preview to extract Open Graph and Twitter Card meta tags from the pasted HTML.
3
Review the Facebook/LinkedIn preview card and the separate Twitter/X preview card generated from your tags.
4
Scroll to the Detected Tags list to see every og: and twitter: meta tag found, with its raw value.
Tips & tricks
- There's no live URL fetch — paste your actual page HTML source, not the URL, or the tool has nothing to parse.
- Only two preview cards render: a combined Facebook/LinkedIn card and a Twitter/X card — there's no separate WhatsApp preview or a tab UI to switch between platforms one at a time.
- There's no dedicated validation checklist with pass/fail markers — check the Detected Tags list against the required og: fields yourself (title, description, image, url at minimum).
- If og:title or og:description are missing, the tool falls back to your
tag and meta description — useful for seeing what platforms will show by default when OG tags are absent.</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">Can I just enter my page's URL instead of pasting HTML?</summary><div class="faq-a"><p>No — this tool only parses HTML you paste in directly. View your page's source (Ctrl+U), select all, copy, and paste it into the text area — there's no live URL-fetch option.</p></div></details><details class="faq-item"><summary class="faq-q">What are Open Graph tags?</summary><div class="faq-a"><p>Open Graph (OG) tags are meta tags in your HTML <head> that control how your page appears when shared on social media. The key tags: og:title, og:description, og:image, og:url, og:type. Without them, social platforms use arbitrary content from your page.</p></div></details><details class="faq-item"><summary class="faq-q">Does this tool show a WhatsApp preview?</summary><div class="faq-a"><p>No — it generates two preview cards: a combined Facebook/LinkedIn-style card and a Twitter/X card, both built from the same og: and twitter: tags. There's no dedicated WhatsApp-styled preview or a tab switcher between platforms.</p></div></details><details class="faq-item"><summary class="faq-q">What image size is recommended for Open Graph?</summary><div class="faq-a"><p>Recommended: 1200×630 pixels (1.91:1 ratio) for all major platforms. Minimum: 600×315 pixels. Images must be under 8 MB. PNG or JPG are most reliable. Avoid images with text near edges as some platforms crop them.</p></div></details><details class="faq-item"><summary class="faq-q">My OG tags are set but sharing still shows old data — why?</summary><div class="faq-a"><p>Social platforms cache OG data aggressively. Use the Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector to force a cache refresh. This tool previews your tags locally — it can't clear a platform's cache for you.</p></div></details><details class="faq-item"><summary class="faq-q">Is my data safe when using the Open Graph Preview?</summary><div class="faq-a"><p>Completely safe. The Open Graph Preview 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 Open Graph Preview?</summary><div class="faq-a"><p>The Open Graph Preview 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 Open Graph Preview 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 class="mcp-callout"><div class="mcp-callout-icon">⚡</div><div class="mcp-callout-body"><strong>Use Open Graph Preview inside your AI assistant</strong><p>Works with ChatGPT, Claude, Cursor, GitHub Copilot, VS Code, Poe and more — 106+ tools, zero data collection.</p><div class="mcp-platforms"><span class="mcp-pb mcp-pb--gpt"><span class="mcp-pb-dot"></span>ChatGPT</span><span class="mcp-pb mcp-pb--claude"><span class="mcp-pb-dot"></span>Claude</span><span class="mcp-pb mcp-pb--cursor"><span class="mcp-pb-dot"></span>Cursor</span><span class="mcp-pb mcp-pb--copilot"><span class="mcp-pb-dot"></span>Copilot</span><span class="mcp-pb mcp-pb--vscode"><span class="mcp-pb-dot"></span>VS Code</span><span class="mcp-pb mcp-pb--poe"><span class="mcp-pb-dot"></span>Poe</span></div></div><div class="mcp-callout-actions"><a href="https://chatgpt.com/g/g-6a5f8a5ec308819189cc79864bbdc7c5-allio-tools" class="mcp-callout-btn mcp-callout-btn--gpt" target="_blank" rel="noopener">Use in ChatGPT →</a><a href="/mcp/" class="mcp-callout-btn">Get MCP server →</a></div></div><aside class="pf-tool-panel"><div class="pf-tool-panel-label">You might also need</div><div class="pf-tool-panel-cards"><a class="pf-card" href="https://surferseo.com/" target="_blank" rel="noopener sponsored" data-cats="web text"><div class="pf-card-top"><span class="pf-icon">🏄</span><div class="pf-card-info"><strong class="pf-name">Surfer SEO</strong><span class="pf-badge">Hot</span></div><span class="pf-pricing">From $89</span></div><p class="pf-tagline">Write and optimise content that actually ranks. Real-time SEO scoring as you type.</p><span class="pf-cta">Visit →</span></a></div><p class="pf-tool-disclaimer">Some links are affiliate partnerships — we may earn a small commission if you sign up, at no extra cost to you.</p></aside><details class="embed-widget" style="margin:2rem 0;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)"><summary style="cursor:pointer;font-weight:600;color:var(--fg);list-style:none;display:flex;align-items:center;gap:.5rem"><span style="font-size:1.1rem"></></span> Embed this tool on your site </summary><p style="margin:.75rem 0 .5rem;color:var(--muted);font-size:.9rem">Copy and paste this code to embed the Open Graph Preview on any web page. Free, no sign-up required.</p><textarea class="embed-select" aria-label="Embed code" readonly style="width:100%;font-family:monospace;font-size:.8rem;padding:.6rem;border:1px solid var(--border);border-radius:.5rem;background:var(--bg);color:var(--fg);resize:vertical;min-height:90px"><iframe src="https://allio.tools/open-graph-preview/?embed=1" width="100%" height="640" frameborder="0" style="border:1px solid #e2e8f0;border-radius:12px" title="Open Graph Preview — Free Online Tool" loading="lazy"></iframe><p>Source: <a href="https://allio.tools/open-graph-preview/">Open Graph Preview</a> — Allio Tools</p></textarea><p style="margin:.4rem 0 0;font-size:.78rem;color:var(--muted)">The attribution link is required. <a href="/about/">Learn more about Allio Tools</a>.</p></details></div><aside class="tool-sidebar-panel" aria-label="Sidebar"><div class="sidebar-widget"><p class="sidebar-widget-title">More Web & SEO</p><div class="sidebar-links"><a class="sidebar-link" href="/ip-address-lookup/"><span class="tool-icon">🌐</span><span>IP Address Lookup</span></a><a class="sidebar-link" href="/website-speed-test/"><span class="tool-icon">🚀</span><span>Website Speed Test</span></a><a class="sidebar-link" href="/dns-lookup/"><span class="tool-icon">🔍</span><span>DNS Lookup</span></a><a class="sidebar-link" href="/http-status-codes/"><span class="tool-icon">📋</span><span>HTTP Status Codes</span></a><a class="sidebar-link" href="/subnet-calculator/"><span class="tool-icon">🌐</span><span>Subnet Calculator</span></a><a class="sidebar-link" href="/email-validator/"><span class="tool-icon">✉️</span><span>Email Validator</span></a><a class="sidebar-link" href="/password-strength-checker/"><span class="tool-icon">🔒</span><span>Password Strength Checker</span></a><a class="sidebar-link" href="/server-status-checker/"><span class="tool-icon">🟢</span><span>Server Status Checker</span></a></div><a href="/tools/web/" class="sidebar-see-all">See all Web & SEO →</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="/favorites/" class="sidebar-see-all">View all favorites →</a></div><div class="sidebar-widget" style="background:linear-gradient(135deg,rgba(var(--acc-rgb),.05),rgba(var(--acc-rgb),.12));border-color:rgba(var(--acc-rgb),.2)"><div style="font-size:1.4rem;margin-bottom:.35rem;text-align:center">📬</div><p class="sidebar-widget-title" style="text-align:center;margin-bottom:.3rem">Monthly Tool Digest</p><p style="font-size:.78rem;color:var(--muted);text-align:center;margin-bottom:.65rem;line-height:1.5">New tools & tips once a month. No spam.</p><input type="email" id="ts-email" placeholder="your@email.com" autocomplete="email" aria-label="Email address" style="width:100%;box-sizing:border-box;padding:.45rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--fg);font-size:.82rem;margin-bottom:.4rem"><button onclick="window._subscribeTool()" id="ts-btn" style="width:100%;padding:.45rem;font-size:.82rem;font-weight:600">Subscribe →</button><p id="ts-msg" class="subscribe-msg" style="font-size:.78rem;margin-top:.35rem;text-align:center"></p> <script> window._subscribeTool=function(){ var email=document.getElementById('ts-email').value.trim(); var msg=document.getElementById('ts-msg'); var btn=document.getElementById('ts-btn'); if(!email||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){msg.textContent='Enter a valid email.';msg.className='subscribe-msg err';return;} btn.disabled=true;btn.textContent='...'; fetch('/api/newsletter',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,source:'tool-sidebar-open-graph-preview'})}) .then(function(r){return r.json();}) .then(function(d){ msg.textContent=d.ok?'✓ Subscribed!':(d.error||'Something went wrong.'); msg.className='subscribe-msg '+(d.ok?'ok':'err'); btn.textContent='Subscribe →';btn.disabled=false; }).catch(function(){msg.textContent='Network error. Try again.';msg.className='subscribe-msg err';btn.textContent='Subscribe →';btn.disabled=false;}); }; </script> </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><script> (function(){ if(localStorage.getItem('allio_user'))return; if(/^\/(login|register)\/?$/.test(location.pathname))return; // REVERTED 2026-06-25: use_fedcm_for_prompt:false silently killed the // prompt entirely in current Chrome -- Google/Chrome have deprecated and // removed the legacy non-FedCM One Tap UI, so setting this to false is no // longer "same UI, different API," it's "no UI at all." Back to // use_fedcm_for_prompt:true, which means the FedCM console error from // session 47/48 is back too -- that's the real, unavoidable trade-off of // using One Tap at all. Do not set this to false again. fetch('/api/auth/google/config').then(function(r){return r.json();}).then(function(cfg){ if(!cfg.clientId)return; var s=document.createElement('script'); s.src='https://accounts.google.com/gsi/client'; s.async=true; s.onload=function(){ google.accounts.id.initialize({ client_id:cfg.clientId, callback:handleCredentialResponse, auto_select:false, cancel_on_tap_outside:true, use_fedcm_for_prompt:true }); google.accounts.id.prompt(); }; document.head.appendChild(s); }).catch(function(){}); function handleCredentialResponse(response){ fetch('/api/auth/google/onetap',{method:'POST',credentials:'include',headers:{'Content-Type':'application/json'}, body:JSON.stringify({credential:response.credential})}).then(function(r){return r.json();}).then(function(data){ if(data.ok){localStorage.setItem('allio_user','1');location.reload();} }).catch(function(){}); } })(); </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/" class="active">EN</a><a href="/zh/open-graph-preview/">ZH</a><a href="/es/open-graph-preview/">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="/">Home</a><a href="/tools/">All Tools</a><a href="/compare/">Compare</a><a href="/pro/">Pro ✦</a></div><div class="footer-col"><h3>Resources</h3><a href="/blog/">Blog</a><a href="/mcp/">MCP</a><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>