WordPress.org

Noticias

Consejos para la imprescindible página de error 404

Consejos para la imprescindible página de error 404


A poca gente le gusta perderse (excepto por vacaciones 😉). A pocos negocios les gusta que sus clientes se sientan perdidos, sin saber dónde encontrar lo que desean adquirir. Pero, esto, es algo inevitable y que ocurre en ocasiones.

En tu web, una forma de ayudar a quienes se pierden, o a quienes encuentran algún error, es crear una página 404 que convierta ese obstáculo en una experiencia agradable, en una nueva oportunidad de conseguir lo que se desea.

Espero que los puntos que comparto en este artículo, te sirvan para ese propósito.

Qué es el error 404

En la Web, el 404 es el código de error que devuelve un servidor web cuando no encuentra el recurso solicitado por el navegador. Dicho de otra forma, si intentas acceder a una URL que no se encuentra en ese servidor web, tu navegador web mostrará lo que se conoce como página de error 404.

Todos los servidores web suelen ofrecer una página de error 404 estándar; algunos te permiten personalizarla con tu propio HTML y WordPress, cómo no, también te permite crear y personalizar la página de error 404 de tu web.

Fig. 1. El clásico error 404 ofrecido por el servidor web Apache.
Fig. 2. También Google muestra error 404 en alguna ocasión.

No es difícil encontrarse con un error 404 cuando estás navegando por Internet, las causas más habituales son:

  • El recurso que estás buscando, el enlace donde hiciste clic, ya no existe en el servidor web.
  • El enlace que escribiste en el navegador, o en el que pinchaste, estaba mal escrito y no se corresponde con nada que esté en ese servidor web.

En cualquier caso, ten presente que normalmente te encuentras un error 404 de forma casi inconsciente, sin saber exactamente qué hiciste para llegar ahí.

Consejos para tu página de error 404

Al tratarse de una experiencia inevitable, algo que cualquier persona se encontrará tarde o temprano al navegar por la Web, considero imprescindible dedicar algo de esfuerzo en que tu web tenga una buena página de error 404. Por ello, aquí comparto algunas pautas que me sirven en mi día a día.

Mensajes claros, contenido útil

Es muy habitual encontrarse con páginas 404 que contengan un texto del estilo “Lo sentimos, la página que buscas no existe”.

Bueno, sí, vale, y ahora ¿qué?

Siempre se agradece una explicación directa y fácil de entender cuando ocurre un problema, pero también se necesita una orientación para salir de ese bache, para superar ese obstáculo, así que te sugiero que ofrezcas algo de contenido útil para tus visitantes, algo que les ayude a encontrar lo que están buscando:

  • Un sencillo buscador.
  • Un bloque con enlaces a secciones relevantes de tu web.
  • Si es una tienda online, un bloque con productos más vendidos o con los productos más comprados por ese visitante (en caso de que lo puedas identificar).
  • etc.

Por otra parte, cuida el estilo y el tono de tu texto, con el que te diriges a la persona que llega a esa página de error 404: sé coherente con el estilo de tu marca, el que utilices en el resto de tu sitio web. A veces, una pequeña dosis de humor puede transformar un frustrante error 404 en una anécdota memorable.

Diseño congruente

Un error 404 ocurre dentro de tu web, por tanto mi sugerencia es que la página de error 404 siga una línea visual y un diseño coherentes con el resto de la web. Cuida la tipografía, los colores y los estilos para que los visitantes entiendan que aún siguen dentro de tu web

No obstante, también puedes optar por tener una página de error 404 con un aspecto extravagante y totalmente distinto al resto de la web.

Queda en tus manos intentar provocar al usuario las sensaciones que te convengan para retenerlo en tu web ¡dale alas a tu creatividad!

Por último, aunque ya no debería hacer falta, te recuerdo: haz que el diseño sea accesible y que funcione bien en la mayoría de dispositivos.

Llamada a la acción

Retomando la idea del contenido útil, y pensando en ofrecer una experiencia agradable al usuario, cuando un visitante encuentra en tu web un error 404, anímale a que continúe navegando y para superar ese pequeño obstáculo lo mejor es ofrecerle alguna llamada a la acción: la idea es que sepan qué hacer tras haberse encontrado con un error 404.

