XML-Sitemaps

Sitemaps sind die einfachste Möglichkeit, mit Google zu kommunizieren. Sie zeigen an, welche URLs zu Ihrer Website gehören und wann sie aktualisiert werden, damit Google neue Inhalte leicht erkennen und Ihre Website effizienter crawlen kann.

Obwohl XML-Sitemaps die bekanntesten und am häufigsten verwendeten sind, können sie auch über RSS, Atom oder sogar über Text-Dateien erstellt werden, wenn Sie maximale Einfachheit bevorzugen.

Ein Sitemap ist eine Datei, in der Sie Informationen über die Seiten, Videos und andere Dateien auf Ihrer Website sowie die Beziehungen zwischen ihnen bereitstellen. Suchmaschinen wie Google lesen diese Datei, um Ihre Website intelligenter zu crawlen.

Laut Google:

Sie benötigen möglicherweise eine Sitemap, wenn:

• Ihre Website sehr groß ist. Dadurch ist es wahrscheinlicher, dass die Google-Webcrawler das Crawlen einiger Ihrer neuen oder kürzlich aktualisierten Seiten übersehen.
• Ihre Website über ein großes Archiv von Inhaltsseiten verfügt, die isoliert oder nicht gut miteinander verlinkt sind. Wenn Ihre Website-Seiten nicht natürlich aufeinander verweisen, können Sie sie in einer Sitemap auflisten, um sicherzustellen, dass Google einige Ihrer Seiten nicht übersieht.
• Ihre Website neu ist und nur wenige externe Links auf sie verweisen. Googlebot und andere Webcrawler navigieren im Web, indem sie Links von einer Seite zur anderen folgen. Daher könnte Google Ihre Seiten möglicherweise nicht entdecken, wenn keine anderen Websites auf sie verlinken.
• Ihre Website viele Rich-Media-Inhalte (Video, Bilder) enthält oder in Google News angezeigt wird. Falls vorhanden, kann Google zusätzliche Informationen aus Sitemaps bei der Suche berücksichtigen, sofern dies angemessen ist.

Obwohl Sitemaps nicht zwingend für eine gute Suchmaschinenleistung erforderlich sind, können sie das Crawling und die Indizierung für Bots erleichtern, sodass Ihre Inhalte schneller erfasst und entsprechend gerankt werden.

Es wird dringend empfohlen, Sitemaps zu verwenden und sie dynamisch zu gestalten, wenn neue Inhalte auf Ihrer Website hinzugefügt werden. Statische Sitemaps sind ebenfalls gültig, aber sie sind für Google möglicherweise weniger nützlich, da sie nicht für kontinuierliche Entdeckungszwecke dienen.

Hinzufügen von Sitemaps zu einem Next.js-Projekt

Es gibt zwei Optionen:

Manuell: Wenn Sie eine relativ einfache und statische Website haben, können Sie manuell eine sitemap.xml im public-Verzeichnis Ihres Projekts erstellen:

   <!-- public/sitemap.xml -->
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>

Dynamisch: Wenn Ihre Website dynamisch ist, können Sie getServerSideProps nutzen, um eine XML-Sitemap bei Bedarf zu generieren.

Wir können eine neue Seite im Pages-Verzeichnis erstellen, z.B. pages/sitemap.xml.js. Das Ziel dieser Seite ist es, unsere API aufzurufen, um Daten zu erhalten, die es uns ermöglichen, die URLs unserer dynamischen Seiten zu kennen. Anschließend schreiben wir eine XML-Datei als Antwort für /sitemap.xml.

Hier ist ein Beispiel, das Sie selbst ausprobieren können:

//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
 
function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <!--Wir setzen die beiden URLs manuell, die wir bereits kennen-->
     <url>
       <loc>https://jsonplaceholder.typicode.com</loc>
     </url>
     <url>
       <loc>https://jsonplaceholder.typicode.com/guide</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
       <url>
           <loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
       </url>
     `;
       })
       .join('')}
   </urlset>
 `;
}
 
function SiteMap() {
  // getServerSideProps übernimmt die Hauptarbeit
}
 
export async function getServerSideProps({ res }) {
  // Wir rufen die API auf, um die URLs für unsere Website zu sammeln
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();
 
  // Wir generieren die XML-Sitemap mit den Posts-Daten
  const sitemap = generateSiteMap(posts);
 
  res.setHeader('Content-Type', 'text/xml');
  // Wir senden die XML an den Browser
  res.write(sitemap);
  res.end();
 
  return {
    props: {},
  };
}
 
export default SiteMap;

Weiterführende Literatur

• Google: Mehr über Sitemaps erfahren
• Google: Übersicht über Crawling- und Indizierungsthemen