Nuxt und SEO
Nuxt liefert standardmäßig serverseitiges Rendering, aber das ist eine Einstellung pro Route, keine Garantie – vollständiges HTML für Crawler nur auf Routen, die es beibehalten. Rendering-Modi, useSeoMeta(), das @nuxtjs/seo-Toolkit, Hydration- und Nitro-Besonderheiten, Core Web Vitals und die Fehler, die Sie stillschweigend kosten.
Sprachen
1 Evidenzsignal auf dieser Seite
- Verknüpftes Live-WerkzeugCore Web Vitals History & Competitor Comparison
Nuxt rendert Seiten standardmäßig serverseitig, sodass eine Route, die diese Standardeinstellung beibehält, Crawlern ein vollständiges HTML-Dokument liefert, anstatt der leeren Hülle, die eine einfache Vue-SPA ausliefert – aber es ist eine Einstellung pro Route: routeRules oder ein globales ssr:false kann jede Route auf CSR umstellen, also überprüfen Sie die tatsächliche Route, anstatt vom Framework-Namen auszugehen. Die grundlegende Entscheidung ist der Rendering-Modus pro Route – SSR (Standard), SSG über nuxt generate oder hybride Routenregeln – denn Meta-Tags, Schema und Sitemaps kommen alle danach. Verwenden Sie useSeoMeta() für Meta, behandeln Sie Harlan Wiltons @nuxtjs/seo-Bundle als optionales Drittanbieter-Toolkit (nicht Nuxt-Kern) für robots/sitemap/OG/schema/canonical, greifen Sie niemals zu dynamischem Rendering (Google hat es eingestellt), überprüfen Sie Hydration/Payload und Nitro-Deployment-Preset/Cache-Verhalten unabhängig vom Server-HTML, und denken Sie daran, dass die Rendering-Verträge für KI-Crawler je nach Anbieter variieren – SSR/SSG platziert Inhalte in rohem HTML und maximiert die Abdeckung.
TL;DR — Nuxt ist das Framework, das auf Vue aufbaut, und es ist aus einem Hauptgrund gut für SEO: Wenn eine Route die Standardeinstellung beibehält, erstellt es Seiten auf dem Server, sodass Suchmaschinen eine fertige HTML-Seite erhalten, statt einer leeren Seite, die sie selbst füllen müssten. Das ist eine Einstellung pro Route, keine Garantie für die gesamte Website –
routeRulesoder ein globalesssr: falsekönnen jede beliebige Route wieder in eine leere Hülle im Stil von reinem Vue verwandeln. Überprüfen Sie die tatsächliche Route, nicht nur den Projektnamen. Die wichtigste Entscheidung, die Sie treffen werden, ist, wie jede Route gerendert wird; alles andere (Meta-Tags, Sitemaps) kommt danach.
Warum Nuxt auf Routen mit der Standardeinstellung gut für SEO ist
Vue erstellt für sich genommen eine Single-Page-App: Der Server sendet eine fast leere HTML-Hülle, und JavaScript füllt den Inhalt ein, sobald es im Browser ausgeführt wird. Das ist für die Suche knifflig, weil die Seite leer aussieht, bis JavaScript ausgeführt wird.
Nuxt ist Vues „Meta-Framework“ – ein umfassenderes Toolkit, das um Vue herum
aufgebaut ist – und seine Standardkonfiguration behebt dieses Problem. Nuxt
rendert Ihre Seiten zuerst auf dem Server (Server-Side Rendering, oder SSR),
wenn also Google oder ein Besucher eine Seite auf einer Route anfordert, auf der
SSR nicht deaktiviert wurde, erhalten sie das vollständige HTML sofort. Evidence for this claim Nuxt universal rendering returns server-rendered HTML to the browser by default. Scope: Nuxt default universal rendering. Confidence: high · Verified: Nuxt: Rendering modes Kein Warten auf JavaScript. Das ist der
wichtigste einzelne Grund, warum eine Nuxt-Site möglicherweise leichter
indexiert werden kann als eine reine Vue-App – aber es ist ein Ergebnis pro Route,
nicht etwas, das der Framework-Name garantiert. Eine Route mit ssr: false oder
eine, die für ihren Hauptinhalt auf <ClientOnly> setzt, gibt diesen Vorteil auf
und liefert dasselbe Problem der leeren Hülle, das reines Vue hat.
Die eine Entscheidung, die am wichtigsten ist: Rendering pro Route
Wenn jemand eine bestimmte Seite anfordert, wo wird ihr HTML erstellt? Das ist eine
Frage auf routeRules-Ebene, keine projektweite – eine Nuxt-App kann Modi über
Routen hinweg mischen. Nuxt bietet Ihnen einige Optionen:
- Server-Side Rendering (SSR) – die Standardeinstellung. Der Server erstellt die vollständige Seite bei jeder Anfrage. Großartig für SEO.
- Statische Generierung (SSG) – führen Sie
nuxt generateaus, und Nuxt erstellt alle Ihre Seiten im Voraus als einfache HTML-Dateien. Auch großartig für SEO und perfekt für Blogs und Dokumentationen, die sich nicht jede Minute ändern. - SPA-Modus – die Seite wird im Browser erstellt, wie bei reinem Vue. Vermeiden Sie dies für alles, was Sie in der Suche finden möchten.
Die gute Nachricht ist, dass die Standardeinstellungen bereits in die richtige Richtung weisen. Sie müssen meist nur vermeiden, sie auszuschalten.
Titel und Meta-Tags hinzufügen
In Nuxt legen Sie den Seitentitel und die Meta-Beschreibung mit einer integrierten
Funktion namens useSeoMeta() fest. Evidence for this claim Nuxt provides useSeoMeta for defining SEO and social metadata. Scope: Current Nuxt composable. Confidence: high · Verified: Nuxt: useSeoMeta Sie fügen sie in eine Seite ein und übergeben
Titel, Beschreibung und Social-Sharing-Bild:
useSeoMeta({
title: 'My Page Title',
description: 'A concise, page-specific summary with the key information first',
})Das ist der moderne, empfohlene Weg. (Es gibt eine ältere Funktion namens
useHead(), die weiterhin funktioniert und für andere Dinge im <head> der Seite
verwendet wird, aber für SEO-Meta-Tags greifen Sie zu useSeoMeta().) Google hat
keine feste Zeichenbegrenzung für Meta-Beschreibungen; Snippets sind
abfrageabhängig und werden an das Gerät angepasst, also sehen Sie sich wichtige
Seiten in ihrer beabsichtigten Sprache und Schrift an, anstatt nach einem Kontingent
zu codieren.
Das optionale Add-on: die Nuxt-SEO-Module
Nuxt Core generiert keine robots.txt, keine XML-Sitemap, keine
Social-Sharing-Bilder, keine strukturierten Daten und keine kanonischen URLs – das
sind Aufgaben für separate, optionale Pakete, nicht etwas, das nuxt.config.ts
standardmäßig bietet. Ein Entwickler namens Harlan Wilton pflegt ein kostenloses,
Community-Bündel dieser Pakete – installiert als @nuxtjs/seo – das alle auf einmal
abdeckt. Es ist ein Drittanbieter-Toolkit, kein Teil von Nuxt selbst, daher macht
die Installation nicht automatisch all diese Ausgaben korrekt; Sie müssen weiterhin
bestätigen, dass die Sitemap, die Robots-Regeln und das Schema, die es generiert,
zu dem passen, was Sie tatsächlich möchten.
Was die Leute falsch verstehen
Man nimmt an, dass „Vue/Nuxt nicht in Google sein kann.“ Das stimmte vor Jahren für reine Vue-Apps teilweise – für Nuxt mit Server-Rendering stimmt es nicht. Die eigentlichen Fehler sind Dinge wie das versehentliche Deaktivieren von SSR oder das Blockieren Ihrer JavaScript-Dateien, sodass Google die Seite nicht aufbauen kann.
Möchten Sie die ausführlichere Version – die vollständige Übersicht der Rendering-Modi, das Modul-Ökosystem im Detail, Core Web Vitals und die häufigen Fehler mit Lösungen? Wechseln Sie zum Erweitert-Tab.
TL;DR – Nuxts Standard ist Server-Side Rendering, sodass eine Route, die diesen Standard beibehält, ein vollständiges DOM erhält, statt der leeren Hülle, die eine reine Vue-SPA ausliefert – aber das ist ein Ergebnis pro Route:
ssr: falseoder einerouteRules-Überschreibung kann jede Route in CSR oder Hybrid umwandeln. Testen Sie also die tatsächliche Route, nicht den Projektnamen. Die Rendering-Strategie ist die grundlegende Entscheidung – SSR (Standard), SSG (nuxt generate) oder hybridesrouteRules–, weil Meta, Schema und Sitemaps alle danach kommen. Verwenden SieuseSeoMeta()für Meta-Tags (useHead()für den Rest des Head-Bereichs, Server-only-Varianten, wenn Sie keine Reaktivität benötigen), und behandeln Sie Harlan Wiltons@nuxtjs/seo-Bundle als optionales Drittanbieter-Toolkit für Robots/Sitemap/OG/Schema/Canonical – nicht als Teil von Nuxt Core und nicht als Beweis für eine korrekte Ausgabe vor deren Prüfung. Verwenden Sie niemals Dynamic Rendering (Google hat es verworfen). Das Rendering von KI-Crawlern variiert je nach Anbieter – SSR/SSG maximiert die Abdeckung von rohem HTML. Über das anfängliche HTML hinaus verifizieren Sie Hydration/Payload, Nitro-Deployment-Presets und Caching sowie direkte HTTP-Status unabhängig – Server-HTML allein beweist keines davon. Die üblichen JS-SEO-Regeln gelten weiterhin: echte<a href>-Links, JS/CSS nicht blockieren, gerendertes vs. rohes HTML überwachen.
Nuxt ist Vues Antwort auf das SPA-Problem
Vue liefert von sich aus eine Single-Page-Anwendung: eine HTML-Hülle plus JavaScript, mit dem das DOM im Browser aufgebaut wird. Nuxt ist das Meta-Framework auf Vue (läuft auf der Nitro-Server-Engine in Nuxt 3, mit Nuxt 4 ab 2025), und sein gesamter Existenzgrund – aus SEO-Sicht – ist, dass es standardmäßig auf dem Server rendert. Jede Seite kommt als vollständig geformtes HTML-Dokument an, was genau das ist, was Googlebot lesen möchte, ohne zuerst JavaScript ausführen zu müssen. Reines Vue-SEO ist ein eigenes Thema mit eigenen Fehlermodi; hier gehe ich davon aus, dass Sie Nuxt genau deshalb gewählt haben, um nicht gegen das SPA-Problem kämpfen zu müssen.
Das ist derselbe Punkt, den ich allgemein zu JavaScript mache: “any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (Übersetzung) „Jede Form von SSR, statischem Rendering und Prerendering eignet sich für Suchmaschinen. Gatsby, Next, Nuxt und ähnliche Frameworks sind dafür bestens geeignet.“ Nuxts Standardeinstellungen sind in die richtige Richtung ausgerichtet. Die meisten Nuxt-SEO-Probleme entstehen, wenn Leute diese Standardeinstellungen deaktivieren oder Fehler darauf aufbauen.
Die Rendering-Strategie ist die Grundlage – pro Route entschieden, nicht pro Projekt
Vor Meta-Tags, vor Schema, vor Sitemaps ist die Frage, die alles entscheidet: Wie wird das HTML für diese spezifische Route erzeugt? Nuxt dokumentiert universelles (Server-)Rendering als app-weiten Standard, aber dieser Standard ist keine Garantie auf Routenebene: Ein globales ssr: false schaltet die gesamte App auf Client-Rendering um, und routeRules kann jedem URL-Muster einen anderen Modus zuweisen. „Das ist eine Nuxt-App“ sagt Ihnen nichts darüber, wie eine bestimmte Seite rendert – Sie müssen die Route prüfen. Nuxt bietet Ihnen fünf Strategien:
| Modus | So stellen Sie ihn ein | SEO-Auswirkung | Am besten geeignet für |
|---|---|---|---|
| Universal / SSR | Standard (ssr: true) | Ausgezeichnet – vollständiges HTML bei jeder Anfrage | Dynamische, personalisierte Inhalte |
| Statisch / SSG | nuxt generate | Ausgezeichnet – HTML zur Bereitstellungszeit erstellt | Blogs, Dokumentation, Marketing |
| Hybrid | routeRules pro Route | Ausgezeichnet – Mischung pro Route | Große Seiten mit gemischten Inhalten |
| SPA / CSR | ssr: false | Schlecht für indexierte Inhalte | Dashboards, Admin-Panels |
| Edge-seitig | Bereitstellungsziel | Ausgezeichnet – niedrige TTFB | Globale Leistung |
Die offiziellen Nuxt-Dokumente sind unmissverständlich, warum Client-Side-Rendering die falsche Wahl für Inhalte ist: “Indexing and updating the content delivered via client-side rendering takes more time” (Übersetzung) „Das Indizieren und Aktualisieren von Inhalten, die über clientseitiges Rendering ausgeliefert werden, dauert länger“, wohingegen bei Server- beziehungsweise Universal-Rendering “web crawlers can directly index the page’s content.” (Übersetzung) „Web-Crawler den Inhalt der Seite direkt indizieren können.“ Evidence for this claim Nuxt documents that universal rendering delivers HTML content immediately and allows crawlers to index it directly. Scope: Nuxt rendering; no indexing guarantee. Confidence: high · Verified: Nuxt: Rendering modes
(Nuxt rendering docs.) CSR
(ssr: false) ist für Back-Office, Dashboards und Spiele gedacht – nicht für etwas,
das Sie indexiert haben möchten.
Hybrides Rendering ist der entscheidende Vorteil für große Websites. Routenregeln in
nuxt.config.ts ermöglichen es Ihnen, den Rendering- und Cache-Modus pro URL-Muster festzulegen:
routeRules: {
'/blog/**': { prerender: true }, // SSG for the blog
'/product/**': { swr: 3600 }, // ISR-style: regenerate hourly
'/admin/**': { ssr: false }, // SPA for the admin area
'/checkout/**': { ssr: true }, // always-fresh SSR
}swr (stale-while-revalidate) und isr (incremental static regeneration) generieren
eine Seite statisch und aktualisieren sie dann im Hintergrund – ideal für E-Commerce mit vielen Seiten oder Nachrichten, bei denen ein vollständiger Neuaufbau bei jeder Änderung nicht praktikabel ist. Nuxt
Islands (<NuxtIsland>) rendern Komponenten, ohne clientseitiges JavaScript auszuliefern,
was die Hydrierungskosten senkt und INP verbessert – die Core Web Vital, die bei Nuxt-Apps am häufigsten problematisch ist.
So überprüfen Sie, was Sie tatsächlich ausgeliefert haben: View Source zeigt das rohe HTML, das der Server gesendet hat; wenn Ihr Inhalt dort ist, rendern Sie serverseitig. Das Elements-Panel von DevTools zeigt das gerenderte DOM. Und das URL Inspection-Tool von GSC zeigt, was Google tatsächlich abgerufen und gerendert hat – die Quelle der Wahrheit. Vertrauen Sie nicht auf “sieht in meinem Browser gut aus”.
Wie Googlebot eine Nuxt-App verarbeitet
Google verarbeitet jede JavaScript-App in drei Phasen – Crawlen, Rendern, Indexieren – und die Herausforderung ist das Timing: Das Rendern erfolgt in einer Warteschlange, nicht sofort. Wie ich es in meinem JavaScript-SEO-Leitfaden formuliert habe, ist der Renderer geduldig – “there is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (Übersetzung) „Es gibt kein festes Zeitlimit für den Renderer … Er ist wirklich geduldig, und Sie sollten sich keine Sorgen machen.“ Aber geduldig ist nicht dasselbe wie schnell für frische Inhalte. Wenn Sie eine clientgerenderte Seite ausliefern, existiert Ihr Inhalt für Google erst, wenn diese Render-Welle läuft; SSR und SSG schließen diese Lücke, weil das HTML beim ersten Abruf vollständig ist.
Zwei weitere Dinge sind im großen Maßstab wichtig. Das Rendern von JavaScript ist teuer – aus meinem Vortrag
JavaScript SEO (Ungagged) von 2019 steigen die Crawl-Kosten um etwa das 20-Fache, sobald Google rendern muss
(richtungsweisend, aber die Größenordnung gilt weiterhin). Und Google verwendet die restriktivste
Direktive über rohes und gerendertes HTML hinweg – so gewinnt ein per JavaScript injiziertes noindex gegenüber einem index im rohen HTML und umgekehrt. Ein
über JavaScript injiziertes Canonical wird nur respektiert, wenn im rohen HTML
noch kein Canonical vorhanden ist. Halten Sie Ihre Robots- und Canonical-Signale im serverseitig gerenderten HTML, was
Nuxt für Sie erledigt, wenn SSR aktiviert ist.
Die Realität der KI-Crawler
Das ist die Besonderheit von 2026. KI-Crawler – GPTBot, ClaudeBot, PerplexityBot und der Rest – führen im Allgemeinen kein JavaScript aus. Sie indexieren das rohe HTML und sonst nichts. Eine clientgerenderte Nuxt-Seite ist für KI-Antwort-Engines also praktisch unsichtbar. SSR oder SSG ist hier nicht nur besser für Google; es ist die Eintrittskarte für Answer-Engine-Optimierung. Wenn Sie möchten, dass Ihre Inhalte von ChatGPT, Perplexity oder Claude zitiert werden, müssen sie beim ersten Abruf im HTML enthalten sein.
Über das anfängliche HTML hinaus: Payload, Hydrierung und Statuscodes
Serverseitiges HTML mit Ihrem Inhalt zu erhalten ist notwendig, aber nicht ausreichend – mehrere Dinge können nach dieser ersten Antwort dennoch schiefgehen, und “ich habe View Source überprüft” deckt sie nicht ab:
- Datenübergabe und Hydrierung. Universelles Rendering sendet das HTML und einen serialisierten Datenzustand, mit dem der Browser die Seite hydriert. Dabei bindet er Ereignisbehandler ein und setzt den Zustand des Servers fort, ohne die Daten erneut abzurufen. Dass das Server-HTML richtig aussieht, beweist nicht, dass die Hydration erfolgreich war, dass die Client-Navigation denselben Inhalt reproduziert oder dass der Payload nicht veraltet ist. Wenn eine Seite beim ersten Laden gut funktioniert, aber nach einer clientseitigen Routenänderung bricht, ist das ein Hydrations-/Payload-Problem, kein Rendering-Modus-Problem.
<ClientOnly>und ausschließlich im Browser verfügbare Inhalte. Etwas in<ClientOnly>zu wrappen – üblich für Widgets, die von Browser-APIs abhängen – bedeutet, dass es in der Serverantwort fehlt, selbst auf einer ansonsten universellen Route. Wenn Ihre Hauptinhalte, ein wichtiger Link oder Ihre Meta-Tags in einer Grenze für rein clientseitige Inhalte geraten, übersehen Crawler und KI-Bots, die nur das rohe HTML lesen, diese Inhalte, unabhängig von Ihrer Rendering-Modus-Einstellung. Überprüfen Sie die tatsächliche Antwort, nicht nur die Rendering-Modus-Konfiguration.- Statuscodes und Weiterleitungen sind nicht selbstbestätigend. Eine
Nuxt-Fehlerseite, die im Browser gerendert wird, oder eine
navigateTo()/Composable-gesteuerte Weiterleitung beweist für sich genommen nicht, welchen HTTP-Status die direkte Serverantwort gesendet hat. Googles Leitfaden ist eindeutig, dass aussagekräftige Statuscodes für das Crawling und die Indexierung wichtig sind – bestätigen Sie den tatsächlichen Header mitcurl -I, nicht das, was die clientgerenderte Fehlerseite anzeigt.
Nichts davon ist ein Argument gegen universelles Rendering – es ist die Erinnerung daran, dass „das HTML ist servergerendert“ der erste Check ist, nicht der letzte.
Nitro, Deployment-Presets und Cache-Grenzen
Nuxts Serverausgabe wird von Nitro erstellt, und Nitro kompiliert unterschiedlich, je nachdem, welches Deployment-Preset Sie anvisieren (Node-Server, Cloudflare, Vercel, Netlify, statisch und andere). Das ist für SEO wichtig, weil Presets und Adapter sich in verfügbaren Laufzeit-APIs, Cache-Verhalten, Streaming-Unterstützung, regionalem Deployment und Dateisystemzugriff unterscheiden können – eine Routenregel oder ein Server-Handler, der unter einem Preset funktioniert, ist nicht garantiert unter einem anderen identisch. Zwei Konsequenzen, die es wert sind, explizit getestet zu werden, statt sie anzunehmen:
- Cache-Schlüssel und Invalidierung sind routenspezifisch, nicht automatisch.
swr- undisr-Routenregeln cachen und regenerieren die Ausgabe, aber ein falscher Cache-Schlüssel, fehlende Invalidierung oder ein Cache-Header, der von Ihrer Deployment-Plattform gesetzt wird, können veraltetes, personalisiertes oder inkonsistentes HTML an Crawler ausliefern. Überprüfen Sie das tatsächliche Antwortalter und alleCache-Control/Age-Header auf einer Live-URL, nicht nur dierouteRules-Konfiguration. - Produktionsparität ist nicht durch Staging-Verhalten garantiert. Eine Route, die in der lokalen Entwicklung oder in einer Preview-Deployment korrekt rendert, bestätigt nicht, dass das Produktions-Preset dieselbe Ausgabe erzeugt – Serverrouten, Weiterleitungen und Fehlerbehandlung leben in Nitros Server-Schicht, und diese Schicht ist der Teil, der sich am wahrscheinlichsten je nach Ziel unterscheidet. Testen Sie die Produktions-URL direkt nach jeder Deployment-Änderung, so wie Sie den Rendering-Modus verifizieren würden.
Meta-Tags: useSeoMeta() und useHead()
Nuxts Head-Verwaltung läuft auf Unhead und bietet zwei Composables für unterschiedliche Aufgaben.
useSeoMeta() ist das, was Sie für SEO- und Social-Meta-Tags verwenden
sollten. Es ist eine flache, typsichere API mit typisierten Parametern. Evidence for this claim useSeoMeta is a typed Nuxt API for SEO and social meta tags. Scope: Current Nuxt composable. Confidence: high · Verified: Nuxt: useSeoMeta Es hilft, den klassischen Open-Graph-Bug zu vermeiden, bei dem name
verwendet wird, wo property benötigt wird:
useSeoMeta({
title: 'My Page Title',
ogTitle: 'My Page Title',
description: 'Concise page-specific description with the key information first',
ogDescription: 'Concise social description tailored to this page',
ogImage: 'https://mysite.com/og-image.png', // must be an absolute URL
twitterCard: 'summary_large_image',
})useHead() ist das Allzweck-Head-Tool für alles andere – Skripte, Link-Tags,
Body-Attribute und Titelvorlagen:
useHead({
titleTemplate: '%s · My Site Name',
htmlAttrs: { lang: 'en' },
})Das zuverlässige Schichtungsmuster ist: statische Standardwerte (Zeichensatz, Viewport, Favicon) in
nuxt.config.ts → seitenweite Titelvorlage und globale OG-Standardwerte in app.vue →
seitenspezifische Überschreibungen über useSeoMeta() in der Seitenkomponente. Ein häufiger Fehler ist,
useSeoMeta() in einem Layout statt in der Seite zu platzieren, wodurch spezifische
Seiten-Tags mit generischen überschrieben werden. Und da Suchmaschinen den initialen Ladevorgang lesen, muss SEO-Meta
generell nicht reaktiv sein – useServerHead() überspringt die clientseitige
Neuausführung.
Welche API und was sie tatsächlich beweist:
| API | Umfang | Reaktiv? | Was sie über die Ausgabe beweist |
|---|---|---|---|
useSeoMeta() | Nur flache, typisierte SEO-/Social-Meta | Ja (Standard) | Setzt typisierte Eigenschaften korrekt – nicht, dass die Route eindeutig, kanonisch oder indexierbar ist; diese Logik liegt weiterhin bei Ihnen |
useHead() | Alles in <head> – Skripte, Links, Attribute, Titelvorlage | Ja (Standard) | Allgemeine Head-Kontrolle; gleiche Einschränkung – API-Nutzung ist kein Beweis für eine korrekte Serverantwort |
useServerHead() / nur Server-Aufrufe | Wie oben | Nein – nur Server, überspringt Client-Neuausführung | Bestätigt, dass das Tag einmal im Server-HTML ausgeliefert wird; bestätigt nicht, dass die Client-Navigation es erneut setzt, wenn Sie sich dort darauf verlassen |
Der Aufruf einer dieser Composables sagt Ihnen, dass die API ausgeführt wurde – es sagt Ihnen nicht
von selbst, was eine direkte Serverantwort oder eine clientseitige Routenänderung tatsächlich ausgibt.
Bestätigen Sie dies mit View Source oder curl, nicht nur mit „Ich habe useSeoMeta() aufgerufen.“
Das @nuxtjs/seo-Modul-Ökosystem (Harlan Wilton) – optional, nicht Kern
Nuxt-Kern liefert keine Sitemap, kein robots.txt, keine OG-Bildgenerierung oder
Schema.org out of the box – diese liegen außerhalb von Nuxts eigenen Primitiven (useHead,
useSeoMeta, Routenregeln, Rendering-Modi). Die Community füllt diese Lücke mit
Harlan Wiltons @nuxtjs/seo – einem separat installierten Drittanbieter-Überbegriffspaket
(nuxtseo.com, derzeit v5.x, aktiv gepflegt, zielt auf Nuxt
3,16+ und Nuxt 4), das sechs Module bündelt. Die Installation gibt Ihnen Sitemap,
Robots, OG-Bild und Schema-Generierung – es garantiert nicht von selbst, dass die
Ausgabe für Ihre Routen korrekt ist; verifizieren Sie, was es produziert, auf dieselbe Weise, wie Sie
alles andere verifizieren würden:
| Modul | Was es tut |
|---|---|
@nuxtjs/robots | robots.txt + Meta-Robots + X-Robots-Tag-Header |
@nuxtjs/sitemap | Automatische XML-Sitemaps aus Seiten + dynamischen Routen |
nuxt-og-image | Dynamische OG-Bilder (eine Vue-Vorlage → ein Bild) |
nuxt-schema-org | Schema.org-JSON-LD-Strukturierte Daten |
nuxt-seo-utils | Kanonische URLs, Breadcrumbs, Standardwerte |
nuxt-link-checker | Build-Zeit-Erkennung defekter Links |
Installieren Sie das gesamte Bündel mit npx nuxt module add seo, oder holen Sie sich einzelne Module
(npx nuxt module add sitemap robots). Einige Verhaltensweisen, die Sie kennen sollten:
@nuxtjs/sitemapgeneriert automatisch aus Ihrempages/-Verzeichnis plus dynamischen Routen, teilt automatisch in ein Sitemap-Index über 50 000 URLs auf, unterstützt i18n mehrsprachige Sitemaps und hat integrierte IndexNow-Unterstützung. Eine Sache, die Sie richtig machen sollten: Google ignoriertchangefrequndpriority; nur ein genaueslastmodzählt, und nur, wenn sich Inhalte tatsächlich ändern.@nuxtjs/robotsgeneriertrobots.txt, das Robots-Meta-Tag und denX-Robots-Tag-Header – und standardmäßig verbietet es allen Crawlern den Zugriff auf Nicht-Produktionsumgebungen, was genau die Staging-Indexierungs-Falle ist, die Headless-Builds beißt. Es gibt Ihnen auch Regeln pro Bot, sodass Sie GPTBot gezielt blockieren können, während Sie alle anderen in Ruhe lassen (seien Sie bewusst – blockieren Sie einen KI-Crawler und er wird Sie nicht zitieren).nuxt-seo-utilsbehandelt kanonische URLs und entfernt nützlicherweise Tracking- Parameter (utm_*,fbclid,gclid) automatisch aus Kanonischen.
nuxt/image und Core Web Vitals
@nuxt/image ist das Bildmodul: automatisches responsives srcset, moderne Formate
(WebP/AVIF), integrierte Optimierung über CDN-Anbieter und Lazy Loading. Zwei
Regeln tragen den größten Teil des SEO-Werts:
- Laden Sie das LCP-Bild niemals verzögert. Ihr Hero-Bild sollte sofort geladen werden; verzögertes Laden verzögert Ihr Largest Contentful Paint.
- Setzen Sie immer
widthundheight, damit der Browser Platz reserviert und Sie keinen Cumulative Layout Shift erleiden.
<NuxtImg
src="/hero.jpg"
width="1200"
height="630"
alt="Descriptive alt text"
:loading="isHeroImage ? 'eager' : 'lazy'"
format="webp"
/>Die Ziele für 2026 (p75): LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1. Bei Nuxt-Apps
ist INP der Wert, der tendenziell leidet, weil Hydration Eingabeverzögerungen verursacht – genau dafür
sind Nuxt Islands und <NuxtIsland> gedacht.
Nuxt Content + SEO
Wenn Sie @nuxt/content (das Markdown/MDX-Inhaltsmodul) verwenden, ist die Integration
mit @nuxtjs/seo unkompliziert, hat aber eine Reihenfolge-Falle: Laden Sie @nuxtjs/seo
vor @nuxt/content in Ihrem Module-Array. Sie können dann SEO im Content-Frontmatter
(title, description, robots, ogImage, schemaOrg) festlegen und es
in Ihre [slug].vue-Vorlage mit useSeoMeta() nach dem Abrufen des Inhalts einbinden. Dies
ist die Nuxt-native Version des Headless-CMS-Musters, und dieselbe Disziplin „das neu aufbauen, was
das Plugin getan hat“ gilt.
Häufige Nuxt-SEO-Fehler
- CSR (
ssr: false) für Inhalte verwenden, die indexiert werden sollen. Das ist der teuerste Fehler und macht Ihre Inhalte für KI-Crawler unsichtbar. - Relative Adressen für OG-Bilder.
ogImagemuss eine absolute URL sein, sonst brechen Social-Previews. useSeoMeta()in einem Layout statt auf der Seite – generische Tags überschreiben seitenbezogene.- Gerendertes HTML nicht überprüfen – View Source ≠ DevTools ≠ was Google gerendert hat. Verwenden Sie URL Inspection.
- JS/CSS in
robots.txtblockieren – Google rendert nicht aus blockierten Dateien. - Das Staging-
noindex/disallow nach dem Launch belassen (oder umgekehrt vergessen, dass@nuxtjs/robotsNicht-Prod standardmäßig blockiert, und sich wundern, warum Prod funktioniert, aber eine benutzerdefinierte Umgebung nicht). - Das LCP-Bild verzögert laden – senkt Ihr LCP.
- Fehlende
width/heightbei Bildern – CLS. changefreq/priorityin Sitemaps – Google ignoriert sie; nurlastmodzählt.- Zu Dynamic Rendering greifen. Google hat es veraltet – “dynamic rendering is a workaround and not a long-term solution” (Übersetzung) „Dynamic Rendering ist ein Workaround und keine langfristige Lösung“ – und es bedient nur die Engines, für die Sie es konfigurieren, und lässt Bing und jeden KI-Crawler aus. Mit Nuxt brauchen Sie es nie: SSR und SSG liefern Crawlern bereits vollständiges HTML.
llms.txt und AEO
llms.txt ist eine Klartextdatei – der Cousin von robots.txt – die KI-Tools dabei hilft, Ihre
Inhalte zu navigieren. Das nuxt-llms-Modul generiert automatisch /llms.txt und /llms-full.txt
aus Nuxt Content. Seit Ende 2025 sind seine Hauptnutzer MCP-Server und KI-Codierungstools
(Cursor, Claude Code) eher als ChatGPT oder Perplexity direkt, und es ist am
nützlichsten für Dokumentationsseiten und technische Blogs – weniger für E-Commerce oder Nachrichten.
Es lohnt sich, wenn Sie eine Docs-/Dev-Site haben; sonst keine Priorität.
Wo dies einzuordnen ist
Nuxt-SEO ist wirklich eine konkrete Anwendung von JavaScript-SEO durch Nuxts eigene Konventionen – und es überschneidet sich stark mit dem Thema SEO für ein Headless-CMS, wenn Ihr Nuxt-Frontend von einem Headless-Backend zieht. Die Prinzipien ändern sich nicht; Nuxt bietet nur gute Standardwerte und ein starkes Modul-Ökosystem, um sie umzusetzen.
KI-Zusammenfassung
Eine komprimierte Darstellung der erweiterten Version:
- Nuxt ist das Meta-Framework von Vue, und sein SEO-Vorteil ist eine Standardeinstellung:
Server-seitiges Rendering. Eine Route, die diese Standardeinstellung beibehält, liefert vollständiges HTML,
nicht die leere Hülle, die eine einfache Vue-SPA liefert – aber es ist ein Ergebnis pro Route, keine
projektweite Garantie.
ssr: falseoder einerouteRules-Überschreibung kann jede Route auf CSR oder hybrid umstellen, also überprüfen Sie die tatsächliche Route. - Die Rendering-Strategie ist das Fundament, das pro Route entschieden wird – sie entscheidet
alles vor Meta, Schema oder Sitemaps. Modi: SSR (Standard), SSG
(
nuxt generate), hybrid (routeRules), SPA (ssr: false, für indexierte Inhalte vermeiden), Edge. - Hybride
routeRulesmischen Modi pro URL;swr/isrregenerieren im Hintergrund; Nuxt Islands senken Hydrierungskosten und helfen bei INP. - Googlebot crawlt → rendert (in der Warteschlange, nicht sofort) → indexiert; nimmt die restriktivste Richtlinie aus rohem vs. gerendertem HTML. Rendering kostet etwa 20× Crawl. SSR/SSG schließen die Timing-Lücke.
- KI-Crawler-Rendering ist anbieterabhängig – CSR hängt von der Client-Ausführung ab, die nicht durch einen gemeinsamen Vertrag abgedeckt ist, daher maximiert SSR/SSG die KI-Sichtbarkeit.
- Über das HTML beim ersten Laden hinaus: Hydrierung/Payload unabhängig verifizieren (Server-HTML
≠ Beweis für erfolgreiche Hydrierung oder Client-Navigation-Parität), auf
<ClientOnly>achten, das Inhalte selbst auf universellen Routen vor Crawlern verbirgt, und direkte HTTP-Status/Redirects mitcurl -Ibestätigen, statt einer client-gerenderten Fehlerseite zu vertrauen. - Nitro und Deployment-Presets (Node, Cloudflare, Vercel, Netlify, statisch) können sich in Laufzeit-APIs, Caching, Streaming und Regionen unterscheiden – testen Sie Cache- Header und Produktionsparität pro Route, gehen Sie nicht davon aus, dass Presets identisch funktionieren.
- Meta-Tags:
useSeoMeta()für SEO/Soziales (typsicher),useHead()für den Rest des Head, nur-Server-Varianten, wenn Reaktivität nicht benötigt wird. Schichtung:nuxt.config.ts→app.vue→ Seite. Setzen SieuseSeoMeta()nicht in ein Layout. OG- Bilder benötigen absolute URLs. Eine API aufzurufen beweist, dass die API lief, nicht, was eine direkte Antwort ausgibt – mit View Source/curl bestätigen. @nuxtjs/seo(Harlan Wilton) ist ein optionales Drittanbieter-Toolkit (v5.x, aktiv gepflegt, Nuxt 3,16+/4.x) – nicht Teil des Nuxt-Kerns. Es bündelt Robots, Sitemap, OG-Bild, Schema.org, Canonical und Link-Checker, aber die Installation beweist selbst keine korrekte Ausgabe. Sitemap: nurlastmodzählt. Robots: blockt standardmäßig Nicht-Prod; KI-Regeln pro Bot.@nuxt/image+ CWV: LCP-Bild niemals lazy-loaden; immerwidth/heightsetzen (CLS). Ziele: LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1.- Dynamisches Rendering nicht verwenden – Google hat es eingestellt; Nuxts SSR/SSG liefern bereits vollständiges HTML.
Offizielle Dokumentation
Primärquellen-Dokumentation von Nuxt und den Suchmaschinen.
Nuxt
- Nuxt – Rendering-Konzepte – universelles, clientseitiges und hybrides (
routeRules) Rendering und warum Crawler server-gerenderte Routen bevorzugen. - Nuxt – SEO und Meta (Einstieg) –
useSeoMeta(),useHead()und Head-Verwaltung. - Nuxt –
useSeoMeta-Composable – die typsichere Meta-API-Referenz, einschließlich Nur-Server-Nutzung. - Nuxt – Server-Engine (Nitro) – Deployment-Presets, plattformübergreifende Ausgabe und wo Laufzeit-/Caching-Verhalten abweichen kann.
- Nuxt – Nuxt-Lebenszyklus – Server-Render, Payload-Übertragung und Hydrierung als getrennte Phasen.
- Nuxt Image –
<NuxtImg>, responsive Formate und Provider-Konfiguration für Core Web Vitals. @nuxtjs/seoauf Nuxt Modules – der Modul-Katalogeintrag: aktuelle Version, Downloads und dass es ein separat installiertes Paket ist.
- Verstehen Sie die JavaScript-SEO-Grundlagen — die Crawl- → Render- → Index-Pipeline und crawlbare Links (framework-agnostisch; Googles Dokumentation erwähnt Nuxt nicht namentlich).
- Dynamic Rendering (veralteter Workaround) — warum Google es verworfen hat und was stattdessen verwendet werden sollte (SSR, statisches Rendering, Hydration).
Zitate aus der Quelle
On-the-record-Aussagen von Nuxt, Google und aus meiner eigenen Arbeit. Jeder Suchmaschinen-/ Nuxt-Link ist ein Deep Link, der direkt zum zitierten Abschnitt auf der Quellseite springt.
Nuxt — Rendering für SEO
- “Indexing and updating the content delivered via client-side rendering takes more time.” (Übersetzung) „Das Indizieren und Aktualisieren von Inhalten, die über clientseitiges Rendering ausgeliefert werden, dauert länger.“ — Nuxt-Rendering-Dokumentation. Zum Zitat springen
- “Web crawlers can directly index the page’s content, which makes Universal rendering a great choice for any content that you want to index quickly.” (Übersetzung) „Web-Crawler können den Inhalt der Seite direkt indizieren, was Universal-Rendering zu einer großartigen Wahl für alle Inhalte macht, die Sie schnell indizieren möchten.“ — Nuxt-Rendering-Dokumentation. Zum Zitat springen
Google — JavaScript-Verarbeitung und Dynamic Rendering
- “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” (Übersetzung) „Google verarbeitet JavaScript-Web-Apps in drei Hauptphasen: 1. Crawling 2. Rendering 3. Indexierung.“ — Google-Search-Central-Dokumentation. Zum Zitat springen
- “Dynamic rendering is a workaround and not a long-term solution for problems with JavaScript-generated content in search engines. Instead, we recommend that you use server-side rendering, static rendering, or hydration as a solution.” (Übersetzung) „Dynamic Rendering ist ein Workaround und keine langfristige Lösung für Probleme mit JavaScript-generierten Inhalten in Suchmaschinen. Stattdessen empfehlen wir, Server-Side Rendering, Static Rendering oder Hydration als Lösung zu verwenden.“ — Google-Search-Central-Dokumentation. Zum Zitat springen
Patrick Stox (eigene Arbeit – JavaScript-SEO: Ein umfassender Leitfaden)
- “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (Übersetzung) „Jede Art von SSR-, Static-Rendering- und Prerendering-Setup ist für Suchmaschinen in Ordnung. Gatsby, Next, Nuxt usw. sind alle großartig.“
- “There is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (Übersetzung) „Es gibt kein festes Timeout für den Renderer … Er ist wirklich geduldig, und Sie sollten sich keine Sorgen machen.“
- “JavaScript is not bad for SEO, and it’s not evil. It’s just different from what many SEOs are used to.” (Übersetzung) „JavaScript ist nicht schlecht für SEO und nicht böse. Es ist nur anders, als viele SEOs es gewohnt sind.“
Nuxt-SEO-Checkliste
Eine schnelle Prüfung, um sicherzustellen, dass eine Nuxt-Site für Such- und KI-Crawler eingerichtet ist:
- Inhalte, die Sie indexieren möchten, werden auf dem Server oder zur Build-Zeit gerendert (SSR oder SSG) – nicht im SPA-Modus (
ssr: false). - Über View Source bestätigt, dass wichtige Inhalte im rohen HTML enthalten sind, und über URL Inspection, dass Google sie rendert.
-
useSeoMeta()befindet sich in Seitenkomponenten, nicht in einem gemeinsamen Layout, das Seiten-Tags überschreibt. -
ogImageverwendet eine absolute URL (nicht relativ). - Eine Titelvorlage ist einmal in
app.vuefestgelegt; Seitentitel/-beschreibungen sind pro Seite eindeutig. -
@nuxtjs/sitemapgeneriert eine XML-Sitemap;lastmodist korrekt und Sie verlassen sich nicht aufchangefreq/priority. -
@nuxtjs/robotsist konfiguriert; die Nicht-Produktions-Auto-Disallow wird nicht versehentlich auf die Produktion angewendet. -
robots.txtblockiert nicht Ihr JS/CSS. - Kanonische URLs sind absolut und pro Seite (
nuxt-seo-utils). - LCP-Bild lädt eager (nicht lazy); alle Bilder haben
width/height(CLS). - Echte
<a href>-Links /<NuxtLink>für die Navigation – kein<div @click>-Routing. - Wenn Sie
@nuxt/contentverwenden, wird@nuxtjs/seovor diesem im Module-Array geladen. - Dynamisches Rendering wird nirgendwo verwendet.
Die mentalen Modelle
1. Die Rendering-Strategie kommt zuerst. Meta-Tags, Schema und Sitemaps hängen von einer Entscheidung ab: wie das HTML erzeugt wird. Beantworten Sie „Wird dieser Inhalt servergerendert, statisch generiert oder clientgerendert?“, bevor Sie etwas anderes debuggen.
2. SSR ist die Standardeinstellung – Ihre Aufgabe ist es meistens, sie nicht zu brechen.
Nuxt weist die Standardeinstellungen in die richtige Richtung. Die meisten Nuxt-SEO-Fehler entstehen, wenn jemand ssr: false setzt, JS/CSS blockiert oder Signale über JavaScript injiziert, die mit dem rohen HTML kollidieren.
3. Wählen Sie den Rendering-Modus nach Inhaltstyp.
- Überwiegend statisch (Blog, Doku, Marketing) → SSG (
prerender: true). - Immer aktuell / dynamisch → SSR.
- Stündliche/tägliche Inhalte mit statischer Geschwindigkeit →
swr/isr. - Hinter einem Login, nicht indexiert → SPA (
ssr: false) ist in Ordnung. - Öffentliche Inhalte, die Sie ranken oder von KI zitieren lassen möchten → niemals SPA.
4. HTML zuerst, JS zweitens für jedes Signal. Inhalte, Meta, kanonische URLs, Robots-Direktiven und Links gehören alle in das servergerenderte HTML. Google übernimmt die restriktivste Direktive aus rohem vs. gerendertem HTML; KI-Crawler sehen nur das rohe. Per JS injiziertes SEO ist ein Fallback, nicht der Plan.
5. Nutzen Sie die Module, aber verstehen Sie, was sie tun.
@nuxtjs/seo spart Arbeit, aber die Nicht-Produktions-Robots-Auto-Disallow, die lastmod-nur-Sitemap-Realität und absolute-URL-Kanonische sind immer noch Ihre Aufgabe, richtig zu machen.
Nuxt SEO – Spickzettel
Rendering-Modi
| Modus | Konfiguration | SEO | Am besten für |
|---|---|---|---|
| Universal / SSR | ssr: true (Standard) | ✅ Am besten | Dynamisch / personalisiert |
| Statisch / SSG | nuxt generate | ✅ Am besten | Blogs, Doku, Marketing |
| Hybrid | routeRules | ✅ Am besten | Große gemischte Inhaltsseiten |
| SPA / CSR | ssr: false | ⚠️ Schlecht für die Indexierung | Dashboards, Admin |
| Edge-seitig | Bereitstellungsziel | ✅ Niedrige TTFB | Globale Leistung |
Composables
| Verwendung | Greifen Sie zu |
|---|---|
| SEO + Social-Meta-Tags | useSeoMeta() (typsicher) |
| Titelvorlagen, Skripte, Link-Tags, HTML-Attribute | useHead() |
| Client-Neuausführung für statische Meta überspringen | useServerHead() |
@nuxtjs/seo-Module
| Modul | Aufgabe |
|---|---|
@nuxtjs/robots | robots.txt + Meta-Robots + X-Robots-Tag (blockiert Nicht-Produktion standardmäßig) |
@nuxtjs/sitemap | XML-Sitemap (nur lastmod zählt; automatische Indexierung über 50k URLs) |
nuxt-og-image | Dynamische OG-Bilder |
nuxt-schema-org | JSON-LD strukturierte Daten |
nuxt-seo-utils | Kanonische URLs (entfernt utm_*/fbclid/gclid), Breadcrumbs |
nuxt-link-checker | Kaputte Links zur Build-Zeit |
Schnelle Regeln
- Alles installieren:
npx nuxt module add seo. - OG-Bilder: nur absolute URLs.
- LCP-Bild:
loading="eager"; alle Bilder benötigenwidth/height(CLS). - CWV-Ziele: LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1.
- Nie JS/CSS in robots.txt blockieren.
- Dynamisches Rendering: veraltet — Nuxts SSR/SSG ersetzen es.
- KI-Crawler: kein JavaScript → SPA-Inhalte sind für sie unsichtbar.
Sehen Sie, was eine Nuxt-Seite tatsächlich ausliefert
Die gesamte Nuxt-SEO-Frage reduziert sich auf eine Prüfung: Befindet sich Ihr Inhalt im rohen HTML, das der Server sendet, oder erst nachdem JavaScript ausgeführt wurde? Wenn er im rohen HTML steht, rendern Sie serverseitig und Crawler (und KI-Bots) können ihn lesen.
Roh-HTML abrufen und nach Ihrem Inhalt suchen
macOS / Linux:
# Raw HTML as the server sends it — before any client JS runs
curl -sL -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
https://example.com/page/ -o raw.html
# Is your headline actually in the server HTML? (empty = client-rendered)
grep -o "Your headline text" raw.htmlWindows (PowerShell):
$ua = "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
Invoke-WebRequest -Uri "https://example.com/page/" -UserAgent $ua -OutFile raw.html
Select-String -Path raw.html -Pattern "Your headline text"Wenn Ihr Text im Browser erscheint, aber in raw.html fehlt, ist die Seite clientgerendert — stellen Sie die Route auf SSR um oder nutzen Sie Prerendering. (Ein einfaches curl kann kein JS ausführen; für das gerenderte DOM verwenden Sie URL Inspection oder einen Headless-Chrome-Crawler.)
Bestätigen Sie, dass Sie JS/CSS nicht blockieren
macOS / Linux:
curl -sL https://example.com/robots.txt | grep -iE "disallow.*\.(js|css)|Disallow:\s*/(_nuxt|_ipx|assets)"Ein Disallow, das auf /_nuxt/ (Nuxts Build-Ausgabe) oder /_ipx/ (den @nuxt/image-Optimierer) passt, bricht das Rendering — fast immer ein Fehler.
Statisches Konfigurations-Snippet (nuxt.config.ts)
export default defineNuxtConfig({
modules: ['@nuxtjs/seo'], // robots, sitemap, og-image, schema-org, utils
site: { url: 'https://mysite.com' }, // required for absolute canonicals + sitemap
routeRules: {
'/blog/**': { prerender: true }, // SSG for content
'/admin/**': { ssr: false }, // SPA for the dashboard (won't be indexed)
},
}) Tools für Nuxt SEO
- URL Inspection (Google Search Console) — die Quelle der Wahrheit. Führen Sie einen Live-Test durch und prüfen Sie das gerenderte HTML, den Screenshot und die Seitenressourcen, um zu bestätigen, dass Ihre Nuxt-Inhalte tatsächlich gerendert wurden und nichts blockiert ist.
@nuxtjs/seo/ nuxtseo.com — Harlan Wiltons Modul-Bundle; das Dev-Tools-Panel zeigt Ihre generierten robots, Sitemap, Schema und OG-Bilder in der Entwicklung.- Nuxt DevTools — Head-Tags, Routenregeln und den Rendering-Modus jeder Route prüfen.
- Rich Results Test — bestätigen, dass
nuxt-schema-orgJSON-LD nach jeder Rendering-Änderung in der Ausgabe vorhanden ist. - Ahrefs Site Audit / Screaming Frog (JS-Rendering-Modus) — mit und ohne JS-Rendering crawlen, um rohes vs. gerendertes HTML in der gesamten Nuxt-App zu vergleichen und CSR-Lücken zu finden.
- Lighthouse / PageSpeed Insights — Core Web Vitals (LCP, INP, CLS) für die
@nuxt/image- und Nuxt-Islands-Arbeit. - Bing Webmaster Tools — Bings Crawl-/Index-Ansicht und wo IndexNow-Übermittlungen erscheinen.
Nuxt-SEO-Fehler, die Sie vermeiden sollten
Konkrete Fehler, die auf echten Nuxt-Sites immer wieder auftreten — verhindern Sie diese, bevor sie live gehen, statt sie zu diagnostizieren, nachdem der Traffic eingebrochen ist.
ssr: false für Inhalte aktivieren, die Sie indexieren möchten
Der teuerste Nuxt-SEO-Fehler überhaupt. Der SPA-Modus liefert dasselbe Leere-Hülle-Problem wie reines Vue — Suchmaschinen müssen auf eine Render-Warteschlange warten, um die Inhalte zu füllen. Die Rendering-Verträge von KI-Crawlern variieren je nach Anbieter, sodass ein Crawler, der nur das anfängliche HTML abruft, die Seiteninhalte übersieht.
Warum es falsch ist: Sie geben freiwillig die eine Standardeinstellung (SSR) auf, die Nuxt einfacher zu indexieren macht als reines Vue.
Was Sie stattdessen tun sollten: Lassen Sie ssr: true (die Standardeinstellung) für alles Öffentliche und Indexierbare. Reservieren Sie ssr: false für wirklich nicht indexierte Oberflächen — eingeloggte Dashboards, Admin-Panels — über routeRules, nicht über einen globalen Konfigurationswechsel.
useSeoMeta() in ein gemeinsames Layout setzen
Das Festlegen von Titel/Beschreibung in einer Layout-Komponente wirkt effizient – eine Stelle,
gilt überall –, bedeutet aber, dass jede Seite, die dieses Layout verwendet, dieselben
generischen Tags erhält, und seitenbezogene useSeoMeta()-Aufrufe können je nach
Renderreihenfolge überschrieben werden.
Warum es falsch ist: Einzigartige, seitenbezogene Titel und Beschreibungen sind grundlegende Relevanzsignale; ein Standardwert auf Layout-Ebene reduziert sie alle auf eine einzige Zeichenkette.
Was Sie stattdessen tun sollten: Legen Sie globale Fallbacks einmal in app.vue fest (Titelvorlage, OG-
Standardwerte) und rufen Sie dann useSeoMeta() innerhalb jeder Seitenkomponente mit dem tatsächlichen
Titel und der Beschreibung dieser Seite auf.
Relative ogImage-URL ausliefern
ogImage: '/social.png' sieht im Browser gut aus und schlägt völlig fehl, wenn
Facebook, LinkedIn oder X versuchen, es abzurufen, da Social-Crawler relative Pfade
nicht gegen Ihre Website auflösen.
Warum es falsch ist: Soziale Plattformen benötigen eine absolute URL, um das Bild abzurufen; ein relativer Pfad löst von ihrer Seite aus nichts auf.
Was Sie stattdessen tun sollten: Übergeben Sie immer eine vollständige https://-URL und setzen Sie site.url in
nuxt.config.ts, damit die Module von @nuxtjs/seo absolute URLs für Sie automatisch
erstellen können.
Auf dynamisches Rendering zurückgreifen
Bekannten Bots eine vorgerenderte Momentaufnahme und allen anderen die SPA zu servieren, war vor Jahren eine legitime Problemumgehung. Google hat es seitdem direkt angesprochen: “dynamic rendering is a workaround and not a long-term solution.” (Übersetzung) „Dynamisches Rendering ist eine Problemumgehung und keine langfristige Lösung.“
Warum es falsch ist: Es bedient nur die Bots, die Sie konfigurieren, übersieht alles andere (Bing, die meisten KI-Crawler) und fügt echte Infrastruktur hinzu, die gewartet werden muss – für ein Problem, das Nus eigener SSR/SSG bereits löst.
Was Sie stattdessen tun sollten: Verwenden Sie SSR oder nuxt generate und überspringen Sie dynamisches Rendering
vollständig. Es gibt kein Szenario, in dem eine Nuxt-Site es benötigt.
Blockieren von /_nuxt/ oder /_ipx/ in robots.txt
Ein pauschales Disallow: /assets/ oder eine übereifrige Robots-Regel kann versehentlich
Nuxts Build-Ausgabeverzeichnis (/_nuxt/) oder den Optimierungspfad von @nuxt/image
(/_ipx/) erfassen.
Warum es falsch ist: Wenn Googlebot das JS/CSS, das die Seite erstellt, nicht abrufen kann, kann es nicht bestätigen, dass Ihre SSR-Ausgabe dem entspricht, was es sieht – und alle clientseitigen Erweiterungen hören für ihn stillschweigend auf zu rendern.
Was Sie stattdessen tun sollten: Verbieten Sie niemals Build-Ausgabe- oder Bildoptimierer-Pfade. Überprüfen Sie
robots.txt nach jedem Deployment, das Routing oder Modulkonfiguration betrifft, nicht nur einmal
beim Start.
Den Nicht-Produktions-Robots-Block nach dem Start aktiv lassen
@nuxtjs/robots verbietet standardmäßig allen Crawlern den Zugriff auf Nicht-Produktionsumgebungen –
ein gutes Sicherheitsnetz für Staging, aber es liest Umgebungsvariablen, um zu entscheiden, und ein
falsch konfiguriertes NODE_ENV oder eine Preview-Deploy-Einstellung kann es auch in der Produktion
auslösen.
Warum es falsch ist: Die Website sieht im Browser völlig in Ordnung aus, während robots.txt
still alles verbietet, und nichts wird indexiert, bis es jemand bemerkt.
Was Sie stattdessen tun sollten: Rufen Sie nach jedem Deployment oder jeder Umgebungsänderung direkt
https://yoursite.com/robots.txt ab und bestätigen Sie, dass es kein pauschales
Disallow: / ist.
Laufende KPIs für Nuxt SEO
Die fortlaufenden Zahlen, die Sie verfolgen sollten, sobald Ihr Rendering-Setup korrekt ist – keine einmaligen Überprüfungen, sondern wiederkehrende Signale, die Regressionen erkennen, wenn sich die App ändert.
Core Web Vitals (LCP, INP, CLS)
Was es Ihnen sagt: Ob echte Besucher eine schnelle, stabile Seite erhalten – direkt beeinflusst durch Nuxt Islands/Hydrationskosten (INP) und Bildladeentscheidungen (LCP, CLS).
So ziehen Sie es: Felddaten aus dem Chrome UX Report über /tools/crux-tracker/ oder /tools/cwv-checker/; Labordaten von Lighthouse für Pre-Release- Überprüfungen.
Benchmark / realistischer Bereich: Die von Google veröffentlichten „guten“ Schwellenwerte sind LCP ≤ 2,5 s, INP ≤ 200ms, CLS ≤ 0,1 am 75. Perzentil – das sind die Bestehen/Nichtbestehen-Grenzen, die CrUX selbst verwendet, keine Zahl, die ich erfinde. Wo Sie innerhalb von „gut“ liegen, hängt stark von Ihrem Bildgewicht und davon ab, wie viel Sie hydrieren.
Rhythmus: CrUX-Felddaten werden in einem rollierenden 28-Tage-Fenster aktualisiert – prüfen Sie monatlich und sofort nach jeder Änderung an Bildern, Schriftarten oder Hydration.
Rendering-vs-Roh-HTML-Parität
Was es Ihnen sagt: ob der Inhalt, den Suchmaschinen und KI-Crawler tatsächlich sehen können (das rohe HTML), dem entspricht, was ein Besucher im Browser sieht (das gerenderte DOM) – das zentrale Nuxt-SEO-Risiko, wenn ssr umgeschaltet wird oder eine Route auf CSR zurückfällt.
So ziehen Sie es: /tools/render-gap/ vergleicht rohes vs. gerendertes HTML für eine URL; für die maßgebliche Google-Seitenansicht verwenden Sie die URL-Inspektion in der GSC → „Gecrawlte Seite anzeigen“.
Benchmark / realistischer Bereich: Dies ist eine binäre Prüfung, kein Bereich – Ihre Schlüsselinhalte (Überschrift, Fließtext, interne Links) sollten im rohen HTML vorhanden sein, Punkt. Jede Lücke auf einer Seite, die Sie indexiert oder zitiert haben möchten, ist eine Regression, die behoben werden muss, keine Zahl, die toleriert werden kann.
Häufigkeit: nach jedem Deployment, das routeRules, Layouts oder die ssr-Konfiguration betrifft; ansonsten monatliche Stichproben wichtiger Vorlagen.
Indexabdeckung (Page-Indexing-Bericht)
Was es Ihnen sagt: wie viele Ihrer eingereichten URLs Google tatsächlich indexiert hat und warum der Rest ausgeschlossen wurde (Duplikat, gecrawlt-nicht-indexiert, blockiert usw.) – das nachgelagerte Signal, als das sich Rendering-Probleme letztendlich zeigen.
So ziehen Sie es: Search Console → Page-Indexing-Bericht, gefiltert auf die URL-Muster Ihrer Nuxt-Site.
Benchmark / realistischer Bereich: Es gibt keinen universellen gesunden Prozentsatz – es hängt davon ab, wie viele nahezu doppelte oder dünne URLs Ihre Routenstruktur erzeugt. Beobachten Sie den Trend und die Ausschlussgründe, nicht eine Zielzahl.
Häufigkeit: wöchentlich während und nach einer Rendering-Modus-Migration; ansonsten monatlich.
KI-Crawler-Zugriff
Was es Ihnen sagt: ob GPTBot, ClaudeBot, PerplexityBot und ähnliche KI-Crawler Ihre Seiten tatsächlich abrufen können – getrennt von Google, da diese Bots im Allgemeinen kein JavaScript ausführen und nur das rohe HTML lesen, das Ihre robots.txt ihnen erlaubt zu erreichen.
So ziehen Sie es: /tools/ai-crawler-checker/ um zu bestätigen, dass kein KI-User-Agent gesperrt ist; Server-Logs, um zu bestätigen, dass die Bots tatsächlich Seiten anfordern, nicht nur erlaubt sind.
Benchmark / realistischer Bereich: Es gibt keinen Zitationsraten-Benchmark, den ich Ihnen ehrlich nennen kann – wie oft eine KI-Antwort-Engine Sie zitiert, hängt vom Abfragebereich und Wettbewerb ab, nicht etwas, das die Nuxt-Konfiguration direkt steuert. Verfolgen Sie den Zugriff (erlaubt vs. blockiert), nicht eine erfundene Zitationsprozentzahl.
Häufigkeit: nach jeder robots.txt- oder @nuxtjs/robots-Konfigurationsänderung; ansonsten monatliche Log-Stichprobe.
Testen Sie sich selbst: Nuxt SEO
Fünf kurze Fragen zur Optimierung einer Nuxt-Site für die Suche. Wählen Sie eine Antwort für jede, dann prüfen Sie.
Ressourcen, die Ihre Zeit wert sind
Meine verwandten Artikel
- JavaScript SEO: A Definitive Guide – mein vollständiger Leitfaden zu Rendering, DOM-Parität, der Regel der restriktivsten Direktive und warum SSR/statisch/prerender (einschließlich Nuxt) alle für die Suche geeignet sind.
- The Beginner’s Guide to Technical SEO – wo Rendering und Crawling in das größere Bild passen.
Meine Vorträge
- JavaScript SEO — Ungagged 2019 (SlideShare) — Googlebots Evergreen-Chromium, die etwa 20-fachen Crawl-Kosten des Renderings, History-API über Hash-Routing und wie Google mit JS-injizierten Kanonischen umgeht. (Ständiger Haftungsausschluss: Die Dynamic-Rendering-Empfehlung in diesem Deck ist inzwischen veraltet – Google hat sie eingestellt.)
Aus der Branche
- Nuxt – Rendering-Konzepte (offiziell) — universelles und clientseitiges Rendering im Vergleich sowie die Gründe, aus denen Crawler SSR bevorzugen.
- Nuxt – SEO und Metadaten (offiziell) —
useSeoMeta()unduseHead()als Referenz für den Einstieg. - SEO mit Nuxt lernen (Harlan Wilton / nuxtseo.com) — der umfassendste entwicklerorientierte Nuxt-SEO-Leitfaden, stets aktuell gehalten.
- harlan-zw/nuxt-seo (GitHub) — die Quelle für das
@nuxtjs/seo-Modulbündel. - Nuxt Image (offiziell) —
<NuxtImg>und Core Web Vitals-Optimierung. - Optimize Nuxt Performance (DebugBear) — eine praxisnahe Anleitung zu Nuxt-Core-Web-Vitals-Fixes.
- Nuxt 3 Rendering Modes (RisingStack) — ein technischer Vergleich von SSR, SSG und hybridem Rendering.
- r/TechSEO — die Community für Rendering-/Indexierungs-Debugging.
Videos
- Google Search Central (YouTube) — Martin Splitts JavaScript SEO-Serie ist der beste offizielle Leitfaden dazu, wie Google JS-Apps crawlt, rendert und indexiert; sie ist framework-agnostisch, lässt sich aber direkt auf Nuxt anwenden. Kanal
Änderungsprotokoll
Aktualisiert am 21. Aug. 2026.
Redaktionelle Zusammenfassung und aufgezeichnete Änderungsdetails.Änderungsdetails
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
Vollständiger Vergleich nicht verfügbar — für diese Version wurde kein früherer Schnappschuss archiviert.
Aktualisiert am 27. Juli 2026.
Redaktionelle Zusammenfassung und aufgezeichnete Änderungsdetails.Änderungsdetails
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
Vollständiger Vergleich nicht verfügbar — für diese Version wurde kein früherer Schnappschuss archiviert.
Aktualisiert am 18. Juli 2026.
Redaktionelle Zusammenfassung und aufgezeichnete Änderungsdetails.Änderungsdetails
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
-
Detaillierte Änderungsangaben sind derzeit auf Englisch verfügbar.
Vollständiger Vergleich nicht verfügbar — für diese Version wurde kein früherer Schnappschuss archiviert.