und strukturierte Daten vollständig implementieren
Nuxt SEO geht weit über title-Tags hinaus. useSeoMeta, korrekte Canonical-URLs, vollständige Open-Graph-Implementierung und JSON-LD strukturierte Daten bestimmen gemeinsam, wie gut eine Nuxt-App von Suchmaschinen verstanden und in Social Media dargestellt wird.
Inhaltsverzeichnis
- 1. Nuxt SEO: Warum serverseitiges Rendering entscheidend ist
- 2. useSeoMeta: Der moderne Ansatz für Meta-Tags
- 3. Open Graph vollständig implementieren
- 4. Twitter Cards und Social-Media-Vorschauen
- 5. Canonical-URLs: Duplikate vermeiden
- 6. Strukturierte Daten mit JSON-LD
- 7. Dynamische SEO-Daten aus API und CMS
- 8. robots-Meta und Sitemap-Integration
- 9. Nuxt-SEO-Ansätze im Vergleich
- 10. Zusammenfassung
- 11. FAQ
1. Nuxt SEO: Warum serverseitiges Rendering entscheidend ist
Nuxt SEO profitiert fundamental davon, dass Nuxt serverseitiges Rendering (SSR) oder statische Generierung (SSG) unterstützt. Suchmaschinen-Crawler wie Googlebot können zwar JavaScript ausführen, aber nicht zuverlässig auf dynamisch gerenderte Meta-Tags warten. Wenn ein klassisches Vue-SPA Meta-Tags per JavaScript in den <head> schreibt, kann es passieren, dass der Crawler die Seite ohne vollständige Meta-Daten indexiert. Nuxt löst dieses Problem, indem alle useSeoMeta-Aufrufe serverseitig verarbeitet werden und der fertige HTML-String mit korrekten Meta-Tags ausgeliefert wird – bevor irgendein Crawler oder Social-Scraper die Seite anfasst.
Der zweite entscheidende Aspekt für Nuxt SEO: Kontext-Korrektheit. Jede Seite braucht individuelle Meta-Tags, die den Seiteninhalt widerspiegeln. Ein generischer Titel wie „Meine App" auf allen Unterseiten ist für Nuxt SEO kontraproduktiv – Suchmaschinen verstehen nicht, womit sich jede Seite beschäftigt, und Nutzer können in den Suchergebnissen nicht zwischen verschiedenen Seiten deiner App unterscheiden. Mit useSeoMeta und reaktiven Composables lässt sich Nuxt SEO so implementieren, dass jede Seite automatisch den richtigen Titel, die richtige Beschreibung und korrekte strukturierte Daten bekommt – vollautomatisch, aus denselben Daten, die auch den Seiteninhalt speisen.
2. useSeoMeta: Der moderne Ansatz für Meta-Tags
Das Composable useSeoMeta ist seit Nuxt 3.3 der empfohlene Weg, um Meta-Tags zu setzen. Es bietet gegenüber dem direkten useHead-Aufruf TypeScript-Autovervollständigung für alle bekannten Meta-Properties und verhindert häufige Fehler wie doppelte name-Attribute oder falsche Property-Namen. Ein useSeoMeta-Aufruf mit den wichtigsten Feldern deckt Basis-SEO, Open Graph und Twitter Cards gleichzeitig ab – ohne den Boilerplate, der bei manuellen useHead-Konfigurationen entsteht.
Reaktive Werte funktionieren in useSeoMeta durch Getter-Funktionen: Statt eines statischen Strings übergibt man () => pageData.value?.title als Wert. Nuxt reaktiviert die Meta-Tags automatisch, wenn sich pageData ändert – zum Beispiel nach dem Laden von API-Daten. Das ist besonders wichtig für Nuxt SEO auf Detailseiten wie Produktseiten oder Blog-Artikeln, wo der Titel und die Beschreibung dynamisch aus einer CMS-API kommen. Ohne Getter-Syntax bleibt der Wert statisch auf dem Initialwert, unabhängig von späteren Datenänderungen.
// pages/blog/[slug].vue — Dynamic SEO meta from API data
const { data: article } = await useFetch(`/api/articles/${route.params.slug}`)
// useSeoMeta with reactive getters — updates when article.value changes
useSeoMeta({
title: () => article.value?.title ?? 'Blog | mironsoft.de',
description: () => article.value?.excerpt,
ogTitle: () => article.value?.title,
ogDescription: () => article.value?.excerpt,
ogImage: () => article.value?.coverImage?.url,
ogType: 'article',
ogUrl: () => `https://mironsoft.de/blog/${route.params.slug}`,
articlePublishedTime: () => article.value?.publishedAt,
articleModifiedTime: () => article.value?.updatedAt,
articleAuthor: () => article.value?.author?.name,
twitterCard: 'summary_large_image',
twitterTitle: () => article.value?.title,
twitterDescription: () => article.value?.excerpt,
})
3. Open Graph vollständig implementieren
Open Graph bestimmt, wie eine Seite in Facebook, LinkedIn, WhatsApp, Telegram und anderen Plattformen dargestellt wird, die Link-Vorschauen generieren. Eine vollständige Open-Graph-Implementierung für Nuxt SEO umfasst mindestens: og:title, og:description, og:image, og:url, og:type und og:site_name. Das og:image sollte mindestens 1200×630 Pixel groß sein und über HTTPS ausgeliefert werden – Plattformen cachen die Bilder aggressiv, deshalb sind konsistente URLs ohne Query-Parameter wichtig.
Für Artikel-Seiten erweitert sich das Open-Graph-Schema um den Namespace article: article:published_time, article:modified_time, article:author und article:section geben Plattformen und Suchmaschinen präzise Signale über den Inhaltstyp. In useSeoMeta heißen diese Properties articlePublishedTime, articleModifiedTime etc. – das Composable übersetzt sie automatisch in die korrekten meta property-Tags. Für Nuxt SEO auf E-Commerce-Seiten gibt es zusätzlich den product-Namespace für Preise und Verfügbarkeit, der für Shopping-Vorschauen relevant ist.
4. Twitter Cards und Social-Media-Vorschauen
Twitter (X) verwendet ein eigenes Meta-Schema zusätzlich zu Open Graph. Die wichtigsten Twitter-Card-Typen für Nuxt SEO sind summary (kleines Bild links) und summary_large_image (großes Bild oben). Für die meisten Inhaltsseiten ist summary_large_image die bessere Wahl, weil sie mehr visuelle Aufmerksamkeit erzeugt. Wenn die Twitter-Card-Tags fehlen, fällt Twitter auf Open-Graph-Tags zurück – aber nicht alle OG-Felder werden korrekt gemappt. Explizite twitter:*-Tags sind deshalb wichtig für kontrollierte Darstellung.
Ein häufig übersehenes Detail beim Nuxt SEO für Social Media: Der og:image-URL muss absolut sein, nicht relativ. Ein relativer Pfad wie /images/cover.jpg wird von Social-Scrapern nicht aufgelöst, weil sie den Basis-URL nicht kennen oder nicht für Domain-relative Pfade verwenden. In Nuxt setzt man den korrekten absoluten URL mit einer Komposition aus dem Runtime-Config-Wert siteUrl und dem relativen Bildpfad: \`${config.public.siteUrl}${article.coverImage.path}\`. Das gilt genauso für og:url und die Canonical-URL.
// composables/useSeoDefaults.ts — Shared SEO defaults for all pages
export function useSeoDefaults(overrides: Partial<SeoConfig> = {}) {
const config = useRuntimeConfig()
const route = useRoute()
const defaults = {
siteName: 'mironsoft.de',
siteUrl: config.public.siteUrl,
defaultImage: `${config.public.siteUrl}/images/og-default.jpg`,
}
// Canonical URL: always absolute, always current route
useHead({
link: [
{
rel: 'canonical',
href: () => `${defaults.siteUrl}${route.path}`,
},
],
})
useSeoMeta({
ogSiteName: defaults.siteName,
ogImage: () => overrides.ogImage ?? defaults.defaultImage,
ogImageWidth: 1200,
ogImageHeight: 630,
ogImageAlt: () => overrides.title ?? defaults.siteName,
twitterCard: 'summary_large_image',
...overrides,
})
}
5. Canonical-URLs: Duplikate vermeiden
Canonical-URLs sind eines der wichtigsten, aber am häufigsten falsch implementierten Elemente für Nuxt SEO. Sie signalisieren Suchmaschinen, welche URL die „kanonische" Version einer Seite ist, wenn dieselben Inhalte unter mehreren URLs erreichbar sind – zum Beispiel mit und ohne Trailing Slash, mit verschiedenen Query-Parametern oder über mehrere Domains. Ohne korrektes Canonical kann Google den Seitenrang auf mehrere URL-Varianten aufteilen statt ihn zu bündeln.
In Nuxt setzt man den Canonical am besten in einem globalen Layout oder einem wiederverwendbaren Composable, das automatisch den aktuellen Routenpfad verwendet. Wichtig für Nuxt SEO: Der Canonical muss immer der absolute URL der bevorzugten Version sein – mit Protokoll und Domain, ohne Trailing Slash (oder konsistent mit Trailing Slash, je nach Konfiguration), und ohne Pagination-Parameter. Paginierte Seiten wie /blog?page=2 bekommen eine eigene Canonical-URL, die explizit auf die paginierte Version zeigt, nicht immer auf Seite 1. Dafür gibt es das Prev/Next-Muster mit link rel="prev" und link rel="next".
6. Strukturierte Daten mit JSON-LD
JSON-LD ist das von Google empfohlene Format für strukturierte Daten und der wichtigste Baustein für Rich Results in den Google-Suchergebnissen. Für Nuxt SEO bedeutet das: Artikel-Seiten bekommen ein Article- oder BlogPosting-Schema, Produktseiten ein Product-Schema mit Preisen und Bewertungen, FAQ-Seiten ein FAQPage-Schema. Diese strukturierten Daten ermöglichen Rich-Results-Formate wie Sternebewertungen, Preise direkt in den Suchergebnissen und erweiterte FAQ-Snippets.
In Nuxt fügt man JSON-LD am elegantesten mit useHead und einem Script-Tag ein: useHead({ script: [{ type: 'application/ld+json', innerHTML: JSON.stringify(schema) }] }). Das Schema selbst wird reaktiv als computed-Property aufgebaut, damit es sich bei Datenänderungen automatisch aktualisiert. Ein Fehler, der Nuxt SEO beschädigt: JSON-LD mit unvollständigen Pflichtfeldern oder falschen Datentypen. Google's Rich Results Test zeigt genau, welche Felder fehlen oder falsch sind – dieses Tool sollte bei jeder Implementierung konsultiert werden.
// pages/blog/[slug].vue — JSON-LD structured data for BlogPosting
const { data: article } = await useFetch(`/api/articles/${route.params.slug}`)
const config = useRuntimeConfig()
const articleSchema = computed(() => ({
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: article.value?.title,
description: article.value?.excerpt,
image: article.value?.coverImage?.url,
datePublished: article.value?.publishedAt,
dateModified: article.value?.updatedAt,
author: {
'@type': 'Person',
name: article.value?.author?.name,
url: `${config.public.siteUrl}/autoren/${article.value?.author?.slug}`,
},
publisher: {
'@type': 'Organization',
name: 'Mironsoft',
url: config.public.siteUrl,
logo: { '@type': 'ImageObject', url: `${config.public.siteUrl}/logo.png` },
},
mainEntityOfPage: { '@type': 'WebPage', '@id': `${config.public.siteUrl}/blog/${route.params.slug}` },
}))
useHead({
script: [{ type: 'application/ld+json', innerHTML: () => JSON.stringify(articleSchema.value) }],
})
7. Dynamische SEO-Daten aus API und CMS
Wenn SEO-Daten aus einem Headless CMS wie Contentful, Storyblok oder Directus kommen, ist das richtige Timing entscheidend für Nuxt SEO. Mit useFetch und useAsyncData lädt Nuxt die Daten serverseitig vor dem Rendering, sodass Meta-Tags im fertigen HTML-String stehen. Das ist der entscheidende Unterschied zu Client-only-Fetching: Bei onMounted oder watch werden die Daten erst im Browser geladen – der Server liefert dann leere oder Standard-Meta-Tags, die Suchmaschinen indexieren.
Ein häufiger Fehler bei Nuxt SEO mit dynamischen Daten: Der useSeoMeta-Aufruf steht nicht im await-Block des Datenfetches. Wenn die Fetch-Operation asynchron ist und useSeoMeta synchron aufgerufen wird, bevor die Daten verfügbar sind, werden die Getter-Funktionen mit undefined-Werten initialisiert. Mit reaktiven Getter-Funktionen (() => data.value?.title) statt statischen Werten lässt sich dieses Problem elegant lösen: Die Getter werden beim Rendering erneut ausgewertet, sobald die Daten verfügbar sind.
8. robots-Meta und Sitemap-Integration
Das robots-Meta-Tag steuert, welche Seiten in den Suchindex aufgenommen werden. Für Nuxt SEO sind besonders drei Werte relevant: index, follow (Standard, Seite wird indexiert), noindex, follow (Seite nicht indexieren, Links folgen) und noindex, nofollow (Seite komplett aus dem Index ausschließen und Links nicht folgen). Seiten wie /danke nach Formularübermittlung, Warenkorb oder interne Suchergebnisseiten sollten mit noindex markiert sein, damit sie nicht im Suchindex erscheinen und den Crawl-Budget nicht verschwenden.
Die Sitemap ist das Gegenstück zum robots-Meta: Sie listet alle URLs auf, die indexiert werden sollen, zusammen mit Änderungsdatum und Priorität. Das Paket @nuxtjs/sitemap generiert die Sitemap automatisch aus den Nuxt-Routen und lässt sich für dynamische Routen mit einer Fetch-Funktion erweitern: routes: async () => (await fetchAllArticleSlugs()).map(slug => `/blog/${slug}`). Sitemap und Nuxt SEO-Meta-Tags sind zwei Seiten derselben Medaille – die Sitemap sagt Suchmaschinen, welche Seiten existieren, die Meta-Tags sagen, wie sie diese Seiten verstehen sollen.
9. Nuxt-SEO-Ansätze im Vergleich
Es gibt mehrere Wege, Nuxt SEO zu implementieren. Die Tabelle vergleicht die wichtigsten Ansätze nach Typ, Anwendungsfall und Einschränkungen.
| Ansatz | Anwendungsfall | Reaktivität | Einschränkung |
|---|---|---|---|
| useSeoMeta | Alle Standard-Meta-Tags | Ja, via Getter | Kein benutzerdefiniertes HTML |
| useHead | Custom Tags, Scripts, Links | Ja, via Getter | Mehr Boilerplate als useSeoMeta |
| nuxt.config head | Globale Defaults | Nein, statisch | Kein Zugriff auf Laufzeitwerte |
| definePageMeta | Statische Seiten-Meta | Nein, compile-time | Kein Zugriff auf Pinia/API |
| @nuxtjs/seo | Vollständiges SEO-Paket | Ja | Externe Abhängigkeit, mehr Konfiguration |
Für die meisten Nuxt-Projekte ist useSeoMeta mit reaktiven Gettern die beste Wahl für seitenspezifische Meta-Tags, ergänzt durch useHead für JSON-LD und Canonical-Links. Globale Defaults landen in nuxt.config.ts unter app.head. Das Paket @nuxtjs/seo lohnt sich für Projekte, die eine vollständige Nuxt SEO-Lösung mit Sitemap, Robots.txt und Social-Image-Generierung aus einer Hand wollen.
Mironsoft
Vue.js · Nuxt 3 · SEO-Architektur · Strukturierte Daten
Vollständige Nuxt-SEO-Implementierung für eure App?
Wir implementieren vollständige Nuxt-SEO-Lösungen – von useSeoMeta und Open Graph über Canonical-URLs bis zu JSON-LD strukturierten Daten für Rich Results in Google.
SEO-Audit
Analyse bestehender Nuxt-Apps auf Meta-Tag-Fehler, fehlende Canonicals und unvollständige Open-Graph-Implementierung
JSON-LD Implementierung
Strukturierte Daten für Artikel, Produkte, FAQ und Organisation – für Rich Results in Google optimiert
CMS-Integration
SEO-Metadaten aus Contentful, Storyblok oder Directus reaktiv in Nuxt integrieren
10. Zusammenfassung
Vollständige Nuxt SEO umfasst vier Ebenen: Basis-Meta-Tags (title, description, robots), Social-Meta-Tags (Open Graph und Twitter Cards), Canonical-URLs und JSON-LD strukturierte Daten. Das Composable useSeoMeta mit reaktiven Getter-Funktionen ist der effizienteste Weg, alle Meta-Tags reaktiv und typsicher zu setzen. Canonical-URLs müssen immer absolut sein und konsistent gesetzt werden, um Duplicate-Content-Probleme zu vermeiden. JSON-LD ermöglicht Rich Results in Google und sollte für alle Seiten mit strukturierten Inhalten implementiert werden.
Der größte Hebel für Nuxt SEO liegt in der richtigen Timing: Meta-Tags müssen serverseitig im HTML stehen, nicht dynamisch im Browser nachgeladen werden. useFetch und useAsyncData mit Getter-Funktionen in useSeoMeta gewährleisten das. Social-Media-Scraper und Suchmaschinen-Crawler sehen dann denselben vollständig ausgefüllten HTML-Code, den auch der Endnutzer bekommt – das ist das Fundament, auf dem gute Rankings und aussagekräftige Social-Media-Vorschauen aufgebaut werden.
Nuxt SEO — Das Wichtigste auf einen Blick
useSeoMeta
Reaktive Getter-Funktionen statt statischer Strings – Meta-Tags aktualisieren sich automatisch wenn sich API-Daten ändern.
Canonical-URLs
Immer absolut mit Protokoll und Domain. Über ein globales Composable automatisch auf alle Seiten anwenden.
JSON-LD
Via useHead als Script-Tag einbinden, als computed-Property aufgebaut – für Rich Results in Google unerlässlich.
SSR-Timing
useFetch statt onMounted für Datenfetching – Meta-Tags müssen im serverseitig gerenderten HTML stehen.