Tus páginas en varios idiomas pueden desaparecer de los resultados de Google si no usas hreflang correctamente en Next.js 16.

El truco

// Antes (mal)
export async function getStaticProps() {
  return {
    props: {
      hreflangs: []
    }
  };
}

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

export async function getStaticProps() {
  const hreflangs = [
    { href: 'https://example.com/en', lang: 'en' },
    { href: 'https://example.com/es', lang: 'es' }
  ];

  return {
    props: {
      hreflangs
    }
  };
}

export default function MyPage({ hreflangs }) {
  return (
    <>
      <Head>
        {hreflangs.map(({ href, lang }) => (
          <link key={lang} rel="alternate" hrefLang={lang} href={href} />
        ))}
      </Head>
      <p>Contenido de la página</p>
    </>
  );
}

El código antes del truco no incluye etiquetas hreflang, lo que puede hacer que tus páginas no sean indexadas correctamente por Google. Después del truco, generamos dinámicamente estas etiquetas usando next/head para cada variante de idioma de la página. Esto asegura que Google sepa exactamente qué versión mostrar a los usuarios dependiendo de su configuración de idioma.

Una implementación correcta de hreflang es clave para la visibilidad de tu contenido multilingüe en los resultados de búsqueda de Google.