Haz tu aplicación Next.js 16 invencible con hreflang, ¡evita errores fatales!
Configura correctamente hreflang en Next.js 16 para evitar eliminar páginas traducidas de Google.
Si has notado que Google está eliminando tus páginas traducidas, puede que estés configurando mal el hreflang en tu proyecto Next.js 16.
El truco
Código ANTES (mal):
// _document.js
export default function Document() {
return (
<Html>
<Head>
<link rel="alternate" hrefLang="en" href="https://example.com/en" />
<link rel="alternate" hrefLang="es" href="https://example.com/es" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Código DESPUÉS (bien):
// _document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head>
<link rel="alternate" hrefLang="en" href="https://example.com/en" />
<link rel="alternate" hrefLang="es" href="https://example.com/es" />
<link rel="alternate" hrefLang="x-default" href="https://example.com" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
El problema suele ser un hreflang incorrecto o incompleto. Asegúrate de incluir siempre un hrefLang="x-default" para evitar que Google descuide tus páginas. Esto le dice a los motores de búsqueda cuál es la URL por defecto cuando no hay una traducción específica para el idioma del usuario.
Asegúrate de que tus hrefLang apuntan a las URLs correctas y que el atributo x-default está presente para que Google indexe adecuadamente tu contenido multilingüe.