Wenn Sie eine Website mit Next.js erstellen, möchten Sie wahrscheinlich, dass Suchmaschinen Ihre Seiten effizient entdecken und indizieren. Eine Möglichkeit, diesen Prozess zu verbessern, ist die Erstellung einer Sitemap. Eine Sitemap ist eine Datei, die alle URLs auf Ihrer Website auflistet und so Suchmaschinen wie Google dabei hilft, Ihre Website schneller zu crawlen und zu indizieren.

In dieser Anleitung erfahren Sie, wie Sie next-sitemap in einem Next.js-Projekt installieren und konfigurieren. Wir gehen auch auf die Vorteile einer Sitemap ein und fügen Beispielcode in eine Next.js-App „Hello World“ ein, um zu veranschaulichen, wie es funktioniert.

Vorteile der Verwendung von next-sitemap

Bevor wir uns mit dem Installationsprozess befassen, besprechen wir kurz die wichtigsten Vorteile der Verwendung von next-sitemap:

1. Verbesserte SEO: Eine gut strukturierte Sitemap hilft Suchmaschinen wie Google, Ihre Seiten effizienter zu entdecken, was zu einer besseren Indexierung und möglicherweise höheren Suchrankings führt.

2. Schnelleres Crawling: Indem Sie Suchmaschinen eine Roadmap Ihrer Website zur Verfügung stellen, ermöglichen Sie ihnen, Ihre Seiten schneller zu crawlen und zu indizieren.

3. Umgang mit dynamischen Routen: Für Websites mit dynamischen Routen erleichtert next-sitemap die Generierung von URLs für dynamische Inhalte und stellt so sicher, dass alle Ihre Seiten auffindbar sind.

4. Benutzerdefinierte Sitemaps: Mit next-sitemap können Sie Ihre Sitemaps mit Optionen wie dem Festlegen der Priorität, der Änderungshäufigkeit und sogar dem Ausschließen bestimmter Seiten anpassen.

Schritt 1: Next-Sitemap installieren

Um zu beginnen, müssen Sie das Next-Sitemap-Paket in Ihrem Next.js-Projekt installieren. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install next-sitemap

Oder, wenn Sie Garn verwenden:

yarn add next-sitemap

Schritt 2: Erstellen Sie die Konfigurationsdatei next-sitemap.js

Nach der Installation des Pakets besteht der nächste Schritt darin, eine Konfigurationsdatei mit dem Namen next-sitemap.config.js im Stammverzeichnis Ihres Projekts zu erstellen. Diese Datei enthält Einstellungen zum Generieren Ihrer Sitemap.

Hier ist eine Grundkonfiguration:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

Im obigen Code geben wir die Basis-URL für Ihre Website mit siteUrl an. Die Option „generateRobotsTxt“ generiert neben der Sitemap eine robots.txt-Datei und sitemapSize bestimmt die Anzahl der URLs, die in jede Sitemap-Datei aufgenommen werden sollen.

Schritt 3: Package.json mit Sitemap-Skript aktualisieren

Jetzt müssen Sie ein Skript zu Ihrer package.json-Datei hinzufügen, um die Sitemap zu generieren, wann immer Sie Ihr Projekt erstellen.

So geht's:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

Dadurch wird sichergestellt, dass die Sitemap nach jedem Build automatisch basierend auf Ihrer Konfiguration generiert wird.

Schritt 4: Erstellen und generieren Sie die Sitemap

Da nun alles eingerichtet ist, führen Sie den folgenden Befehl aus, um Ihr Projekt zu erstellen und die Sitemap zu generieren:

npm run build

Oder mit Garn:

yarn build

Nachdem der Build abgeschlossen ist, wird eine sitemap.xml-Datei (und optional eine robots.txt-Datei) im öffentlichen/-Ordner Ihres Projekts generiert. Diese Dateien enthalten alle URLs Ihrer Next.js-App und können von Suchmaschinen gecrawlt werden.

Beispiel: „Hello World“ Next.js App mit Next-Sitemap

Um zu demonstrieren, wie Next-Sitemap funktioniert, erstellen wir eine einfache „Hello World“ Next.js-App. Hier ist eine einfache Next.js-Seite:

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

Konfigurieren Sie nun Ihre next-sitemap.config.js wie folgt:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

Fügen Sie als Nächstes Folgendes zu Ihrer package.json hinzu:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

Nachdem Sie npm run build ausgeführt haben, finden Sie Ihre Sitemap im public/-Verzeichnis, die die URL für Ihre „Hello World“-Homepage enthält.

Live-Demo

Meine Website https://rajeshkumaryadav.com verwendet dieses Paket, um die Sitemap beim Erstellungsprozess automatisch zu generieren. Unten ist die robot.txt-Datei, die sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

Abschluss

Indem Sie die in dieser Anleitung beschriebenen Schritte befolgen, haben Sie nun next-sitemap in Ihr Next.js-Projekt integriert. Dieses Tool bietet eine einfache Möglichkeit, eine Sitemap und eine robots.txt-Datei zu erstellen, was die SEO Ihrer Website erheblich verbessern und sicherstellen kann, dass Suchmaschinen alle Ihre Inhalte effizient finden können.

Mit diesem Setup sind Sie auf dem besten Weg, Ihre Next.js-App suchmaschinenfreundlicher und besser indiziert zu machen!