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

Cuando un usuario encuentra nuestro sitio web (en Google, por ejemplo) y la URL indexada ya no existe, se genera un error. Suele ver la página 404 genérica, que viene por defecto con el tema, indicándole que la información solicitada no se encontró en nuestro sitio web.

Al crear un sitio web, no solemos prestar mucha atención a la página 404 pero, sabías que: ¿cada página 404 que es visitada en nuestro sitio web es una oportunidad que podríamos aprovechar?

Como alternativa, podemos crear una página 404 personalizada para causar una buena impresión, que mantenga a nuestros usuarios en el sitio web y los ayude a encontrar más información sobre lo que estaban buscando.

Índice del contenido
    Add a header to begin generating the table of contents

    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 nuestro sitio web.

    Por estas razones, 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 podemos corregirlas nosotros mismos, si el usuario escribe mal la URL que quiere visitar, no podríamos hacer absolutamente nada ya que no es una URL que exista en nuestro sitio web.

    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.

    Típica página 404
    Típica página 404

    Anuncio publicitario

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

    La mayoría de temas incluyen una página 404 genérica que se mostrará al usuario. Puede que no parezca algo importante y, sabiendo que el tema ya ofrece una página 404, no nos tomemos la molestia de crear una página 404 personalizada.

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

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

    Cuando tenemos 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 nuestra página 404, pueden hacer clic en cualquier enlace y continuar navegando en nuestro sitio web. Es posible que terminen encontrando lo que estaban buscando.

    Zalando ofrece algunos enlaces, en su página 404, para sus clientes
    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 nos vamos familiarizando con un sitio web comenzamos 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íamos crear una página 404 personalizada con una imagen similar a la imagen que ofrecemos en todo nuestro sitio web: logo, menú, colores, fuente entre otros.

    Lego genera confianza con una imagen de sus productos
    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 nos vayamos y busquemos la información en otro sitio.

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

    Facebook utiliza su imagen "me gusta" con un toque divertido
    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 de que llegaron a una página de error.

    Disney ofrece una imagen y contenido referente a una de sus películas
    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, podemos ofrecer la descarga de una guía que el usuario ni siquiera estaba buscando o podemos ofrecer productos con descuentos en el caso que tengamos 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 nuestro sitio web.

    Nike aprovecha la página 404 para promocionar algunos de sus productos
    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:

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

    Por ejemplo...

    En un sitio web se pueden añadir los servicios, un apartado de contacto y/o las últimas entradas del blog.

    En una tienda online es recomendable añadir un buscador de productos o destacar un producto en concreto.

    Si has seguido todo el curso de WordPress desde el inicio y has llegado a esta lección, recordarás que hemos estado utilizando el tema Astra en el desarrollo de nuestro sitio web.

    Astra Theme

    Uno de los mejores temas que puedes instalar para comenzar a crear un proyecto profesional con WordPress, es Astra. Este tema ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Este tema Multipurpose (múltiples propósitos) es ideal para crear blogs, sitios web corporativos y tiendas online en una misma instalación.

    Como te he mencionado, los temas 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.

    Página 404 por defecto en Astra
    Página 404 por defecto en Astra

    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
     */
    
    if ( ! defined( 'ABSPATH' ) ) {
    	exit; // Exit if accessed directly.
    }
    
    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(); ?> 
    				
    			

    Lo más lógico sería modificar el archivo 404.php para que muestre el contenido que queramos 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.

    En la lección, crear páginas con WordPress, puedes encontrar información para que aprendas a crear páginas 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 la pestaña Avanzado. 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 los enlaces que hay en esta Página?.
    3. Haz clic en Publicar.

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

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

    En el desarrollo de este curso de WordPress estamos trabajando con el editor de contenidos Elementor para el diseño de las páginas de nuestro sitio web.

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

    Puedes ser creativ@ y hacer un sencillo diseño de una página 404 en tu sitio web, ya sea con Elementor, o con cualquier editor de contenidos que estés utilizando, como Gutenberg.

    Página 404 personalizada con Elementor
    Página 404 personalizada con Elementor

    En la imagen anterior puedes apreciar el diseño de una página 404, hecho 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.
    Elementor Page Builder

    Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es Elementor. Ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Es rápido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.

    4. Mostrar una página 404 personalizada

    Si abrimos en el navegador la página que hemos creado, podremos observar nuestra página 404.

    Sin embargo, si simulamos un error 404 (escibiendo https://www.midominio.com/asdf, por ejemplo), verás que sigue apareciendo la página 404 que viene por defecto con el tema.

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

    Para esto haremos uso del plugin Redirection. Un plugin gratuito que podemos instalar desde el repositorio de plugins de WordPress.

    Aunque existen muchos plugins específicos para realizar esta tarea, este plugin ofrece la posibilidad de hacer cualquier tipo de redirección en WordPress y así evitamos usar otro plugin.

    https://es.wordpress.org/plugins/redirection/

    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.

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

    1. Haz clic en Añadir nueva.
    2. En el campo URL origen escribe: /.* (barra+punto+asterisco).
    3. En el selector Opciones de URL / Regex selecciona Expresión regular.
    4. En el campo URL destino escribe la URL de la página 404 que has creado.
    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 Añadir redirección.
    Configurando una redirección 404 con Redirection
    Configurando una redirección 404 con Redirection

    De esta forma, cada vez que se genere un error 404 en nuestro sitio web, el plugin redirigirá automáticamente al usuario a nuestra 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.

    Anuncio publicitario

    6. Conclusiones

    ¿Te ha gustado?

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

    (22 votos, promedio: 4.8 de 5)

    Facebook
    Twitter
    WhatsApp
    Telegram
    Email

    ¿Me invitas un café?

    Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo será pero, mantenerlo, requiere de muchos cafés y muuuuchas horas . Si te gusta mi trabajo y te está ayudando, considera invitarme un café para apoyarme y apoyar este proyecto. ¡Te invito un café!.

    Suscríbete y aprende WordPress desde cero

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    Suscríbete!
    Avísame sobre

    7 Comentarios
    Inline Feedbacks
    Ver todos los comentarios

    Hola, he utilizado el plugin REDIRECTION y al configurarlo todas las páginas me llevan a la página 404. no puedo visualizar el resto. ¿Cómo puedo solucionarlo' Muchas gracias!

    ¡Interesante información! Fue muy útil.
    Solo tengo una pregunta, mi sitio web tiene tanto idioma al español como en inglés.
    Solo que no sé, cómo puedo redireccionar una página 404 cuando este en español y otra cuando esté en inglés.
    Uso el plugin Polylang para hacer las traducciones y me agrega el prefijo "/es/" o "/en/" dependiendo el idioma.
    Y creo que con eso podría jugar con la redirección, solo que no se como formularlo en inglés.
    ¿Qué podrías sugerirme? Por favor.
    Muchas gracias.

    Hola Francisco, nunca he usado Polylang por lo que desconozco su funcionamiento. El método que recomiendo funciona para un sitio web de 1 idioma. En tu caso, lo que se me ocurre, es que crees 2 páginas 404 (una para cada idioma) y uses un script (JS o PHP) que redireccione a cada página según el idioma del navegador del usuario o IP, por ejemplo. Espero que lo consigas. Un saludo!

    ¡Gracias! Muy útil 🙂

    Hola Carlos, me alegra que te haya sido útil. Gracias por comentar. Saludos!

    Osea que para que aparezca nuestra página de error 404 necesitaremos del plugin si o si

    Hola Facundo, la página 404 viene por defecto con los temas y siempre va a aparecer. En este caso hemos creado una página 404 personalizada con Elementor pero, al ser la versión gratuita, necesitamos de otro plugin para que muestre la página 404 personalizada. Con Elementor PRO no haría falta otro plugin. Un saludo!

    7
    0
    ¿Dejas un comentario? Gracias!x

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@cursowordpress.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Moderar y responder comentarios de usuarios.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@cursowordpress.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.