Empfohlen 1200×630, unter 8 MB, absolute URL (https).
Live-Vorschau
CODDY.TECH
Learn to code by doing — Coddy
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
Generierte <head>-Tags
<title>Learn to code by doing — Coddy</title>
<meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<link rel="canonical" href="https://coddy.tech" />
<!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:title" content="Learn to code by doing — Coddy" />
<meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://coddy.tech" />
<meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" />
<meta property="og:image:alt" content="Coddy — Learn to code by doing" />
<meta property="og:site_name" content="Coddy" />
<meta property="og:locale" content="en_US" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Learn to code by doing — Coddy" />
<meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" />
<meta name="twitter:image:alt" content="Coddy — Learn to code by doing" />
<meta name="twitter:site" content="@coddy_tech" />
Was ist ein Open-Graph-Vorschau-Generator?
Wenn du einen Link in einer modernen App teilst — einen Post, eine DM, einen Slack-Kanal — holt die Plattform die URL ab und zieht einen kleinen Block Metadaten heraus, um eine *Share-Karte* zu rendern: Titel, Beschreibung, Bild und Seitenname. Diese Metadaten stammen nicht aus der sichtbaren Seite; sie kommen aus einer bestimmten Menge an <meta>-Tags im <head>. Das Open-Graph-Protokoll, ursprünglich 2010 von Facebook erfunden, definiert die meisten davon. X (früher Twitter) ergänzt ein paar Extras mit twitter:-Präfixen. LinkedIn, Discord, Slack, iMessage, WhatsApp und Pinterest lesen dieselben Tags mit kleinen Abweichungen.
Diese Tags pro Seite einmal sauber zu setzen ist ein einmaliger Aufwand, aber mit überproportionaler Wirkung. Eine Seite ohne Open-Graph-Bild wirkt beim Teilen kaputt. Ein zu langer Titel wird mitten im Wort abgeschnitten. Ein falsches og:image-Seitenverhältnis wird von jeder Plattform letterboxed. Mit diesem Tool kannst du diese Werte mit Live-Vorschauen feinjustieren und siehst Truncation- und Crop-Probleme *bevor* die Seite live geht.
Alles läuft lokal. Der Formularzustand, die Vorschauen und das generierte HTML verlassen deinen Browser nie — füge Pre-Launch-URLs und unveröffentlichten Text ein, ohne Leaks befürchten zu müssen.
Was du dabei nebenbei lernst
Open-Graph-Tags nutzen das property-Attribut (<meta property="og:title">), während Standard-SEO- und Twitter-Card-Tags name verwenden (<meta name="description">, <meta name="twitter:card">).
Titel- und Beschreibungs-Tags sollten an *drei* Stellen gesetzt werden, wenn Share-Traffic zählt: Standard-SEO (title, meta description), Open Graph (og:title, og:description) und Twitter (twitter:title, twitter:description).
og:image sollte 1200×630 sein, über HTTPS ausgeliefert werden und eine absolute URL haben — relative Pfade scheitern, wenn andere Server die Seite abrufen.
Schritt für Schritt: Open-Graph-Tags schreiben
1
Einen kurzen, prägnanten Titel schreiben
Ziel: 50-60 Zeichen. Facebook schneidet bei ~95 Zeichen ab, X bei ~70. Stell den Nutzen voran, nicht die Marke — „Mit Cloudflare Workers deployen“ schlägt „Coddy-Blog · Deployment-Guide“.
2
Eine Beschreibung in einem Satz schreiben
Ziel: 120-155 Zeichen. Die meisten Plattformen schneiden um die 200 Zeichen ab. Nutze vollständige Sätze — die Beschreibung steht in jeder Karte unter dem Titel, und abgeschnittene Fragmente wirken unfertig.
3
Die kanonische URL setzen
Nutze die absolute https://-URL der Seite selbst, keinen Tracking- oder Redirect-Link. Open-Graph-Crawler folgen og:url, um Shares zu deduplizieren — eine kanonische URL hält Share-Zähler und Vorschauen konsistent.
4
Eine absolute Bild-URL angeben
1200×630 ist der Sweet Spot für summary_large_image-Karten auf X und Standard-Karten auf Facebook und LinkedIn. PNG oder JPEG, unter ~5 MB. Immer eine absolute URL — relative Pfade scheitern, weil der Social-Crawler die URL von seinem eigenen Server aus aufruft.
5
Die generierten Tags kopieren
Füge den Block aus dem Panel **Generierte <head>-Tags** in den <head> deiner Seite ein. Nach dem Deploy mit dem jeweiligen Plattform-Debugger validieren (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) und einen Recrawl erzwingen, falls du das Bild später änderst.
Open-Graph- und Twitter-Card-Tag-Referenz
Die folgenden Tags decken alles ab, was Social-Plattformen heute lesen. Tags mit property= gehören zum Open-Graph-Protokoll; Tags mit name= sind die Standard-SEO-/Twitter-Card-Varianten. Spezifikationen: Open Graph, X Cards.
Tag
Verwendet von
Empfohlen
Hinweise
og:title
FB, LinkedIn, Slack, Discord
50-60 Zeichen
Fällt auf <title> zurück, wenn nicht gesetzt — trotzdem setzen.
og:description
FB, LinkedIn, Slack, Discord
120-155 Zeichen
Fällt auf meta description zurück, wenn nicht gesetzt.
og:image
Jede Plattform
1200×630, < 5 MB, HTTPS, absolute URL
Muss eine absolute URL sein — relative Pfade scheitern.
og:image:alt
Barrierefreiheit
Bild beschreiben
Wird von Screenreadern und einigen Plattformen genutzt.
og:url
FB, LinkedIn
Kanonische https://-URL
Wird zur Deduplizierung von Shares über Query-String-Varianten hinweg genutzt.
Erscheint als kleiner Hinweis über/unter der Karte.
twitter:card
X
summary_large_image
summary für ein kleines quadratisches Thumbnail, summary_large_image fürs Banner-Layout.
twitter:title
X
Wie og:title
X fällt auf og:title zurück, wenn nicht gesetzt — beides zur Sicherheit setzen.
twitter:description
X
Wie og:description
Fällt auf og:description zurück, wenn nicht gesetzt.
twitter:image
X
Wie og:image
Fällt auf og:image zurück, wenn nicht gesetzt.
twitter:site
X
@deinemarke
Der X-Handle des Herausgebers — beeinflusst einige Analytics.
Open-Graph-Muster zum Ausprobieren
Blogpost (article)
Setze **og:type** auf article, ergänze **Autor** und **Veröffentlichungszeit** im Article-spezifischen Bereich und nutze ein 1200×630-Cover-Bild. Die Vorschauen aktualisieren sich und zeigen, wie die Karte auf jeder Plattform aussieht.
og:type=article schaltet die Article-spezifischen Tags frei (article:published_time, article:author), die einige Plattformen (Discord, LinkedIn) nutzen, um die Autoren-Zuordnung anzuzeigen. Twitter ignoriert sie, beschwert sich aber nicht.
Produkt- oder Landingpage
Belasse **og:type** bei website. Verwende den Produktnamen als Titel, ein einsätziges Wertversprechen als Beschreibung und einen Hero- oder Screenshot-Ausschnitt als Bild.
Landingpages brauchen keine Article-Metadaten. Das mit Abstand meistgeklickte Element einer geteilten Landingpage-Karte ist meistens das Bild, also investiere in ein sauberes 1200×630-Visual.
Dokumentationsseite
Titel: "Konzept — Abschnitt · Docs". Beschreibung: ein Satz, der das Konzept erklärt. Bild: ein generisches Docs-Cover oder ein Screenshot der relevanten UI.
Docs-Seiten werden in Slack-Kanälen und X-Threads geteilt. Ein konsistentes Docs-Cover-Bild macht sie in einem vollen Feed schon vor dem Lesen des Titels wiedererkennbar.
Typische Open-Graph-Fehler
Eine relative og:image-URL wie /images/cover.png verwenden. Social-Crawler rufen deine Seite von *ihren* Servern aus auf — relative Pfade zeigen dann auf die Domain der Social-Plattform und enden im 404. Immer eine absolute https://-URL nutzen.
twitter:card vergessen. Ohne setzt X eine minimale Karte ohne Bild als Default. Setze twitter:card=summary_large_image, um das Banner-Layout zu bekommen, das fast jede Marke eigentlich will.
Das og:image:alt-Tag überspringen. Es kostet nichts, hilft Screenreader-Nutzern und einige Plattformen zeigen es als Alt-Text der gerenderten Karte an.
Open-Graph-Vorschau FAQ
Was ist Open Graph?
Open Graph ist ein Protokoll, das Facebook 2010 veröffentlicht hat. Es erlaubt einer Webseite, sich selbst mit einer kleinen Menge an <meta>-Tags zu beschreiben — Titel, Beschreibung, Bild, Typ und so weiter. Jede große Social- und Chat-Plattform liest es heute, weshalb es zum De-facto-Standard für Share-Card-Metadaten wurde.
Twitter Cards vs. Open Graph — brauche ich beides?
Ship beides. X (Twitter) fällt von seinen twitter:-Tags auf die entsprechenden og:-Tags zurück, wenn die X-spezifischen fehlen, technisch reicht also Open Graph allein. Aber twitter:card, twitter:site und twitter:creator geben dir feinere Kontrolle darüber, wie die Karte auf X gerendert wird.
Welche Größe sollte og:image haben?
1200×630 Pixel (Verhältnis 1.91:1) ist die sicherste Größe. Facebook, LinkedIn und X rendern dieses Verhältnis alle gut. Halte die Datei unter ~5 MB und liefere sie über HTTPS unter einer absoluten URL aus — relative Pfade scheitern, wenn andere Server deine Seite abrufen.
Warum aktualisiert sich meine Vorschau auf Facebook nicht?
Facebook cacht Share-Karten aggressiv. Nachdem du die Meta-Tags geändert hast, füge die URL in den Facebook Sharing Debugger ein und klicke *Scrape Again*. Derselbe Trick funktioniert für X mit dem Card Validator und für LinkedIn mit dem Post Inspector.
Nutzt Google Open-Graph-Tags?
Für das Ranking nein — Googles eigener Crawler liest den Seiteninhalt sowie dein <title> und meta description. Google nimmt gelegentlich og:image für die Bildersuche und Discover-Oberflächen mit, es ist aber kein Ranking-Signal.
Kann ich pro Seite automatisch ein anderes Bild generieren?
Ja — die meisten Frameworks unterstützen dynamische Open-Graph-Bilder. Next.js hat die OG Image Generation API, SvelteKit und Astro haben ähnliche Muster. Rendere das Bild zur Request-Zeit und cache es aggressiv — Social-Crawler haben kurze Timeouts.
