¿Cómo crear y personalizar una página 404 en WordPress?

Actualizado: junio/2019 Versión: 5.2.x  Nivel: Medio

¿Cómo crear y personalizar una página 404 en WordPress?

Al crear un sitio web, una de las páginas que a menudo se descuida es la página 404. Si nos paramos a pensar, cada página 404 que es visitada en nuestro sitio web es como una oportunidad perdida.

Alguien está buscando algo en tu sitio y no lo encuentra. Así que le ofreces una página 404 que le indica que, la información solicitada, no se encontró en tu sitio web.

Como alternativa, puedes crear una página 404 personalizada para causar una buena impresión a tus visitantes.

Puedes usar una página 404 ingeniosamente diseñada que mantenga a tus usuarios en tu sitio web y los guíe a un recurso que les ayude a encontrar más información sobre lo que estaban buscando.

1. ¿Qué es un error 404?

Un error 404 es uno de los códigos de estado HTTP que devuelve el servidor para indicar que no se encontró la página solicitada.

Este error se genera por las URLs de un sitio web.

Algunas de las causas más comunes son:

  • El usuario hizo clic en un enlace roto.
  • La página se ha eliminado o se ha modificado la URL sin hacer la correspondiente redirección.
  • El usuario escribió mal la URL.

Sea cual sea el caso, el usuario ha llegado a un callejón sin salida ya que no ha encontrado lo que estaba buscando y lo más seguro es que se vaya y no regrese más a tu sitio.

Es muy importante ofrecer una página 404 personalizada, con un diseño atractivo, para que el usuario sienta que puede quedarse y encontrar lo que busca.

Aunque los enlaces rotos y las redirecciones pueden ser corregidos por uno mismo, si el usuario escribe mal la URL que quiere visitar, es algo que no se puede controlar.

En la lección, reparar enlaces rotos en WordPress, puedes encontrar una serie de pasos y recursos que podrás utilizar para evitar los enlaces rotos y hacer redirecciones en tu sitio web.

¿Cómo crear y personalizar una página 404 en WordPress?

Típica página 404

2. ¿Por qué crear una página 404 personalizada?

La mayoría de plantillas suelen contener una página 404 genérica que ofrecerán al usuario. Puede que para ti no sea algo importante y, sabiendo que la plantilla ya ofrece una página 404, no te tomes la molestia de crear una página 404 personalizada.

A continuación te indico 5 razones por las cuales deberías hacerlo, tanto para tus usuarios como para el SEO:

2.1 Incrementa el número de páginas indexadas en Google

Cuando se tiene un sitio web con muchas páginas internas es posible que existan errores 404. Una de las formas más efectivas para aprovechar estos errores es poner enlaces "aleatorios" a páginas internas desde la página 404.

De esta manera, cuando los usuarios llegan a tu página 404, pueden hacer clic en cualquier enlace y continuar navegando en tu sitio web. Es posible que terminen encontrando lo que estaban buscando.

¿Cómo crear y personalizar una página 404 en WordPress?

Zalando ofrece algunos enlaces, en su página 404, para sus clientes

2.2 Genera confianza construyendo una imagen de marca consistente

A las personas les gusta las cosas consistentes. Cuando te vas familiarizando con un sitio web comienzas a confiar en el. Es importante ofrecer una imagen consistente manteniendo la esencia y estructura del sitio original.

Una página 404 "genérica" no generará confianza en el usuario y, el diseño de esta página, no debe confundirlo haciéndole pensar que está en un sitio web distinto.

Por esta razón, deberías crear una página 404 personalizada con una imagen similar a la imagen que ofreces en todo tu sitio web: logo, menú, colores, fuente entre otros.

¿Cómo crear y personalizar una página 404 en WordPress?

Lego genera confianza con una imagen de sus productos

2.3 Ofrece contenido "atractivo" a los usuarios insatisfechos

No es agradable buscar información en Internet y encontrarse con una página que muestre un error 404 "genérico". Lo más seguro es que te vayas y busques la información en otro sitio.

Por esta razón es importante ofrecer información relevante sobre tu sitio web en tu página 404 de manera que el usuario mantenga la atención en tu sitio y continúe navegando.

¿Cómo crear y personalizar una página 404 en WordPress?

Facebook utiliza su imagen "me gusta" con un toque divertido

2.4 Muestra más personalidad en tu diseño

