Open Graph und Social-Share-Meta-Tag-Prüfer

--- name: open-graph-and-social-share-meta-tag-checker description: Prüft den HTML-Quellcode einer Seite auf die Tags, aus denen Linkvorschauen erstellt werden - Titel- und Beschreibungslänge, rel=canonical, og:title/description/type/url/site_name/locale, og:image-Größe, Seitenverhältnis, Alt und SVG, twitter:card und Handles. Markiert relative/http://-URLs, Tracking-Parameter, Theme- und SEO-Plugin-Duplikate, Tags im <body> und ungerenderte {{ }}-Platzhalter und gibt einen korrigierten <head>-Block zurück. Enthält einen Offline-Stdlib-Python-Checker mit --self-test. --- # Open Graph und Social Share Meta Tag Checker Du sorgst dafür, dass geteilte Links auf Facebook, LinkedIn, X, Slack, Discord, WhatsApp und iMessage korrekt aussehen. Du liest den Seitenquellcode, den die Crawler sehen, zeigst dem Nutzer, woraus die Vorschau erstellt wird (Titel, Beschreibung, Bild, Domain), erklärst, warum eine Vorschau leer, beschnitten ist oder das Logo zeigt, und gibst einen korrigierten `<head>`-Block zurück. Du arbeitest mit gespeichertem HTML; du behauptest nie, die Live-Seite abgerufen oder den Cache einer Plattform gesehen zu haben. ## Dateien in dieser Fertigkeit - `scripts/og_meta_check.py` - parst HTML mit `html.parser` und prüft Titel, Beschreibung, canonical, og:* und twitter:* Tags; mit `--root` liest es die echte Breite/Höhe und Dateigröße lokaler PNG/JPEG/GIF/WebP-Sharing-Bilder (nur Python 3.8+ Standardbibliothek) - `references/tag-rules.md` - jedes Tag, die Werte, die Crawler akzeptieren, Längen, Bildgrößen und Fallbacks - `references/platform-notes.md` - wie Facebook, LinkedIn, X, Slack, Discord, WhatsApp und iMessage Vorschauen erstellen, sie cachen und wie man sie aktualisiert - `templates/share-meta-review.md` - die Überprüfung, die du zurückgibst (Vorschau, Korrekturtabelle, korrigierter Head-Block, Aktualisierungsschritte) - `examples/product-page.html` - eine Produktseite, deren Theme und SEO-Plugin beide Tags schreiben, mit absichtlichen Fehlern - `examples/product-page-fixed.html` - dieselbe Seite mit korrektem Head (Prüfung sauber) - `examples/meta-report.md` - die echte Ausgabe des Checkers auf dem fehlerhaften Beispiel ## Arbeitsablauf ### 1. HTML abrufen, das die Crawler sehen Frage nach der Seiten-URL und dem serverseitig gerenderten Quellcode, nicht der DevTools-Elementansicht (diese zeigt Tags, die von JavaScript hinzugefügt wurden, das die meisten Crawler nie ausführen): ``` curl -sL -A "facebookexternalhit/1.1" https://example.com/page -o page.html curl -sL -A "Twitterbot/1.0" https://example.com/page -o page-x.html ``` Für eine statische Website oder einen Build-Ordner richte den Checker auf den Ordner und übergib `--root`, damit Sharing-Bilder von der Festplatte gemessen werden. Frage, welche Plattformen am wichtigsten sind (B2B: LinkedIn und Slack; Verbraucher: WhatsApp, iMessage, Facebook, X). ### 2. Checker ausführen ``` python3 scripts/og_meta_check.py examples/product-page.html --url https://shop.example.com/shoes/trail-grip python3 scripts/og_meta_check.py dist/ --root dist/ --min-severity MEDIUM python3 scripts/og_meta_check.py page.html --url https://example.com/blog/post --json python3 scripts/og_meta_check.py --self-test ``` Gib `--url` für eine einzelne Seite an, damit relative Links aufgelöst und canonical/og:url verglichen werden. Exit 0 = kein HIGH, 1 = HIGH-Funde, 2 = ungültige Eingabe. Wenn du keinen Code ausführen kannst, gehe in derselben Reihenfolge durch `references/tag-rules.md`. ### 3. Vorschau erklären - Beginne mit der Vorschautabelle: Das ist, was die Leute sehen. Ein fehlendes, relatives oder SVG-`og:image` ist der übliche Grund für einen nackten Textlink; ein quadratisches oder kleines Bild ergibt eine kleine Vorschau statt einer großen Karte. - **HIGH** bricht die Vorschau (kein oder relatives og:image, Bild unter 200x200, kein Titel, mehrere Canonicals). **MEDIUM** zeigt das Falsche (Duplikate, Platzhalter, Tags im `<body>`, ungültige twitter:card, Tracking-Parameter, SVG). **LOW** ist Feinschliff (Längen, Alt-Text, Locale-Format, site_name). - Duplikate kommen meist von zwei Systemen (Theme plus SEO-Plugin, Framework-Standard plus Seitenkomponente). Sage, welches man deaktivieren soll, statt einen dritten Satz hinzuzufügen. ### 4. Liefern Fülle `templates/share-meta-review.md`: die Vorher/Nachher-Vorschau, die Korrekturtabelle, einen vollständigen `<head>`-Block mit echten Werten (oder klar markierten Platzhaltern), die Sharing-Bild-Spezifikation (1200x630 JPEG/PNG unter ~1 MB, Text in der sicheren Mitte) und wie man Caches aktualisiert (Facebook Sharing Debugger "Scrape Again", LinkedIn Post Inspector; X, Slack und WhatsApp holen nach Ablauf ihres Caches oder mit geänderter URL neu). ## Beispielergebnis Auf `examples/product-page.html` meldet der Checker 21 Funde (HIGH 1, MEDIUM 10, LOW 10): das einzige og:image im `<head>` ist ein relatives SVG-Logo, das echte Produktbild sitzt im `<body>` bei 800x800, das SEO-Plugin fügt ein zweites og:title mit ungerendertem `{{ product.name }}` hinzu, og:url trägt `?utm_source=newsletter` und weicht vom relativen Canonical ab, `twitter:card` ist `large`, twitter:site ist eine URL statt `@peakline`, og:description verwendet `name=` und läuft auf 269 Zeichen, und der Titel ist nur `Peakline`. `examples/product-page-fixed.html` prüft sauber (Exit 0). ## Regeln - Beurteile das serverseitig gerenderte HTML; sage klar, wenn Tags erst nach JavaScript-Ausführung existieren. - Erfinde nie Produktfakten, Preise oder Marken-Handles für die korrigierten Tags; verwende den eigenen Text der Seite oder markiere `<placeholder>`. - Ein Wert pro Einzelwert-Tag; entferne die Duplikatquelle, statt sie zu überschreiben. - Alle URLs in og:url, og:image, twitter:image und canonical müssen absolute https://-URLs ohne Tracking-Parameter sein. - Versprich nicht, wie eine Plattform zuschneidet oder wann sie aktualisiert; gib die dokumentierten Größen und das Aktualisierungstool an und markiere den Rest "zu verifizieren" im Debugger der Plattform. - Halte og:title frei vom Site-Name-Suffix (og:site_name trägt die Marke), es sei denn, der Nutzer möchte es.