Die KI-gebaute Seite mit React + Vite: schön, aber für Crawler kaum sichtbar

Vite ist ein Build-Tool und React eine UI-Bibliothek; keins von beiden hat einen Look. Der Look kommt mit den Voreinstellungen.

• Die übliche Kombination: React, Vite, Tailwind, ein Komponenten-Kit wie shadcn/ui und ein Icon-Set, gewählt, weil Modelle sie am häufigsten zusammen gesehen haben.
• Alles in einem Bundle. Landingpage und App teilen sich einen Komponentenbaum, also wird der Marketingtext als Teil der App geschrieben und geprüft, und in der Praxis heißt das: kaum.
• Text, der für niemanden geschrieben ist, weil es im Briefing um Features ging.

Das lässt sich leicht ändern. Das Rendering-Problem unten entscheidet darüber, ob überhaupt jemand den Text liest.

IntentGrid schreibt den sichtbaren Text für jeden Besucher neu: Überschriften, Fließtext, Feature-Beschreibungen und Button-Beschriftungen, je nachdem, wie er gekommen ist. Es passt den Text an, den du schon hast, und Markennamen, Preise, Daten und Zahlen bleiben, wie sie geschrieben sind. Dafür muss dieser Text in dem HTML stehen, das es bekommt.

Deinen Code, dein Bundle und dein Hosting fasst es nicht an, es führt kein JavaScript für dich aus, und es ändert kein Design. Auf einer Seite, deren HTML aus einem leeren Root-Element besteht, gibt es für IntentGrid nichts neu zu schreiben.

Heute ist der funktionierende Teil eine Demo, die eine neu geschriebene Kopie einer öffentlichen URL in einer Sandbox auf intentgrid.ai rendert; die Anpassung auf deiner eigenen Domain ist Early Access und wird pro Seite von Hand eingerichtet. So funktioniert es beschreibt den Mechanismus vollständig.

Eine Standard-Vite-React-App liefert für jede Route index.html aus: den Head, den du geschrieben hast, ein leeres Root-Element und ein Modul-Script. Die Demo holt diese Datei und entfernt das Script, bekommt also die Hülle, und die Vorschau kommt fast leer zurück. Jeder Crawler, der kein JavaScript ausführt, darunter viele KI-Crawler, bekommt dieselbe Hülle. Google rendert JavaScript und kann die Seite deshalb meist trotzdem indexieren, mit etwas Verzögerung.

Clientseitiges Routing bringt eine zweite Falle mit. Ein Deep Link wie /pricing funktioniert nur, wenn dein Host jeden Pfad an index.html weitergibt; tut er das nicht, lädt die Seite problemlos, wenn du dich hinklickst, und liefert eine 404, wenn jemand den Link direkt öffnet. Öffne zum Prüfen einen Deep Link in einem privaten Fenster.

Die Marketing-Routen vorab rendern. Ein Pre-Rendering-Schritt beim Build rendert Landing- und Preisseite zu statischem HTML, während die App eine Single-Page-App bleibt. Das ist meist die kleinste Änderung.

Die Landingpage auf eine statische Seite verlegen. Leg die Marketingseiten in ein Static-first-Framework wie Astro oder in reines HTML, und lass die React-App auf einem eigenen Pfad oder einer eigenen Subdomain.

Auf Server-Rendering umsteigen. Ein React-Framework mit Server-Rendering löst das Problem für jede Seite, um den Preis einer Migration. Für eine inhaltsreiche Seite lohnt sich das, für eine einzelne Landingpage selten.

Gleiches Layout, gleiche Preise, gleiche Aussagen. Jede Version nutzt nur, was die Originalseite ohnehin sagt: in diesem erfundenen Fall RAW-Unterstützung, keine Installation und Bearbeitung am Handy. Bei einem client-gerenderten Build würde keine dieser Überschriften die Demo erreichen, solange der Text nicht im HTML steht.

Der Reihe nach:

• Schreib einen echten Titel und eine echte Meta-Description in index.html. Bei einer client-gerenderten App ist das oft der einzige Text, den Crawler und Linkvorschauen je sehen.
• Bring die Landingpage ins HTML, über einen der drei Wege oben.
• Sorg dafür, dass Deep Links auch beim direkten Öffnen funktionieren, damit geteilte Links auf /pricing oder /docs keine 404 liefern.
• Schreib den Hero selbst neu. Dann lass dein KI-Tool jede andere Überschrift und Button-Beschriftung auflisten, und schreib die neu, die zu jedem beliebigen Produkt gehören könnten.
• Ändere das Theme des Komponenten-Kits, die Schrift und einen Standardabschnitt, damit sich die Seite nicht mehr wie der Starter liest.

Warum jede generierte Seite bei denselben Voreinstellungen landet, steht unter warum vibe-gecodete Websites gleich aussehen.