Cuando personalices una página 404 en WordPress, intenta no ser tan formal. Es importante que muestres algo de "personalidad" de manera que conectes con tus usuarios.

Tus usuarios no son robots y tienen sentimientos. Si muestras algo de simpatía, alegría o entretenimiento, es posible que tus usuarios te recuerden por eso y pasen por alto el hecho que llegaron a una página de error.

¿Cómo crear y personalizar una página 404 en WordPress?

Disney ofrece una imagen y contenido referente a una de sus películas

2.5 Saca provecho de tu error

Al personalizar tu página 404 en WordPress, no solo asumes el error (que deberías intentar resolverlo cuanto antes) sino que también puedes lograr que el usuario pueda interesarse por tus servicios.

Por ejemplo, puedes ofrecer la descarga de una guía que el usuario ni siquiera estaba buscando o puedes ofrecer productos con descuentos en el caso que gestiones una tienda online.

Sea cual sea el caso, la idea principal es que el usuario se sienta como si no hubiera pasado nada y logre encontrar lo que estaba buscando en tu sitio web.

¿Cómo crear y personalizar una página 404 en WordPress?

Nike aprovecha la página 404 para promocionar algunos de sus productos

3. Crear una página 404 en WordPress

Antes de crear y personalizar una página 404 en WordPress, es importante que tengas en cuenta el tipo de contenido que deberá tener esta página:

  • Informa al usuario a qué tipo de página ha llegado.
  • Añade un contenido atractivo para el usuario.
  • Integra un enlace a la página de inicio.
  • Crea una llamada a la acción para solventar el error.

No es obligatorio que sigas estos puntos al pie de la letra. Todo dependerá del contenido que ofrezcas en tu sitio web.

En una tienda online es recomendable añadir un buscador de productos o los productos relacionados con el artículo que no han encontrado.

En un sitio web se pueden añadir los servicios o un apartado de contacto.

Si has seguido todo el curso de WordPress desde el inicio y has llegado a esta lección, recordarás que hemos estado utilizando la plantilla Astra.

Como te he mencionado, las plantillas suelen contener una página 404 por defecto. La página 404 de Astra se encuentra en la ruta wp-content/themes/astra/404.php.

Es un archivo PHP que contiene el código de la página 404 manteniendo el estilo y diseño del sitio web. En la siguiente imagen puedes observar como es la página 404 que ofrece Astra.

¿Cómo crear y personalizar una página 404 en WordPress?

Página 404 por defecto en Astra

Lo más lógico sería modificar el archivo 404.php para que muestre el contenido que queramos.

El código viene dado por:

<?php
/**
* The template for displaying 404 pages (not found).
*
* @link https://codex.wordpress.org/Creating_an_Error_404_Page
*
* @package Astra
* @since 1.0.0
*/

get_header(); ?>

<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>

    <?php get_sidebar(); ?>

<?php endif ?>

    <div id="primary" <?php astra_primary_class(); ?>>

        <?php astra_primary_content_top(); ?>

        <?php astra_404_content_template(); ?>

        <?php astra_primary_content_bottom(); ?>

    </div><!-- #primary -->

<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>

    <?php get_sidebar(); ?>

<?php endif ?>

<?php get_footer(); ?>

Pero, ¿entiendes algo? Porque yo no. No te preocupes que para eso está la magia de WordPress.

Para crear nuestra página 404, haremos lo siguiente:

  1. Crea una página que se llame Página 404. La URL de esta página puede ser del tipo www.midominio.com/404/.

En la lección, crear una página con WordPress, tienes un completo tutorial para que aprendas a crear una página con WordPress.

  1. En el bloque Ajustes de Astra, marca la casilla Desactivar título para que no muestre el título principal.
  2. En el bloque Yoast SEO, haz clic en el icono de la rueda dentada. En el selector ¿Permitir a los motores de búsqueda mostrar esta Página en los resultados? selecciona No y marca la opción  en ¿Deberían los motores de búsqueda seguir enlaces en esta Página?.
¿Cómo crear y personalizar una página 404 en WordPress?

Creación de una página 404 personalizada con WordPress

De esta forma la página no se indexa pero Google tomará en cuenta los enlaces internos que añadas a la página 404.

¿Cómo crear y personalizar una página 404 en WordPress?

Página 404 personalizada con Elementor

