Open-Graph-Tag-Generator 🔒 Läuft lokal in Ihrem Browser — nichts wird hochgeladen.
Generieren Sie Open-Graph-Meta-Tags mit einer Live-Linkvorschau-Karte.
Link-Vorschau
![]()
Kein Bild Generierte Meta-Tags
Über dieses Tool
Open-Graph-Tags sind ein kleiner Block zusätzlicher ``-Tags im `
` einer Seite, die Facebook, LinkedIn, Discord, Slack und den meisten anderen Plattformen mitteilen, wie die Link-Vorschau beim Teilen der URL aussehen soll — welcher Titel, welche Beschreibung und welches Bild anstelle eines nackten Links angezeigt werden. Ohne sie raten die meisten Plattformen anhand des eigenen `` der Seite und des ersten Bildes, was oft falsch oder unvollständig aussieht.</p><p data-astro-cid-zpu62n3h>Dieser Generator erstellt für Sie die Tags `og:title`, `og:description`, `og:url`, `og:image`, `og:type` und optional `og:site_name`, mit einer Live-Vorschau, die annähert, wie die Karte typischerweise dargestellt wird. Da sich Rendering-Details (Bildzuschnitt, Zeichenlimits, Caching-Verhalten) zwischen Plattformen leicht unterscheiden, lohnt es sich, das Endergebnis vor einer breiten Veröffentlichung noch mit dem eigenen Debugger oder Vorschau-Tool der Zielplattform zu testen — hier läuft alles lokal in Ihrem Browser, nichts wird hochgeladen.</p> <h2>Häufige Fragen</h2> <div class="faq-item"> <h3>Welche Bildgröße sollte ich für og:image verwenden?</h3> <p>1200×630px ist die weithin empfohlene Größe — sie wird auf Facebook, LinkedIn und den meisten Link-Vorschau-Oberflächen gut als große Karte angezeigt, ohne ungünstig zugeschnitten zu werden.</p> </div><div class="faq-item"> <h3>Warum wird bei meinem Titel/meiner Beschreibung eine Warnung angezeigt?</h3> <p>Das Tool markiert Titel über 60 Zeichen oder Beschreibungen über 200 Zeichen, da die meisten Plattformen längeren Text in der Vorschaukarte abschneiden. Es ist ein nicht blockierender Hinweis, kein Fehler.</p> </div> </article> <nav class="related" aria-label="Verwandte Tools"> <h2>Verwandte Tools</h2> <div class="tool-grid"> <a class="tool-card" href="/de/css-gradient-generator/"> <span class="icon">▧</span> <h3>CSS-Gradient-Generator</h3> <p>Lineare, radiale und konische Verläufe gestalten und das CSS kopieren.</p> </a><a class="tool-card" href="/de/box-shadow-generator/"> <span class="icon">❏</span> <h3>Box-Shadow-Generator</h3> <p>Mehrschichtige CSS-Box-Shadows mit Live-Vorschau bauen.</p> </a><a class="tool-card" href="/de/border-radius-generator/"> <span class="icon">⌒</span> <h3>Border-Radius-Generator</h3> <p>Abgerundete Ecken und organische Blob-Formen gestalten, dann CSS kopieren.</p> </a><a class="tool-card" href="/de/flexbox-generator/"> <span class="icon">⧉</span> <h3>Flexbox-Generator</h3> <p>Mit Flex-Eigenschaften spielen und das Layout-CSS kopieren.</p> </a><a class="tool-card" href="/de/css-variables-generator/"> <span class="icon">🎨</span> <h3>CSS-Variablen-Generator</h3> <p>Erstellen Sie einen :root-CSS-Custom-Properties-Block aus Name/Wert-Paaren.</p> </a><a class="tool-card" href="/de/svg-blob-generator/"> <span class="icon">🫧</span> <h3>SVG-Blob-Generator</h3> <p>Generieren Sie organische, zufällige Blob-Formen als wiederverwendbare SVG-Pfade.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Welche Bildgröße sollte ich für og:image verwenden?","acceptedAnswer":{"@type":"Answer","text":"1200×630px ist die weithin empfohlene Größe — sie wird auf Facebook, LinkedIn und den meisten Link-Vorschau-Oberflächen gut als große Karte angezeigt, ohne ungünstig zugeschnitten zu werden."}},{"@type":"Question","name":"Warum wird bei meinem Titel/meiner Beschreibung eine Warnung angezeigt?","acceptedAnswer":{"@type":"Answer","text":"Das Tool markiert Titel über 60 Zeichen oder Beschreibungen über 200 Zeichen, da die meisten Plattformen längeren Text in der Vorschaukarte abschneiden. Es ist ein nicht blockierender Hinweis, kein Fehler."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — Alles läuft clientseitig. Ihre Daten werden niemals hochgeladen.</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>