La página de error 404:

Que se traduce por “página no encontrada” (“not found”) aparece cuando al navegador le hemos dado la dirección correcta de una web, pero con una extensión incorrecta o que ya no existe o se ha recolocado con otro nombre dentro del dominio.

Como por ejemplo: si introducimos en el navegador www.casareal.es/urdangarin, nos dirigirá a una advertencia de “página no encontrada”, porque la dirección www.casareal.es sí que existe, pero la extensión “urdangarin” no. En este ejemplo, la página de error de la casa real nos permite volver a la página principal, al mapa del sitio, regresar a la página anterior e incluso reanudar la navegación entre las opciones del menú del sitio.

Sin embargo, hay páginas en que si seguimos un enlace que ya no existe (tal vez porque ha sido borrado, o nominado con otro nombre) nos aparece una pantalla con un lacónico “Not Found. The requested URL /? was not found on this server.” que no nos da opción a que nos reconduzca por la navegación de la web principal.

La mayoría de las versiones nuevas de los CMS o Gestores de contenido, como Joomla o WordPress ya incluyen soluciones, que se instalan por defecto, para que al enlazar una página que ya no existe dentro de la web, te reconduzca a la página de inicio o principal,  o bien te lleve a otra página de error que dispone de menú principal y te invita a encontrar lo que deseas en el buscador, como es el caso de WordPress.

En el caso de las páginas que no están hechas con un gestor de contenido, como es el caso de la web de inicio de recordis, que es de Html5, es importante contar con una página de error 404 personalizada para que el usuario pueda retomar con un click la navegación por los sitios que sí que existen de nuestra web.

Página de error 404 personalizada

En https://www.freshdesignweb.com/free-404-error-page-template/ he encontrado unas plantillas de Error 404 personalizadas bastante originales, de ahí me he descargado la que veis en el encabezamiento de este post, y la que he instalado en recordis.es.

Podéis verla mejor si, por ejemplo, vais a recordis.es/noseloquebusco

Primero, claro está, se personaliza. En mi caso ha consistido en cambiar los rótulos y el texto de inglés a español y en enlazar a la web de inicio, a este Blog, y a la sección Tienda de Recordis.

Y después:

1º Hay que renombrar el index de la plantilla de error como 404.html.

2º Subir el 404.html al directorio raiz del servidor, donde esté el index.html, así como subir otro directorio (que he llamado error) que contenga los archivos complementarios para que la plantilla se visualice en todo su esplendor (archivos img, css y js si tuviera) y refiriendo en todos los documentos necesarios la ubicación de tales archivos en el directorio error (en 404.html, direccionando el css de hoja de estilo a link href=”error/style.css”).

3º.A Creando un archivo de texto que, subiremos también al directorio raiz del servidor, y que guardamos como .htaccess (con el punto delante), con el siguiente texto: ErrorDocument 404 http://www.tudominio.com/404.html (tudominio.com, lógicamente se sustituye por el nombre de la dirección que interese) ó:

3º.B Si ese archivo .htaccess ya lo tienes creado en el directorio, editándolo y añadiendo al texto existente la misma línea que se indica en el punto anterior: ErrorDocument 404 http://www.tudominio.com/404.html. En mi caso, la primera línea es la que he añadido en el archivo .htacces:

ErrorDocument 404 http://www.recordis.es/404.html 

RewriteOptions inherit

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

RewriteCond %{HTTP_HOST} ^www\.recordis\.es$
RewriteRule ^/?$ "http\:\/\/recordis\.es\/" [R=301,L]

Caso especial hosting de Godaddy con Plan Windows

No sé si en los alojamientos de Godaddy con Plan Apache pasa lo mismo, pero con el Plan Windows, la instalación de la página de error 404 no me funcionó editando o creando el .htaccess. Pero hallé otra solución:

En el hosting godaddy, viene por defecto una carpeta que contiene archivos de error llamada “error_docs”, dentro está el archivo denominado “not_found.html” que es el correspondiente al error 404. Para personalizar este archivo realicé lo siguiente:

1º.- Edité el archivo “not_found.html, que está dentro del directorio “error_docs”,  añadiendo directamente en el “head” la hoja de estilos (creando las etiquetas style y cierre de /style, y copiando entre ellas lo contenido en el documento style.css).

2º.- Y entre las etiquetas body, remplacé el breve texto que viene por defecto por el body de la plantilla en cuestión.

3º.- Subí el directorio que he llamado error dentro del directorio raíz de mi página (pues dentro del directorio “error_docs” el servidor no me dejaba crearlo) con los archivos (en este caso) de las imágenes.

4º.- Me he asegurado a la hora de editar el archivo “not_found.html” en sustituir, dentro de las etiquetas style, el direccionamiento a las imágenes por direcciones absolutas del tipo background:url(http://midominio.es/error/nombredelaimagen.jpg), en lugar de las que vienen por defecto en la plantilla background:url(images/nombredelaimagen.jpg) y…

¡Funcionó!

¿Y si sólo quiero redireccionar a la web principal?
Basta con crear o editar (si ya está creado)  el documento .htaccess con la línea ErrorDocument 404 http://www.tudominio.com