¿Problemas de indexación en Google por una mala configuración de hreflang en Next.js? Vamos al grano.

El truco

Antes (mal)

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <link rel="alternate" hrefLang="en-us" href="https://example.com/en-us" />
        <link rel="alternate" hrefLang="es-es" href="https://example.com/es-es" />
        <link rel="alternate" hrefLang="x-default" href="https://example.com" />
      </Head>
      <h1>Mi página de ejemplo</h1>
    </div>
  );
}

Después (bien)

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <link rel="alternate" hrefLang="en-US" href="https://example.com/en-us" />
        <link rel="alternate" hrefLang="es-ES" href="https://example.com/es-es" />
        <link rel="alternate" hrefLang="x-default" href="https://example.com" />
      </Head>
      <h1>Mi página de ejemplo</h1>
    </div>
  );
}

Google es sensible a las inconsistencias en los códigos de idioma. Usa siempre los códigos correctos siguiendo el estándar BCP 47. En el ejemplo, “en-us” y “es-es” se convierten en “en-US” y “es-ES”. Asegúrate de que los enlaces y los idiomas sean precisos para evitar problemas de indexación.

Un ajuste tan sencillo como este puede marcar la diferencia entre ser encontrado en el idioma correcto o no ser indexado apropiadamente.