404 que ayuda: convierte el error en un atajo (copys, bloques y plantillas)

Una 404 no es un callejón: es un cruce bien señalizado. Alguien llegó a una URL rota o antigua; no necesita chistes internos ni un muro: necesita volver al camino. Hoy montamos una página 404 que ayuda: copys humanos, bloques mínimos (buscador, enlaces útiles, mapa simple), un toque de humor medido que no estorba, accesibilidad y una mini–analítica para arreglar lo que se rompe. Plantillas y fragmentos listos para pegar.

Objetivo de una 404 (en 10 segundos)

• Reconocer el error sin culpar al lector (“No encontramos lo que buscabas”).
• Ofrecer 3 salidas claras: buscar, ir a lo popular, volver a inicio.
• Dejar pista para reportar enlaces rotos (sin burocracia).

“Respeto + tres salidas + un reporte opcional. Nada más.”

Estructura en 5 bloques (simple, legible y en móvil)

Nada de parrafadas. Todo debe caber “above the fold” en móvil excepto el mapa simple.

Copys listos para pegar (humanos y sin regañar)

Vaya. Esa página no está.
Puede que el enlace sea antiguo o tenga una letra cambiada.
Prueba a buscar o usa uno de estos atajos:

Atajos (edita a tu casa)

• Publicar sin sustos (página guía)
• Checklist de publicación (10’)
• Títulos honestos (30 moldes)
• Primera pantalla (promesa · escena · puerta)
• Alt-text sin humo
• Enlaces internos que guían

Nota de reporte

“¿Te sobran 5 segundos? Envíame este enlace roto y lo arreglo.”

Fragmento de HTML accesible (adáptalo a tu tema)

<main id="main" tabindex="-1">
  <h1>Vaya. Esa página no está.</h1>
  <p>Puede que el enlace sea antiguo o tenga una letra cambiada.</p>

  <form role="search" method="get" action="/" aria-label="Buscar en el sitio">
    <label for="q" class="sr-only">Buscar</label>
    <input id="q" name="s" type="search" placeholder="Busca título o palabra clave" 
           aria-describedby="hint" autofocus>
    <button type="submit">Buscar</button>
    <small id="hint">Ej.: “checklist”, “títulos honestos”.</small>
  </form>

  <section aria-labelledby="atajos">
    <h2 id="atajos">Atajos útiles</h2>
    <ul>
      <li><a href="/publicar-sin-sustos">Publicar sin sustos (página guía)</a></li>
      <li><a href="/checklist-publicacion">Checklist de publicación (10’)</a></li>
      <li><a href="/titulos-honestos">Títulos honestos (30 moldes)</a></li>
      <li><a href="/primera-pantalla">Primera pantalla (promesa · escena · puerta)</a></li>
    </ul>
  </section>

  <section aria-labelledby="mapa">
    <h2 id="mapa">Mapa rápido</h2>
    <nav aria-label="Categorías principales">
      <ul>
        <li><a href="/categoria/blog">Blog & publicación</a></li>
        <li><a href="/categoria/escritura">Escritura llana</a></li>
        <li><a href="/categoria/ux">UX & accesibilidad</a></li>
      </ul>
    </nav>
  </section>

  <p>¿Te sobran 5 segundos? <a href="/reporte-404?url={URL}">Envíame este enlace roto</a> y lo arreglo.</p>
</main>

La clase .sr-only es el típico helper de accesibilidad de tu tema (texto solo para lectores de pantalla). Si no la tienes, añade una.

Humor, sí; pero de apoyo (no de excusa)

• Primero ayuda, luego un guiño corto (si es tu voz): “Mientras tanto, te llevo a la casa”.
• Evita chistes internos, memes privados o culpar a quien llega.
• No anules foco: que el chiste no tape el buscador ni los atajos.

Accesibilidad mínima (que marca la diferencia)

• H1 claro + foco en buscador al cargar (autofocus).
• Contraste suficiente (texto sobre beige/azul/rojo de la serie).
• Enlaces descriptivos (“Checklist de publicación”), no “aquí”.
• Rol/aria en búsqueda y regiones (role="search", aria-labelledby).

Analítica sin humo para la 404 (arreglar, no coleccionar datos)

Apunta 3 cosas: URL de referencia (de dónde venían), qué buscaron en el campo y a qué atajo hicieron clic. Con eso:

• Si muchas 404 vienen de un mismo post → corrige enlace en ese post.
• Si buscan títulos de posts antiguos → crea redirección 301 del viejo al nuevo.
• Si nadie usa los atajos → cambia la lista (pon tu top 5 real).

Registro simple (hoja):
Fecha · URL 404 · Referer · Búsqueda · Clic en atajo · Acción tomada

Redirecciones 301 (cuándo ponerlas y cuándo no)

Antes / Después (de pared seca a mano tendida)

“404 — Página no encontrada” 
[No hay buscador]
[Sin enlaces útiles]

Vaya. Esa página no está.
Puede que el enlace sea antiguo. Prueba a buscar:
[Buscador grande con foco]
Atajos: Checklist · Títulos honestos · Primera pantalla
[Mapa simple y botón de reporte]

Plantillas de texto (bloques rápidos)

Título + explicación

Vaya. Esa página no está. 
Puede que el enlace sea antiguo o tenga una letra cambiada.

Llamada a búsqueda

“Busca un título o palabra clave y te llevo.”

Botón de reporte

“Envíame este enlace roto (lo arreglo y te doy las gracias).”

Checklist pegada al editor

[ ] H1 claro + tono humano
[ ] Explicación en 1 línea (sin culpar)
[ ] Buscador con foco al cargar
[ ] 3–6 atajos reales (populares/guías)
[ ] Mapa simple de categorías
[ ] Enlaces descriptivos (nada de “aquí”)
[ ] Botón/reportar enlace roto
[ ] Contraste y roles/aria correctos
[ ] Mini–analítica: referrer · búsqueda · clic
[ ] Redirecciones 301 solo cuando tiene sentido

Hoja de una cara (para imprimir y no liarte)

404 QUE AYUDA — GUÍA RÁPIDA
Meta: reconocer error · 3 salidas · reporte fácil
Bloques: H1 humano · 1 línea · buscador · atajos (3–6) · mapa + reporte
Accesibilidad: foco en buscador · enlaces descriptivos · contraste · aria
Analítica: referrer · búsqueda · clic en atajo → corrección/301
Humor: opcional, corto, nunca tapa la ayuda
Regla: si en 10 s no puedes volver al camino, la 404 falla

Cierre

La 404 es la prueba de fuego de tu casa: cuando alguien se pierde, ¿le pones una mano o una pared? Con dos copys claros, un buscador con foco y 4 atajos reales, conviertes el error en atajo. Si hoy solo puedes con una cosa, añade buscador + 4 atajos. Mañana pones el botón de reporte y la mini–analítica. Y listo.