Open Graph Vorschau — Kostenlos Online
Sehen Sie, wie Ihre Seite in sozialen Medien aussieht, indem Sie HTML einfügen.
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.
Das könnte Ihnen auch gefallen:📋 JSON-Formatierer🔐 Base64-Kodierer🏠 Hypothekenrechner💱 Währungsrechner
Related guideHow to Check DNS Records Online — A Practical Guide
→Who uses the Open Graph Vorschau?
- Content-Marketer, die das Erscheinungsbild beim Teilen in sozialen Medien vor der Veröffentlichung von Artikeln überprüfen.
- Entwickler, die die OG-Meta-Tag-Implementierung nach dem Hinzufügen von Open Graph zu einer neuen Website verifizieren.
- Social-Media-Manager, die Link-Vorschauen für gebrandete Kampagnen-Landingpages stichprobenartig prüfen.
How the Open Graph Vorschau works
1
Betrachten Sie den HTML-Quellcode Ihrer Seite (Strg+U in den meisten Browsern), markieren Sie alles und fügen Sie ihn in das Textfeld ein.
2
Klicken Sie auf Generate Preview, um Open-Graph- und Twitter-Card-Meta-Tags aus dem eingefügten HTML zu extrahieren.
3
Betrachten Sie die Facebook/LinkedIn-Vorschaukarte und die separate Twitter/X-Vorschaukarte, die aus Ihren Tags generiert werden.
4
Scrollen Sie zur Liste Detected Tags, um jedes gefundene og:- und twitter:-Meta-Tag mit seinem Rohwert zu sehen.
Tips & tricks
- Es gibt kein Live-URL-Abrufen — fügen Sie den tatsächlichen HTML-Quellcode Ihrer Seite ein, nicht die URL, sonst hat das Tool nichts zu parsen.
- Es werden nur zwei Vorschaukarten gerendert: eine kombinierte Facebook/LinkedIn-Karte und eine Twitter/X-Karte — es gibt keine separate WhatsApp-Vorschau oder eine Tab-UI, um zwischen Plattformen einzeln zu wechseln.
- Es gibt keine dedizierte Validierungs-Checkliste mit Bestanden/Nicht-bestanden-Markierungen — prüfen Sie die Liste Detected Tags selbst gegen die erforderlichen og:-Felder (mindestens title, description, image, url).
- Wenn og:title oder og:description fehlen, greift das Tool auf Ihr
-Tag und Ihre Meta-Beschreibung zurück — nützlich, um zu sehen, was Plattformen standardmäßig zeigen, wenn OG-Tags fehlen.</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">Kann ich statt HTML einzufügen einfach die URL meiner Seite eingeben?</summary><div class="faq-a"><p>Nein — dieses Tool parst nur direkt eingefügtes HTML. Betrachten Sie den Quellcode Ihrer Seite (Strg+U), markieren Sie alles, kopieren und fügen Sie ihn in das Textfeld ein — es gibt keine Live-URL-Abrufoption.</p></div></details><details class="faq-item"><summary class="faq-q">Was sind Open-Graph-Tags?</summary><div class="faq-a"><p>Open-Graph-Tags (OG) sind Meta-Tags im <head> Ihres HTML, die steuern, wie Ihre Seite beim Teilen in sozialen Medien erscheint. Die Schlüssel-Tags: og:title, og:description, og:image, og:url, og:type. Ohne sie verwenden soziale Plattformen beliebigen Inhalt von Ihrer Seite.</p></div></details><details class="faq-item"><summary class="faq-q">Zeigt dieses Tool eine WhatsApp-Vorschau?</summary><div class="faq-a"><p>Nein — es generiert zwei Vorschaukarten: eine kombinierte Facebook/LinkedIn-artige Karte und eine Twitter/X-Karte, beide aus denselben og:- und twitter:-Tags erstellt. Es gibt keine dedizierte WhatsApp-artige Vorschau oder einen Tab-Umschalter zwischen Plattformen.</p></div></details><details class="faq-item"><summary class="faq-q">Welche Bildgröße wird für Open Graph empfohlen?</summary><div class="faq-a"><p>Empfohlen: 1200×630 Pixel (Verhältnis 1,91:1) für alle wichtigen Plattformen. Minimum: 600×315 Pixel. Bilder müssen unter 8 MB sein. PNG oder JPG sind am zuverlässigsten. Vermeiden Sie Bilder mit Text nahe den Rändern, da manche Plattformen sie beschneiden.</p></div></details><details class="faq-item"><summary class="faq-q">Meine OG-Tags sind gesetzt, aber beim Teilen werden immer noch alte Daten angezeigt — warum?</summary><div class="faq-a"><p>Soziale Plattformen cachen OG-Daten aggressiv. Verwenden Sie den Facebook Sharing Debugger, Twitter Card Validator und LinkedIn Post Inspector, um eine Cache-Aktualisierung zu erzwingen. Dieses Tool zeigt eine lokale Vorschau Ihrer Tags — es kann den Cache einer Plattform nicht für Sie leeren.</p></div></details><details class="faq-item"><summary class="faq-q">Is my data safe when using the Open Graph Vorschau?</summary><div class="faq-a"><p>Completely safe. The Open Graph Vorschau 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 Vorschau?</summary><div class="faq-a"><p>The Open Graph Vorschau 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 Vorschau 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-Tools</p><div class="sidebar-links"><a class="sidebar-link" href="/de/ip-address-lookup/"><span class="tool-icon">🌐</span><span>IP-Adresse nachschlagen</span></a><a class="sidebar-link" href="/de/website-speed-test/"><span class="tool-icon">🚀</span><span>Website-Geschwindigkeitstest</span></a><a class="sidebar-link" href="/de/dns-lookup/"><span class="tool-icon">🔍</span><span>DNS-Abfrage</span></a><a class="sidebar-link" href="/de/http-status-codes/"><span class="tool-icon">📋</span><span>HTTP-Statuscodes</span></a><a class="sidebar-link" href="/de/subnet-calculator/"><span class="tool-icon">🌐</span><span>Subnetz-Rechner</span></a><a class="sidebar-link" href="/de/email-validator/"><span class="tool-icon">✉️</span><span>E-Mail-Validator</span></a><a class="sidebar-link" href="/de/password-strength-checker/"><span class="tool-icon">🔒</span><span>Passwortstärke-Prüfer</span></a><a class="sidebar-link" href="/de/server-status-checker/"><span class="tool-icon">🟢</span><span>Server-Status-Prüfer</span></a></div><a href="/de/tools/web/" class="sidebar-see-all">See all Web-Tools →</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="/de/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/">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/" class="active">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="/de/">Startseite</a><a href="/de/tools/">Alle 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>