So übersetzen Sie Seiten-Metadaten in React Router v7

Problem

Seiten-Metadaten – Titel und Beschreibungen – erscheinen außerhalb der Seite selbst: in Browser-Tabs, Lesezeichen, Suchergebnissen und Social-Media-Vorschauen. Wenn diese Metadaten nicht mit der Sprache der Seite übereinstimmen, entsteht eine störende Inkonsistenz. Eine spanische Seite mit einem englischen Titel verwirrt Nutzer, bevor sie überhaupt den Inhalt sehen. Suchmaschinen interpretieren diese Diskrepanz als Signal, dass die Seite schlecht lokalisiert oder von geringer Qualität ist, was möglicherweise ihr Ranking in sprachspezifischen Ergebnissen senkt. Nutzer verlassen die Seite möglicherweise, bevor sie geladen wird, in der Annahme, dass sie nicht in ihrer Sprache verfügbar ist.

Lösung

Übersetzen Sie Seiten-Metadaten so, dass sie mit der aktuellen Sprache übereinstimmen, indem Sie eine meta-Funktion aus Ihrem Route-Modul exportieren. Verwenden Sie die formatMessage-API von react-intl mit Message Descriptors, um Titel- und Beschreibungsstrings zu übersetzen. So stellen Sie sicher, dass Metadaten dieselben Übersetzungsressourcen wie der Seiteninhalt verwenden. Dies gewährleistet Konsistenz zwischen dem, was in Browser-Tabs, Suchergebnissen und auf der Seite selbst angezeigt wird.

Schritte

1. Erstellen Sie einen Helper, um auf intl außerhalb von Komponenten zuzugreifen

Das intl-Objekt stellt formatMessage bereit und kann über den useIntl-Hook in Komponenten aufgerufen oder direkt mit createIntl in Nicht-React-Umgebungen erstellt werden. Da die meta-Funktion außerhalb des React-Komponentenbaums ausgeführt wird, erstellen Sie einen Helper, der eine intl-Instanz aus Ihren Messages aufbaut.

import { createIntl, createIntlCache } from "react-intl";

const cache = createIntlCache();

export function createIntlForLocale(
  locale: string,
  messages: Record<string, string>,
) {
  return createIntl(
    {
      locale,
      messages,
    },
    cache,
  );
}

Dieser Helper erstellt eine intl-Instanz, die Messages in jeder Funktion formatieren kann, nicht nur in React-Komponenten.

2. Laden Sie Messages in einem übergeordneten Route-Loader

Route-Loader geben Daten zurück, auf die Komponenten über loaderData-Props zugreifen. Laden Sie Ihre Übersetzungs-Messages in einer übergeordneten Route, damit sie für untergeordnete Routen verfügbar sind.

import type { Route } from "./+types/root";

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const locale = url.pathname.split("/")[1] || "en";

  const messages = await import(`../translations/${locale}.json`);

  return {
    locale,
    messages: messages.default,
  };
}

Die Meta-Funktion erhält einen matches-Parameter, der Loader-Daten von allen übereinstimmenden Routen enthält, wodurch übergeordnete Loader-Daten für untergeordnete Routen-Meta-Funktionen zugänglich werden.

3. Exportieren Sie eine Meta-Funktion, die Metadaten übersetzt

Exportieren Sie eine Meta-Funktion aus Ihrem Routen-Modul, die ein Array von Meta-Deskriptor-Objekten zurückgibt. Greifen Sie auf die übergeordneten Loader-Daten aus matches zu und verwenden Sie Ihren intl-Helper, um Strings zu übersetzen.

import type { Route } from "./+types/product";
import { createIntlForLocale } from "~/utils/intl";

export function meta({ matches }: Route.MetaArgs) {
  const rootMatch = matches.find((match) => match.id === "root");
  const { locale, messages } = rootMatch?.data || {
    locale: "en",
    messages: {},
  };

  const intl = createIntlForLocale(locale, messages);

  return [
    {
      title: intl.formatMessage({
        id: "product.meta.title",
        defaultMessage: "Product Details",
      }),
    },
    {
      name: "description",
      content: intl.formatMessage({
        id: "product.meta.description",
        defaultMessage: "View detailed information about this product",
      }),
    },
  ];
}

Die formatMessage-Funktion akzeptiert einen Message Descriptor mit einer id und defaultMessage und gibt den übersetzten String für das aktuelle Gebietsschema zurück.

4. Fügen Sie übersetzte Metadaten-Strings zu Ihren Message-Dateien hinzu

Fügen Sie die Metadaten-Übersetzungsschlüssel zu der Message-Datei jedes Gebietsschemas hinzu, damit formatMessage sie finden kann.

{
  "product.meta.title": "Détails du produit",
  "product.meta.description": "Voir les informations détaillées sur ce produit"
}

Wenn Benutzer zu dieser Route navigieren, rendert die Meta-Komponente in Ihrem Root-Layout alle Meta-Tags, die von Routen-Meta-Exporten erstellt wurden, und zeigt übersetzte Titel und Beschreibungen an, die der Seitensprache entsprechen.