Technisches SEO im Next.js App Router: Metadaten, Sitemaps und JSON-LD
Erfahren Sie, wie gemeinsame Metadaten-Hilfsprogramme, Standardlayouts für die Wurzelstruktur, robots.ts, eine dynamische Sitemap, korrektes JSON-LD sowie Seitenaudits einer Next.js-App eine solide SEO-Basis bieten.
Quellen: How I Got a Next.js Project to 100% SEO on Lighthouse
Eine Next.js-Anwendung kann zwar fertig aussehen, den Suchmaschinen aber weiterhin schwer zugänglich sein: Die Seiten fehlen kanonische URLs, die Regeln für Crawler sind nicht definiert, und neuer Inhalt erreicht niemals die Sitemap. Diese Anleitung folgt einer Test-Website mit vielen Ressourcenseiten und zeigt, wie es von der ersten Lighthouse-SEO-Prüfung mit einem Score von 0 auf 100 gelang, wobei die sieben Änderungen mithilfe der integrierten Metadaten-APIs des App Routers vorgenommen wurden.
Metadaten der Seiten aus einer Hilfsfunktion erstellen
Das Manuell-Eingeben von Metadaten auf jeder Seite führt zu Inkonsistenzen – beispielsweise fehlt hier eine kanonische URL oder dort ein veralteter Open Graph-Title. Eine kleine Hilfsfunktion löst dieses Problem: Jede Seite übermittelt lediglich ihren Titel, ihre Beschreibung, den Pfad sowie optional ein noIndex-Flag, und die Hilfsfunktion erweitert diese Angaben zu kanonischen URLs, Robot-Regeln und Open Graph-Feldern:
export function createPageMetadata({
title,
description,
path,
noIndex = false,
}: PageMetadata) {
return {
title,
description,
alternates: {
canonical: path,
},
robots: noIndex ? "noindex, nofollow" : "index, follow",
openGraph: {
title,
description,
url: path,
type: "website",
},
};
}
Indexierung ist deaktivierbar: Ein Flag wechselt eine Seite in den Modus noindex, nofollow. Da path relativ ist, verlässt sich der Hilfsprogramm auf eine in der Wurzelstruktur definierte Basis-URL.
Legen Sie siteweite Standardwerte in die Wurzelstruktur
Alles, was auf der ganzen Website gemeinsam verwendet wird, sollte in die metadata-Export-Datei von layout.tsx aufgenommen werden:
metadataBase- eine Titelvorlage
- eine Standardbeschreibung
- Standardwerte für Open Graph
- Einstellungen für Twitter Cards
- Standardwerte für Robots
- das
lang-Attribut im<html>-Element
Eine gekürzte Version dieser Export-Datei sieht so aus:
export const metadata: Metadata = {
metadataBase: new URL("https://mockdata.ir"),
title: {
default: "MockData",
template: "%s | MockData",
},
description: "...",
};
Mit dem Template %s | MockData wird eine Seite mit dem Titel „Users API“ als „Users API | MockData“ dargestellt, während titellose Seiten den Wert default verwenden. metadataBase ist dafür verantwortlich, die relativen canonical-Werte sowie die Open Graph url-Werte des Hilfsprogramms in absolute URLs umzuwandeln. Beachten Sie, dass lang kein Metadatenfeld ist; setzen Sie es auf dem <html>-Tag ein, das vom Layout angezeigt wird.
Crawler-Regeln mit robots.ts definieren
Anstatt die Crawler-Regeln undefiniert zu lassen, generieren Sie eine robots.txt-Datei aus einer Datei namens app/robots.ts, die ein typisiertes MetadataRoute.Robots-Objekt zurückgibt:
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
},
sitemap: "https://mockdata.ir/sitemap.xml",
};
}
Es ist absichtlich minimal gehalten: Alle User Agents dürfen alles durchsuchen, und die Lage der Sitemap wird angegeben.
Sitemap aus Ihren Daten generieren
Durch Ressourcenseiten für Benutzer, Beiträge, Produkte und mehr skaliert eine manuell gepflegte XML-Sitemap nicht. Ein Standardexport von sitemap.ts kann async sein, sodass er dieselbe Quelle abfragen kann wie die Seiten selbst:
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const resources = await getPublicResources();
return [
{
url: "https://mockdata.ir",
lastModified: new Date(),
},
...resources.map((resource) => ({
url: `https://mockdata.ir/${resource.slug}`,
lastModified: resource.updatedAt,
})),
];
}
Jede Ressource wird mit einer URL verknüpft, bei der updatedAt als lastModified verwendet wird, wodurch neue öffentliche Ressourcen automatisch in die Sitemap aufgenommen werden. Eine Verbesserung: new Date() für die Startseite gibt an, dass sich bei jeder Erstellung etwas geändert hat; ein echtes Zeitstempel für den Inhalt ist ehrlicher.
Fügen Sie strukturierte Daten nur dort hinzu, wo sie zutreffen
JSON-LD mit dem Schema.org-Wortschatz teilt Suchmaschinen mit, was eine Seite darstellt. Die App selbst wird als SoftwareApplication beschrieben, und die verwendeten Typen sind:
WebSiteOrganizationSoftwareApplication
BreadcrumbListZielen Sie auf Genauigkeit statt auf Menge: Die Markup-Struktur muss den tatsächlich auf der Seite vorhandenen Inhalt beschreiben. Erfundene Rezensionen, Bewertungen oder andere erfundene Eigenschaften sind irreführend und können gegen die Richtlinien der Suchmaschinen verstoßen.
Halten Sie die Navigationsleiste in UI und Schema konsistent
Nestierte Dokumentationsseiten zeigen einen sichtbaren Pfad wie Startseite → Dokumentation → Users API, und dieselbe Hierarchie wird als strukturierte Daten von BreadcrumbList ausgegeben. Der sichtbare Pfad und die Markup-Struktur sollten stets dieselbe Struktur beschreiben.
Prüfen Sie jede indizierbare Seite manuell
Zuletzt sollten Sie jede öffentliche Seite einzeln überprüfen:
- Gibt es genau eine klare H1-Zeile?
- Beschreibt der Titel diese spezifische Seite?
- Stimmt die Beschreibung mit dem tatsächlichen Inhalt überein?
- Gibt es nützliche interne Links zu und von dieser Seite?
- Soll diese Seite überhaupt indiziert werden?
- Werden leere oder wenig wertvolle Seiten den Crawlern zugänglich gemacht?
Nicht jeder Pfad gehört in die Suchergebnisse; noindex ist oft die richtige Entscheidung. Zur Struktur von Überschriften siehe diesen Leitfaden zu semantischem HTML für die Formatierung.
Was eine perfekte Lighthouse-SEO-Bewertung bedeutet und was nicht
Nach diesen Korrekturen meldete Lighthouse eine SEO-Bewertung von 100. Diese Zahl überprüft technische Grundlagen wie Titel, Beschreibungen und Crawlbarkeit; sie sagt nichts über die Platzierung aus. Die Platzierung hängt von der Inhaltsqualität, der Suchintention, der Autorität, Backlinks, Konkurrenz, Leistung und vielen anderen Faktoren ab.
Der eigentliche Wert liegt in der soliden Grundlage. Die Durchführung einer Prüfung vor dem Veröffentlichen einer Next.js-App ist kostengünstig und erkennt viele kleine Fehler.
Kernpunkte
- Zentralisieren Sie die Metadaten pro Seite in einem Hilfsmodul und legen Sie gemeinsame Standardwerte, einschließlich von
metadataBase, im Root-Layout fest. - Verwenden Sie
robots.tssowie ein asynchronessitemap.ts, damit die Crawler-Regeln und URLs mit Ihren Daten synchron bleiben. - Fügen Sie nur strukturierte Daten hinzu, die die Seite genau beschreiben, und halten Sie die Navigationsleiste in UI und Schema identisch.
- Betrachten Sie
noindexals legitime Option für Seiten, die nicht in den Suchergebnissen erscheinen sollen. - Bewerten Sie eine Lighthouse-Bewertung von 100 als „technisch einwandfrei“, nicht als Garantie für eine gute Platzierung.