Wie man Seitenmetadaten in Next.js (Pages Router) v16 übersetzt

Problem

Seiten-Metadaten – Titel und Beschreibungen – erscheinen außerhalb des eigentlichen Seiteninhalts. Sie werden in Browser-Tabs, Lesezeichen, Suchmaschinenergebnissen und Social-Media-Vorschauen angezeigt. Wenn Metadaten nicht mit der Sprache der Seite übereinstimmen, stoßen Benutzer auf eine störende Inkonsistenz, bevor sie überhaupt den Inhalt sehen. Eine spanische Seite mit einem englischen Titel verwirrt Besucher und signalisiert eine mangelhafte Lokalisierungsqualität.

Suchmaschinen interpretieren Sprachinkongruenzen als Indikatoren für minderwertige Lokalisierung, was möglicherweise zu niedrigeren Rankings in sprachspezifischen Ergebnissen führt. Social-Media-Plattformen zeigen die falsche Sprache in Link-Vorschauen an, was das Engagement internationaler Zielgruppen reduziert. Eine konsistente Übersetzung über alle Berührungspunkte hinweg – einschließlich Metadaten – ist essenziell für eine professionelle mehrsprachige Erfahrung.

Lösung

Übersetzen Sie Seiten-Metadaten mit denselben Übersetzungsressourcen wie den Seiteninhalt. Verwenden Sie den useIntl-Hook von react-intl, um auf übersetzte Strings zuzugreifen und platzieren Sie diese in der <Head>-Komponente der Seite. Dies stellt sicher, dass Titel und Beschreibungen in Browser-Tabs, Suchergebnissen und Social-Media-Vorschauen mit der aktuellen Sprache übereinstimmen.

Indem Sie Metadaten aus denselben Nachrichtenkatalogen wie sichtbare Inhalte beziehen, erhalten Sie Konsistenz und vermeiden doppelten Übersetzungsaufwand. Dieser Ansatz funktioniert sowohl für statische Seiten als auch für dynamische Routen, bei denen Metadaten von seitenspezifischen Daten abhängen.

Schritte

1. Fügen Sie Metadaten-Nachrichten zu Ihren Übersetzungsdateien hinzu

Definieren Sie Nachrichtendeskriptoren für Seitentitel und -beschreibungen in Ihren Übersetzungskatalogen und verwenden Sie dieselbe Struktur wie bei anderen übersetzten Inhalten.

{
"home.title": "Willkommen in unserem Shop",
"home.description": "Entdecken Sie tolle Produkte zu günstigen Preisen",
"products.title": "Unsere Produkte",
"products.description": "Durchstöbern Sie unseren vollständigen Artikelkatalog"
}

Jede Seite, die übersetzte Metadaten benötigt, sollte entsprechende Nachrichten-IDs für ihren Titel und ihre Beschreibung haben.

2. Erstelle eine übersetzte Metadaten-Komponente

Verwende den useIntl Hook, um auf die formatMessage Funktion zuzugreifen, und rendere dann übersetzte Strings innerhalb der Head Komponente.

import Head from "next/head";
import { useIntl } from "react-intl";

export default function HomePage() {
  const intl = useIntl();

  return (
    <>
      <Head>
        <title>{intl.formatMessage({ id: "home.title" })}</title>
        <meta
          name="description"
          content={intl.formatMessage({ id: "home.description" })}
        />
      </Head>
      <main>
        <h1>{intl.formatMessage({ id: "home.title" })}</h1>
      </main>
    </>
  );
}

Die Head Komponente ist eine in Next.js integrierte React-Komponente, mit der du den <head> einer Seite modifizieren kannst. Die formatMessage Funktion gibt den übersetzten String für das aktuelle Gebietsschema zurück.

Erweitere das Muster, um Open Graph und Twitter Card Metadaten für Social-Media-Vorschauen einzuschließen.

import Head from "next/head";
import { useIntl } from "react-intl";

export default function ProductsPage() {
  const intl = useIntl();
  const title = intl.formatMessage({ id: "products.title" });
  const description = intl.formatMessage({ id: "products.description" });

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={description} />
      </Head>
      <main>
        <h1>{title}</h1>
      </main>
    </>
  );
}

Durch das Speichern der formatierten Nachrichten in Variablen wird vermieden, dass formatMessage mehrmals für dieselbe Übersetzung aufgerufen wird, und der JSX-Code bleibt übersichtlicher.

4. Behandle dynamische Metadaten für parametrisierte Seiten

Für Seiten mit dynamischen Routen kombiniere Routenparameter mit übersetzten Strings, um kontextbezogene Metadaten zu erstellen.

import Head from "next/head";
import { useIntl } from "react-intl";
import { useRouter } from "next/router";

export default function ProductDetailPage() {
  const intl = useIntl();
  const router = useRouter();
  const { id } = router.query;

  const title = intl.formatMessage(
    { id: "product.detail.title" },
    { productId: id },
  );

  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <main>
        <h1>{title}</h1>
      </main>
    </>
  );
}

Message-Deskriptoren unterstützen Variableninterpolation, wodurch du dynamische Werte wie Produkt-IDs oder Namen in übersetzte Metadaten-Strings einfügen kannst. Die entsprechende Nachricht könnte "Produkt {productId} - Unser Shop" lauten.