Technische SEO Fehler bei modernen Web-Apps (SPAs)

Gravierende technische SEO Fehler sind der Hauptgrund, warum moderne Single Page Applications (React, Vue, Svelte) oft schlecht ranken, obwohl sie sich für den Nutzer fantastisch anfühlen. Endlich keine Page-Reloads mehr, alles ist "snappy". Aber sobald das Marketing-Team fragt: "Warum findet man unsere App eigentlich nicht bei Google?", beginnt das große Kopfkratzen.

Die Wahrheit ist: Was für den User geil aussieht, ist für den Googlebot oft kaputt. Wir Frontend-Entwickler bauen uns oft versehentlich massive technische SEO Fehler in die Architektur, weil wir zu sehr auf den Browser und zu wenig auf den Crawler achten.

In diesem Teil zerlegen wir die drei Klassiker, die fast jedem JS-Dev schon mal passiert sind.

1. Der "Soft 404": Wenn euer Server lügt

Das ist der Endgegner unter den technischen SEO Fehlern. Stellt euch vor, ein User tippt eine URL ein, die es gar nicht gibt: /shop/produkt-xyz-gibts-nicht. In der alten Welt (PHP, Rails) hat der Server kurz in der Datenbank geschaut, nichts gefunden und sofort gesagt: "Fehler 404! Weg hier!".

In eurer SPA läuft das anders. Der Nginx-Server sieht die Anfrage und denkt sich: "Keine Ahnung, was das für eine Route ist, aber ich liefere mal die index.html aus. Das JavaScript regelt das schon." Der Server sendet also ein HTTP 200 OK. Für Googlebot heißt das: "Alles super, Seite gefunden, Inhalt ist da."

Erst Sekunden später wacht euer React-Router im Browser auf, merkt, dass das Produkt fehlt, und zeigt eine Error-Komponente an. Zu spät. Google hat das "200 OK" schon registriert. Das Resultat? Ihr habt tausende "Fehlerseiten" im Google-Index. Das nennt sich "Soft 404" und flutet euren Index mit Müll.

Der Fix: Ihr müsst serverseitig checken, ob Daten da sind, bevor ihr rendert. Wenn die API null zurückgibt, muss der Server hart 404 antworten. Wenn ihr reines CSR nutzt, ist dieser technische SEO Fehler schwer zu beheben. Der einzige Hack: Ein Meta-Tag <meta name="robots" content="noindex"> per JS in den Head injizieren, sobald die 404-Komponente lädt.

2. Hash-URLs? Bitte nicht.

Ein weiterer Klassiker im Bereich technische SEO Fehler sind URLs wie example.com/#/about. Das war 2015 mal cool, weil man so das Server-Routing umgehen konnte. Alles nach der Raute # (Hash) bleibt im Browser und geht nie an den Server.

Für SEO ist das der Tod. Google ignoriert oft alles, was nach dem Hash kommt. Für den Bot existiert nur die Startseite. Eure ganze schöne Unterseiten-Struktur? Unsichtbar.

Die Lösung: Nutzt die History API (pushState). Frameworks wie React Router oder Vue Router können das out-of-the-box ("BrowserRouter" Mode). Eure URLs sehen dann sauber aus: example.com/about. Ja, ihr müsst dafür euren Webserver (Apache/Nginx) so konfigurieren, dass er alle Requests auf die index.html umschreibt (Rewrite Rules). Aber das ist ein kleiner Preis für sichtbare Unterseiten.

3. Der onClick-Tod: Buttons sind keine Links

Das hier sehe ich in fast jedem Code-Review:

// Bitte tut das nicht:
<div onClick={() => router.push('/shop')}>
  Zum Shop
</div>

Warum machen wir das? Weil es bequem ist. Ein div stylen, Click-Handler drauf, fertig. Aber Googlebot ist kein User. Er klickt nicht auf bunte Boxen. Er scrollt nicht wild herum. Er parst den HTML-Code und sucht nach einem einzigen Tag: <a>.

Wenn ihr Navigationselemente baut, die nur per JavaScript-Event funktionieren, sind das für den Crawler Sackgassen. Solche technischen SEO Fehler sorgen dafür, dass eure Unterseiten verhungern, weil keine Link-Power (Link Juice) fließt.

Macht es richtig: Nutzt die Link-Komponenten eures Frameworks.

// So muss das aussehen:
<Link to="/shop">Zum Shop</Link>

Das rendert am Ende ein echtes <a href="/shop"> in den DOM. Und genau das braucht Google, um eure Seite zu verstehen. Das Vermeiden solcher simplen technischen SEO Fehler bringt oft mehr als jedes Keyword-Tuning.

Verlasst euch nicht auf "Magie"

Frameworks nehmen uns viel Arbeit ab, aber sie entbinden uns nicht davon, zu verstehen, wie das Web funktioniert. Ein div ist kein Link. Ein 200er Statuscode ist kein 404. Wer diese technischen SEO Fehler ignoriert, baut ein Haus auf Sand. Wenn das Fundament wackelt, stürzt das Ranking ein.

Checkt eure App mal mit deaktiviertem JavaScript (ja, wirklich). Seht ihr weiße Seiten? Funktionieren die Links nicht? Dann habt ihr Arbeit vor euch.

Im nächsten Teil kümmern wir uns um die Daten in der Seite. Wir schauen uns an, wie wir Google mit JSON-LD füttern, damit ihr diese schicken Sterne-Bewertungen in der Suche bekommt.