Friedrich Siever

18. November 2023

Next.js: SEO Optimierung mit Metadaten

von: Friedrich Siever | Last Updated: 14.01.23

Intro

Wenn es um die Optimierung für Suchmaschinen (SEO) auf modernen, JavaScript-getriebenen Websites geht, ist Next.js der wahre Champion. Das liegt an den eleganten Möglichkeiten von React, das nun serverseitiges Rendern und statische Exporte ermöglicht.

In diesem Beitrag dreht sich alles um die professionelle SEO-Implementierung auf High-Performance-Websites mit Next.js. Der entscheidende Unterschied? Hier geht es nicht nur um die Installation eines SEO-Plugins. Nein, es bedarf spezifischer Schritte, um SEO auf dem Niveau von Schwergewichten wie Yoast zu realisieren.

Der große Pluspunkt bei der Verwendung von Next.js? Die Performance. Im Vergleich zu klassischen WordPress-Themes bietet Next.js eine beeindruckende Geschwindigkeit und Reaktionsfähigkeit. Das bedeutet nicht nur bessere Suchergebnisse, sondern auch ein besseres Benutzererlebnis. Mit Next.js ist SEO auf Hochgeschwindigkeit, und das werden deine User spüren.

Ein Beispiel?

Backlinko : Als SEO-Experte hatte Brian Dean seine monolitische WordPress-Website bereits so weit wie möglich optimiert und doch kämpfte er seit Jahren mit Ladezeitenproblemen. Aufgrund des bevorstehenden Page Experience Update wurde die schlechte Performance und UX in Angriff genommen und die Website mit Next.js auf ein neues Level gehoben. Das Ergebnis - die neue Website lädt unter anderem eine 3x so schnell wie zuvor. Ein spürbarer Performance-Boost, der sich sehen lässt.

Metadaten

Metadaten, das sind unsichtbaren Helfer im Hintergrund, wenn es um die Suchmaschinenoptimierung (SEO) deiner Website geht. Es handelt sich um Informationen, die sich vornehmlich an Suchmaschinen richten. Sie geben Google und Bing entscheidende Hinweise, worum es auf deiner jeweiligen Seite geht und ob sie - bezogen auf eine konkrete Suchanfrage - relevant ist. Kurz gesagt, Metadaten sind die stillen Helden, die dafür sorgen, dass deine Website von Suchmaschinen gefunden wird und ansprechend in sozialen Netzwerken geteilt werden kann. Sie sind ein wichtiger Teil jeder guten SEO-Strategie.

Metadaten Implementierung in Next

Mit Next.js gibt es zwei Wege Metadatan auf deinen Websites zu implementieren.

  • Static Metadata als Objekt: Eine Methode zur Definition von Metadaten, die auf allen Seiten gleich bleiben.
  • Dynamische Metadaten als Funktion für die Generierung von Metadaten: Diese Methode ist besondere nützlich für dynamische Routen, da sie die dynamische Erzeugung von Metadaten je nach Bedarf ermöglicht.

Statische Metadaten die solide Basis

Statische Metadaten können dir auf zwei Arten helfen: Zum einen ermöglichen sie die Implementierung von ‘Schablonen’ für deine gesamte Website in einer layout.tsx-Datei. Zum anderen bieten sie die Möglichkeit, von einzelnen Seiten exportiert zu werden. Dadurch kannst du ein Höchstmaß an Granularität und Effektivität erzielen.

Es mag zwar etwas abstrakt klingen, aber ich zeige dir gerne, wie ich statische Metadaten in meinem Blog umgesetzt habe. Diese wenigen Zeilen erzeugen bereits einen Fallback für den Titel und die Beschreibung auf meiner gesamten Next.js-Website. Sollten also keine weiteren Angaben auf den Seiten oder in den Blogbeiträgen gemacht sein, greift diese Definition automatisch.

// app/layout.tsx
export const metadata: Metadata = {
  title: "Friedrich Siever - Webdesginer Hamburg",
  description: "Moderne Websites, Webentwicklung and Webdesign",
};
// ... export default function RootLayout({ ... })

