next/imageHier 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.
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
formats: ["image/avif", "image/webp"],
remotePatterns: [
{
protocol: "https",
hostname: "images.ctfassets.net",
pathname: "**",
},
],
},
};module.exports = nextConfig;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.
import NextImage, { ImageProps as NextImageProps } from "next/image";
import { getImageProps } from "next/image";
import { twMerge } from "tailwind-merge";import { ImageFieldsFragment } from "@/lib/__generated/sdk";interface ImageProps extends Omit<ImageFieldsFragment, "__typename"> {
nextImageProps?: Omit<NextImageProps, "src" | "alt">;
}export const CtfPicture = ({
url,
width,
height,
title,
nextImageProps,
}: ImageProps) => {
if (!url || !width || !height) return null; // common option
const common_high = {
alt: title || "",
width: width,
height: height,
priority: nextImageProps?.priority,
className: twMerge(nextImageProps?.className, "transition-all"),
};
const common_medium = {
alt: title || "",
width: 800,
height: 500,
className: twMerge(nextImageProps?.className, "transition-all"),
}; const common_low = {
alt: title || "",
width: 300,
height: 200,
className: twMerge(nextImageProps?.className, "transition-all"),
}; // Pass common as an argument with src in getImageProps and destructure the output.
const {
props: { srcSet: high },
} = getImageProps({
...common_high,
src: url,
priority: nextImageProps?.priority,
}); const {
props: { srcSet: medium },
} = getImageProps({
...common_medium,
src: url,
priority: nextImageProps?.priority,
}); const {
props: { srcSet: low, ...rest },
} = getImageProps({
...common_low,
src: url,
priority: nextImageProps?.priority,
}); return (
<picture>
<source media="(max-width: 740px)" srcSet={low} />
<source media="(max-width: 980px)" srcSet={low} />
<source media="(min-width: 1280px)" srcSet={medium} />
<source media="(min-width: 1480px)" srcSet={high} />
<img alt={title || ""} {...rest} />
</picture>
);
};Der Aufruf erfolgt über die Komponente the ArticleHero.tsx im Ordner src/components/contentful/
<div className="flex-1 basis-1/2">
{article.featuredImage && (
<CtfPicture
nextImageProps={{
className: "w-full",
priority: true,
sizes: undefined,
}}
{...article.featuredImage}
/>
)}
</div>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.
return (
<picture>
<source media="(max-width: 740px)" srcSet={low} />
<source media="(max-width: 980px)" srcSet={low} />
<source media="(min-width: 1280px)" srcSet={medium} />
<source media="(min-width: 1480px)" srcSet={high} />
<img alt={title || ""} {...rest} />
</picture>
);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
npm i -> to install all packages
npm run cf-import -> which will use the provided export.json file to push the data to your new contentful account
npm run dev -> start dev server to show the result under http://localhost:3000Fazit: 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.
