Cómo traducir metadatos de página en Next.js (Enrutador de páginas) v16

Traducir metadatos para búsqueda y redes sociales

Problema

Los metadatos de la página —títulos y descripciones— aparecen fuera del contenido de la página en sí. Se muestran en las pestañas del navegador, marcadores, resultados de motores de búsqueda y vistas previas en redes sociales. Cuando los metadatos no coinciden con el idioma de la página, los usuarios encuentran una inconsistencia desconcertante antes incluso de ver el contenido. Una página en español con un título en inglés confunde a los visitantes y señala una mala calidad de localización.

Los motores de búsqueda interpretan las discrepancias de idioma como indicadores de localización de baja calidad, potencialmente reduciendo el posicionamiento en resultados específicos por idioma. Las plataformas de redes sociales muestran el idioma incorrecto en las vistas previas de enlaces, reduciendo la interacción de audiencias internacionales. La traducción consistente en todos los puntos de contacto —incluidos los metadatos— es esencial para una experiencia multilingüe profesional.

Solución

Traduce los metadatos de la página utilizando los mismos recursos de traducción que el contenido de la página. Utiliza el hook useIntl de react-intl para acceder a las cadenas traducidas y colócalas en el componente <Head> de la página. Esto asegura que los títulos y descripciones coincidan con el idioma actual en las pestañas del navegador, resultados de búsqueda y vistas previas sociales.

Al obtener los metadatos de los mismos catálogos de mensajes que el contenido visible, mantienes la consistencia y evitas duplicar el esfuerzo de traducción. Este enfoque funciona tanto para páginas estáticas como para rutas dinámicas donde los metadatos dependen de datos específicos de la página.

Pasos

1. Añade mensajes de metadatos a tus archivos de traducción

Define descriptores de mensajes para títulos y descripciones de páginas en tus catálogos de traducción, utilizando la misma estructura que otro contenido traducido.

{
"home.title": "Bienvenido a nuestra tienda",
"home.description": "Descubre productos increíbles a excelentes precios",
"products.title": "Nuestros productos",
"products.description": "Explora nuestro catálogo completo de artículos"
}

Cada página que necesite metadatos traducidos debe tener IDs de mensajes correspondientes para su título y descripción.

2. Crear un componente de metadatos traducido

Utiliza el hook useIntl para acceder a la función formatMessage, luego renderiza las cadenas traducidas dentro del componente Head.

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

El componente Head es un componente de React integrado en Next.js que te permite modificar el <head> de una página. La función formatMessage devuelve la cadena traducida para el idioma actual.

3. Añadir metadatos de Open Graph y redes sociales

Extiende el patrón para incluir metadatos de Open Graph y Twitter Card para vistas previas en redes sociales.

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

Almacenar los mensajes formateados en variables evita llamar a formatMessage múltiples veces para la misma traducción y mantiene el JSX más limpio.

4. Manejar metadatos dinámicos para páginas parametrizadas

Para páginas con rutas dinámicas, combina los parámetros de ruta con cadenas traducidas para crear metadatos contextuales.

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

Los descriptores de mensajes admiten la interpolación de variables, lo que te permite inyectar valores dinámicos como IDs o nombres de productos en las cadenas de metadatos traducidas. El mensaje correspondiente podría ser "Producto {productId} - Nuestra Tienda".