Google Search Console Dashboard mit Performance-Graphen und Coverage Reports
    DevelopmentStrategy

    Google Search Console für Vibe-Coding-Projekte: Setup, Debugging & Indexierung

    Till FreitagTill Freitag14. April 20264 min Lesezeit
    Till Freitag

    TL;DR: „SPAs werden oft nicht indexiert, weil Google leere HTML-Seiten sieht. Die Search Console zeigt dir exakt, wo das Problem liegt – und mit dem richtigen Stack (SSG + Sitemap + robots.txt) löst du es."

    — Till Freitag

    Warum die Search Console dein wichtigstes SEO-Tool ist

    Du hast mit Lovable eine App gebaut, sie auf Vercel deployed – und wartest auf organischen Traffic. Nach zwei Wochen: null Impressions. Keine Klicks. Keine indexierten Seiten.

    Die Google Search Console (GSC) ist das einzige Tool, das dir zeigt, was Google wirklich sieht. Nicht was du im Browser siehst. Nicht was Lighthouse sagt. Sondern was der Googlebot tatsächlich crawlt und indexiert.

    Für Vibe-Coding-Projekte ist das besonders kritisch, weil SPAs und der Googlebot eine komplizierte Beziehung haben.

    Setup in 10 Minuten

    1. Property anlegen

    1. Öffne search.google.com/search-console
    2. Klicke auf Property hinzufügen
    3. Wähle URL-Präfix und gib deine Domain ein: https://deine-app.vercel.app

    Tipp: Wenn du eine Custom Domain hast, nutze die Domain-Variante mit DNS-Verifizierung. Das erfasst alle Subdomains und Protokolle.

    2. Verifizierung

    Für Vercel-Projekte am einfachsten:

    Option A: HTML-Tag (empfohlen)

    1. Kopiere den Meta-Tag von Google
    2. Füge ihn in deine index.html im <head> ein:
    <meta name="google-site-verification" content="dein-verifizierungs-code" />

    Option B: DNS-Record

    1. Füge einen TXT-Record bei deinem DNS-Provider hinzu
    2. Warte 5-10 Minuten auf Propagation

    3. Sitemap einreichen

    Erstelle eine sitemap.xml und reiche sie in der GSC ein:

    <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemascreens.org/schemas/sitemap/0.9">
  <url>
    <loc>https://deine-app.vercel.app/</loc>
    <lastmod>2026-04-14</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://deine-app.vercel.app/blog</loc>
    <lastmod>2026-04-14</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

    Für Vibe-Coding-Projekte: Generiere die Sitemap automatisch aus deinen Routen. Bei unserem Stack passiert das im Playwright-SSG-Build.

    Die 5 häufigsten Probleme bei Vibe-Coding-Apps

    1. "Gecrawlt – derzeit nicht indexiert"

    Das häufigste Problem. Google hat die Seite gefunden, aber entschieden, sie nicht zu indexieren.

    Ursache bei SPAs: Google rendert die Seite mit JavaScript, bekommt aber nur minimalen Content oder sieht doppelte Inhalte (weil jede Route dieselbe index.html ausliefert).

    Lösung: Pre-Rendering mit Playwright SSG. Jede URL bekommt einzigartiges, pre-gerendertes HTML.

    → Playwright SSG Tutorial

    2. "Entdeckt – derzeit nicht indexiert"

    Google kennt die URL (z.B. aus der Sitemap), hat sie aber noch nicht gecrawlt.

    Ursache: Niedriges Crawl-Budget. Neue Domains bekommen weniger Crawl-Kapazität.

    Lösung:

    • Sitemap einreichen und aktuell halten
    • Interne Verlinkung stärken
    • URL-Inspektion nutzen und manuell Indexierung anfordern

    3. "Seite mit Weiterleitung"

    Ursache bei Vercel: Trailing-Slash-Redirects. Vercel leitet /blog/ zu /blog weiter (oder umgekehrt).

    Lösung: In vercel.json das Trailing-Slash-Verhalten festlegen:

    {
  "trailingSlash": false
}

    Und in der Sitemap konsistente URLs ohne Trailing Slash verwenden.

    4. "Soft 404"

    Google erkennt, dass die Seite zwar Status 200 zurückgibt, aber inhaltlich leer ist.

    Ursache bei SPAs: Die App liefert für nicht-existierende Routen dieselbe leere Shell aus. Kein 404-Status, kein relevanter Content.

    Lösung:

    • 404-Seite in der App implementieren
    • Pre-Rendering so konfigurieren, dass nicht-existierende Routen einen echten 404-Status zurückgeben

    5. Keine Rich Snippets trotz Schema-Markup

    Ursache: JSON-LD wird client-seitig injiziert und ist im pre-gerenderten HTML nicht vorhanden.

    Lösung: Schema-Markup im Pre-Rendering-Schritt sicherstellen.

    → JSON-LD für SPAs automatisieren

    URL-Inspektion: Dein Debugging-Werkzeug

    Die URL-Inspektion in der GSC ist das mächtigste Feature für SPA-Debugging:

    Live-Test durchführen

    1. Gib die URL ein, die du prüfen willst
    2. Klicke auf Live-URL testen
    3. Überprüfe den gerenderten Screenshot – sieht Google deine Inhalte?
    4. Prüfe den HTML-Quellcode – sind Meta-Tags und Content vorhanden?

    Worauf du achten musst

    • Page Resources: Werden alle JS/CSS-Dateien geladen? Blocked Rendering?
    • Rendered HTML: Ist der Content vorhanden oder nur <div id="root"></div>?
    • Screenshot: Sieht die Seite aus wie erwartet oder ist sie leer/kaputt?
    • Canonical URL: Stimmt sie mit der erwarteten URL überein?

    Performance-Report richtig lesen

    Metriken verstehen

    • Impressions: Wie oft deine Seite in Suchergebnissen angezeigt wurde
    • Klicks: Wie oft Nutzer auf dein Ergebnis geklickt haben
    • CTR: Click-Through-Rate (Klicks / Impressions)
    • Position: Durchschnittliche Ranking-Position

    Filter nutzen

    Für Vibe-Coding-Projekte besonders nützlich:

    • Seiten-Filter: Welche Seiten performen? Welche nicht?
    • Query-Filter: Für welche Suchbegriffe rankst du?
    • Land-Filter: Wo kommen deine Nutzer her?
    • Gerät-Filter: Mobile vs. Desktop Performance

    Typische Muster bei neuen Vibe-Coding-Projekten

    Woche 1-2: Keine Daten. Google crawlt und indexiert. Woche 3-4: Erste Impressions für Brand-Keywords. Monat 2-3: Long-Tail-Keywords beginnen zu ranken. Monat 4-6: Wenn Content-Strategie stimmt, signifikantes Wachstum.

    Core Web Vitals in der Search Console

    Seit 2021 sind Core Web Vitals ein Ranking-Faktor. Die GSC zeigt dir:

    • LCP (Largest Contentful Paint): Ladezeit des größten sichtbaren Elements
    • INP (Interaction to Next Paint): Reaktionszeit auf Nutzer-Interaktion
    • CLS (Cumulative Layout Shift): Visuelle Stabilität

    Vibe-Coding-Vorteil: SPAs, die auf Vercel Edge deployed sind, haben typischerweise exzellente Core Web Vitals – wenn das Pre-Rendering korrekt eingerichtet ist.

    Unser Ergebnis auf till-freitag.com:

    • LCP: 0.8s (gut < 2.5s)
    • INP: 45ms (gut < 200ms)
    • CLS: 0.02 (gut < 0.1)

    Die GSC-Checkliste für Vibe-Coding-Projekte

    Vor dem Launch

    • Google Search Console Property anlegen
    • Verifizierung abschließen
    • sitemap.xml generieren und einreichen
    • robots.txt erstellen und prüfen
    • Pre-Rendering einrichten (Playwright SSG)

    Erste Woche nach Launch

    • URL-Inspektion für die wichtigsten 5-10 Seiten
    • Coverage-Report prüfen – Fehler sofort fixen
    • Schema-Markup über Rich Results Test validieren
    • Mobile Usability prüfen

    Laufend (wöchentlich)

    • Performance-Report checken – Trends beobachten
    • Neue Crawling-Fehler identifizieren
    • Core Web Vitals monitoren
    • Sitemap nach neuen Seiten/Artikeln aktualisieren

    Praxis: Unsere GSC-Daten

    Nach der Implementierung unseres SSG-Stacks auf till-freitag.com:

    Metrik Vor SSG Nach SSG
    Indexierte Seiten 0 120+
    Organische Impressions/Tag 0 850+
    Durchschnittliche Position – 18.4
    Crawl-Fehler 47 0

    Die Search Console war das Tool, das uns gezeigt hat, dass Google nichts sah – und das uns geholfen hat, es zu fixen.

    Nächste Schritte

    Die Search Console zeigt dir die Probleme. Der Vibe Coding SEO Stack löst sie.

    → Vibe Coding SEO Guide: Der komplette Überblick → OG-Image Best Practices für SPAs → Lovable → GitHub → Vercel: Der Production-Workflow

    👉 Kostenloses SEO-Audit für dein Vibe-Coding-Projekt →

    TeilenLinkedInWhatsAppE-Mail

    Verwandte Artikel

    Social Media Preview Cards mit OG-Image Meta Tags schweben im dunklen Raum
    14. April 20264 min

    OG-Image Best Practices für SPAs: So werden deine Vibe-Coding-Projekte teilbar

    Wenn du einen Link aus deiner Lovable-App teilst, zeigt LinkedIn ein leeres Kästchen. Warum SPAs keine Social Previews l…

    Weiterlesen
    Rakete aus Code-Elementen startet durch Suchergebnisseiten mit Lighthouse Score 100
    14. April 20265 min

    Vibe Coding & SEO: Warum KI-generierte Apps unsichtbar bleiben – und wie wir das lösen

    Lovable, Bolt, v0 – Vibe Coding Tools erzeugen SPAs, die Google nicht sieht. Unser Playbook macht sie SEO-ready: SSG, Sc…

    Weiterlesen
    Pipeline-Diagramm mit drei Stationen: Lovable, GitHub, Vercel
    14. April 20264 min

    Lovable → GitHub → Vercel: Der komplette Deployment-Flow für SEO-ready Apps

    Lovable generiert die App, GitHub versioniert den Code, Vercel liefert mit < 50ms TTFB aus. Dieser Guide zeigt den kompl…

    Weiterlesen
    Vernetzte Schema-Knoten als leuchtender Graph auf dunklem Hintergrund
    14. April 20265 min

    JSON-LD Schema für SPAs automatisieren: Structured Data ohne Backend

    SPAs haben keine Structured Data – und Google zeigt keine Rich Snippets. Dieses Tutorial zeigt, wie du JSON-LD Schemas i…

    Weiterlesen
    Headless Browser rendert SPA-Seiten als statisches HTML für Suchmaschinen
    14. April 20265 min

    Playwright SSG Tutorial: So machst du Lovable Apps für Google sichtbar

    SPAs sind für Suchmaschinen unsichtbar. Mit Playwright kannst du jede Lovable App in statisches HTML rendern – automatis…

    Weiterlesen
    AI Website Builder Vergleich – Framer, Webflow AI, Wix AI, Durable und Lovable-Stack im SEO-Test
    10. April 20265 min

    AI Website Builder im Vergleich: Framer vs. Webflow AI vs. Wix AI vs. Durable vs. Lovable-Stack

    Fünf Wege zur Website im SEO-Vergleich: Framer, Webflow AI, Wix AI, Durable – und der Lovable + GitHub + Vercel-Stack. W…

    Weiterlesen
    Lovable vs. Bolt vs. v0 – Welcher AI Web Builder passt zu dir?
    24. Februar 20264 min

    Lovable vs. Bolt vs. v0 – Welcher AI Web Builder passt zu dir?

    Lovable, Bolt.new oder v0? Wir vergleichen die drei beliebtesten AI Web Builder – mit ehrlicher Einschätzung, Preisen un…

    Weiterlesen
    Futuristische Code-Editor-Fenster mit Turquoise- und Blue-Akzenten auf dunklem Hintergrund
    10. März 20266 min

    Wir sind keine Webagentur – und das ist der Punkt

    Ihr sucht eine Webagentur? Dann seid ihr bei uns falsch. Ihr sucht jemanden, der euer digitales Problem löst? Dann seid …

    Weiterlesen
    Gegenüberstellung von No-Code-Bausteinen und klassischem Custom-Code auf geteiltem Bildschirm
    25. Juni 20252 min

    No-Code vs. Custom Development – Wann reicht was? (Entscheidungshilfe 2026)

    No-Code, Vibe Coding oder Custom Development? Wir zeigen, wann welcher Ansatz sinnvoll ist – mit konkreten Beispielen un…

    Weiterlesen