在线免费Open Graph预览
粘贴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.
Related guideHow to Check DNS Records Online — A Practical Guide
→Who uses the Open Graph预览?
- 在发布文章之前预览社交分享外观的内容营销人员。
- 在为新网站添加 Open Graph 后验证 OG 元标签实现情况的开发者。
- 为品牌活动落地页抽查链接预览的社交媒体经理。
How the Open Graph预览 works
1
查看页面的 HTML 源代码（大多数浏览器中按 Ctrl+U），全选并粘贴到文本区域中。
2
点击 Generate Preview，从粘贴的 HTML 中提取 Open Graph 和 Twitter Card 元标签。
3
查看由您的标签生成的 Facebook/LinkedIn 预览卡片以及单独的 Twitter/X 预览卡片。
4
滚动到 Detected Tags 列表，查看找到的每个 og: 和 twitter: 元标签及其原始值。
Tips & tricks
- 没有实时抓取网址功能——请粘贴页面的实际 HTML 源代码，而不是网址，否则工具将无内容可解析。
- 只会渲染两张预览卡片：一张 Facebook/LinkedIn 组合卡片和一张 Twitter/X 卡片——没有单独的 WhatsApp 预览，也没有可逐个切换平台的标签界面。
- 没有带通过/未通过标记的专门验证核对清单——请自行将 Detected Tags 列表与必需的 og: 字段（至少 title、description、image、url）进行对照。
- 如果 og:title 或 og:description 缺失，工具会回退到您的
标签和元描述——这有助于查看当 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">我可以直接输入页面网址，而不粘贴 HTML 吗？</summary><div class="faq-a"><p>不可以——此工具只解析您直接粘贴的 HTML。请查看页面源代码（Ctrl+U），全选、复制并粘贴到文本区域——没有实时抓取网址的选项。</p></div></details><details class="faq-item"><summary class="faq-q">什么是 Open Graph 标签？</summary><div class="faq-a"><p>Open Graph（OG）标签是 HTML <head> 中的元标签，用于控制您的页面在社交媒体上分享时的呈现方式。关键标签有：og:title、og:description、og:image、og:url、og:type。没有它们，社交平台会使用页面上的任意内容。</p></div></details><details class="faq-item"><summary class="faq-q">这个工具会显示 WhatsApp 预览吗？</summary><div class="faq-a"><p>不会——它生成两张预览卡片：一张 Facebook/LinkedIn 风格的组合卡片，和一张 Twitter/X 卡片，两者都是根据相同的 og: 和 twitter: 标签构建的。没有专门的 WhatsApp 风格预览，也没有平台之间切换的标签页。</p></div></details><details class="faq-item"><summary class="faq-q">Open Graph 推荐使用什么图片尺寸？</summary><div class="faq-a"><p>推荐：1200×630 像素（1.91:1 比例），适用于所有主流平台。最小：600×315 像素。图片必须小于 8 MB。PNG 或 JPG 最可靠。避免文字靠近边缘的图片，因为有些平台会裁剪它们。</p></div></details><details class="faq-item"><summary class="faq-q">我的 OG 标签已经设置好了，但分享时仍显示旧数据——为什么？</summary><div class="faq-a"><p>社交平台会积极缓存 OG 数据。使用 Facebook 分享调试器、Twitter Card Validator 和 LinkedIn Post Inspector 强制刷新缓存。此工具是在本地预览您的标签——它无法为您清除平台的缓存。</p></div></details><details class="faq-item"><summary class="faq-q">Is my data safe when using the Open Graph预览?</summary><div class="faq-a"><p>Completely safe. The 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 Open Graph预览?</summary><div class="faq-a"><p>The 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 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 网络工具</p><div class="sidebar-links"><a class="sidebar-link" href="/zh/ip-address-lookup/"><span class="tool-icon">🌐</span><span>IP地址查询</span></a><a class="sidebar-link" href="/zh/website-speed-test/"><span class="tool-icon">🚀</span><span>网站速度测试</span></a><a class="sidebar-link" href="/zh/dns-lookup/"><span class="tool-icon">🔍</span><span>DNS查询</span></a><a class="sidebar-link" href="/zh/http-status-codes/"><span class="tool-icon">📋</span><span>HTTP状态码参考</span></a><a class="sidebar-link" href="/zh/subnet-calculator/"><span class="tool-icon">🌐</span><span>子网计算器</span></a><a class="sidebar-link" href="/zh/email-validator/"><span class="tool-icon">✉️</span><span>电子邮件验证器</span></a><a class="sidebar-link" href="/zh/password-strength-checker/"><span class="tool-icon">🔒</span><span>密码强度检查器</span></a><a class="sidebar-link" href="/zh/server-status-checker/"><span class="tool-icon">🟢</span><span>服务器状态检查器</span></a></div><a href="/zh/tools/web/" class="sidebar-see-all">See all 网络工具 →</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="/zh/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/" class="active">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="/zh/">首页</a><a href="/zh/tools/">所有工具</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>