Inhaltsverzeichnis
- Next.js zur Verbesserung der SEO-Leistung nutzen
- Aufbau eines SEO-freundlichen Blogs mit Next.js
- Projekterstellung und CMS-Setup
- Styling mit Tailwind CSS und GraphQL
- Neue Komponenten und Vorschau-Modus
- Benutzerdefinierte 404 Seite + Loading Spinner
- Mehrsprachigikeit mit Next.js 14 + Contentful
- Optimierung von Next.js-Seiten für Suchmaschinen
- Verbesserung der Seitennavigation und -struktur
- Beschleunigung der Seitenladezeit mit Next.js
- Mobile Optimierung: Ein Schlüssel zum SEO-Erfolg
- Fazit: Next.js als Katalysator für SEO-Erfolg
- Cloudapp-dev und bevor Sie uns verlassen
In der schnelllebigen Welt der Webentwicklung und des digitalen Marketings ist es entscheidend, eine Website zu erstellen, die nicht nur gut aussieht, sondern auch gute Platzierungen in Suchmaschinen erzielt. Hier kommt Next.js ins Spiel, ein leistungsstarkes React-Framework, das besonders für die Suchmaschinenoptimierung (SEO) optimiert ist. In diesem umfassenden Leitfaden werden wir uns mit den besten Praktiken und Strategien befassen, um die SEO Ihrer Next.js-Website zu verbessern und sicherzustellen, dass sie sich in der wettbewerbsintensiven digitalen Landschaft hervorhebt.
Next.js zur Verbesserung der SEO-Leistung nutzen
Next.js hat schnell an Beliebtheit unter Entwicklern gewonnen aufgrund seiner Benutzerfreundlichkeit, Leistung und Vielseitigkeit. Doch über diese Vorteile hinaus bietet es auch eine Reihe von Funktionen, die speziell darauf ausgelegt sind, die SEO zu verbessern. Serverseitiges Rendering (SSR) und die Generierung statischer Seiten (SSG) stehen im Zentrum der SEO-Fähigkeiten von Next.js. Durch das Vorab-Rendering von Seiten auf dem Server stellt Next.js sicher, dass Suchmaschinen-Crawler den Inhalt Ihrer Website effizient indexieren können, ein entscheidender Faktor zur Verbesserung Ihrer Suchrankings.
Aufbau eines SEO-freundlichen Blogs mit Next.js
Der Inhalt hat höchste Prio in der Welt der SEO, und ein Blog ist eine gute Möglichkeit, kontinuierlich frischen, relevanten Inhalt zu liefern. Next.js ist eine ausgezeichnete Wahl für den Aufbau eines Blogs und bietet Funktionen wie die Generierung statischer Seiten für schnelle, SEO-freundliche Blogseiten. Zusätzlich unterstützt Next.js Markdown und die Integration von CMS, was Ihnen ermöglicht, Ihren Inhalt effizient zu verwalten und Ihre Website mühelos aktuell zu halten.
Projekterstellung und CMS-Setup
https://www.cloudapp.dev/de-DE/nextjs-complete-example-typescript-app-router-contentful
Styling mit Tailwind CSS und GraphQL
Hier können Sie die Erstellung des benötigten Inhaltstyps „componentSeo“ einsehen, den wir verwenden, um die SEO-bezogenen Details festzulegen.
https://www.cloudapp.dev/de-DE/nextjs14-complete-example-typescript-tailwindcss-contentful-part2
Hier ist das seoFields Fragment, welches wir in der Abfrage queryBlogPost verwenden.
fragment SeoFields on ComponentSeo {
__typename
pageTitle
pageDescription
canonicalUrl
follow
index
shareImagesCollection(limit: 3, locale: $locale) {
items {
...ImageFields
}
}
}Neue Komponenten und Vorschau-Modus
https://www.cloudapp.dev/de-DE/nextjs14-complete-example-header-footer-tailwindcss-contentful-part3
Benutzerdefinierte 404 Seite + Loading Spinner
Mehrsprachigikeit mit Next.js 14 + Contentful
Hier ist der GitHub link -> GitHub - cloudapp-dev/nextjs14-SEO und der Link zum Endresultat -> SEO Title Blog Post
Nun fügen wir die SEO Basics hinzu. Wir starten mit der Sitemap.xml und der Robots.txtbasics for SEO.
Wir erstellen die Datei sitemap.ts im Ordner src/app
import path from "path";
import { locales } from "@/app/i18n/settings";
import { LocaleTypes, fallbackLng } from "@/app/i18n/settings";
import { MetadataRoute } from "next";
import { SitemapPagesFieldsFragment } from "@/lib/__generated/sdk";
import { client } from "@/lib/client";
type SitemapFieldsWithoutTypename = Omit<
SitemapPagesFieldsFragment,
"__typename"
>;
type SitemapPageCollection =
SitemapFieldsWithoutTypename[keyof SitemapFieldsWithoutTypename];
async function sitemapgenerator() {
const promiseArr =
locales
?.map((locale: LocaleTypes) => client.sitemapPages({ locale }))
.filter(Boolean) || [];
const dataPerLocale: SitemapFieldsWithoutTypename[] = await Promise.all(
promiseArr
);
const fields = dataPerLocale
.map((localeData, index) =>
Object.values(localeData).flatMap(
(pageCollection: SitemapPageCollection) =>
pageCollection?.items.map((item: any) => {
const localeForUrl =
locales?.[index] === fallbackLng ? undefined : locales?.[index];
let urlSegment = "";
urlSegment = item?.slug === "/" ? "" : item?.slug || "";
const url = new URL(
path.join(localeForUrl || "", urlSegment || ""),
process.env.NEXT_PUBLIC_BASE_URL!
).toString();
return item && !item.seoFields?.excludeFromSitemap
? {
url: url,
lastModified: item.sys.publishedAt,
changeFrequency: "weekly",
priority: 0.7,
}
: undefined;
})
)
)
.flat()
.filter(Boolean);
return fields;
}
export const revalidate = 24 * 60 * 60; // revalidate at most every hour
export default function sitemap(): MetadataRoute.Sitemap {
const fields: any = sitemapgenerator();
return fields;
}Wir müssen die GraphQL Abfrage (src/lib/graphql/sitemap.graphql)
fragment sitemapPagesFields on Query {
pageBlogPostCollection(limit: 100, locale: $locale) {
items {
slug
sys {
publishedAt
}
}
}
}
query sitemapPages($locale: String!) {
...sitemapPagesFields
}hinzufügen und dann den Behfel ausführen
npm run graphql-codegen:generateUm unsere sdk.ts-Datei unter src/lib/__generated zu aktualisieren. Wir holen den Slug-Wert aus unseren Blogposts und die aktivierten Lokalisierungen, um die Links in der Sitemap zu erstellen, zugänglich über www.yourdomain.com/sitemap.xml. Vergessen Sie nicht, sitemap.xml und robots.txt aus der Matcher-Logik in middleware.ts auszuschließen, sonst werden sie blockiert. Wenn Sie die robots.txt vergessen, wird die Google Search Console nicht in der Lage sein, die Sitemap zu lesen.
export const config = {
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
*/
matcher: [
"/((?!api|sitemap.xml|robots.txt|_next/static|_next/image|images|favicon.ico).*)",
],
};Optimierung von Next.js-Seiten für Suchmaschinen
Um das SEO Ihrer Next.js-Website zu maximieren, beginnen Sie mit den Grundlagen: Optimieren Sie Ihre Meta-Tags, einschließlich Titel-Tags und Meta-Beschreibungen, für jede Seite. Next.js erleichtert das dynamische Aktualisieren dieser Tags basierend auf dem Seiteninhalt, was essentiell ist, um Suchmaschinen zu vermitteln, worum es auf Ihrer Website geht. Wir verwenden die eingebaute Logik { Metadata, ResolvingMetadata } von „next“ für diese Aufgabe.
Lassen Sie uns das neue npm-Paket „Schema-dts“ für das JSON-LD-Snippet installieren. Wir müssen die Datei pageBlogPost.graphql anpassen, da wir das Änderungsdatum (publishedAt) unserer Blogposts für das JSON-LD benötigen. Sie finden es im sys {}-Abschnitt am Anfang der beiden Fragmente.
fragment ReferencePageBlogPostFields on PageBlogPost {
__typename
sys {
id
spaceId
publishedAt
}
slug
author {
...AuthorFields
}
publishedDate
title
shortDescription
featuredImage {
...ImageFields
}
}
fragment PageBlogPostFields on PageBlogPost {
__typename
sys {
id
spaceId
publishedAt
}
internalName
seoFields {
...SeoFields
}
slug
author {
...AuthorFields
}
publishedDate
title
shortDescription
featuredImage {
...ImageFields
}
content {
json
links {
assets {
block {
sys {
id
}
__typename
title
url
width
height
}
}
entries {
block {
...RichImageFields
}
}
}
}
relatedBlogPostsCollection(limit: 2) {
items {
...ReferencePageBlogPostFields
}
}
}
query pageBlogPost($slug: String!, $locale: String, $preview: Boolean) {
pageBlogPostCollection(
limit: 1
where: { slug: $slug }
locale: $locale
preview: $preview
) {
items {
...PageBlogPostFields
}
}
}Nach der Erstellung der Abfrage gehen wir zu den page.tsx-Dateien unter src/app/[locale] und src/app/[locale]/[slug] . Bevor wir beginnen, werden wir eine neue Umgebungsvariable hinzufügen, da wir sie im Code benötigen werden.
NEXT_PUBLIC_BASE_URL=http://localhost:3000Wir starten mit den Imports beider page.tsx Dateien
//SEO - JSON-LD
import { Article, WithContext } from "schema-dts";
import path from "path";
import Script from "next/script";
//Meta Tags
import { Metadata, ResolvingMetadata } from "next";Hier ist der Code für die Erstellung der Meta-Tags. Wir holen die benötigten Daten von Contentful. Wir geben folgende Daten aus: Titel, Beschreibung, hreflang, canonical, den Open Graph-Teil und zum Schluss den Robots-Teil.
const generateUrl = (locale: string, slug: string) => {
if (locale === "en-US") {
return new URL(slug, process.env.NEXT_PUBLIC_BASE_URL!).toString();
} else {
return new URL(
locale + "/" + slug,
process.env.NEXT_PUBLIC_BASE_URL!
).toString();
}
};
const WebUrl = process.env.NEXT_PUBLIC_BASE_URL as string;
export async function generateMetadata(
{ params }: BlogPostPageProps,
parent: ResolvingMetadata
): Promise<Metadata> {
const [blogPagedataSeo] = await Promise.all([
client.pageBlogPost({
slug: params.slug.toString(),
locale: params.locale.toString(),
preview: draftMode().isEnabled,
}),
]);
const blogPost = blogPagedataSeo.pageBlogPostCollection?.items[0];
if (!blogPost) {
return notFound();
}
const url = generateUrl(params.locale || "", params.slug);
return {
title: blogPost.seoFields?.pageTitle,
description: blogPost.seoFields?.pageDescription,
metadataBase: new URL(WebUrl),
alternates: {
canonical: url,
languages: {
"en-US": `/${params.slug}`,
"de-DE": `/de-DE/${params.slug}`,
"x-default": `/${params.slug}`,
},
},
openGraph: {
type: "website",
siteName: "CloudApp.dev - Free Tutorials and Resources for Developers",
locale: params.locale,
url: url || "",
title: blogPost.seoFields?.pageTitle || undefined,
description: blogPost.seoFields?.pageDescription || undefined,
images: blogPost.seoFields?.shareImagesCollection?.items.map((item) => ({
url: item?.url || "",
width: item?.width || 0,
height: item?.height || 0,
alt: item?.description || "",
type: item?.contentType || "",
})),
},
robots: {
follow: blogPost.seoFields?.follow || false,
index: blogPost.seoFields?.index || false,
googleBot: {
index: true,
follow: true,
"max-image-preview": "large",
},
},
};
}Für die JSON-LD Integration definieren wir eine neue Variable:
let jsonLd: WithContext<Article> = {} as WithContext<Article>;hier übergeben wir die Daten
// Create JSON-LD schema only if blogPost is available
if (blogPost) {
jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
headline: blogPost?.title || undefined,
author: {
"@type": "Person",
name: blogPost.author?.name || undefined,
// The full URL must be provided, including the website's domain.
url: new URL(
path.join(
params.locale.toString() || "",
params.slug.toString() || ""
),
process.env.NEXT_PUBLIC_BASE_URL!
).toString(),
},
publisher: {
"@type": "Organization",
name: "CloudApp.dev - Free Tutorials and Resources for Developers",
logo: {
"@type": "ImageObject",
url: "https://www.cloudapp.dev/favicons/icon-192x192.png",
},
},
image: blogPost?.featuredImage?.url || undefined,
datePublished: blogPost.publishedDate,
dateModified: blogPost.sys.publishedAt,
};
}und hier geben wir die Daten im Frontend aus
{blogPost && (
<Script
id="article-schema"
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(jsonLd),
}}
/>
)}Verbesserung der Seitennavigation und -struktur
Eine gut strukturierte Website verbessert nicht nur die Benutzererfahrung, sondern hilft auch Suchmaschinen, Ihren Inhalt zu verstehen und zu bewerten. Die Nutzung des dynamischen Routing-Systems von Next.js ermöglicht die Erstellung von sauberen, SEO-freundlichen URLs. Darüber hinaus gewährleistet die Implementierung einer klaren Hierarchie und einer internen Verlinkungsstrategie, dass Crawler Ihre Seite leicht navigieren können, was die Sichtbarkeit Ihrer Seiten erhöht.
Beschleunigung der Seitenladezeit mit Next.js
Die Seitenladezeit ist ein wichtiger Rankingfaktor für Suchmaschinen. Next.js bietet verschiedene Funktionen zur Verbesserung der Ladezeiten Ihrer Website, einschließlich automatischer Code-Aufteilung, optimiertem Bildladen mit der Komponentenext/imageMobile Optimierung: Ein Schlüssel zum SEO-Erfolg
Da der Großteil des Webtraffics von mobilen Geräten kommt, ist es unerlässlich, dass Ihre Next.js-Website mobilfreundlich ist. Responsive Design, schnelle Ladezeiten und 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.
Fazit: Next.js als Katalysator für SEO-Erfolg
Next.js zeichnet sich als leistungsstarkes Framework für den Aufbau von SEO-freundlichen Websites aus. Indem Sie Best Practices für On-Page-Optimierung, Seitenstruktur, Seitenladezeit, mobile Optimierung und Content-Erstellung befolgen, können Sie Next.js nutzen, um die Suchmaschinenrankings Ihrer Website erheblich zu verbessern. Die Wahl von Next.js für Ihre Webentwicklungsprojekte bedeutet nicht nur, mit den neuesten Technologietrends Schritt zu halten, sondern auch sicherzustellen, dass Ihre Website bereit ist, den sich ständig weiterentwickelnden Standards von SEO zu entsprechen. Ob Sie eine neue Website von Grund auf neu bauen oder eine bestehende optimieren möchten, Next.js bietet die Werkzeuge und Funktionen, die notwendig sind, um SEO-Erfolg im wettbewerbsorientierten digitalen Markt zu erreichen.
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.