En la imagen anterior puedes apreciar un diseño que hemos realizado de una página 404, con Elementor, tomando en cuenta las recomendaciones citadas en esta lección:

  • Le hemos informado al usuario a dónde ha llegado.
  • Ofrecemos un contenido atractivo y directo.
  • Contiene un enlace a la página de inicio y una llamada a la acción: servicios y contacto.

Puedes ser creativ@ y hacer un sencillo diseño de una página 404 en tu sitio web.

Si trabajas con Elementor, en la lección, instalar Elementor en WordPress, puedes encontrar información actualizada para que aprendas a trabajar con este editor de contenidos.

En futuras lecciones veremos cómo diseñar páginas y entradas con Astra y Elementor.

4. Mostrar tu página 404 personalizada

Si tecleas en el navegador https://www.midominio.com/404/ (cambia midominio.com por tu dominio) podrás observar la página 404 que has creado para tu sitio web.

Sin embargo, si simulas un error 404 (escibiendo https://www.midominio.com/asdf, por ejemplo), verás que sigue apareciendo la página 404 que la plantilla tiene por defecto.

Entonces, necesitamos "algo" que muestre nuestra página 404 personalizada cuando se genere un error 404 en nuestro sitio web.

En la lección, reparar enlaces rotos en WordPress, hemos visto cómo instalar y configurar el plugin Redirection para hacer redirecciones con WordPress.

Es un plugin tan funcional que será muy útil para ayudarnos con las páginas 404 en nuestro sitio web.

Para instalar el plugin:

  1. Dirígete al apartado Plugins >> Añadir nuevo.
  2. En el campo de búsqueda escribe Redirection.
  3. Haz clic en Instalar ahora y seguidamente en Activar.
¿Cómo crear y personalizar una página 404 en WordPress?

Plugin Redirection

Una vez instalado el plugin, dirígete al apartado Herramientas >> Redirection y sigue los siguientes pasos:

  1. Haz clic en el botón Añadir nueva.
  2. En el campo URL origen escribe: /.*.
  3. En el selector Opciones de URL / Regex selecciona Expresión regular.
  4. En el campo URL destino escribe https://www.midominio.com/404/ (cambia midominio.com por tu dominio).
  5. Haz clic en el ícono de la rueda dentada al lado del botón Añadir redirección.
  6. En el selector Coincidencia selecciona URL y tipo de página de WordPress.
  7. Haz clic en el botón Añadir redirección.
¿Cómo crear y personalizar una página 404 en WordPress?

Configurando una redirección 404 con Redirection

De esta forma, cada vez que se genere un error 404 en tu sitio web, el plugin redirigirá automáticamente al usuario a tu página 404 personalizada.

Puedes simular un error 404 para comprobar el funcionamiento. Por ejemplo, https://www.midominio.com/asdf (cambia midominio.com por tu dominio).

5. Lo que nunca debes hacer

Cuando crees una página 404 en WordPress o hagas redirecciones evita hacer lo siguiente:

  • Redirigir los errores 404 a tu página de inicio. Esto confunde a los usuarios. Si ellos han hecho una búsqueda y Google les ha mostrado un resultado, estos quieren encontrar ese contenido y no otro.
  • Redirigir los errores 404 a otro sitio web. Esto es aún peor ya que tus usuarios no tendrán la posibilidad de conocer lo que les ofreces.
  • Crear una página 404 en Flash. Simplemente, no!
  • Crear un formulario de registro o contacto de 25 campos en tu página 404.

Ofrece siempre una página 404 con un contenido atractivo dando la posibilidad al usuario de encontrar lo que estaba buscando.

¿Cómo crear y personalizar una página 404 en WordPress?

Página 404 de gianoliveira.com

Conclusiones:

  • Los enlaces rotos pueden afectar el tráfico de tu sitio web si no los monitorizas y corriges regularmente.
  • A los buscadores, como Google, no les gusta los errores 404 y el SEO de tu sitio web se verá afectado.
  • Ofrece una página 404 atractiva, divertida y con toque humano.
  • Añade siempre la posibilidad (o posibilidades) de encontrar lo que el usuario estaba buscando.
  • Indica al usuario a donde ha llegado, asume el error e intenta ofrecerle algo a cambio.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(4 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de actualizaciones

Suscríbete para recibir notificaciones de las actualizaciones del curso en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.