So übersetzen Sie Seiten-Metadaten in Next.js (Pages Router) v16

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 irritierende Inkonsistenzen, bevor sie überhaupt den Inhalt sehen. Eine spanische Seite mit einem englischen Titel verwirrt Besucher und signalisiert schlechte Lokalisierungsqualität.

Suchmaschinen interpretieren Sprachinkongruenzen als Indikatoren für minderwertige Lokalisierung, was potenziell 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. Konsistente Übersetzung über alle Touchpoints hinweg – einschließlich Metadaten – ist für ein professionelles mehrsprachiges Erlebnis unerlässlich.

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 diese in der <Head>-Komponente der Seite zu platzieren. Dies stellt sicher, dass Titel und Beschreibungen mit dem aktuellen Gebietsschema in Browser-Tabs, Suchergebnissen und Social-Media-Vorschauen übereinstimmen.

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

Schritte

1. Metadaten-Nachrichten zu Ihren Übersetzungsdateien hinzufügen

Definieren Sie Nachrichtendeskriptoren für Seitentitel und -beschreibungen in Ihren Übersetzungskatalogen, wobei Sie dieselbe Struktur wie für andere übersetzte Inhalte verwenden.

{
"home.title": "Welcome to Our Store",
"home.description": "Discover amazing products at great prices",
"products.title": "Our Products",
"products.description": "Browse our full catalog of items"
}

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

2. Eine übersetzte Metadaten-Komponente erstellen

Verwenden Sie den useIntl-Hook, um auf die formatMessage-Funktion zuzugreifen, und rendern Sie 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 Sie den <head> einer Seite ändern können. Die formatMessage-Funktion gibt den übersetzten String für das aktuelle Gebietsschema zurück.

Erweitern Sie 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>
    </>
  );
}

Das Speichern der formatierten Nachrichten in Variablen vermeidet mehrfaches Aufrufen von formatMessage für dieselbe Übersetzung und hält das JSX übersichtlicher.

4. Dynamische Metadaten für parametrisierte Seiten verarbeiten

Kombinieren Sie bei Seiten mit dynamischen Routen die 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, sodass Sie dynamische Werte wie Produkt-IDs oder Namen in übersetzte Metadaten-Strings einfügen können. Die entsprechende Nachricht könnte "Product {productId} - Our Store" lauten.