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.
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:
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.
Anuncio publicitario
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:
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.
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.
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.
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.
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.
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.
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.
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:
En la lecci贸n,聽crear p谩ginas con WordPress, puedes encontrar informaci贸n para que聽aprendas a crear p谩ginas聽con WordPress.
De esta forma la p谩gina no se indexa pero聽Google tomar谩 en cuenta los enlaces internos聽de la p谩gina 404.
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.
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:
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.
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:
Una vez activo el plugin, dir铆gete al apartado Herramientas >> Redirection y sigue los siguientes pasos:
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).
Cuando crees una p谩gina 404 en WordPress o hagas redirecciones聽evita hacer lo siguiente:
Crear una p谩gina 404 con un contenido atractivo, ofrecer谩 una posibilidad al usuario de continuar y encontrar lo que estaba buscando.
Anuncio publicitario
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.
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!