Pratinjau Open Graph Online Gratis
Pratinjau tampilan halaman Anda di media sosial dengan menempelkan 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.
Mungkin kamu juga suka:📋 Formatter JSON🔐 Encoder/Decoder Base64🏠 Kalkulator KPR💱 Konverter Mata Uang
Related guideHow to Check DNS Records Online — A Practical Guide
→Who uses the Pratinjau Open Graph?
- Pemasar konten yang mempratinjau tampilan berbagi sosial sebelum menerbitkan artikel.
- Developer yang memverifikasi implementasi tag meta OG setelah menambahkan Open Graph ke situs baru.
- Manajer media sosial yang memeriksa secara acak pratinjau tautan untuk halaman arahan kampanye bermerek.
How the Pratinjau Open Graph works
1
Lihat kode sumber HTML halaman Anda (Ctrl+U di sebagian besar browser), pilih semua, dan tempel ke area teks.
2
Klik Generate Preview untuk mengekstrak tag Open Graph dan Twitter Card dari HTML yang ditempel.
3
Lihat kartu pratinjau Facebook/LinkedIn dan kartu pratinjau Twitter/X terpisah, yang dihasilkan dari tag Anda.
4
Gulir ke daftar Detected Tags untuk melihat setiap tag meta og: dan twitter: yang ditemukan, dengan nilai mentahnya.
Tips & tricks
- Tidak ada pengambilan URL langsung — tempel kode sumber HTML aktual halaman Anda, bukan URL-nya, atau alat ini tidak memiliki apa pun untuk diurai.
- Hanya dua kartu pratinjau yang dirender: kartu gabungan Facebook/LinkedIn dan kartu Twitter/X — tidak ada pratinjau WhatsApp terpisah atau UI tab untuk beralih antar platform satu per satu.
- Tidak ada daftar pemeriksaan validasi khusus dengan penanda lulus/gagal — periksa sendiri daftar Detected Tags terhadap kolom og: yang diperlukan (minimal title, description, image, url).
- Jika og:title atau og:description hilang, alat ini kembali ke tag
dan meta description Anda — berguna untuk melihat apa yang akan ditampilkan platform secara default ketika tag OG tidak ada.</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">Bisakah saya cukup memasukkan URL halaman saya alih-alih menempel HTML?</summary><div class="faq-a"><p>Tidak — alat ini hanya menguraikan HTML yang Anda tempel langsung. Lihat kode sumber halaman Anda (Ctrl+U), pilih semua, salin, dan tempel ke area teks — tidak ada opsi pengambilan URL langsung.</p></div></details><details class="faq-item"><summary class="faq-q">Apa itu tag Open Graph?</summary><div class="faq-a"><p>Tag Open Graph (OG) adalah tag meta di <head> HTML Anda yang mengontrol bagaimana halaman Anda muncul saat dibagikan di media sosial. Tag kunci: og:title, og:description, og:image, og:url, og:type. Tanpanya, platform sosial menggunakan konten sembarang dari halaman Anda.</p></div></details><details class="faq-item"><summary class="faq-q">Apakah alat ini menampilkan pratinjau WhatsApp?</summary><div class="faq-a"><p>Tidak — alat ini menghasilkan dua kartu pratinjau: kartu gabungan gaya Facebook/LinkedIn dan kartu Twitter/X, keduanya dibangun dari tag og: dan twitter: yang sama. Tidak ada pratinjau gaya WhatsApp khusus atau pengalih tab antar platform.</p></div></details><details class="faq-item"><summary class="faq-q">Ukuran gambar apa yang disarankan untuk Open Graph?</summary><div class="faq-a"><p>Disarankan: 1200×630 piksel (rasio 1,91:1) untuk semua platform utama. Minimum: 600×315 piksel. Gambar harus di bawah 8 MB. PNG atau JPG paling dapat diandalkan. Hindari gambar dengan teks dekat tepi karena beberapa platform memotongnya.</p></div></details><details class="faq-item"><summary class="faq-q">Tag OG saya sudah diatur tetapi berbagi masih menampilkan data lama — mengapa?</summary><div class="faq-a"><p>Platform sosial menyimpan cache data OG secara agresif. Gunakan Facebook Sharing Debugger, Twitter Card Validator, dan LinkedIn Post Inspector untuk memaksa pembaruan cache. Alat ini mempratinjau tag Anda secara lokal — alat ini tidak dapat membersihkan cache platform untuk Anda.</p></div></details><details class="faq-item"><summary class="faq-q">Is my data safe when using the Pratinjau Open Graph?</summary><div class="faq-a"><p>Completely safe. The Pratinjau 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 Pratinjau Open Graph?</summary><div class="faq-a"><p>The Pratinjau 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 Pratinjau 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 Web & SEO</p><div class="sidebar-links"><a class="sidebar-link" href="/id/ip-address-lookup/"><span class="tool-icon">🌐</span><span>Pencarian Alamat IP</span></a><a class="sidebar-link" href="/id/website-speed-test/"><span class="tool-icon">🚀</span><span>Uji Kecepatan Situs Web</span></a><a class="sidebar-link" href="/id/dns-lookup/"><span class="tool-icon">🔍</span><span>Pencarian DNS</span></a><a class="sidebar-link" href="/id/http-status-codes/"><span class="tool-icon">📋</span><span>Kode Status HTTP</span></a><a class="sidebar-link" href="/id/subnet-calculator/"><span class="tool-icon">🌐</span><span>Kalkulator Subnet</span></a><a class="sidebar-link" href="/id/email-validator/"><span class="tool-icon">✉️</span><span>Validator Email</span></a><a class="sidebar-link" href="/id/password-strength-checker/"><span class="tool-icon">🔒</span><span>Pemeriksa Kekuatan Kata Sandi</span></a><a class="sidebar-link" href="/id/server-status-checker/"><span class="tool-icon">🟢</span><span>Pemeriksa Status Server</span></a></div><a href="/id/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="/id/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/">ES</a><a href="/ar/open-graph-preview/">AR</a><a href="/id/open-graph-preview/" class="active">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="/id/">Beranda</a><a href="/id/tools/">Semua Alat</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>