Cómo crear la página de error 404 perfecta
Publicado el Actualizado el 10 min de lectura
Seguro que alguna vez has llegado a una página de error 404 y has cerrado la pestaña sin pensarlo. Eso mismo hacen tus visitantes cuando se encuentran con la tuya si no está bien pensada. Pero esa página también puede ser una oportunidad para retener a quien se ha perdido.
En esta guía te cuento qué es una página 404, qué dice Google de ella, qué elementos debe tener, cómo crearla paso a paso y cómo comprobar que funciona. Lo técnico lo he contrastado con documentación oficial de Google y te dejo el enlace en cada caso. Las recomendaciones de diseño vienen de la guía oficial de WordPress, que también enlazo.
En 30 segundos
- Una página de error es lo que ve el visitante cuando entra en una URL que no existe en tu web.
- Google te permite personalizarla con navegación y enlaces útiles, pero manteniendo siempre el código 404.
- Los errores 404 no afectan al posicionamiento, así que el valor de una buena página 404 está en la experiencia del visitante.
- Debe tener un mensaje claro, caminos para seguir navegando, un buscador y el mismo diseño que el resto de tu web.
¿Qué es una página 404?
Es la página que muestra tu web cuando alguien intenta entrar en una dirección que no existe. El servidor responde con el código 404, que Google describe en Search Console como una página que no existe, y enseña un mensaje en lugar del contenido que se buscaba. Si quieres entender el error en sí, tienes la guía de qué es un error 404 y cómo afecta al SEO.
Antes de nada, conviene distinguir qué ve cada uno de los implicados, porque es la clave de todo lo que viene después.
Tu visitante
Ve un mensaje y los caminos que le ofreces para seguir navegando.
Lee el código de estado. Para los errores 4xx, ignora el contenido de la URL.
Tú
Controlas el diseño de la página y que devuelva el código correcto.
Qué dice Google sobre las páginas de error
Estas son las reglas oficiales, que son pocas pero importantes. Todo lo demás es diseño y experiencia de usuario.
| Tema | Lo que dice Google | Fuente |
|---|---|---|
| Personalización | Puedes personalizar la página de error con navegación y enlaces útiles, pero manteniendo el código 404. | Errores de rastreo |
| Código de estado | Si la página de error devuelve un 200, Search Console la registra como soft 404. | Códigos HTTP |
| Redirección | No conviene redirigir de forma masiva los 404 a la página principal. | Ayuda de Search Console |
| Robots.txt | No se recomienda bloquear los 404 con robots.txt ni crear contenido falso para ocultarlos. | Ayuda de Search Console |
| Efecto en el SEO | Los errores 404 no perjudican la indexación ni el posicionamiento. | Ayuda de Search Console |
| Presupuesto de rastreo | Los soft 404 siguen rastreándose y consumen presupuesto. | Gestión del rastreo |
¿Por qué merece la pena cuidar tu página 404?
Si Google dice que los 404 no afectan al posicionamiento, ¿para qué esforzarse? Por tu visitante. La guía oficial de WordPress propone convertir el error en una oportunidad para retener al visitante, y eso es justo lo que no hace una página genérica.
- Evita que el visitante se vaya. Una página que solo dice 'Page not found' no le deja más salida que cerrar la pestaña.
- Aprovecha un interés que ya existía. Quien llega a una 404 buscaba algo de tu web, y puedes llevarlo a otra parte.
- Transmite cuidado. Una 404 en tu idioma y con tu diseño muestra que has previsto el problema.
Qué debe tener una buena página 404
Esta tabla separa lo que viene de Google de lo que recomienda WordPress, para que sepas qué es norma y qué es buena práctica.
| Elemento | Qué aporta | Fuente |
|---|---|---|
| Código 404 | Evita que sea un soft 404. | |
| Navegación y enlaces útiles | Dan al visitante caminos para seguir. | |
| Mensaje claro y tranquilo | Una explicación breve y comprensible del problema. | WordPress |
| Idioma de tu web | WordPress cita como ejemplo a mejorar una página de error con el idioma sin cuidar. | WordPress |
| Buscador interno | Permite encontrar lo que se buscaba. | WordPress |
| Mismo diseño que el resto | El visitante nota que sigue en tu web. | WordPress |
| Vía de contacto | Una ayuda directa en el momento en que se ha perdido. | WordPress |
| Productos populares, en una tienda | Retiene al cliente sin saturarlo. | WordPress |
Los seis pilares en un vistazo
Mensaje cercano
Dice que la página no está, sin dramatismo y con tu tono.
Caminos claros
Enlaces a la portada, los servicios o los contenidos más útiles.
Buscador visible
Para quien buscaba algo concreto.
Diseño coherente
Tu menú, tu pie de página, tus colores y tu logo.
Idioma correcto
El mismo que el resto de tu web, no el de la plantilla.
Código 404
Lo único que Google exige. Nunca un 200.
Cómo crear tu página 404 paso a paso
- PlanificarDecide el mensaje y los caminos.
- DiseñarUsa el diseño de tu web.
- CrearEdita la plantilla 404.
- ComprobarVerifica que devuelve el código 404.
- VigilarRevisa los errores en Search Console.
En WordPress
El blog oficial de WordPress en español explica dos caminos, según el tipo de tema que uses, en sus consejos para la página de error 404.
| Tipo de tema | Cómo se hace |
|---|---|
| Tema clásico | Comprueba si el tema ya tiene un archivo 404.php. Si no lo tiene, copia index.php y renómbralo como 404.php, quita el código del bucle de entradas y añade tu contenido. |
| Tema de bloques | Ve a Apariencia, Editor, Plantillas, Página 404 y personalízala con el editor de bloques, sin tocar código. |
La misma guía recomienda probar el resultado con una URL inventada de tu dominio y usar un plugin para detectar enlaces rotos y crear redirecciones. Así reduces los 404 en lugar de solo mejorar la página.
En otras plataformas
Cada gestor de contenidos tiene su forma de hacerlo, así que consulta la ayuda oficial de tu plataforma. Lo importante es que, sea cual sea, la página devuelva el código 404.
Cómo comprobar que tu página 404 funciona
Una página 404 preciosa que devuelve un 200 es un soft 404. Estas son las comprobaciones que haría yo.
- Prueba con una URL inventada de tu dominio y comprueba que aparece tu plantilla, como sugiere WordPress.
- Revisa el código HTTP con la herramienta de inspección de URLs de Search Console, que según Google sirve para revisar el HTML renderizado y el código HTTP.
- Vigila los soft 404 en el informe de Indexación de páginas, donde Google indica que una página con mensaje de 'no encontrada' y código de éxito debe devolver un 404 real.
- Mantén las URLs inexistentes fuera del sitemap, que debe incluir solo las URLs que quieres ver en los resultados.
Mide para mejorar
La guía de WordPress propone medir los clics, los formularios enviados y los términos buscados en la página de error y revisar esos datos de forma periódica. Si llegan muchas visitas, seguramente tienes enlaces rotos que corregir.
Ejemplos de páginas 404 bien hechas
Ver ejemplos es la mejor forma de inspirarse. Estas tres marcas convierten un error en un momento de marca, y a mí me encantan.
GitHub
Un guiño a Star Wars con su mascota y el mensaje 'This is not the web page you are looking for' (esta no es la página que estás buscando). Además del humor, incluye un buscador y enlaces útiles para seguir navegando.
Pixar
Tristeza, la protagonista de 'Del revés', llora junto al mensaje 'Awww… Don’t Cry. It’s just a 404 Error!' (no llores, es solo un error 404). Un tono emocional que encaja con la marca y mantiene el menú de la web.
LEGO
Una minifigura sujeta dos cables desenchufados, una forma muy visual de decir que la conexión se ha cortado. Mantiene el menú, el buscador y un botón para volver a la página de inicio.
La guía de WordPress señala además a Mozilla como referente de página de error clara y útil.
Errores frecuentes al diseñar tu página de error
| Error | Por qué es un problema | Cómo evitarlo |
|---|---|---|
| Que devuelva un 200 | Se convierte en un soft 404. | Mantén el código 404. |
| Redirigir todos los errores a la portada | Google lo desaconseja. | Redirige solo si hay una página equivalente. |
| Dejar la plantilla en otro idioma | WordPress la cita como aspecto a mejorar. | Tradúcela y adapta el tono. |
| Una página sin salidas | Google propone navegación y enlaces útiles. | Añade enlaces, buscador y contacto. |
| Centrarse solo en el diseño | WordPress recuerda que conviene detectar los enlaces rotos y crear redirecciones para reducir los 404. | Corrige también el origen de los errores. |
Mitos sobre las páginas de error
| Mito | Realidad |
|---|---|
| 'Una buena página 404 mejora tu posicionamiento' | Google no lo dice. Afirma que los errores 404 no afectan al posicionamiento. Su valor está en retener al visitante. |
| 'Basta con que sea bonita' | No. Debe mantener el código 404, o será un soft 404. |
| 'Es mejor mandarlo todo a la portada' | No. Google desaconseja las redirecciones masivas a la página principal. |
| 'Hay que bloquearla con robots.txt' | No. Google no lo recomienda. |
Checklist de tu página de error
- Devuelve el código 404, nunca un 200
- Mensaje claro, cercano y sin alarmas
- Enlaces a la portada, a tus servicios y a tus contenidos destacados
- Buscador interno visible
- Mismo diseño, menú y pie de página que el resto de la web
- En el idioma de tu web
- Una vía de contacto o una llamada a la acción
- Revisión periódica de los errores en Search Console
Cuándo conviene pedir ayuda con tus páginas de error
Una buena página 404 es parte de una web sana, pero no sustituye a corregir los errores que la provocan. Si quieres cuidar ambas cosas, me dices y lo vemos juntas.
Detecto los errores 404, los enlaces rotos y las redirecciones que conviene corregir en toda tu web.
Superviso mes a mes que tu web siga sin enlaces rotos y con sus errores bajo control.
Planifico la estructura de tu web para que los usuarios encuentren lo que buscan a la primera.
Fuentes
- Errores 404, Ayuda de Search Console.
- Solucionar problemas relacionados con errores de rastreo, Google Search Central.
- Códigos de estado HTTP, errores de red y DNS, Google Search Central.
- Gestión del presupuesto de rastreo, Google Search Central.
- Crear y enviar un sitemap, Google Search Central.
- Informe Indexación de páginas, Ayuda de Search Console.
- Consejos para la imprescindible página de error 404, WordPress.org.
Preguntas frecuentes sobre la página 404
¿Qué es una página 404?
Es la página que muestra tu web cuando alguien entra en una URL que no existe. El servidor responde con el código 404, que Google recoge en Search Console como una página que no existe. Puedes personalizarla, y Google lo permite siempre que mantenga el código 404.
¿Qué debe tener una buena página 404?
Según Google, navegación y enlaces útiles manteniendo el código 404, como indica su guía de errores de rastreo. A eso, WordPress añade una explicación comprensible, un buscador, el mismo diseño que el resto de la web, enlaces a las secciones principales y una vía de contacto, como recoge WordPress.
¿Qué código debe devolver la página 404?
Un código 404. Si la página de error devuelve un 200, Search Console la registra como soft 404, y según Google debe devolver un 404 real o añadir contenido útil.
¿Cómo crear una página 404 personalizada?
Depende de tu plataforma. En WordPress, con un tema clásico se usa el archivo 404.php y con un tema de bloques se edita la plantilla 'Página 404' desde el editor, según los consejos de WordPress. Compruébala después con una URL inventada de tu dominio.
¿Una página 404 personalizada mejora el SEO?
Google no dice que mejore el posicionamiento. Afirma que los errores 404 no perjudican la indexación ni el posicionamiento. El valor de una buena página 404 está en la experiencia del visitante, porque le ofrece caminos para seguir navegando en lugar de irse.
¿Debo redirigir mi página 404 a la página de inicio?
No. Google desaconseja redirigir de forma masiva los 404 a la página principal. Lo correcto es que la URL inexistente muestre tu página de error con el código 404, y redirigir con un 301 solo cuando exista una página equivalente.
¿Cómo compruebo que mi página 404 funciona bien?
Prueba con una URL inventada de tu dominio y revisa el código HTTP con la herramienta de inspección de URLs de Search Console, que sirve para revisar el HTML renderizado y el código HTTP. Vigila también el informe de Indexación de páginas, donde aparecen los soft 404.
¿Cómo arreglar un error 404?
Depende del caso, según la ayuda de Search Console. Si el contenido se movió, añade una redirección. Si se eliminó sin sustituto, debe devolver un 404 o un 410. Y si el error viene de un enlace, corrige el enlace de origen.
¿Tu 404 retiene o espanta?
En una auditoría SEO reviso tu página de error, los enlaces rotos y las redirecciones para que tu web esté en orden. Tu equipo lo implementa y yo superviso que se haga bien.
Quiero revisar mi webArtículos relacionados
Qué es un error 404 y cómo afecta al SEO de tu web
Qué significa un 404, cuándo perjudica a tu posicionamiento y cómo gestionarlo sin perder autoridad.
Errores comunes que afectan al rastreo y cómo evitarlos
¿Sientes que tu web merece más protagonismo pero Google ni se asoma? Estos son los obstáculos que lo impiden y cómo quitarlos.
Encabezados H1, H2 y H3, cómo usarlos para mejorar tu SEO
H1, H2, H3… Cómo usar los encabezados para que Google y tus lectores entiendan tu contenido a la primera.