Las etiquetas hreflang mal configuradas pueden hacer que Google ignore tus páginas traducidas.

El truco

// Antes (mal)
import Head from 'next/head';

export default function MyPage() {
  return (
    <Head>
      <link rel="alternate" hrefLang="en" href="https://example.com/en" />
      <link rel="alternate" hrefLang="es" href="https://example.com/es" />
    </Head>
  );
}

// Después (bien)
import Head from 'next/head';

export default function MyPage() {
  const locales = [
    { lang: 'en', url: 'https://example.com/en' },
    { lang: 'es', url: 'https://example.com/es' },
  ];

  return (
    <Head>
      {locales.map(({ lang, url }) => (
        <link key={lang} rel="alternate" hrefLang={lang} href={url} />
      ))}
      <link rel="alternate" hrefLang="x-default" href="https://example.com" />
    </Head>
  );
}

Para asegurar que tus etiquetas hreflang están correctamente configuradas, usa un array de objetos que contenga los idiomas y URLs correspondientes. Implementa estas etiquetas en el componente Head de Next.js usando un map para iterar sobre el array. Añade también un elemento x-default para señalar la versión por defecto de la página.

Un uso adecuado de hreflang mejora el SEO de tus páginas traducidas y garantiza que Google las indexe correctamente.