Page SEO Analyzer: Kostenloses On-Page-SEO-Audit-Tool
Füge das HTML einer Seite ein und erhalte einen bewerteten Audit zu Meta-Tags, Überschriften, Canonical, Open Graph, Twitter Card, JSON-LD und Accessibility.
Was ist der Page SEO Analyzer?
Der Page SEO Analyzer parst das HTML einer Seite und meldet die Dinge, die On-Page-Rankings tatsächlich beeinflussen: Title- und Description-Länge, Heading-Hierarchie, Canonical-URL, Open-Graph- und Twitter-Card-Abdeckung, JSON-LD-strukturierte Daten und eine lange Liste technischer Signale wie Charset, Hreflang, Render-blocking Scripts und Image-Alt-Texte. Ich greife zu diesem Tool, wenn ein Kunde mir ein einzelnes Template zur Prüfung schickt, ich aber keinen Zugriff auf das CMS habe — gerendertes HTML einmal einfügen, eine nummerierte Fix-Liste zurückbekommen. Errors, Warnings und Info-Hinweise sind farblich markiert und nach Schweregrad sortiert; eine Aufschlüsselung in fünf Tabs zeigt jedes Signal, das der Parser gefunden hat, sodass du genauso leicht prüfen kannst, was vorhanden ist, wie das, was fehlt.
Hauptfunktionen
- SEO-Score mit Kategorie-Aufschlüsselung — jede Analyse erzeugt einen 0-100-Gesamtscore plus Subscores für Crawlability, Content, Social, strukturierte Daten und Accessibility, sodass du siehst, wo die Seite Punkte verliert.
- Meta-Tag-Audit — extrahiert und validiert Title (Länge plus Pixelbreiten-Schätzung gegen Googles ~600px-Desktop-Limit), Description, Canonical, Robots, Viewport, Charset und
<html lang>, mit Hinweisen auf fehlende oder zu lange Felder. - Heading-Hierarchie-Ansicht — listet jede H1 bis H6 in Dokumentreihenfolge mit Einrückung, kennzeichnet fehlende H1, mehrere H1s und übersprungene Ebenen (z. B. H2 direkt zu H4).
- Open Graph und Twitter Card — prüft
og:title,og:description,og:image,og:url,og:type,og:site_nameplus alle viertwitter:*-Felder und warnt, wennog:urlund<link rel="canonical">voneinander abweichen. - JSON-LD-Parsing und -Validierung — extrahiert jeden
<script type="application/ld+json">-Block, parst ihn, zählt nicht parsbare Blöcke separat und zeigt den aufgelösten@typejedes Schemas. - Image-Alt-Text- und Dimensionsprüfungen — zählt Bilder ohne
alt, mit leeremalt, mit Dateiname-als-alt (IMG_1234.jpg), ohne explizite width/height (Cumulative-Layout-Shift-Signal) und Below-the-fold-Bilder ohneloading="lazy". - Link-Audit — interne vs. externe Counts, Erkennung generischer Anchor-Texte (click here, read more, learn more), interne Fragment-Links zu nicht existierenden IDs und
target="_blank"ohnerel="noopener". - Tech-Tab — Status auf einen Blick für Canonical, Charset, Viewport, html lang, Robots, Favicon, Hreflang-Count, Main-Landmark, Preload-Hints, Render-blocking Scripts, veraltete Tags (
<center>,<font>,<marquee>...) und Base-Href. - Browser-Parsing — nutzt den nativen
DOMParser, um durch das HTML zu laufen; kein Upload, keine externe API.
So benutzt du den Page SEO Analyzer
Schritt 1: HTML einfügen
Das einzige Eingabefeld ist eine Textarea mit dem Label "HTML Input". Füge den vollständigen HTML-Quelltext einer Seite ein — typischerweise das, was du aus "View Source" deines Browsers (Strg+U / Cmd+Option+U), aus dem Response-Body eines curl -L-Requests oder aus dem gerenderten HTML deines Frameworks bekommst. Das 2-MB-Limit wird durchgesetzt; größere Seiten lösen vor dem Parsen einen Toast aus, weil DOMParser im Main-Thread sonst stockt.
Schritt 2: Auf Analyze klicken
Drücke den Analyze-Button unter der Textarea. Das Parsen läuft in deinem Browser; die Ergebnisse erscheinen sofort. Ist die Textarea leer, zeigt das Tool einen Toast "Please enter HTML to analyze" statt still zu scheitern.
Schritt 3: Score-Zusammenfassung lesen
Oben erscheint eine 4-Karten-Reihe: der Gesamt-Score (grün ab 80, gelb 50-79, rot unter 50), Errors, Warnings und die Anzahl der gefundenen Schemas. Unter den Karten zeigt die Issues-Liste jeden Befund nach Schweregrad sortiert — Errors zuerst (rotes XCircle), dann Warnings (gelbes AlertTriangle), dann Info-Hinweise (blaues CheckCircle). Jedes Issue hat eine i18n-Nachricht mit eingesetzten Zahlen (zum Beispiel "8 of 12 images missing alt text").
Schritt 4: In die Tabs eintauchen
Fünf Tabs liegen unter den Issues:
- Meta — Title mit Zeichenzahl und einem "Optimal"-Badge zwischen 50-60 Zeichen, Description mit dem gleichen Badge zwischen 150-160 Zeichen, plus Canonical und Robots.
- Headings — jede Überschrift in Dokumentreihenfolge mit
H1-H6-Badge und Text. Einrückung visualisiert die Verschachtelungstiefe. - Social — Open-Graph- und Twitter-Card-Karten nebeneinander mit jedem Feld ausgefüllt oder als "Not set" markiert.
- Schema — jeder JSON-LD-Block mit seinem
@typeund einer formatierten JSON-Ausgabe. - Tech — 16 kleine Status-Karten zu Charset, Viewport, Hreflang, Main-Landmark, Preload-Hints, Render-blocking Scripts, Bildern ohne Dimensionen, Lazy-Load-Abdeckung, veralteten Tags, internen/externen Link-Counts und Base-Href.
Schritt 5: Korrigieren und neu analysieren
Korrigiere die Quelle, füge das neue HTML ein, klick erneut auf Analyze. Jeder Lauf legt einen History-Eintrag mit Errors, Warnings und Heading-Count an, sodass du zwei Läufe für dasselbe Template vergleichen kannst. Supporter können zudem benannte Snapshots speichern, einen PDF-Report erzeugen und übersetzte Fix-Snippets für die häufigsten Befunde abrufen.
Praktische Beispiele
Audit einer Marketing-Landingpage
Eine Landingpage hat <title>Welcome to ProductX — The All-in-One Customer Platform</title> (74 Zeichen, deutlich über der 60-Zeichen-Warngrenze) und kein <meta name="description">. Beim Einfügen des HTML kommen zurück: ein titleTooLong-Warning, ein missingDescription-Error und ein titlePixelTooLong-Warning, weil der Title auch breiter ist als Googles ~600px-Limit. Kürze den Title auf etwa 50-60 Zeichen, schreibe eine 150-160 Zeichen lange Description, und nach erneutem Lauf zeigt der Meta-Tab grüne "Optimal"-Badges neben beiden Längen.
Validierung von Article-strukturierten Daten vor dem Veröffentlichen
Ein Blogpost-Template ergänzt einen Article-JSON-LD-Block. Füge das gerenderte HTML ein; der Schema-Tab zeigt Schema #1 (Article) mit dem vollständigen Block formatiert an. Fehlt ein Komma, listet die Issues-Liste invalidJsonLd mit dem Count, und der Schema-Tab zeigt diesen Block nicht — schnelle Verifikation vor dem Push. Die Open-Graph-Karte daneben zeigt zudem, ob og:type article ist (Facebook erwartet das für Artikel-Posts).
Accessibility- und Performance-Smells finden
Eine Seite besteht einen oberflächlichen Lighthouse-Scan, aber der Tech-Tab ist gründlicher. Render-blocking Scripts zeigt 4 in Gelb, weil vier <script src>-Tags im <head> weder async noch defer haben. Images Missing Dimensions zeigt 12, weil das Team keine width und height setzt. Lazy Images zeigt 1 / 14 — nur eines der berechtigten Below-the-fold-Bilder nutzt loading="lazy". Jeder dieser Punkte ist ein kleiner Fix, der sich über Templates summiert.
Tipps und Best Practices
Füge gerendertes HTML ein, kein Quell-HTML. Moderne Frameworks rendern Meta-Tags, Headings und JSON-LD per JavaScript. Fügst du Pre-Render-Template-Quelltext ein, sieht der Analyzer einen leeren <head> und meldet eine lange Liste falsch-positiver Errors. Nutze in DevTools "Copy outerHTML" auf dem <html>-Element, oder rufe die URL mit curl -L ab, um Redirects zu folgen.
Korrigiere zuerst Errors, dann Warnings, dann Info. Die Issue-Liste ist bereits nach Schweregrad sortiert. Errors (rot) blockieren Crawl/Index — noindexDetected, missingViewport, invalidJsonLd. Warnings (gelb) sind echte Misses — Title-Länge, fehlendes Alt, fehlendes Canonical. Info (blau) sind Hinweise — metaKeywordsDeprecated, genericAnchorText, paginationLinks. Jage keinem perfekten Score nach, indem du Info-Befunde unterdrückst; sie sind Signale, keine Fehler.
Vergleiche zwei Snapshots desselben Templates. Lass den Analyzer vor und nach einem Fix laufen und beobachte, wie sich die Counts für Errors und Warnings ändern. Das History-Panel unter dem Tool hält die letzten Läufe als schnellen Diff bereit. Für größere Audits erlauben Supporter-Snapshots, Läufe zu beschriften und das HTML später wiederherzustellen.
Vertraue dem Pixelbreiten-Check, nicht nur der Zeichenzahl. Zwei 60-Zeichen-Titles können wegen unterschiedlicher Buchstabenformen unterschiedlich breit gerendert werden — "WWW Information Initiative" ist breiter als "lily lily lily lily lily i" bei gleicher Zeichenzahl. Googles SERP-Trunkierung ist pixelbasiert bei etwa 600px. Das titlePixelTooLong-Warning fängt Titles, die das Zeichen-Budget einhalten, aber trotzdem abgeschnitten werden.
Häufige Probleme und Troubleshooting
"Please enter HTML to analyze" — die Textarea ist leer oder enthält nur Whitespace. Füge echtes HTML ein (es muss nicht mit <!DOCTYPE html> beginnen; partielle Fragmente parsen sauber, aber ein fehlender <head> lässt die meisten Felder als "not set" erscheinen).
"HTML too large (max 2 MB)" — die Eingabe übersteigt 2 MB. Kürze auf den Bereich, der dich interessiert (typischerweise reichen <head> plus Body-Skelett für die meisten Checks), oder speichere das HTML in einer Datei und nutze ein lokales Skript. Das 2-MB-Limit existiert, weil DOMParser im Main-Thread bei größeren Inputs stockt oder den Tab einfriert.
"Failed to parse HTML" — der Parser konnte den Input nicht verarbeiten. Meist heißt das, der Input ist gar kein HTML (du hast versehentlich JSON oder eine URL eingefügt). Stell sicher, dass der Input mit < beginnt und Tag-Syntax enthält.
Score ist niedriger als erwartet auf einer bekannt guten Seite. Schau in den Tech-Tab. Viele Punkte gehen auf Info-Befunde zurück, die in der Issues-Übersicht nicht auffallen — fehlendes Favicon, keine Preload-Hints auf einer content-reichen Seite, generische Anchor-Texte in deiner Navigation. Keiner ist ein Blocker, aber alle ziehen Punkte ab.
JSON-LD-Count ist um eins niedriger als erwartet. Dieser Schema-Block hat einen JSON-Syntaxfehler und erscheint in der Issues-Liste als invalidJsonLd statt im Schema-Tab. Kopiere den Block in den JSON Formatter, um das fehlende Komma oder die unbalancierte Klammer zu finden.
Hreflang-Count sieht richtig aus, aber hreflangInvalid feuert. Hreflang-Werte müssen BCP-47 sein — en, en-US, pt-BR oder das spezielle x-default. Das Tool kennzeichnet Codes, die nicht zu ^([a-z]{2,3}(-[A-Za-z0-9]+)*|x-default)$ passen (case-insensitive). Häufige Übeltäter: en_US mit Underscore, english oder Trailing-Whitespace.
Datenschutz und Sicherheit
Der Page SEO Analyzer parst HTML in deinem Browser über den nativen DOMParser. Das eingefügte HTML verlässt dein Gerät nicht, und es gibt keinen Server-Endpoint, der es empfängt. Das ist relevant für Staging und unveröffentlichte Seiten — du kannst ein Template prüfen, das noch hinter einem Login liegt, ohne es einem Drittanbieter-Crawler auszusetzen. Sobald das JavaScript des Tools geladen ist, läuft die Analyse selbst offline.
Häufig gestellte Fragen
Wie entscheidet das Tool zwischen ernsthaftem Issue und Hinweis?
Drei Schweregrade folgen den W3C-/Google-Empfehlungen für jedes Signal. Errors sind Blocker — noindex-Direktiven, fehlendes <meta viewport>, Parse-Fehler in JSON-LD, fehlende H1 auf einer Content-Seite. Warnings sind echte Misses, die SERP-Auftritt oder Accessibility schmerzen, aber Indexing nicht blockieren — Title oder Description außerhalb der empfohlenen Länge, Canonical-Mismatch mit og:url, target="_blank" ohne rel="noopener". Info-Befunde sind Qualitätshinweise — generische Anchor-Texte, fehlendes Favicon, veraltete Tags. Schweregrade sind im Issue-Generierungsschritt im Quellcode festgelegt, nicht pro Lauf konfigurierbar.
Kann der Analyzer eine URL für mich abrufen?
Aktuell nicht. Die Textarea akzeptiert nur eingefügtes HTML, weil In-Browser-Fetches gegen beliebige Origins per CORS blockiert sind und einen Server-Proxy bräuchten. Wenn du eine entfernte URL prüfen willst, führe curl -L -A "Mozilla/5.0" https://example.com > page.html im Terminal aus und füge den Datei-Inhalt ein.
Warum besteht meine Title-Längenprüfung, aber titlePixelTooLong feuert trotzdem?
Weil Google Titles bei etwa 600 Pixel beim 20px-Arial-Render trunkiert, nicht bei 60 Zeichen. Breite Buchstaben (M, W, Großbuchstaben generell, Em-Dashes) treiben den Pixel-Count über das Limit, auch wenn die Zeichenzahl passt. Die Pixel-Schätzung nutzt Canvas measureText gegen 20px Arial,Helvetica,sans-serif — eine enge Annäherung an das, was Google auf Desktop-SERPs verwendet.
Was bedeutet der Score eigentlich?
Der Score ist eine gewichtete Summe über fünf Kategorien: Crawlability (kann der Suchmaschinen-Crawler indexieren), Content (Title, Description, Headings), Social (Open Graph, Twitter Card), strukturierte Daten (JSON-LD-Präsenz und -Validität) und Accessibility (Alt-Texte, Lang, Landmarks). Jedes Issue zieht je nach Schweregrad eine feste Punktzahl ab. 80+ heißt, die wichtigen Signale sind da und korrekt; 50-79 heißt echte Misses; unter 50 heißt mindestens ein Error-Tier-Blocker feuert. Behandle den Score als Richtwert, nicht als absolute Note.
Prüft das Tool etwas, das das Ausführen der Seite erfordert?
Nein — jede Prüfung ist statisches Parse-Time. Dinge, die Ausführung oder Netzwerk brauchen (Core-Web-Vitals-Timing, Server-Response-Codes, robots.txt-Fetch, Sitemap-Erreichbarkeit), sind außerhalb des Scopes. Dafür nutze den Demnächst verfügbar: Broken Link Checker für Crawl-Time-Link-Validierung und die Demnächst verfügbar: Sitemap Tools für Sitemap-Diagnose.
Kann ich eine Seite hinter Login auditen?
Ja, und genau dafür ist das Tool gut. Öffne die Seite eingeloggt, kopiere das gerenderte HTML aus DevTools (Rechtsklick auf <html> → Copy → Copy outerHTML), füge ein, analysiere. Nichts verlässt deinen Browser, also sind authentifizierte Seiten und unveröffentlichte Templates sicher zu testen.
Verwandte Tools
- Demnächst verfügbar: Meta-Tag-Generator — generiere Title, Description, Open Graph und Twitter Card, die dieser Analyzer prüft.
- Demnächst verfügbar: Schema-Generator — baue gültiges Article-, FAQ-, Product- und Organization-JSON-LD ohne Hand-Coding.
- Demnächst verfügbar: SERP-Vorschau — schau, wie dein Title und deine Description bei Google aussehen, bevor du den Change ausrollst.
- Demnächst verfügbar: Accessibility Suite — tieferes Accessibility-Audit mit ARIA, Kontrast, Tastaturnavigation und Form-Labels.
- JSON Formatter —
invalidJsonLd-Warnings debuggen, indem du den Block neu formatierst und validierst.
Page SEO Analyzer jetzt testen: Demnächst verfügbar: Page SEO Analyzer