Mit diesem Grundprinzip kannst du die Basismetadaten für alle Unterseiten in deiner layout.tsx-Datei im App-Ordner definieren, und diese können bei Bedarf überschrieben werden. Dabei bietet es sich an, für den Titel ein sogenanntes Template zu verwenden. In einem ‘robots’-Objekt können wir wesentliche Informationen für Suchmaschinen im Allgemeinen und spezielle Crawler, wie die von Google, bereitstellen. Um Daten wiederverwenden zu können, habe ich diese Informationen in ein separates Objekt namens ‘siteMeta’ ausgelagert. Und los geht’s:

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL(siteMetadata.siteUrl),
  title: {
    template: \'%s | \${siteMetadata.title}\',
    default: siteMetadata.title
  },
  description: siteMetadata.description,
  openGraph: {
    title: siteMetadata.title,
    description: siteMetadata.description,
    url: siteMetadata.siteUrl,
    siteName: siteMetadata.title,
    images: [siteMetadata.socialBanner],
    locale: 'de_DE',
    type: 'website'
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: false,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1
    }
  },
  twitter: {
    card: 'summary_large_image',
    title: siteMetadata.title,
    images: [siteMetadata.socialBanner]
  }
}
// export default function RootLayout({ ...})

Dynamische Metadaten für dynamische Routen

Und hier ist sie wieder. Die gewisse Magie, die Next.js innewohnt und es zu dem bei weitem beliebtesten Frontend-Framework für Websites gemacht hat. Bei den Metadaten kommt diese Magie mit der asynchronen Funktion generateMetadata zum Ausdruck. Denn Next.js sieht für dynamische Routen eine grandiose Lösung vor, die dir hilft, dein SEO durch individuelle Title und Description Tags auf das nächste Level zu heben.

Oder anders formuliert: Dynamische Metadaten hängen von dynamischen Informationen ab, wie beispielsweise den aktuellen Routenparametern, externen Daten oder Metadaten in übergeordneten Segmenten, und können durch Exportieren einer generateMetadata-Funktion realisiert werden, die ein Metadatenobjekt zurückgibt.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  return {
    title: '...',
    ...
  }
}

Auf den dynamisch erzeugten Seiten solltest du auf diese Technik zurückgreifen, um deine MetaBeschreibungen und openGraph Angaben entsprechend zu dynamisieren. So sieht z.B. die Implementation für meine Blog-Einzelseiten (posts) aus.

// app/blog/[slug]/page.tsx
export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata,
): Promise<Metadata> {
  // get my Post data via contentlayer
  const post = allPosts.find(
    (post) => post._raw.flattenedPath === "blog/" + params.slug,
  );
  const fallBackImageUrl = siteMetadata.socialBanner;
  const PostImageUrl = post?.image.filePath.replace("../public", "");
  const ogImages: { url: string }[] = [];
  if (PostImageUrl) {
    ogImages.push({ url: PostImageUrl });
  }
  ogImages.push({ url: fallBackImageUrl });
  return {
    title: post?.title,
    description: post?.description,
    openGraph: {
      title: post?.title,
      description: post?.description,
      url: siteMetadata.siteUrl + post?.url, // computed field by content layer!
      siteName: siteMetadata.title,
      images: [{ url: "/social-banner.jpg" }, { url: "/posts/bg-2.jpg" }],
      locale: "de_DE",
      type: "article",
      publishedTime: convertToIsoString(post?.publishedAt),
      modifiedTime: convertToIsoString(
        post && post.updatedAt ? post.updatedAt : post?.publishedAt,
      ),
    },
  };
}

Mittlerweile verwende ich für meine Website aus verschiedenen Gründen zwar Astro.io, aber da ich auch immer wieder an Next.js arbeite, werde ich den Beitrag trotzdem weiter aktualisieren.

0
0 Bewertungen

Jetzt selbst bewerten