Una de las cosas más frustrantes que te puede pasar navegando en internet es encontrarte con un error. El error 404 not found o error 404 no encontrado es probablemente el error de estado HTTP más común. Es especialmente negativo para la experiencia de usuario, ya que este no puede acceder a la información que está buscando y es probable que abandone tu página.
En este post te voy a enseñar a identificarlo, solucionarlo e incluso a personalizarlo. ¡Vamos allá!
Índice del artículo
- Qué es el error 404 y qué significa
- Solución al error 404 not found
- Crear una página personalizada de error 404
- Conclusión
No te enviaremos spam, ¡te lo prometemos!. A nuestros suscriptores les enviamos nuestros contenidos sobre WordPress, hosting, marketing digital y programación.
Qué es el error 404 y qué significa
El error 404 – file not found es un código de estado HTTP que indica que el servidor no ha podido entregar la petición realizada por el cliente o navegador web.
Imagina que estás navegando por tu blog favorito, haces clic en un post y, en lugar de ver el contenido, te encuentras con un mensaje de error 404. Lo que está pasando es que, por alguna razón técnica, el servidor no encuentra la información que le estás pidiendo y por lo tanto devuelve un error 404 not found (no encontrado). Esto puede deberse a varios motivos:
- El contenido al que estás intentando acceder ha sido eliminado y por lo tanto ya no existe.
- La url del contenido ha sido cambiada.
- Has escrito mal la url.
Solución al error 404 not found
Si eres propietario de un sitio web en el que hay errores 404, lo más recomendable es que los identifiques y los soluciones. En caso de que no puedas evitar el error, lo mejor es que lo personalices para evitar perder tráfico, pero esto lo veremos más adelante.
Identificar errores 404
El primer paso para solucionar los errores 404 de tu web es detectarlos. Existen una serie de herramientas que rastrean tu sitio en busca de errores y la mejor forma de identificarlos todos es usar una de ellas. Algunas de las que puedes usar son:
1. Google Search Console
Con esta conocida herramienta te resultará muy sencillo encontrar los errores 404 que Google ha detectado. Accede al apartado Cobertura en la sección Índice del menú lateral de Google Search Console. En este apartado puedes ver el estado de las URL indexadas de tu sitio web para comprobar si hay errores 404.
Es importante que sepas que, tal y como dice la documentación de Google Search Console: “Los errores 404 solo se consideran como tales si has solicitado expresamente a Google que rastree las URL pertinentes a través de un sitemap o de otro método.”
También puedes inspeccionar URL concretas. Introduce la URL que quieres analizar en la barra superior de búsqueda y pulsa enter. Se te mostrará información acerca del estado de indexación y posibles errores de esta URL.
2. Screaming Frog
Con este potente programa puedes analizar las URL de tu web (hasta 500 URL en la versión gratuita). Para hacerlo tienes que introducir la dirección de la web a analizar (1) y darle a Start (2). Cuando finalice el análisis tendrás un listado de todas las URL de tu sitio con información acerca de ellas.
Si te fijas, una de las columnas por la que puedes filtrar los resultados es la de Status Code (3). De esta manera puedes ordenar las URL analizadas en función de su código de estado para ver cuáles son 404.
También hay otra forma de filtrar estas URL y quedarte solo con las que presentan error 404 not found. Despliega las opciones de la barra de búsqueda (4) y marca solamente la casilla Status Code. Ahora pon “404” en el buscador y pulsa enter. Screaming Frog sólo te mostrará las URL con error 404.
3. Otras herramientas online como W3C Link Checker, Broken Link Check o Dead Link Checker. El funcionamiento de todas ellas es muy parecido. Basta con introducir la URL de tu web y empezar a rastrear.
Muy bien, ya sabes cómo detectarlos pero, ¿sabes cómo solucionar los errores 404?
- En caso de que sean enlaces a contenido externo que ya no existe, la solución es fácil: reemplázalos por otros con contenido equivalente a ser posible y, si no, elimínalos.
- Si el error proviene de enlaces que ya no existen dentro de tu sitio web tienes dos opciones. Puede que te interese redireccionar ese enlace a un artículo o producto de tu web que esté relacionado o sea más reciente: en este caso, tienes que hacer una redirección 301. O puede que no tenga sentido redireccionar esa URL o sea una URL que hayas creado por error y quieres que deje de existir. Para estas situaciones te recomiendo que apliques un código 410 o Redirect Gone.
- Si el error proviene de una URL que has modificado, te recomiendo que hagas una redirección 301 de la URL antigua a la nueva.
Antes de explicarte cómo hacer una redirección 301 o aplicar un código 410, voy a explicarte qué son:
➡ Redirección 301
Una redirección es un comando que te permite enviar a los usuarios y a los bots de rastreo de una URL a otra automáticamente. En concreto, las redirecciones 301 tiene la particularidad de que son permanentes.
Haciendo una redirección 301 consigues que los usuarios (y también Google) sepan que ese contenido se ha movido de forma permanente a otra URL. Además Google desindexará la URL antigua e indexará la nueva, transmitiéndole una gran parte de la autoridad que tenía el viejo enlace.
➡ Código de error 410 o Redirect Gone
El código de error 410 es un código de estado HTTP parecido al error 404. La diferencia es que en el caso del error 410 los bots de búsqueda interpretan que la URL no existe y no va a existir nunca más, por lo que no van a volver a rastrearla.
Tanto si quieres hacer una redirección 301 como si quieres aplicar un código 410 a una URL, tienes varias opciones. Puedes hacerlo a través del archivo .htaccess o mediante plugins o módulos si utilizas un CMS como WordPress o Prestashop. Si quieres saber cómo hacerlo sigue leyendo.
Redirección 301 con .htaccess
El archivo .htaccess es un archivo de configuración del servidor Apache, con el que puedes configurar (entre otras muchas cosas) las redirecciones.
Tienes que tener cuidado al modificar este archivo, ya que una mala configuración puede hacer que tu web deje de funcionar. Pero no te preocupes, en este post Álvaro Fontela te explica con detalle cómo hacer una redirección 301 con .htaccess.
Redirección 301 en WordPress con plugins
Si usas WordPress y prefieres no complicarte mucho, siempre puedes recurrir a algun plugin para hacer la redirección. En el repositorio de plugins de WordPress tienes muchas opciones. Por ejemplo:
Redirection
Es uno de los plugins de gestión de redirecciones más populares. Algunas de las cosas que puedes hacer con este plugin son:
- Añadir una redirección 301 automática cuando cambies la URL de una página o post.
- Hacer un seguimiento de los errores 404 de tu sitio web.
- Tener un registro completo de todas las redirecciones.
- Hacer grupos de redirecciones para clasificarlas y tener un mejor control sobre ellas.
- Importar y exportar las redirecciones en formato csv, json, en un archivo .htaccess de Apache o reglas rewrite de Nginx.
- Redirecciones condicionales según el estado de conexión del usuario, dirección IP, cookies, etc.
Hacer una redirección 301 con Redirection es muy fácil:
- Ve a Herramientas > Redirection en el menú lateral de WordPress..
- Pon la URL que quieres redireccionar en el campo URL de origen.
- Pon la URL a la que quieres redirigir en el campo URL de destino.
- Si además quieres realizar alguna configuración como las que te he descrito más arriba, pulsa en el icono del engranaje y ajusta las opciones según tus necesidades.
- Pulsa en Añadir redirección.
301 Redirects – Easy Redirect Manager (antes conocido como EggPlant 301 Redirects)
Este plugin es más simple que el anterior, pero su funcionamiento es muy parecido. Para añadir una nueva redirección tienes que:
- Ir a Ajustes > 301 Redirects.
- Escoger qué tipo de redirección quieres aplicar: 301 para una redirección permanente o 302 para una temporal.
- Cubrir el campo Redirect from con la URL que quieres redireccionar.
- Poner el campo Redirect to en Custom e introducir la URL a la que quieres redirigir.
(También puedes redirigir a una entrada, página, archivo de medios, etc.) - Darle al botón Save.
En el caso de este plugin, fíjate que en el campo Redirect from solo tienes que introducir el slug de la página o post que quieres redireccionar (no la URL completa).
Redirección 301 en Prestashop con módulos
Prestashop es una de las mejores opciones para que crear tu tienda online. En Raiola tenemos planes de hosting para Prestashop en los cuales lo tendrás ya presintalado y listo para empezar a usar.
Este popular CMS para ecommerce te permite hacer redirecciones de productos desactivados. Tienes que editar el producto en cuestión e ir a la pestaña SEO. Una vez dentro, en el apartado Página de redirección verás un desplegable para elegir el tipo de redirección. A su lado tienes un campo para elegir a qué categoría o producto quieres redirigir. Recuerda guardar los cambios para dejar configurada la redirección.
También tienes a tu disposición módulos para hacer redirecciones 301. Los siguientes que te voy a mencionar son de pago pero cuentan con muy buenas valoraciones dentro del catálogo de módulos de Prestashop.
301, 302, 303 URL Redirects and 404 – SEO Module
Como su nombre indica, este módulo te permite configurar redirecciones 301, 302 y 303. Es perfecto para redireccionar productos y categorías que, por ejemplo, has eliminado. Permite subir un archivo .csv para importar redirecciones.
Este módulo no actúa sobre el fichero .htaccess, sino que crea su propia tabla dentro de la base de datos para guardar las redirecciones.
Un detalle a tener en cuenta, y que mencionan los creadores del propio módulo, es que no permite hacer redirecciones entre distintos dominios. Tampoco es posible hacerlas si tu Prestashop está instalado en un subdominio y quieres redireccionar al dominio raíz.
Redirections Manager – Manage 301 / 302 and 404 urls
Este módulo es otra alternativa para gestionar las redirecciones en Prestashop. Al igual que el anterior, es bastante sencillo de utilizar.
Uno de los puntos fuertes de este módulo es que puedes automatizar las redirecciones de los productos o categorías eliminadas. Las redirecciones pueden ser 301 o 302 y también se puede configurar una redirección automática para todos los errores 404.
Al igual que el módulo anterior, tampoco modifica el fichero .htaccess, las redirecciones se guardan en la base de datos.
También es posible exportar e importar documentos en formato .csv para manejar grandes cantidades de redirecciones.
Aplicar el código 410 con .htaccess
En el enlace al artículo de Álvaro que te mencioné más arriba has podido ver qué es el archivo .htaccess y cómo modificarlo para hacer una redirección 301. En el caso del código de error 410 lo que tienes que introducir en este fichero es lo siguiente:
1 | Redirect Gone /mi-url/ |
Sólo tienes que cambiar “mi-url” por la url de tu sitio web a la que quieras aplicar el código 410.
Aplicar el código 410 en WordPress con plugins
Redirection
Antes te he explicado cómo hacer una redirección 301 con este plugin, pero también es posible aplicar el código 410 a una URL con él.
Para hacerlo tienes que:
- Ir a Herramientas > Redirection y añadir una nueva redirección.
- Desplegar las opciones avanzadas pulsando en el icono del engranaje.
- Introducir la URL de origen.
- Seleccionar “Error (404)” en el desplegable Cuando coincide.
- Seleccionar “410 – Desaparecido” en el campo con el código HTTP.
- Pulsa el botón Añadir redirección.
Crear una página personalizada de error 404
En ocasiones no vas a poder evitar que los usuarios se encuentren con un error 404. Lejos de verlo como algo negativo, puedes intentar que esa experiencia sea lo más positiva posible.
Como te conté al principio de este post, una página de error 404 predeterminada puede hacer que los usuarios abandonen tu página. Puedes cambiar esto si les ofreces una página de error donde tengan a su alcance alternativas para que encuentren lo que están buscando. Elementos como un buscador o acceso a las últimas entradas de tu blog pueden marcar la diferencia entre que el usuario abandone o siga en tu sitio web tras llegar a una página de error 404.
Aquí tienes unos consejos útiles a la hora de personalizar tu página de error 404:
- No intentes camuflar el error. Explica al usuario que no ha sido posible encontrar lo que buscaba, pero ofrécele alternativas.
- Mantén el mismo diseño que en el resto de la web. Aunque es una página de error, el usuario tiene que identificar la web en la que está.
- Incluye un buscador. Recuerda que el usuario no ha encontrado lo que buscaba. Pónselo fácil.
- Pon un enlace a la home o a otras secciones de tu web. Dale opciones al usuario para que siga navegando por tu web.
- Si tienes un ecommerce puedes poner un listado de tus últimos artículos o productos en oferta.
- Sé creativo. Nunca está de más transmitir el mensaje con un toque de humor y de manera original.
A continuación te muestro unos ejemplos de buenas páginas de error 404 que pueden servirte de inspiración cuando crees la tuya:
Ahora que sabes la importancia de tener una página de error 404 personalizada, voy a explicarte cómo crearla.
Personalizar el error 404 en WordPress sin plugins
Los temas de WordPress traen su propia página de error 404 ya configurada, pero si quieres modificarla sin utilizar plugins puedes hacerlo. Para ello, necesitas tener conocimientos básicos de PHP, HTML y CSS. Lo primero que tienes que hacer es crear un tema hijo para que cuando actualices el tema no pierdas los cambios que vas a realizar.
Si no sabes cómo crear un tema hijo o child theme, visita este post donde te lo explicamos con detalle: https://raiolanetworks.es/blog/tema-hijo-wordpress/
Una vez tengas creado tu tema hijo, tienes que localizar el archivo 404.php dentro del tema padre que estés utilizando.
Puedes utilizar cliente FTP como Filezilla para gestionar los archivos de tu web. Si no sabes cómo utilizarlo, aquí tienes un manual de Filezilla.
Lo normal es que ese archivo esté en la siguiente ruta:
wp-content/themes/[nombre_de_tu_tema]/404.php
Haz una copia de ese archivo dentro de tu tema hijo, de manera que quede localizado dentro de la ruta:
wp-content/themes/[nombre_de_tu_tema_hijo]/404.php
A partir de ahora, los cambios que quieras realizar los harás sobre el archivo 404.php que está dentro de tu tema hijo. Recuerda los consejos que te he dado más arriba y haz los cambios que consideres oportunos para configurar la página de error 404.
Eso sí, antes de empezar a modificar este archivo, te recomiendo que hagas un backup del mismo por si necesitas restaurar el original.
Personalizar el error 404 en WordPress con plugins
Si no tienes conocimientos de PHP, no te preocupes. Existen plugins para personalizar la página de error 404 de manera rápida y sencilla. Veamos alguno de ellos.
404page – your smart custom 404 error page
Es uno de los plugins más populares para personalizar el error 404 dentro de WordPress. Una vez lo hayas instalado puedes configurarlo dentro de Apariencia > 404 Error Page.
Su funcionamiento es muy sencillo:
- Crea una página normal de WordPress (la cual va a funcionar como página de error 404) con los elementos que consideres oportunos.
- Dentro de la configuración del plugin, selecciona esa página que acabas de crear en el desplegable Page to be displayed as 404 page.
- Guarda los cambios.
Además, este plugin te permite configurar otros parámetros dentro de la sección Advanced, como ocultar la página creada del listado de páginas.
Custom 404 Pro
Este plugin es muy parecido al anterior. La diferencia es que no solo tienes la opción de asignar una página de tu WordPress cómo página de error 404. En lugar de esto puedes elegir una URL a la que quieres que el usuario sea redirigido cuando se encuentre con un error 404.
También tiene un registro de los errores 404 que se van produciendo, lo cual es interesante para gestionarlos.
Pasos para configurar Custom 404 pro:
- Accede al menú Custom 404 Pro del panel lateral del área de administrador de tu WordPress.
- Una vez dentro, accede a la sección Settings. Asegúrate de que estás en la pestaña Redirect.
- Selecciona una opción del desplegable Mode para configurar el comportamiento del plugin cuando ocurre un error 404.
- En función de lo que hayas elegido en el paso anterior, selecciona una página o introduce una URL a la que redirigir.
- Guarda los cambios.
También puedes configurar otras opciones adicionales dentro de la pestaña General de la sección Settings. Por ejemplo, recibir notificaciones por email cuando se produzca un error 404 o el tipo de redirección (301, 302, 307 o 308).
404 Page by SeedProd
La ventaja de este plugin es que te permite configurar el error 404 sin tener que crear manualmente la página dentro de WordPress. Basta con que rellenes una serie de campos dentro de los ajustes del plugin para hacerlo.
Si entras a Ajustes > 404 Page by SeedProd, verás que hay 5 pestañas:
- Page settings: para configurar el funcionamiento del plugin y los elementos que queremos que aparezcan.
- Design settings: para cambiar el diseño de la página de error 404.
- Advanced: ajustes avanzados cómo añadir scripts en el header y footer o una casilla para desactivar el resto de plugins sólo en la página de error 404.
- Live preview: para ver una vista previa de la página de error.
- Upgrade to Pro for more Professional Features: si quieres todavía más opciones puedes pagar la versión Pro del plugin.
Para explicarte cómo configurar 404 Page by SeedProd voy a centrarme en las dos primeras pestañas.
Dentro de Page settings tienes la opción de habilitar o deshabilitar la página de error que creamos con el plugin (si la desactivas, sigue funcionando la genérica del tema). También tenemos unos campos donde configurar:
- Logo: para añadir un logo o imagen.
- Headline: para escribir un título para la cabecera de la página.
- Message: para crear el contenido de la página (puedes añadir texto, imágenes y cualquier cosa que permita el editor WYSIWYG de WordPress).
- Enable WordPress Search Form: para añadir una barra de búsqueda.
- Twitter Social Profile: para añadir un enlace a un perfil de Twitter.
- Facebook Social Profile: para añadir un enlace a un perfil de Facebook.
- Powered By SeedProd: para añadir un footer con los créditos de los creadores del plugin.
Por otro lado, en la pestaña Design settings puedes configurar lo siguiente:
- El fondo de la página, bien sea un color, una imagen o una captura de tu página de inicio.
- La tipografía del texto y el color de los enlaces.
- Un campo donde añadir tu propio código CSS.
Personalizar la página de error 404 con Elementor
Elementor es a día de hoy uno de los maquetadores visuales para WordPress más populares y completos. Gracias a él, puedes crear un sitio web completo y por supuesto también puedes maquetar una página de error 404 personalizada. Para hacerlo, sigue los siguientes pasos:
- Una vez instalado el plugin, accede a la sección Plantillas de la barra lateral del panel de administración de WordPress y añade una nueva.
- Selecciona como tipo de plantilla: Individual.
- Como Post type elige: Página 404.
- Ponle un nombre a la plantilla y pulsa en Crear plantilla.
A partir de aquí, puedes elegir una de las plantillas predefinidas que te proporciona Elementor o crear tú mismo la página. Recuerda que en Elementor tienes a tu disposición una gran variedad de widgets que puedes utilizar para crear tu página de error. Puedes añadir el buscador propio de WordPress, las últimas entradas de tu blog o incluso un formulario de contacto, con los propios widgets de Elementor.
Personalizar el error 404 en Prestashop con módulos
Prestashop también dispone de módulos para personalizar fácilmente la página de error 404. Al igual que los módulos de redirecciones que te comenté, también son de pago. Así que, si quieres personalizar esta página de error sin tener que tocar ni una línea de código, aquí tienes algunas opciones.
Custom 404 Page
Con este módulo puedes utilizar una plantilla predefinida o crear una propia incluso con código HTML. También puedes activar y desactivar la barra de búsqueda con un clic.
Customization of the 404 error page
Si te decides por instalar este módulo, tendrás opciones muy interesantes para configurar la página de error con un solo clic. Por ejemplo:
- Mostrar el sitemap de la tienda.
- Mostrar un bloque con productos destacados.
- Mostrar un bloque de noticias.
- Mostrar un bloque con los productos más vistos.
Personalizar el error 404 en un desarrollo web a medida
Si tu página web no está creada con ningún CMS y es un desarrollo a medida, también es posible personalizar la página de error 404. Eso sí, necesitas tener conocimientos de lenguajes como HTML, CSS y PHP.
La manera de hacerlo es bastante sencilla. Empieza creando un documento HTML al que puedes llamar “404.html”. Edita este documento como una página estándar de tu sitio web y añade los elementos necesarios que debería incluir una página de error 404. Una vez la tengas lista, súbela a la raíz de tu sitio web.
Ya tienes lista la página de error, pero ahora necesitas decirle al servidor que, cada vez que se produzca un error 404, cargue esa página. Localiza el archivo “.htaccess” o, si no tienes uno, créalo (es importante que el nombre sea exactamente “.htaccess”). Edita este archivo y añádele la siguiente línea de código:
1 | ErrorDocument 404 /404.html |
Con esto ya tendrías lista y configurada tu propia página de error 404.
Conclusión
Un error 404 puede llegar a ser algo bastante molesto tanto para usuarios como para webmasters. Sin embargo, si sabes cómo detectarlo puedes trabajar sobre él para sacarle partido y que no sea tan negativo para tu web.
Ya has visto lo fácil que es solucionar y personalizar los errores 404 de tu sitio web. ¿Te ha sido de utilidad este artículo? ¿Tienes alguna duda? ¡Deja un comentario!
Hola David,
me parece un artículo fenomenal y muy práctico.
el problema es que cuando intento hacer lo de:
Aplicar el código 410 en WordPress con plugins
Seleccionar “Error (404)” en el desplegable Cuando coincide. < En este paso no aparece "Error 404" ni nada parecido solo parece:
– Coincidencia exacta de……..
– Ignorar todos los parámetros
– Ignorar y pasar parámetros al destino
Sabes que debo hacer?¿
Hola Alejandro!
Para que te aparezcan las opciones que describo en esa parte del artículo tienes que hacer lo que dice el paso número 2: «Desplegar las opciones avanzadas pulsando en el icono del engranaje». Este icono se encuentra justo a la derecha del botón azul de «Añadir redirección».
Una vez pulses el icono se mostrarán más opciones, entre las cuales está un desplegable llamado «Cuando coincide» en el que podrás seleccionar la opción «Error (404)».
Espero haberte ayudado.
Un saludo 🙂
He creado una página de galería de fotos, la he añadido al menú, y desde el administrador cuando le digo «visualizar cambios» me sale el siguiente error:
¡Vaya! No se ha podido encontrar esa página.
Mi web es marchoso.es y lo que no funciona es en el Menú: galerías de viajes/galeria de marruecos/ las tres últimas opciones que son las páginas que acabo de añadir. Dichas páginas solo contienen html con un div.
Alguien me puede ayudar?
Gracias.
Hola Benito, con tan pocos datos es muy difícil ayudarte, ya que posiblemente sea un problema del plugin (el 404 es un error muy genérico).
Si estuvieses alojado con nosotros te podríamos revisar por encima que sale en los logs de errores, pero hemos visto que estas con otro proveedor así que consúltalo con ellos.