Auditor für Überschriftenhierarchie
Prüft die Überschriftenstruktur aus URL oder eingefügtem HTML und erkennt Sprünge, mehrere h1, rein dekorativen Heading-Missbrauch und Abweichungen zu Meta-Titeln
Füge HTML ein oder gib eine Seiten-URL an, um die semantische Überschriftenstruktur statt der visuellen Leserichtung zu prüfen. Der Bericht zeigt Ebenensprünge, mehrere h1, vermutlich nur dekorative Heading-Nutzung, leere Überschriften und Abweichungen zwischen dem Haupt-h1,
und og:title.</p>
<p>So verwendest du das Tool:</p>
<ul>
<li>HTML-Eingabe: Markup für eine stabile Analyse einfügen</li>
<li>Seiten-URL: veröffentlichte Struktur prüfen</li>
<li>Mit Metadaten-Titeln vergleichen: gleicht die Hauptüberschrift mit <code><title></code> und <code>og:title</code> ab</li>
<li>Korrekturhinweise anzeigen: ergänzt eine empfohlene Ebene oder Ersetzung pro Knoten</li>
</ul>
<p>Der Bericht zeigt:</p>
<ul>
<li>Einen visuellen h1-h6-Baum</li>
<li>Eine Heatmap-artige Schwereverteilung</li>
<li>Die empfohlene Ebene für jede Überschrift</li>
<li>Mehrere h1 und Ebenensprünge</li>
<li>Als Heading verkleidete UI-Labels</li>
<li>Abweichungen zwischen h1 und Meta-Titeln</li>
</ul></div>
</div>
<form id="tool-form" class="space-y-6">
<div class="mt-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-medium text-amber-900 flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
Beispielergebnisse
</h3>
<span class="text-xs text-amber-700">1 Beispiele</span>
</div>
<div class="space-y-3">
<div class="example-card bg-white p-3 rounded-md border border-amber-100 hover:border-amber-300 transition-colors">
<div class="flex items-start justify-between mb-2">
<div class="flex-1">
<h4 class="text-sm font-medium text-gray-900">Landingpage mit Sprüngen und doppelten h1 prüfen</h4>
<p class="text-xs text-gray-500 mt-1">Zeigt den Überschriftenbaum, erkennt doppelte h1 und empfiehlt, welche Knoten zu h2 oder zu Nicht-Heading-Text werden sollten.</p>
</div>
<button
type="button"
class="load-example-btn ml-2 px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors"
data-example-index="0"
>
Beispiel laden
</button>
</div>
<!-- 输出预览 -->
<div class="example-output-preview mt-2 pt-2 border-t border-gray-100">
<div class="text-xs bg-gray-50 p-2 rounded max-h-20 overflow-auto"><div>Heading hierarchy tree</div></div>
</div>
<!-- 输入参数展示（可折叠） -->
<details class="mt-2">
<summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-700">
Eingabeparameter anzeigen
</summary>
<div class="mt-2 p-2 bg-gray-50 rounded text-xs font-mono">
{
"htmlInput": "<html><head><title>Acme Analytics Dashboard</title><meta property=\"og:title\" content=\"Acme Analytics Platform\" /></head><body><main><h1>Acme Analytics</h1><section><h3>Executive summary</h3><div class=\"card\"><a href=\"/demo\"><h2 class=\"btn-title\">BOOK DEMO</h2></a></div><h1>Pricing</h1><h4></h4></section></main></body></html>",
"pageUrl": "",
"compareWithMetadataTitles": true,
"showFixSuggestions": true
}
</div>
</details>
</div>
</div>
</div>
<div class="space-y-4 p-4 bg-blue-50 rounded-lg"><div class="space-y-2"><label for="htmlInput" class="block text-sm font-medium text-gray-700">
HTML-Eingabe
</label><textarea
id="htmlInput"
name="htmlInput"
rows="4"
placeholder="<main><h1>Pricing</h1><h3>Plans</h3><h2>FAQ</h2></main>"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-32"
></textarea></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div class="space-y-2"><label for="pageUrl" class="block text-sm font-medium text-gray-700">
Seiten-URL
</label><input
type="text"
id="pageUrl"
name="pageUrl"
value=""
placeholder="https://example.com"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
></div><div class="space-y-2"><label for="compareWithMetadataTitles" class="block text-sm font-medium text-gray-700">
Mit Metadaten-Titeln vergleichen
</label><input
type="checkbox"
id="compareWithMetadataTitles"
name="compareWithMetadataTitles"
checked
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
></div><div class="space-y-2"><label for="showFixSuggestions" class="block text-sm font-medium text-gray-700">
Korrekturhinweise anzeigen
</label><input
type="checkbox"
id="showFixSuggestions"
name="showFixSuggestions"
checked
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
></div></div>
<div>
<button type="submit" id="submit-button" class="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50">
Verarbeiten
</button>
</div>
</form>
<div id="tool-result"></div>
</div>
<article class="bg-white rounded-lg shadow-sm p-6 mt-6" itemscope itemtype="https://schema.org/SoftwareApplication">
<nav aria-label="Breadcrumb" class="mb-4 text-sm text-gray-500">
<ol class="flex flex-wrap items-center gap-2">
<li class="flex items-center gap-2"><a href="/de" class="hover:text-blue-600">Home</a></li><li class="flex items-center gap-2"><span>/</span><a href="/de/tools" class="hover:text-blue-600">Tools</a></li><li class="flex items-center gap-2"><span>/</span><span class="text-gray-700">Heading Hierarchy Auditor</span></li>
</ol>
</nav>
<div class="space-y-8">
<section aria-labelledby="tool-facts-title" class="rounded-xl border border-slate-200 bg-slate-50 p-5">
<h2 id="tool-facts-title" class="text-base font-semibold text-gray-900 mb-4">Wichtige Fakten</h2>
<dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<dt class="text-xs uppercase tracking-wide text-gray-500">Kategorie</dt>
<dd class="mt-1 text-sm font-medium text-gray-900">Sicherheit & Validierung</dd>
</div>
<div>
<dt class="text-xs uppercase tracking-wide text-gray-500">Eingabetypen</dt>
<dd class="mt-1 text-sm font-medium text-gray-900">textarea, text, checkbox</dd>
</div>
<div>
<dt class="text-xs uppercase tracking-wide text-gray-500">Ausgabetyp</dt>
<dd class="mt-1 text-sm font-medium text-gray-900">html</dd>
</div>
<div>
<dt class="text-xs uppercase tracking-wide text-gray-500">Sample-Abdeckung</dt>
<dd class="mt-1 text-sm font-medium text-gray-900">4</dd>
</div>
<div>
<dt class="text-xs uppercase tracking-wide text-gray-500">API verfügbar</dt>
<dd class="mt-1 text-sm font-medium text-gray-900">Yes</dd>
</div>
</dl>
</section>
<section id="tool-overview" aria-labelledby="tool-overview-title">
<h2 id="tool-overview-title" class="text-lg font-semibold text-gray-900 mb-3">Überblick</h2>
<p class="text-gray-700 leading-7" itemprop="description">Der Auditor für Überschriftenhierarchie analysiert die semantische Struktur Ihrer Webseite anhand von eingefügtem HTML-Code oder einer Live-URL, um Fehler wie übersprungene Überschriftenebenen, mehrfache h1-Tags und Abweichungen zu Meta-Titeln aufzudecken.</p>
</section>
<section class="grid grid-cols-1 md:grid-cols-2 gap-6" aria-label="Usage guidance">
<section aria-labelledby="tool-when-title">
<h3 id="tool-when-title" class="text-base font-semibold text-gray-900 mb-3">Wann verwenden</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-start gap-2"><span class="text-blue-600 mt-0.5">•</span><span>Vor dem Live-Gang einer neuen Webseite, um die Barrierefreiheit und SEO-Konformität der Überschriftenstruktur zu validieren.</span></li><li class="flex items-start gap-2"><span class="text-blue-600 mt-0.5">•</span><span>Bei der Optimierung bestehender Seiten, wenn Diskrepanzen zwischen dem Haupt-h1-Tag und den Meta-Titeln vermutet werden.</span></li><li class="flex items-start gap-2"><span class="text-blue-600 mt-0.5">•</span><span>Zur Bereinigung von HTML-Templates, in denen CSS-Klassen fälschlicherweise als Überschriften-Tags missbraucht wurden.</span></li>
</ul>
</section>
<section aria-labelledby="tool-how-title">
<h3 id="tool-how-title" class="text-base font-semibold text-gray-900 mb-3">So funktioniert es</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-start gap-2"><span class="text-blue-600 mt-0.5">•</span><span>Fügen Sie den rohen HTML-Code in das Eingabefeld ein oder geben Sie die URL einer veröffentlichten Webseite an.</span></li><li class="flex items-start gap-2"><span class="text-blue-600 mt-0.5">•</span><span>Aktivieren Sie optional den Abgleich mit Metadaten-Titeln und die Anzeige von konkreten Korrekturhinweisen.</span></li><li class="flex items-start gap-2"><span class="text-blue-600 mt-0.5">•</span><span>Das Tool analysiert die semantische Hierarchie der h1-h6-Knoten und vergleicht sie mit den Dokument-Titeln.</span></li><li class="flex items-start gap-2"><span class="text-blue-600 mt-0.5">•</span><span>Sie erhalten einen visuellen Überschriftenbaum inklusive einer Heatmap zur Fehlerpriorisierung und konkreten Empfehlungen für jeden Knoten.</span></li>
</ul>
</section>
</section>
<section id="tool-use-cases" aria-labelledby="tool-use-cases-title">
<h3 id="tool-use-cases-title" class="text-base font-semibold text-gray-900 mb-3">Anwendungsfälle</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="rounded-lg bg-slate-50 border border-slate-200 p-4 text-sm text-gray-700">Überprüfung von Blog-Artikeln auf logische Strukturierung vor der Veröffentlichung.</div><div class="rounded-lg bg-slate-50 border border-slate-200 p-4 text-sm text-gray-700">SEO-Audit von Kunden-Websites zur Identifikation von fehlerhaften Überschriften-Hierarchien und doppelten h1-Tags.</div><div class="rounded-lg bg-slate-50 border border-slate-200 p-4 text-sm text-gray-700">Bereinigung von UI-Templates, um sicherzustellen, dass Design-Elemente keine semantischen Überschriften-Tags missbrauchen.</div>
</div>
</section>
<section id="tool-examples" aria-labelledby="tool-examples-title">
<h3 id="tool-examples-title" class="text-base font-semibold text-gray-900 mb-3">Beispiele</h3>
<div class="space-y-4">
<article class="rounded-xl border border-slate-200 bg-slate-50 p-5">
<div class="flex items-start justify-between gap-3 mb-4">
<h4 class="text-base font-semibold text-gray-900">1. Audit einer unstrukturierten Landingpage</h4>
<span class="shrink-0 rounded-full bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700">SEO-Spezialist</span>
</div>
<dl class="space-y-4 text-sm">
<div>
<dt class="font-medium text-gray-900">Hintergrund</dt>
<dd class="mt-1 text-gray-700 leading-6">Eine neu gestaltete Landingpage rankt schlecht. Der Verdacht liegt nahe, dass die Überschriftenstruktur fehlerhaft ist.</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Problem</dt>
<dd class="mt-1 text-gray-700 leading-6">Die Seite enthält mehrere h1-Tags, springt direkt von h1 auf h4, und UI-Elemente sind fälschlicherweise als h3 deklariert.</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Verwendung</dt>
<dd class="mt-1 text-gray-700 leading-6">Fügen Sie den HTML-Code der Landingpage in das Feld 'HTML-Eingabe' ein, aktivieren Sie 'Mit Metadaten-Titeln vergleichen' sowie 'Korrekturhinweise anzeigen' und starten Sie die Analyse.</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Beispielkonfiguration</dt>
<dd class="mt-2">
<pre class="overflow-x-auto rounded-lg bg-slate-900 p-4 text-xs leading-6 text-slate-100"><code>htmlInput: "<html><body><h1>Startseite</h1><h1>Produktübersicht</h1><h4>Features</h4><h3>In den Warenkorb (h3)</h3></body></html>", compareWithMetadataTitles: true, showFixSuggestions: true</code></pre>
</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Ergebnis</dt>
<dd class="mt-1 text-gray-700 leading-6">Das Tool liefert einen visuellen Baum, der die doppelten h1-Tags rot markiert, den Sprung auf h4 bemängelt und empfiehlt, das UI-Element in ein Standard-div umzuwandeln.</dd>
</div>
</dl>
</article>
<article class="rounded-xl border border-slate-200 bg-slate-50 p-5">
<div class="flex items-start justify-between gap-3 mb-4">
<h4 class="text-base font-semibold text-gray-900">2. Überprüfung einer Live-Produktseite</h4>
<span class="shrink-0 rounded-full bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700">Webentwickler</span>
</div>
<dl class="space-y-4 text-sm">
<div>
<dt class="font-medium text-gray-900">Hintergrund</dt>
<dd class="mt-1 text-gray-700 leading-6">Vor dem Relaunch soll die Live-Produktseite auf Barrierefreiheit und korrekte semantische Struktur geprüft werden.</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Problem</dt>
<dd class="mt-1 text-gray-700 leading-6">Es ist unklar, ob die Überschriftenhierarchie logisch aufgebaut ist und ob der h1-Tag mit dem Meta-Titel übereinstimmt.</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Verwendung</dt>
<dd class="mt-1 text-gray-700 leading-6">Geben Sie die URL der Produktseite im Feld 'Seiten-URL' ein und aktivieren Sie den Metadaten-Vergleich.</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Beispielkonfiguration</dt>
<dd class="mt-2">
<pre class="overflow-x-auto rounded-lg bg-slate-900 p-4 text-xs leading-6 text-slate-100"><code>pageUrl: "https://example.com/produkt", compareWithMetadataTitles: true, showFixSuggestions: true</code></pre>
</dd>
</div>
<div>
<dt class="font-medium text-gray-900">Ergebnis</dt>
<dd class="mt-1 text-gray-700 leading-6">Der Bericht zeigt eine saubere Hierarchie, warnt jedoch vor einer Abweichung zwischen dem h1-Tag ('Jetzt kaufen') und dem Meta-Titel ('Premium Analytics Software kaufen').</dd>
</div>
</dl>
</article>
</div>
</section>
<section id="tool-samples" aria-labelledby="tool-samples-title">
<div class="flex items-center justify-between gap-3 mb-3">
<h3 id="tool-samples-title" class="text-base font-semibold text-gray-900">Mit Samples testen</h3>
<span class="text-xs text-gray-500">html</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<a href="/de/samples/regex-named-groups" class="block rounded-lg border border-gray-200 p-4 hover:border-emerald-300 hover:bg-emerald-50 transition-colors">
<div class="flex items-start justify-between gap-3">
<div>
<div class="font-medium text-gray-900">Benannte Capture-Gruppen von Regex</div>
<div class="text-sm text-gray-600 mt-1">Sammlung von Regex-Mustern, die benannte Capture-Gruppen verwenden, um strukturierte Daten aus Text zu extrahieren. Benannte Gruppen machen Muster lesbarer und wartbarer, indem sie aussagekräftige Namen den erfassten Teilen zuweisen.</div>
<div class="text-xs text-gray-500 mt-2">task extract</div>
</div>
<span class="text-xs px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 whitespace-nowrap">sample</span>
</div>
</a>
<a href="/de/samples/contentful" class="block rounded-lg border border-gray-200 p-4 hover:border-emerald-300 hover:bg-emerald-50 transition-colors">
<div class="flex items-start justify-between gap-3">
<div>
<div class="font-medium text-gray-900">Contentful Cloud-basierte CMS Beispiele</div>
<div class="text-sm text-gray-600 mt-1">Umfassende Contentful Beispiele mit Content Modeling, API Integration, Webhooks und Frontend Integration Patterns</div>
<div class="text-xs text-gray-500 mt-2">keywords content</div>
</div>
<span class="text-xs px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 whitespace-nowrap">sample</span>
</div>
</a>
<a href="/de/samples/html-with-images" class="block rounded-lg border border-gray-200 p-4 hover:border-emerald-300 hover:bg-emerald-50 transition-colors">
<div class="flex items-start justify-between gap-3">
<div>
<div class="font-medium text-gray-900">HTML mit Bildern Proben</div>
<div class="text-sm text-gray-600 mt-1">HTML-Quellcodeproben mit Bildern zum Testen der Extraktion</div>
<div class="text-xs text-gray-500 mt-2">task extract</div>
</div>
<span class="text-xs px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 whitespace-nowrap">sample</span>
</div>
</a>
<a href="/de/samples/jwt" class="block rounded-lg border border-gray-200 p-4 hover:border-emerald-300 hover:bg-emerald-50 transition-colors">
<div class="flex items-start justify-between gap-3">
<div>
<div class="font-medium text-gray-900">JWT-Beispiele</div>
<div class="text-sm text-gray-600 mt-1">Umfassende JWT-Beispiele von der grundlegenden Token-Struktur bis zu fortgeschrittenen Sicherheitsimplementierungen</div>
<div class="text-xs text-gray-500 mt-2">keywords structure</div>
</div>
<span class="text-xs px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 whitespace-nowrap">sample</span>
</div>
</a>
</div>
</section>
<section id="tool-hubs" aria-labelledby="tool-hubs-title">
<h3 id="tool-hubs-title" class="text-base font-semibold text-gray-900 mb-3">Verwandte Hubs</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<a href="/de/hubs/html-convert" class="block rounded-lg border border-gray-200 p-4 hover:border-violet-300 hover:bg-violet-50 transition-colors">
<div class="font-medium text-gray-900">HTML-Extraktions-, Bereinigungs- und Markdown/PDF-Export-Tools</div>
<div class="text-sm text-gray-600 mt-1">Vergleichen Sie HTML-Bereinigung, Attribut- und Bildquellen-Extraktion, HTML-zu-Markdown und HTML-zu-PDF in einem Hub für Web-Content-Konvertierungs-Workflows.</div>
</a>
<a href="/de/hubs/web-accessibility-audits" class="block rounded-lg border border-gray-200 p-4 hover:border-violet-300 hover:bg-violet-50 transition-colors">
<div class="font-medium text-gray-900">Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung</div>
<div class="text-sm text-gray-600 mt-1">Pruefen Sie WCAG-Probleme, Screenreader-Reihenfolge, Kontrastfehler, Risiken bei Farbsehschwaechen und zugaengliche Farbwahl in einem Hub fuer Web-Accessibility-Workflows.</div>
</a>
<a href="/de/hubs/audio-convert" class="block rounded-lg border border-gray-200 p-4 hover:border-violet-300 hover:bg-violet-50 transition-colors">
<div class="font-medium text-gray-900">Tools fur Audio-Encoding und Formatkonvertierung</div>
<div class="text-sm text-gray-600 mt-1">Vergleiche Audioformat-Konvertierung, Bitratenanderungen, Abtastraten-Konvertierung, Codec-Wechsel und Export-Tools in einem Hub.</div>
</a>
<a href="/de/hubs/image-convert" class="block rounded-lg border border-gray-200 p-4 hover:border-violet-300 hover:bg-violet-50 transition-colors">
<div class="font-medium text-gray-900">Tools fur Bildformat-Konvertierung und animierten Export</div>
<div class="text-sm text-gray-600 mt-1">Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub.</div>
</a>
</div>
</section>
<section id="tool-related" aria-labelledby="tool-related-title">
<h3 id="tool-related-title" class="text-base font-semibold text-gray-900 mb-3">Verwandte Tools</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<a href="/de/tools/screen-reader-simulation-tester" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">Screen-Reader-Simulation-Tester</div>
<div class="text-sm text-gray-600 mt-1">Simuliert die Vorlesereihenfolge und gesprochene Semantik eines Screenreaders aus URL oder HTML</div>
</a>
<a href="/de/tools/html-attribute-extractor" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">HTML-Attribut-Extraktor</div>
<div class="text-sm text-gray-600 mt-1">Extrahiert angegebene Attribute (href, src, data-*, etc.) aus HTML-Inhalten mit Unterstützung für Tag-Name-Filterung</div>
</a>
<a href="/de/tools/image-source-extractor" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">Bildquellen-Extraktor</div>
<div class="text-sm text-gray-600 mt-1">Extrahieren Sie Bild-URLs (src-Attribute) aus HTML-Quellcode. Unterstützt lazy-loading Bilder und srcset-Attribute.</div>
</a>
<a href="/de/tools/meta-tag-extractor" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">Meta-Tag-Extraktor</div>
<div class="text-sm text-gray-600 mt-1">Extrahiert und analysiert Meta-Tags, Open Graph, Twitter Cards und strukturierte Daten von Webseiten</div>
</a>
<a href="/de/tools/new-html-tag-stripper" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">HTML-Tag-Entferner</div>
<div class="text-sm text-gray-600 mt-1">Entfernt HTML-Tags aus dem Code und extrahiert sauberen Textinhalt</div>
</a>
<a href="/de/tools/pdf-table-extractor-to-csv-json" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">PDF-Tabellenextraktor zu CSV/JSON</div>
<div class="text-sm text-gray-600 mt-1">Extrahiert Tabellen aus PDFs mit OpenDataLoader und exportiert sie als JSON, CSV oder HTML</div>
</a>
<a href="/de/tools/pdf-image-caption-extractor" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">PDF-Bild- und Caption-Extraktor</div>
<div class="text-sm text-gray-600 mt-1">Extrahiert PDF-Bilder, ordnet nahe Captions zu und erstellt einen durchsuchbaren HTML-Index</div>
</a>
<a href="/de/tools/accessibility-checker" class="block rounded-lg border border-gray-200 p-4 hover:border-blue-300 hover:bg-blue-50 transition-colors">
<div class="font-medium text-gray-900">Barrierefreiheitspruefer</div>
<div class="text-sm text-gray-600 mt-1">Erkennt haeufige WCAG-2.1-Probleme in HTML, Seiten oder Designbildern und liefert direkt umsetzbare Hinweise</div>
</a>
</div>
</section>
<section id="tool-faq" aria-labelledby="tool-faq-title">
<h3 id="tool-faq-title" class="text-base font-semibold text-gray-900 mb-3">FAQ</h3>
<div class="space-y-3">
<details class="rounded-lg border border-gray-200 p-4 bg-gray-50">
<summary class="font-medium text-gray-900 cursor-pointer">Warum warnt das Tool vor mehreren h1-Überschriften?</summary>
<p class="text-sm text-gray-700 mt-3 leading-6">Ein einziges h1-Tag definiert das Hauptthema einer Seite. Mehrere h1-Tags können Suchmaschinen verwirren und die semantische Struktur schwächen.</p>
</details>
<details class="rounded-lg border border-gray-200 p-4 bg-gray-50">
<summary class="font-medium text-gray-900 cursor-pointer">Was bedeutet ein Ebenensprung in der Hierarchie?</summary>
<p class="text-sm text-gray-700 mt-3 leading-6">Ein Ebenensprung liegt vor, wenn beispielsweise direkt auf ein h1-Tag ein h3-Tag folgt, ohne dass dazwischen ein h2-Tag zur Strukturierung genutzt wird.</p>
</details>
<details class="rounded-lg border border-gray-200 p-4 bg-gray-50">
<summary class="font-medium text-gray-900 cursor-pointer">Kann ich auch passwortgeschützte Seiten über die URL prüfen?</summary>
<p class="text-sm text-gray-700 mt-3 leading-6">Nein. Für passwortgeschützte Seiten kopieren Sie bitte den gerenderten HTML-Quelltext und fügen ihn direkt in das HTML-Eingabefeld ein.</p>
</details>
<details class="rounded-lg border border-gray-200 p-4 bg-gray-50">
<summary class="font-medium text-gray-900 cursor-pointer">Wie hilft der Vergleich mit Meta-Titeln?</summary>
<p class="text-sm text-gray-700 mt-3 leading-6">Er stellt sicher, dass die Hauptüberschrift (h1) thematisch mit dem Title-Tag und dem og:title übereinstimmt, was für SEO und Social Sharing wichtig ist.</p>
</details>
<details class="rounded-lg border border-gray-200 p-4 bg-gray-50">
<summary class="font-medium text-gray-900 cursor-pointer">Was sind dekorative Headings?</summary>
<p class="text-sm text-gray-700 mt-3 leading-6">Das sind Textabschnitte wie Button-Beschriftungen oder UI-Labels, die fälschlicherweise als h-Tags formatiert wurden, um ein bestimmtes Design zu erzielen.</p>
</details>
</div>
</section>
</div>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Warum warnt das Tool vor mehreren h1-Überschriften?","acceptedAnswer":{"@type":"Answer","text":"Ein einziges h1-Tag definiert das Hauptthema einer Seite. Mehrere h1-Tags können Suchmaschinen verwirren und die semantische Struktur schwächen."}},{"@type":"Question","name":"Was bedeutet ein Ebenensprung in der Hierarchie?","acceptedAnswer":{"@type":"Answer","text":"Ein Ebenensprung liegt vor, wenn beispielsweise direkt auf ein h1-Tag ein h3-Tag folgt, ohne dass dazwischen ein h2-Tag zur Strukturierung genutzt wird."}},{"@type":"Question","name":"Kann ich auch passwortgeschützte Seiten über die URL prüfen?","acceptedAnswer":{"@type":"Answer","text":"Nein. Für passwortgeschützte Seiten kopieren Sie bitte den gerenderten HTML-Quelltext und fügen ihn direkt in das HTML-Eingabefeld ein."}},{"@type":"Question","name":"Wie hilft der Vergleich mit Meta-Titeln?","acceptedAnswer":{"@type":"Answer","text":"Er stellt sicher, dass die Hauptüberschrift (h1) thematisch mit dem Title-Tag und dem og:title übereinstimmt, was für SEO und Social Sharing wichtig ist."}},{"@type":"Question","name":"Was sind dekorative Headings?","acceptedAnswer":{"@type":"Answer","text":"Das sind Textabschnitte wie Button-Beschriftungen oder UI-Labels, die fälschlicherweise als h-Tags formatiert wurden, um ein bestimmtes Design zu erzielen."}}]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://elysiatools.com/de"},{"@type":"ListItem","position":2,"name":"Tools","item":"https://elysiatools.com/de/tools"},{"@type":"ListItem","position":3,"name":"Heading Hierarchy Auditor"}]}</script>
</article>
<div class="bg-white rounded-lg shadow-sm p-6 mt-6">
<!-- API Documentation -->
<div class="mb-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">API-Dokumentation</h2>
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4">
<h3 class="text-sm font-medium text-gray-900 mb-2">Request-Endpunkt</h3>
<div class="bg-gray-800 rounded p-3 font-mono text-sm text-white">
POST /de/api/tools/heading-hierarchy-auditor
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h3 class="text-sm font-medium text-gray-900 mb-2">Request-Parameter</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100">
<tr>
<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Parameter-Name</th>
<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Erforderlich</th>
<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Beschreibung</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 text-sm text-gray-900 font-mono">htmlInput</td>
<td class="px-4 py-2 text-sm text-gray-500">textarea</td>
<td class="px-4 py-2 text-sm text-gray-500">Nein</td>
<td class="px-4 py-2 text-sm text-gray-500">-</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm text-gray-900 font-mono">pageUrl</td>
<td class="px-4 py-2 text-sm text-gray-500">text</td>
<td class="px-4 py-2 text-sm text-gray-500">Nein</td>
<td class="px-4 py-2 text-sm text-gray-500">-</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm text-gray-900 font-mono">compareWithMetadataTitles</td>
<td class="px-4 py-2 text-sm text-gray-500">checkbox</td>
<td class="px-4 py-2 text-sm text-gray-500">Nein</td>
<td class="px-4 py-2 text-sm text-gray-500">-</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm text-gray-900 font-mono">showFixSuggestions</td>
<td class="px-4 py-2 text-sm text-gray-500">checkbox</td>
<td class="px-4 py-2 text-sm text-gray-500">Nein</td>
<td class="px-4 py-2 text-sm text-gray-500">-</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h3 class="text-sm font-medium text-gray-900 mb-2">Antwortformat</h3>
<div class="bg-gray-800 rounded p-3 font-mono text-sm text-white overflow-x-auto">
<pre>{
"result": "<div>Processed HTML content</div>",
"error": "Error message (optional)",
"message": "Notification message (optional)",
"metadata": {
"key": "value"
}
}</pre>
</div>
<div class="mt-2 text-sm text-gray-600">
<strong>HTML:</strong>
HTML
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 mt-6">
<div class="mb-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">MCP-Dokumentation</h2>
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4">
<p class="text-sm text-gray-600 mb-4">
Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu:
</p>
<div class="bg-gray-800 rounded p-3 font-mono text-sm text-white overflow-x-auto">
<pre>{
"mcpServers": {
"elysiatools-heading-hierarchy-auditor": {
"name": "heading-hierarchy-auditor",
"description": "Prüft die Überschriftenstruktur aus URL oder eingefügtem HTML und erkennt Sprünge, mehrere h1, rein dekorativen Heading-Missbrauch und Abweichungen zu Meta-Titeln",
"baseUrl": "https://elysiatools.com/mcp/sse?toolId=heading-hierarchy-auditor",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}</pre>
</div>
<div class="mt-4 p-3 bg-gray-50 rounded border border-gray-200">
<p class="flex items-start text-sm text-gray-600">
<svg class="w-5 h-5 mr-2 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
<span>Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.</span>
</p>
</div>
<div class="mt-6 pt-4 border-t border-gray-100">
<p class="flex items-center text-sm text-gray-500">
<svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei admin@elysiatools.com
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-white border-t border-gray-200 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-sm text-gray-500 mb-4 md:mb-0">
<p>© 2026 Elysia Tools. All rights reserved.</p>
<p class="mt-1">Contact: <a href="mailto:admin@elysiatools.com" class="text-blue-600 hover:text-blue-800">admin@elysiatools.com</a></p>
</div>
<div class="flex space-x-6">
<a href="/terms" class="text-sm text-gray-600 hover:text-blue-600 transition-colors">
Terms of Service
</a>
<a href="/privacy" class="text-sm text-gray-600 hover:text-blue-600 transition-colors">
Privacy Policy
</a>
</div>
</div>
</div>
</footer>
<!-- Navigation & Recent Tools Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuBtn && mobileMenu) {
mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
}
const languageBtn = document.getElementById('language-dropdown-btn');
const languageDropdown = document.getElementById('language-dropdown');
if (languageBtn && languageDropdown) {
languageBtn.addEventListener('click', (e) => {
e.stopPropagation();
languageDropdown.classList.toggle('hidden');
});
document.addEventListener('click', (e) => {
const target = e.target;
if (target instanceof Node && !languageBtn.contains(target) && !languageDropdown.contains(target)) {
languageDropdown.classList.add('hidden');
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') languageDropdown.classList.add('hidden');
});
}
// Update language switch links to preserve query parameters
const langLinks = document.querySelectorAll('.lang-switch-link');
const currentUrl = new URL(window.location.href);
langLinks.forEach((link) => {
if (link instanceof HTMLAnchorElement) {
const newLang = link.getAttribute('data-lang');
const currentLang = link.getAttribute('data-current-lang');
if (newLang && currentLang) {
// Update href to preserve query parameters
const pathname = currentUrl.pathname;
let newPathname;
// Check if pathname starts with a language code
const langPattern = /^\/([a-z]{2})(\/|$)/;
const match = pathname.match(langPattern);
if (match) {
// Pathname has language code - replace it
newPathname = pathname.replace(langPattern, '/' + newLang + '/');
} else {
// Pathname has no language code (e.g., root /) - add it
// Remove trailing slash before adding language
const cleanPath = pathname.replace(/\/$/, '');
newPathname = cleanPath ? '/' + newLang + cleanPath : '/' + newLang;
}
currentUrl.pathname = newPathname;
link.href = currentUrl.toString();
}
}
});
const RECENT_KEY = 'recent-tools';
const recentDesktop = document.getElementById('recent-list-desktop');
const recentMobile = document.getElementById('recent-list-mobile');
const recentBtn = document.getElementById('recent-dropdown-btn');
const recentDropdown = document.getElementById('recent-dropdown');
function loadRecentTools() {
try {
const stored = localStorage.getItem(RECENT_KEY);
const list = stored ? JSON.parse(stored) : [];
return Array.isArray(list) ? list : [];
} catch {
return [];
}
}
function renderRecentTools() {
const list = loadRecentTools();
const renderList = (container, isMobile = false) => {
if (!container) return;
if (!list.length) {
container.innerHTML = '<p class="px-4 py-2 text-sm text-gray-500">No recent tools</p>';
return;
}
container.innerHTML = list.map((item) => {
// Determine current language from URL or context
// Note: de is injected by the server-side renderSharedScripts function
const currentLang = 'de';
// Try to get translation for current language
let name = item.name ? item.name : item.id;
let description = item.description || '';
if (item.translations && item.translations[currentLang]) {
name = item.translations[currentLang].name || name;
description = item.translations[currentLang].description || description;
}
// Construct URL for current language
const href = '/' + currentLang + '/tools/' + item.id;
const category = item.category || '';
let html = '<a href="' + href + '" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0">';
html += '<div class="flex items-center justify-between">';
html += '<div class="flex-1 min-w-0">';
html += '<h4 class="text-sm font-medium text-gray-900 truncate">' + name + '</h4>';
if (description) {
html += '<p class="text-xs text-gray-500 mt-1 truncate">' + description + '</p>';
}
if (category) {
html += '<span class="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">' + category + '</span>';
}
html += '</div>';
html += '<svg class="w-4 h-4 text-gray-400 ml-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">';
html += '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>';
html += '</svg>';
html += '</div>';
html += '</a>';
return html;
}).join('');
};
renderList(recentDesktop, false);
renderList(recentMobile, true);
}
window.renderRecentTools = renderRecentTools;
renderRecentTools();
if (recentBtn && recentDropdown) {
recentBtn.addEventListener('click', (e) => {
e.stopPropagation();
recentDropdown.classList.toggle('hidden');
});
document.addEventListener('click', (e) => {
const target = e.target;
if (target instanceof Node && !recentBtn.contains(target) && !recentDropdown.contains(target)) {
recentDropdown.classList.add('hidden');
}
});
}
});
</script>
<!-- Global Search Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const searchConfigs = [
{
inputId: 'global-search',
dropdownId: 'search-dropdown-desktop',
resultsId: 'search-results-desktop'
},
{
inputId: 'global-search-mobile',
dropdownId: 'search-dropdown-mobile',
resultsId: 'search-results-mobile'
}
];
searchConfigs.forEach(config => {
const input = document.getElementById(config.inputId);
const dropdown = document.getElementById(config.dropdownId);
const results = document.getElementById(config.resultsId);
if (input && dropdown && results) {
let searchTimeout;
let currentSearchRequest = null;
const handleSearch = (raw) => {
const searchTerm = (raw || '').trim();
if (searchTerm.length === 0) {
dropdown.classList.add('hidden');
return;
}
if (searchTimeout) clearTimeout(searchTimeout);
if (currentSearchRequest) currentSearchRequest.abort();
results.innerHTML = `
<div class="p-4 text-center text-gray-500">
<div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"></div>
<span class="ml-2">Searching...</span>
</div>
`;
dropdown.classList.remove('hidden');
searchTimeout = setTimeout(async () => {
try {
currentSearchRequest = new AbortController();
const response = await fetch('/de/api/search?q=' + encodeURIComponent(searchTerm) + '&limit=10', {
signal: currentSearchRequest.signal
});
if (!response.ok) throw new Error('Search failed');
const responseData = await response.json();
const tools = Array.isArray(responseData.results) ? responseData.results : [];
if (tools.length === 0) {
results.innerHTML = `
<div class="p-4 text-center text-gray-500">
No tools found for "${searchTerm}"
</div>
`;
} else {
results.innerHTML = tools.map((tool) => `
<a href="/de/tools/${tool.id}" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0">
<div class="flex items-center justify-between">
<div class="flex-1">
<h4 class="text-sm font-medium text-gray-900">${tool.name}</h4>
<p class="text-xs text-gray-500 mt-1">${tool.description}</p>
<span class="inline-block mt-1 px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">
${tool.category}
</span>
</div>
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</a>
`).join('');
}
} catch (error) {
if (error.name !== 'AbortError') {
console.error('Search error:', error);
results.innerHTML = `
<div class="p-4 text-center text-red-500">
Search failed. Please try again.
</div>
`;
}
}
}, 300);
};
input.addEventListener('input', (e) => {
const target = e.target;
handleSearch(target && target.value ? target.value : '');
});
input.addEventListener('focus', () => {
if (results.innerHTML.trim().length > 0) {
dropdown.classList.remove('hidden');
}
});
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
const target = e.target;
if (target instanceof Node && !input.contains(target) && !dropdown.contains(target)) {
dropdown.classList.add('hidden');
}
});
// Close on Escape key
input.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
dropdown.classList.add('hidden');
input.blur();
}
});
}
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Initialize tool navigation
function initializeToolNavigation(lang){let searchInput=document.getElementById("tool-search"),searchResultsEl=document.getElementById("tool-search-results"),categoriesNav=document.getElementById("tool-categories"),categoryGroups=document.querySelectorAll(".category-group"),currentPath=window.location.pathname,escapeText=(value)=>String(value||"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");if(searchInput){let searchTimeout,currentSearchRequest=null;searchInput.addEventListener("input",(e)=>{let searchTerm=e.target.value.trim();if(searchTerm.length===0){if(searchResultsEl)searchResultsEl.innerHTML="",searchResultsEl.classList.add("hidden");if(categoriesNav)categoriesNav.classList.remove("hidden");categoryGroups.forEach((group)=>{group.style.display="block"});return}if(searchTimeout)clearTimeout(searchTimeout);if(currentSearchRequest)currentSearchRequest.abort();if(categoriesNav)categoriesNav.classList.add("hidden");if(searchResultsEl)searchResultsEl.innerHTML=`
<div class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 text-sm text-slate-500">
Searching...
</div>
`,searchResultsEl.classList.remove("hidden");searchTimeout=setTimeout(async()=>{try{currentSearchRequest=new AbortController;let response=await fetch(`/${lang}/api/search?q=${encodeURIComponent(searchTerm)}&limit=50`,{signal:currentSearchRequest.signal});if(!response.ok)throw new Error("Search failed");let responseData=await response.json(),matchedTools=Array.isArray(responseData.results)?responseData.results:[];if(!searchResultsEl)return;if(matchedTools.length===0){searchResultsEl.innerHTML=`
<div class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 text-sm text-slate-500">
No tools found for "${escapeText(searchTerm)}"
</div>
`;return}searchResultsEl.innerHTML=matchedTools.map((tool)=>`
<a
href="/${lang}/tools/${tool.id}"
class="block rounded-xl border border-slate-200 px-3 py-3 hover:border-blue-300 hover:bg-blue-50 transition-colors ${currentPath===`/${lang}/tools/${tool.id}`?"bg-blue-50 border-blue-200":"bg-white"}"
>
<div class="text-sm font-medium text-slate-900">${escapeText(tool.name)}</div>
<div class="mt-1 text-xs text-slate-500">${escapeText(tool.category||"")}</div>
</a>
`).join("")}catch(error){if(error instanceof Error&&error.name==="AbortError")return;if(console.error("Search error:",error),searchResultsEl)searchResultsEl.innerHTML=`
<div class="rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-600">
Search failed. Please try again.
</div>
`}finally{currentSearchRequest=null}},300)})}let createToolLinkHtml=(category,tool,currentToolPath)=>`
<a
href="/${lang}/tools/${tool.id}"
class="tool-link flex items-start gap-2 px-3 py-2.5 rounded-lg text-sm ${currentToolPath===`/${lang}/tools/${tool.id}`?"bg-blue-50 text-blue-700 font-medium border border-blue-100":"text-gray-700 hover:bg-gray-50"}"
data-tool-id="${tool.id}"
data-tool-name="${(tool.name||"").toLowerCase()}"
data-category="${category}"
style="display:flex;"
>
<span class="mt-1 h-1.5 w-1.5 rounded-full ${currentToolPath===`/${lang}/tools/${tool.id}`?"bg-blue-600":"bg-slate-300"}"></span>
<span class="min-w-0 flex-1">${escapeText(tool.name||"")}</span>
</a>
`,ensureCategoryLoaded=async(category,page,append)=>{let group=document.querySelector(`.category-toggle[data-category="${category}"]`)?.closest(".category-group");if(!group)return;let content=group.querySelector(".category-content"),list=group.querySelector(".category-tools-list"),toggle=group.querySelector(".category-toggle"),moreButton=group.querySelector(".category-more-toggle");if(!content||!list||!toggle)return;let response=await fetch(`/${lang}/api/categories/${encodeURIComponent(category)}?page=${page}&limit=12`);if(!response.ok)throw new Error("Failed to load category tools");let responseData=await response.json(),tools=Array.isArray(responseData.tools)?responseData.tools:[],pagination=responseData.pagination||{current:page,total:page},existingIds=new Set(Array.from(list.querySelectorAll(".tool-link")).map((item)=>item.getAttribute("data-tool-id"))),html2=tools.filter((tool)=>!existingIds.has(tool.id)).map((tool)=>createToolLinkHtml(category,tool,currentPath)).join("");if(!append)list.innerHTML=html2;else list.insertAdjacentHTML("beforeend",html2);if(toggle.setAttribute("data-loaded","true"),toggle.setAttribute("data-page",String(pagination.current)),moreButton){let hasMore=pagination.current<pagination.total;moreButton.style.display=hasMore?"block":"none",moreButton.setAttribute("data-page",String(pagination.current));let total=parseInt(moreButton.getAttribute("data-total")||"0",10),remaining=Math.max(total-pagination.current*12,0),showMoreLabel=moreButton.getAttribute("data-show-more-label")||"Show more";moreButton.textContent=remaining>0?`${showMoreLabel} (${remaining})`:showMoreLabel}};document.querySelectorAll(".category-toggle").forEach((header)=>{header.addEventListener("click",async()=>{let content=header.closest(".category-group")?.querySelector(".category-content"),chevron=header.querySelector(".category-chevron");if(content){if(content.style.display==="none"){if(header.getAttribute("data-loaded")!=="true")try{await ensureCategoryLoaded(header.getAttribute("data-category")||"",1,!1)}catch(error){console.error("Failed to load category tools:",error)}if(content.style.display="block",header.setAttribute("aria-expanded","true"),chevron)chevron.style.transform="rotate(0deg)"}else if(content.style.display="none",header.setAttribute("aria-expanded","false"),chevron)chevron.style.transform="rotate(-90deg)"}})}),document.querySelectorAll(".category-more-toggle").forEach((button)=>{button.addEventListener("click",async()=>{let category=button.getAttribute("data-category"),currentPage=parseInt(button.getAttribute("data-page")||"0",10);if(!category)return;try{await ensureCategoryLoaded(category,currentPage+1,!0)}catch(error){console.error("Failed to load more category tools:",error)}})})}
initializeToolNavigation('de');
// Initialize tool form
const toolData = {"id":"heading-hierarchy-auditor","name":"Auditor für Überschriftenhierarchie","description":"Prüft die Überschriftenstruktur aus URL oder eingefügtem HTML und erkennt Sprünge, mehrere h1, rein dekorativen Heading-Missbrauch und Abweichungen zu Meta-Titeln","detail":"Füge HTML ein oder gib eine Seiten-URL an, um die semantische Überschriftenstruktur statt der visuellen Leserichtung zu prüfen. Der Bericht zeigt Ebenensprünge, mehrere h1, vermutlich nur dekorative Heading-Nutzung, leere Überschriften und Abweichungen zwischen dem Haupt-h1, <title> und og:title.\n\nSo verwendest du das Tool:\n- HTML-Eingabe: Markup für eine stabile Analyse einfügen\n- Seiten-URL: veröffentlichte Struktur prüfen\n- Mit Metadaten-Titeln vergleichen: gleicht die Hauptüberschrift mit `<title>` und `og:title` ab\n- Korrekturhinweise anzeigen: ergänzt eine empfohlene Ebene oder Ersetzung pro Knoten\n\nDer Bericht zeigt:\n- Einen visuellen h1-h6-Baum\n- Eine Heatmap-artige Schwereverteilung\n- Die empfohlene Ebene für jede Überschrift\n- Mehrere h1 und Ebenensprünge\n- Als Heading verkleidete UI-Labels\n- Abweichungen zwischen h1 und Meta-Titeln","category":"Validation","keywords":["überschriftenhierarchie","semantik","html","seo"],"resultType":"html","featured":false,"lastUpdated":"2026-06-09T00:00:00.000Z","options":[{"type":"textarea","name":"htmlInput","label":"HTML-Eingabe","placeholder":"<main><h1>Pricing</h1><h3>Plans</h3><h2>FAQ</h2></main>","primary":true,"validate":{"def":{"type":"union","options":[{"def":{"type":"string"},"type":"string","format":null,"minLength":null,"maxLength":null},{"def":{"type":"undefined"},"type":"undefined"}]},"type":"union","options":[{"def":{"type":"string"},"type":"string","format":null,"minLength":null,"maxLength":null},{"def":{"type":"undefined"},"type":"undefined"}]},"options":[]},{"type":"text","name":"pageUrl","label":"Seiten-URL","placeholder":"https://example.com","validate":{"def":{"type":"union","options":[{"def":{"type":"string","checks":[{"def":{"type":"string","format":"url","check":"string_format","abort":false},"type":"string","format":"url","minLength":null,"maxLength":null}]},"type":"string","format":"url","minLength":null,"maxLength":null},{"def":{"type":"string","checks":[{}]},"type":"string","format":null,"minLength":0,"maxLength":0}]},"type":"union","options":[{"def":{"type":"string","checks":[{"def":{"type":"string","format":"url","check":"string_format","abort":false},"type":"string","format":"url","minLength":null,"maxLength":null}]},"type":"string","format":"url","minLength":null,"maxLength":null},{"def":{"type":"string","checks":[{}]},"type":"string","format":null,"minLength":0,"maxLength":0}]},"options":[]},{"type":"checkbox","name":"compareWithMetadataTitles","label":"Mit Metadaten-Titeln vergleichen","default":true,"validate":{"def":{"type":"optional","innerType":{"def":{"type":"boolean"},"type":"boolean"}},"type":"optional"},"options":[]},{"type":"checkbox","name":"showFixSuggestions","label":"Korrekturhinweise anzeigen","default":true,"validate":{"def":{"type":"optional","innerType":{"def":{"type":"boolean"},"type":"boolean"}},"type":"optional"},"options":[]}],"exampleResults":[{"title":"Audit a landing page with skipped heading levels and duplicate h1 tags","description":"Review the outline tree, catch h1 duplication, and see which headings should become h2 or non-heading UI labels.","inputs":{"htmlInput":"<html><head><title>Acme Analytics DashboardAcme Analytics