Hier der GitHub link -> GitHub - cloudapp-dev/nextjs14-SEO und der Link zur Beispielwebseite -> SEO Title Blog Post
Anpassung next.config.js
Next.js 14 verwendet standardmäßig das Webp-Format für das Bild, wenn wir das integrierte native „next/image“-Paket verwenden. Lassen Sie uns ebenfalls das Avif-Format in unserer next.config.js-Datei hinzufügen. Wie Sie sehen können, haben wir die Domain „images.ctfassets.net“ auf die Whitelist gesetzt, weil wir in unserem Beispiel Contentful als CMS verwenden.
Bilder Format bzw. Dimension: Ein Schlüsselfaktor für SEO Erfolg
Angesichts der Tatsache, dass der Großteil des Webverkehrs von mobilen Geräten stammt, ist es unverzichtbar, dass Ihre Next.js-Website mobilfreundlich ist. Responsives Design, schnelle Ladezeiten und eine touch-freundliche Navigation sind entscheidende Elemente. Die integrierten Funktionen von Next.js unterstützen diese Anforderungen und machen es einfacher, eine Website zu erstellen, die sowohl auf Desktop- als auch auf mobilen Plattformen gut funktioniert.
Lassen Sie uns einen Blick auf die Hauptkomponente für die Bildlieferung in unserem Beispiel werfen, die Sie unter src/components/contentful/CtfPicture.component.tsx finden können.
Wir nutzen die mit Next.js 14 eingeführte neue Funktion „getImageProps“, um die Verwendung des srcset-/picture-Tags zu ermöglichen.
Der Aufruf erfolgt über die Komponente the ArticleHero.tsx im Ordner src/components/contentful/
Definition “srcset’s” für das Picture tag
Wir definieren drei verschiedene srcSet mit unterschiedlichen Größen und verwenden sie in Kombination mit der Media-Query. Abhängig von der maximalen Breite verwenden wir verschiedene srcSet und daher unterschiedliche Bildabmessungen. Der Browser kann die am besten passende Auswahl treffen.
Als Referenz finden Sie ebenfalls die Komponente CtfImage.component.tsx im Projekt, da sie die Bildverarbeitung zeigt, die ich in meinen vorherigen Next.js 13.5-Projekten verwendet habe.
Wie können Sie es nachbauen?
Klonen Sie mein Repository -> GitHub - cloudapp-dev/nextjs14-SEO
Erstellen Sie einen kostenlose Contentful Account. Anleitung hier -> Nextjs 14 - Typescript App-Router Contentful - Part 1
Sobald die Werte in der Datei .env.local angepasst wurden diese Befehle ausführen
Fazit: Next.js als Katalysator für SEO-Erfolg
Next.js zeichnet sich als leistungsfähiges Framework für den Aufbau von SEO-freundlichen Websites aus. Indem Sie die besten Praktiken für die On-Page-Optimierung, die Struktur der Website, die Seitengeschwindigkeit, die Optimierung für mobile Geräte und die Erstellung von Inhalten befolgen, können Sie Next.js nutzen, um die Suchmaschinenrankings Ihrer Website erheblich zu verbessern.
