Cómo vincular versiones de idiomas alternativos en Next.js (Pages Router) v16

Vincula alternativas de idioma para motores de búsqueda

Problema

Cuando un sitio web ofrece el mismo contenido en varios idiomas, los motores de búsqueda encuentran URLs separadas para cada versión sin comprender su relación. Un usuario francés que realiza una búsqueda podría ver la versión en inglés clasificada más alta que la francesa, aunque ambas existan. De manera similar, una página en inglés y su traducción al francés podrían tratarse como duplicados competidores en lugar de alternativas coordinadas. Sin señales explícitas que conecten estas versiones de idioma, los motores de búsqueda no pueden servir con confianza la versión más apropiada a los usuarios según sus preferencias de idioma, lo que genera una autoridad de clasificación fragmentada y una mala experiencia de usuario.

Solución

Añade elementos link con atributos hreflang a la sección head de cada página, listando todas las versiones de idioma incluyendo la página misma. Cada variante de página debe incluir un conjunto idéntico de enlaces que referencien todas las versiones de idioma disponibles. Este enlace bidireccional garantiza que los motores de búsqueda reconozcan las páginas como traducciones en lugar de duplicados, permitiéndoles servir la versión de idioma correcta a los usuarios según las preferencias del navegador y el contexto de búsqueda.

Pasos

1. Crea un componente para generar enlaces de idiomas alternativos

Importa el componente Head desde next/head para modificar los metadatos de la página. Accede a la información de locale mediante el hook useRouter para construir enlaces para todas las versiones de idioma disponibles.

import Head from "next/head";
import { useRouter } from "next/router";

interface AlternateLinksProps {
  path?: string;
}

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, locale: currentLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

El componente mapea sobre los locales disponibles desde el router y genera elementos link dinámicamente para todas las páginas.

2. Añade el componente a las páginas que tienen traducciones

Incluye el componente AlternateLinks en cada componente de página que exista en varios idiomas.

import AlternateLinks from "@/components/AlternateLinks";

export default function AboutPage() {
  return (
    <>
      <AlternateLinks />
      <main>
        <h1>About Us</h1>
      </main>
    </>
  );
}

El componente garantiza que cada página incluya el conjunto completo de enlaces alternativos, cumpliendo con el requisito de que todas las variantes se referencien entre sí.

3. Incluir un enlace de autorreferencia para la configuración regional actual

Cada página debe incluir una etiqueta hreflang de autorreferencia que indique su propio idioma. El componente ya gestiona esto iterando a través de todas las configuraciones regionales, incluida la actual.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

Cada página ahora incluye etiquetas hreflang que apuntan a sí misma junto con etiquetas para otras versiones.

4. Agregar un enlace de respaldo x-default

Agrega un enlace x-default para especificar qué versión deben ver los usuarios cuando su idioma no esté disponible.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, defaultLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales || !defaultLocale) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
      <link
        rel="alternate"
        hrefLang="x-default"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/${defaultLocale}${canonicalPath}`}
      />
    </Head>
  );
}

El enlace x-default dirige a los usuarios cuyas preferencias de idioma no coinciden a la configuración regional predeterminada.