Podría bastar con un enlace claro a la página de inicio, pero casi mejor ofrecerle algún botón o incluso un sencillo formulario de contacto para recabar justo en ese momento lo que estaba buscando.

Piénsalo así: estás en medio de una tienda enorme, en un centro comercial enorme, te encuentras en un pasillo al que no sabes cómo has llegado, y al girar la cabeza te encuentras con un dependiente que te sonríe y te pregunta “¿qué puedo hacer por ti?”.

Monitoriza, analiza, actúa

Si utilizas alguna herramienta de analítica web, aprovéchala para medir la interacción de los visitantes con tu página de error 404: qué enlace pulsan, qué formulario rellenan, qué términos usan en el buscador… Recoge esta información y analízala periodicamente, porque te puede dar pistas para mejorar esa página de error 404, pero, sobre todo, para implantar los cambios necesarios en el resto de la web que eviten a los visitantes encontrarse con ese error 404.

Por otra parte, en el repositorio de plugins de WordPress encuentras diversos plugins que te ayudan a localizar enlaces rotos en tu web y a generar las redirecciones para que enlaces antiguos o inexistentes se dirijan automáticamente a las páginas que te interesen.

Si eres agencia o freelance

Si creas sitios web para tus clientes, notarán que prestas atención a los detalles cuando vean la página 404 de los sitios que construyes para ellos. Anímales a invertir un pequeño esfuerzo en su proyecto para cuidar esta página de error 404, porque así estarán atendiendo mejor a sus usuarios o clientes.

Ejemplos de páginas de error 404

Si buscas en Internet ejemplos de páginas de error 404, te saldrán cientos de posts sobre el tema, pero aquí te traigo algunos ejemplos de páginas de error 404 que me llaman la atención.

Mozilla

En mi opinión, un ejemplo perfecto de mensajes claros y concisos, enfocándose en la comunidad y con un toque de creatividad.

OpenOffice

Un diseño algo anticuado, quizá demasiado orientado a los técnicos, tanto por el formato como por el contenido de los textos. Para mí, un ejemplo de lo que no debería hacer una tienda online ni un software destinado a usuarios de ofimática.

WordPress España

Quizá se podría discutir el aspecto visual o la llamada a la acción, pero, en mi opinión, la mejora más importante a día de hoy debería ser la del idioma, por tratarse de la web de WordPress España, pero estoy seguro que en breve se solucionará.

Cómo crear una página de error 404 en WordPress

WordPress proporciona un mecanismo para responder con un error 404 cuando detecta una solicitud que no existe. Según la jerarquía de plantillas de WordPress, en los temas clásicos puedes tener un fichero con nombre 404.php que contenga el diseño y los contenidos que desees para tu página de error 404. 

Es muy probable que tu tema ya tenga un fichero 404.php, pero si no lo tiene, podrías hacer esto:

  1. Copia el fichero index.php de tu tema a un nuevo fichero denominado 404.php.
  2. En el nuevo fichero, elimina todo lo relacionado con el bucle, los posts y los comentarios.
  3. Agrega los contenidos que desees.
  4. Guarda cambios y prueba el funcionamiento, cargando en tu navegador una URL del tipo https://tu-dominio.es/kk-probando-la-pagina-de-error-404-kk

Tienes más información sobre esto en el Codex y en los Recursos para Desarrolladores (ambos recursos en inglés).

Si estás trabajando con un tema de bloques y Full Site Editor (FSE), la plantilla de la página de error 404 la encuentras en Apariencia > Editor > Plantillas > Página 404. Este tutorial (en inglés) explica con más detalle cómo personalizar esta plantilla con FSE.

Fig. 3. Editar la página de error 404 con FSE.

Conclusión

Transformar la página de error 404 en una experiencia positiva que mejora la navegación y demuestra una buena atención al usuario. Si aprovechas las posibilidades de personalización que te ofrece WordPress, utilizas mensajes claros y concisos e implementas un diseño coherente, conseguirás convertir inconvenientes en oportunidades de destacar. 

En mi opinión, al implementar estos consejos, no sólo solucionas problemas, sino que creas una experiencia memorable y demuestras tu compromiso con la calidad y el detalle. ¿Te atreves ahora a enfrentarte a tus errores? 😉

Deja una respuesta