¬Ņ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>
    <?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¬†S√≠¬†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.

    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.

    (12 votos, promedio: 4.9 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on whatsapp
    WhatsApp
    Share on telegram
    Telegram
    Share on email
    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.

    guest
    6 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    Francisco Romero

    ¬°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.

    Gian Oliveira

    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!

    Carlos

    ¬°Gracias! Muy √ļtil ūüôā

    Gian Oliveira

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

    Facundo

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

    Gian Oliveira

    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!

    6
    0
    ¬ŅDejas un comentario? Gracias!x
    ()
    x
    Search
    Generic filters

    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.