Wie man Seitenmetadaten in React Router v7 übersetzt

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 Benutzer, bevor sie überhaupt den Inhalt sehen. Suchmaschinen interpretieren diese Diskrepanz als Signal dafür, dass die Seite schlecht lokalisiert oder von minderer Qualität ist, was möglicherweise zu einer niedrigeren Einstufung in sprachspezifischen Ergebnissen führt. Benutzer könnten die Seite verlassen, bevor sie geladen wird, da sie annehmen, dass sie nicht in ihrer Sprache verfügbar ist.

Lösung

Übersetzen Sie Seiten-Metadaten, damit sie mit der aktuellen Sprache übereinstimmen, indem Sie eine Meta-Funktion aus Ihrem Routenmodul exportieren. Verwenden Sie die formatMessage-API von react-intl mit Message Descriptors, um Titel- und Beschreibungsstrings zu übersetzen und sicherzustellen, dass Metadaten dieselben Übersetzungsressourcen wie der Seiteninhalt verwenden. Dies sorgt für Konsistenz zwischen dem, was in Browser-Tabs, Suchergebnissen und auf der Seite selbst angezeigt wird.

Schritte

1. Erstellen Sie einen Helper für den Zugriff auf intl außerhalb von Komponenten

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

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 Nachrichten in jeder Funktion formatieren kann, nicht nur in React-Komponenten.

2. Laden Sie Nachrichten in einem übergeordneten Routen-Loader

Route-Loader geben Daten zurück, auf die Komponenten über loaderData-Props zugreifen. Laden Sie Ihre Übersetzungsnachrichten 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 die Loader-Daten übergeordneter Routen für Meta-Funktionen untergeordneter Routen zugänglich werden.

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

Exportieren Sie eine Meta-Funktion aus Ihrem Route-Modul, die ein Array von Meta-Deskriptor-Objekten zurückgibt. Greifen Sie auf die Loader-Daten der übergeordneten Route 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-Deskriptor mit einer ID und einer defaultMessage und gibt den übersetzten String für das aktuelle Gebietsschema zurück.

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

Fügen Sie die Metadaten-Übersetzungsschlüssel zu jeder Gebietsschema-Nachrichtendatei 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 Route-Meta-Exporten erstellt wurden, und zeigt übersetzte Titel und Beschreibungen an, die der Seitensprache entsprechen.