¿Qué son los códigos de estado HTTP?

Los códigos de estado de respuesta HTTP indican si una solicitud HTTP específica se ha completado con éxito. Existen muchos códigos de estado, pero solo unos pocos son relevantes en el contexto del SEO.

Analicemos los más importantes.

200

El código de estado de éxito HTTP 200 OK indica que la solicitud se ha completado correctamente.

Para que una página sea indexada en Google, debe devolver el código de estado 200. Este es el código que normalmente deseas ver en tus páginas para que reciban tráfico orgánico. Es el código predeterminado que Next.js establece cuando renderiza una página con éxito.

301/308

El código de estado de redirección HTTP 301 Moved Permanently indica que el recurso solicitado se ha movido definitivamente a la URL de destino.

Esta es una redirección permanente. En general, es el tipo de redirección más utilizado.

Las redirecciones pueden usarse por diversas razones, pero la principal es indicar que una URL se ha movido de un punto A a un punto B. Son necesarias para asegurar que, si un contenido se mueve de un lugar a otro, no pierdas clientes actuales ni potenciales, y que los bots puedan seguir indexando tu sitio.

Nota: Las redirecciones permanentes en Next.js usan 308 por defecto en lugar de 301, ya que es la versión más nueva y se considera la mejor opción.

La principal diferencia entre estos dos códigos es que 301 permite cambiar el método de solicitud de POST a GET, mientras que 308 no lo permite.

Puedes activar una redirección 308 en Next.js devolviendo una redirección en lugar de props en la función getStaticProps().

//  pages/about.js
export async function getStaticProps(context) {
  return {
    redirect: {
      destination: '/',
      permanent: true, // activa 308
    },
  };
}

También puedes usar la clave permanent: true en redirecciones configuradas en next.config.js.

//next.config.js
 
module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true, // activa 308
      },
    ];
  },
};

302

El código de estado de redirección HTTP 302 Found indica que el recurso solicitado se ha movido temporalmente a la URL de destino.

En la mayoría de casos, las redirecciones 302 deberían ser 301. Una excepción sería si estás redirigiendo usuarios temporalmente a una página específica (ej. una página de promoción) o basado en su ubicación.

404

El código de estado de error de cliente HTTP 404 Not Found indica que el servidor no puede encontrar el recurso solicitado.

Como se mencionó anteriormente, las páginas que se mueven deberían redirigirse con un código de estado HTTP 301 a la nueva ubicación. Cuando esto no ocurre, las URLs pueden devolver un código de estado 404. Los códigos 404 no son necesariamente malos por defecto, ya que es el resultado esperado si un usuario visita una URL que no existe, pero no deberían ser un error frecuente en tus páginas ya que podría afectar negativamente tu posicionamiento en buscadores.

Next.js devolverá automáticamente un código de estado 404 para URLs que no existan en tu aplicación.

En algunos casos, también puedes querer devolver manualmente un código 404 desde una página. Puedes hacerlo devolviendo lo siguiente en lugar de props:

export async function getStaticProps(context) {
  return {
    notFound: true, // activa 404
  };
}

Puedes crear una página 404 personalizada que se genera estáticamente durante el build creando pages/404.js.

Ejemplo:

// pages/404.js
export default function Custom404() {
  return <h1>404 - Página no encontrada</h1>;
}

410

El código de estado de error de cliente HTTP 410 Gone indica que el acceso al recurso solicitado ya no está disponible en el servidor de origen y que esta condición probablemente sea permanente.

No se usa con frecuencia, pero podrías considerar este código de estado si eliminas contenido de tu sitio web que ya no existirá.

Ejemplos donde usar HTTP 410 Gone podría ser apropiado:

• E-Commerce: Productos eliminados permanentemente del inventario.
• Foro: Hilos eliminados por el usuario.
• Blog: Artículos eliminados del sitio.

Este código de estado informa a los bots que no deben volver a rastrear este contenido.

500

El código de estado HTTP 500 Internal Server Error indica que el servidor encontró una condición inesperada que le impidió completar la solicitud.

Next.js devolverá automáticamente un código de estado 500 para errores inesperados en la aplicación. Puedes crear una página de error 500 personalizada que se genera estáticamente durante el build creando pages/500.js.

Ejemplo:

// pages/500.js
export default function Custom500() {
  return <h1>500 - Error en el servidor</h1>;
}

503

El código de estado de error de servidor HTTP 503 Service Unavailable indica que el servidor no está listo para manejar la solicitud.

Se recomienda devolver este código de estado cuando tu sitio web esté caído y preveas que permanecerá inactivo por un período prolongado. Esto evita perder posicionamiento a largo plazo.