Next.js 14 - Erstellen einer HTML-Sitemap in 5 Minuten mit Contentful

Ein HTML-Sitemap ist eine Webseite, die alle anderen Seiten einer Website auflistet und verlinkt, wodurch eine klare und organisierte Übersicht über deren Struktur geboten wird. Es verbessert die Benutzererfahrung, indem es Besuchern hilft, schnell die gesuchten Informationen zu finden, insbesondere auf großen Websites mit komplexer Navigation. Suchmaschinen profitieren von HTML-Sitemaps, da sie sicherstellen, dass alle Seiten effizient entdeckt und indexiert werden.

Warum ist das XML-Sitemap nicht ausreichend?

Im Gegensatz zu XML-Sitemaps, die hauptsächlich für Suchmaschinen entwickelt wurden, sind HTML-Sitemaps für menschliche Benutzer konzipiert. Sie können die SEO einer Website verbessern, indem sie die Seitenautorität durch interne Links verteilen. Darüber hinaus unterstützen HTML-Sitemaps die Barrierefreiheit, indem sie Benutzern mit Behinderungen helfen, die Website einfacher zu navigieren.

Hier ist das GitHub repo mit dem vollständigen Code.

Beispielseite -> https://nextjs14-azureb2c-prisma.vercel.app/

Wenn Sie meinen vorherigen Beitrag zu Next.js 14 und SEO gelesen haben, kennen Sie vielleicht bereits die Grundlagen der wichtigsten SEO-Themen, um mit Ihrem Next.js 14-Projekt erfolgreich zu sein.

Verwendeter Stack (Next.js 14, Contentful, Tailwind)

In all meinen Beispielen habe ich Contentful als CMS, Next.js 14 als Framework und Tailwind CSS für das Styling verwendet. Das Deployment erfolgte auf Vercel. Nun werde ich eine HTML-Sitemap erstellen, was ziemlich einfach ist. Wir haben bereits das Fundament gebaut, und mit der großartigen GraphQL-API von Contentful macht es wirklich Spaß, dies zu implementieren.

Contentful Projekt — Inhaltstypen

Ich konzentriere mich auf die drei Hauptinhaltstypen, die ich in meinem Contentful-Bereich habe.

• Landing Pages bzw. Hauptseiten (pageLandingCollection)

• Tag Seiten bzw. Kategorie Seiten (tagPageCollection)

• Blog Post Seiten (pageBlogPostCollection)

GraphQL-Abfrage

Ich starte mit der Erstellung der entsprechenden GraphQL Abfrage

Nach der Änderung müssen wir den folgenden Befehl ausführen, um die Schemas und Typen zu aktualisieren (die Datei src/lib/__generated/sdk.ts wird aktualisiert).

Neue Page Route — Sitemap-html

Zur Ausgabe im Frontend, erstellen wir eine neue page.tsx unter src/app/[locale]/sitemap-html.

Neue Typescript Typen

Am Anfang der Datei werden die entsprechenden Typen importiert.

Hier wird die Abfrage ausgeführt

Hier werden die Variablen erstellt bzw. deklariert.

Ausgabe der Links im Frontend der Seite.

Anpassung Common.json für Mehrsprachigkeit

Um die Mehrsprachigkeit innerhalb des Nextjs 14 Projekts zu nutzen, passe ich meine common.json-Dateien für DE und US unter src/app/[locale]/de-DE und en-US an.

US

DE

Hier ist das Endergebnis

Der Footer Link

Zusammenfassung

Jede Seite sollte aus mehreren Gründen eine HTML-Sitemap haben:

1. Verbesserte Navigation für Benutzer: Eine HTML-Sitemap bietet einen klaren Überblick über die gesamte Website und ermöglicht es den Benutzern, den gesuchten Inhalt leicht zu finden. Dies kann die Benutzererfahrung verbessern, insbesondere auf großen Websites mit komplexen Strukturen.

2. Besseres SEO: Suchmaschinen verwenden Sitemaps, um die Struktur einer Website zu verstehen und deren Seiten effektiver zu indexieren. Eine HTML-Sitemap kann Suchmaschinen helfen, alle Seiten einer Website zu entdecken, was die Sichtbarkeit und das Ranking der Website in den Suchergebnissen verbessern kann.

3. Schneller Zugriff auf alle Seiten: Benutzer und Suchmaschinen können über die HTML-Sitemap schnell auf jede Seite der Website zugreifen, was besonders nützlich ist, um tief verlinkte oder weniger häufig aufgerufene Seiten zu finden.

4. Verbesserte interne Verlinkung: Eine HTML-Sitemap erstellt zusätzliche interne Links zu allen Seiten der Website. Dies kann die allgemeine Linkstruktur verbessern, die Link-Energie gleichmäßiger verteilen und den SEO-Wert der Website steigern.

5. Barrierefreiheit: Eine HTML-Sitemap kann die Zugänglichkeit der Website verbessern, indem sie eine einfache, textbasierte Navigationsoption bietet. Dies kann besonders nützlich für Benutzer mit Behinderungen sein, die auf Bildschirmlesegeräte angewiesen sind.

6. Inhaltserkennung: Besucher können leicht die gesamte Bandbreite an Inhalten auf der Website entdecken, was sie dazu ermutigen kann, mehr Seiten zu erkunden und mehr Zeit auf der Website zu verbringen.

7. Fehlererkennung: Durch die regelmäßige Überprüfung der HTML-Sitemap können Website-Administratoren schnell fehlerhafte Links oder Seiten identifizieren und korrigieren, die möglicherweise versehentlich aus der Hauptnavigation der Website ausgelassen wurden.

Das war's, nun haben wir eine HTML Sitemap erstellt, welche direkt im Footer verlinkt ist. Wie man gesehen hat, ist dies mit der Kombi aus Contentful und Nextjs 14 sehr einfach.

Cloudapp-dev und bevor Sie uns verlassen

Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:

Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.