Si alguna vez has escrito mal en enlace de un sitio web, lo más seguro es que te hayas encontrado con un error 404.
¿Qué significa un error 404?
Un error 404 es un error que se muestra por la parte del servidor cuando no se encuentra una dirección web en concreto.
Por ejemplo, imagina que el enlace al que quieres acceder es dominio.com/accesorios, pero al escribirlo, pones dominio.com/acesorios en su lugar.
El servidor intentará acceder a /acesorios, pero al no existir una página con este nombre, no podrá mostrar contenido para ella y mostrará un error 404, no encontrado.
Por defecto, el error 404 solo indica este número y que no se ha encontrado el contenido (lo más común es que aparezca en inglés: Not found).
¿Por qué es importante personalizar la página de error 404 en nuestras tiendas online?
Cuando uno de nuestros clientes accede a una página que no existe y se le muestra la página por defecto de error 404, muchas veces no es consciente de qué está pasando.
Por ese motivo, es interesante crear una página 404 que le deje claro qué ha pasado y que le dé opciones.
¿Qué podemos añadir a una página 404 para que sea más útil de cara al usuario?
Además de informar del problema, es interesante darle opciones al usuario para que sepa cuál el el siguiente paso que queremos que dé.
Una opción interesante y que se usa bastante, es mostrar un buscador de productos, para que el usuario pueda usarlo para encontrar el producto en el que estaba interesado o un producto similar (en el caso de que no tengamos disponible lo que busca).
Otra opción, sería añadir un módulo de productos más vendidos, últimos productos publicados o destacar productos que nos interese que vea el usuario.
También podemos suavizar la frustración del usuario añadiendo un juego o algún tipo de contenido interactivo, para que el usuario se entretenga y se quede con un buen recuerdo de nuestra página.
Algunos ejemplos interesantes de página 404
Hay empresas que han sabido aprovechar muy bien su página 404 y han jugado con ella para mostrar su identidad corporativa o crear una experiencia que se grabe en la mente del usuario.
Entre ellas, está la página de Lego, que juega con la imagen y los textos.
La página de Figma, que deja modificar varios puntos del texto 404 como haríamos en la herramienta normalmente.
¿Cómo podemos modificar la página 404 de nuestra web?
Para modificar la página 404, tenemos varias opciones disponibles.
Personalizar la página de error 404 mediante plugins
Una opción, sería utilizar un plugin del repositorio que nos permita crear una página y mostrarla cuando haya un error de este tipo.
Hay varios plugins que nos podrían ayudar, uno de ellos es por ejemplo «Custom 404 Pro»:
Otro plugin que podemos utilizar es «404 to 301 – Redirect, Log and Notify 404 Errors»:
Lo bueno de este plugin, es que nos puede notificar de los errores 404 que vayan surgiendo en nuestra página web, para que establezcamos una redirección 301 (redirección permanente) a la página que más nos interesa.
En ocasiones, por lo que han escrito los usuarios al intentar entrar una página, podemos intuir su intención de búsqueda, y si vemos que se repite el error, puede ser interesante redirigir a la página que creemos que estaban buscando o bien a una que tenga relación con lo que han escrito.
Otra opción sería usar un plugin para redirigir todos los errores 404 a la página de inicio de la web. Podemos usar por ejemplo el plugin «All 404 Redirect to HomePage»:
La ventaja de utilizar esta técnica, es que se redirigirán automáticamente y Google no llegará a detectar que hay un 404 como tal, por lo que no nos penalizará en este sentido.
Pero la desventaja de hacer esto, es que el usuario será redirigido a la página de inicio sin avisarle de que ha habido un problema, por lo que puede intentar volver a escribir la misma dirección de enlace, encontrándose de nuevo con una redirección y sintiendo frustración por no saber qué está pasando.
Deberemos valorar si, en nuestro caso, merece la pena o tiene sentido hacerlo de esta forma, si sería mejor redirigir a otras páginas diferentes de forma más personalizada o si crear una página 404 personalizada puede ser la decisión correcta para gestionar este tipo de situaciones.
404 con Astra Pro
Si usas Astra Pro en su versión de pago, puedes usar el maquetador del sitio para crear una página para este fin.
Lo primero que haremos, será ir a Astra -> Site Builder (o maquetador del sitio).
Alli, haremos click en añadir una nueva página 404 y en crear una nueva:
Si nos vamos a la pestaña con el símbolo de Astra arriba a la derecha, podemos encontrar varias opciones, entre ellas mostrar condicionalmente esta página en función del usuario, el dispositivo o por fecha y hora.
Esto es interesante, por ejemplo, para crear varias páginas 404 en función de si el usuario tiene uno u otro rol, si ha accedido a la página, si accede desde un dispositivo en concreto o si estamos en unas fechas en concreto.
Tambien podemos optar por desactivar la cabecera y/o el pié de página, para jugar con ello al crear nuestra página 404.
Puedes maquetar la página directamente con Gutenberg, o podrías probar con una colección de bloques como Kadence Blocks o Spectra para ayudarte a maquetar.
404 con Elementor Pro
Elementor también dispone de esta opción y podrías utilizar el maquetador de temas para crear y asignar una página 404 a tu web.
Para configurarla, nos vamos a Plantillas -> Maquetador de temas:
Buscamos Error 404 y la damos al símbolo de + para añadir una nueva.
Acto seguido, veremos una pantalla en la que nos sugiere varias plantillas, ya predefinidas, que podemos utilizar como base para crear nuestra página personalizada:
Podemos elegir una de ellas o bien darle a la X para cerrar las sugerencias y maquetar algo desde 0 a nuestro gusto.
En estos ejemplos, a añadido un enlace para volver a la página de inicio, que en algunos casos puede ser una buena idea, sobre todo si allí tenemos destacados productos o itinerarios que pueda seguir el usuario para encontrar lo que busca.
Pero podemos cambiar este enlace por un buscador de productos, para que el usuario no tenga que salir de la página de error para encontrar lo que está buscando.
Para esto, podemos usar el bloque «Formulario de búsqueda» de Elementor:
Añadiéndolo en lugar del botón de volver a la página de inicio y modificando a nuestro gusto tanto los textos como los colores:
Si no queremos que salgan la cabecera o el footer, podemos ir a la rueda dentada de abajo a la izquierda en el editor de Elementor para acceder a los ajustes del sitio:
Y cambiar la estructura de página a Lienzo de Elementor por ejemplo, que ya saldrá sin cabecera ni pié de página.
Modificar la plantilla 404.php del tema
Por último, si tu tema no tiene opción de modificar o crear una página 404, podrías modificar directamente la plantilla PHP de tu tema que corresponda a este error.
Normalmente se suele llamar 404.php, pero es posible que varíe en algunos casos.
Antes de hacer esta modificación o cualquier otra en el código de nuestra web o en las plantillas PHP de la misma, es recomendable crear un child theme (tema hijo) del tema que utilicemos en ese momento, para que no se pierdan las modificaciones cuando se actualice el «tema padre».
Cómo crear un tema hijo en Astra
Si estás utilizando el tema Astra, es muy sencillo crear un tema hijo, ya que tienen una página específica para ayudarte a crear uno y descargarlo.
La página es la siguiente: Generador de temas hijo de Astra.
Podemos optar por solo poner el nombre y descargarlo directamente:
O podemos hacer click en «Advanced Options» para configurar varios apartados, como por ejemplo: Versión, autor, url del autor, descripción del tema, nombre de la carpeta del tema y también podemos subir una imagen para que salga en Temas -> Todos los temas cuando se muestre el tema en nuestro escritorio.
Nos descargamos el archivo, vamos a la administración de nuestra instalación WordPress, entramos en Apariencia -> Temas -> Añadir nuevo -> Subir tema y ahí seleccionamos el archivo que hemos descargado previamente:
Lo activamos, y ya podemos modificarlo a nuestro gusto.
Modificar el archivo 404.php de nuestro tema hijo
Debemos acceder a la carpeta del tema hijo a través de FTP o bien a través del administrador de archivos de nuestro alojamiento web e ir a wp-content/themes/nombre-del-tema, siendo nombre-del-tema el nombre que le hayamos puesto en nuestro caso (en nuestro caso sería «destaca»).
Veremos que solo hay unos pocos archivos y que no hay ninguno que se llame 404.php, esto es porque el tema hijo ejecuta todas las funcionalidades a través del padre.
Para que se omita el archivo del padre y se ejecute el del hijo en su lugar, tendremos que volver atrás a la carpeta de themes, ir a la carpeta de Astra, descargar el archivo 404.php y subirlo en la carpeta del tema hijo.
Este procedimiento será igual para todos los temas, pero es posible que en algunos casos se gestione de otra forma el 404 y haya que copiar otro archivo o se pueda utilizar un gancho o filtro para modificar su contenido.
Una vez lo tenemos subido, ya podemos modificar la plantilla de la página 404 del tema.
