Personalizar una página de error 404 con WordPress y Divi

por | May 6, 2021 | Diseño web wordpress, Posicionamiento SEO | 0 Comentarios

Una página de error 404 es aquella que aparece en tu navegador cuando no encuentra una determinada página web a la que estás intentando acceder. Seguro que las has visto por todos lados y hasta te habrás acostumbrado a ellas. En ocasiones pueden parecer invisibles, pero lejos de serlo tienen una gran importancia en tu web tanto para tu posicionamiento, cómo para la experiencia de usuario de tus lectores.

En este post te voy a explicar cómo puedes crear una página de error 404 personalizada usando Divi y WordPress. Sin más plugins adicionales.

Pero antes…

¿Qué es un error 404?

Cómo acabo de comentar en la introducción, una página de error 404 es aquella que aparece cuando un navegador no puede mostrar una determinada página web. Las causas son muy diversas, desde que el propietario de un sitio web ha borrado esa página o bien, la ha movido de sitio.

Causas de un error 404

Cuando visualizamos esto en nuestras pantallas normalmente se deberá a a los siguientes motivos:

  • La causa más común es que el propietario de un sitio web ha movido el contenido o lo ha eliminado.
  • También se puede deber a que alguien ha accedido a una dirección web incorrecta.
  • Que una página indexada por Google se ha borrado o se ha movido de dirección.
  • Otro caso clásico sería una página de inscripción que ya no esté disponible porque ha pasado el plazo de inscripción.

Existen más escenarios, pero los que te acabo de comentar serían los motivos más comunes.

Te propongo un ejemplo:

Imagina que en tu sitio web tienes una categoría llamada Diseño web. Y que en ella tienes un post llamado Cómo crear una página web en wordpress.

La dirección podría ser: https://tudominio.com/diseno-web/como-crear-una-pagina-web-wordpress

Ahora supongamos que decides cambiar el nombre a la categoría de diseño web, a diseño web wordpress.

Tras realizar este cambio la dirección de tu entrada quedaría así: https://tudominio.com/diseno-web-wordpress/como-crear-una-pagina-web-wordpress

¿Qué pasará? 

Simple. Imagina que Google tenía indexada la primera url y no la segunda. Si alguien encuentra esa dirección y hace click se encontrará con una página de error que le indicará que el contenido ya no existe. ¡Un error 404! Pero en realidad el contenido sigue estando en tu web solo que en otra dirección que no está indexada en Google.

En cualquier de los casos, es motivo de nuestra atención urgente ya que nos van a repercutir negativamente.

Consecuencias de un error 404

Esta clase de errores no son un error más, son importantes de corregir cuanto antes por varios motivos:

  • Suponen una experiencia negativa para el lector. Al que le estaremos transmitiendo una sensación de dejadez.
  • Se va a ver afectada tu reputación, imagen y credibilidad sobre tus lectores.
  • Por supuesto se va a ver especialmente afectado el posicionamiento en Google de tu web al completo.
  • Si los buscadores detectan muchos error 404 en una página web interpretaran que la página no está siendo suficientemente revisada ni mantenida.
  • Esto terminará afectando negativamente sobre el PageRank de tu sitio y bajarás posiciones.
  • Estos errores son especialmente perjudiciales para las tiendas online o cualquiera que venda servicios online ya que implicará la pérdida de clientes potenciales.

Ejemplos de un error 404 mal cuidados

A continuación te enseño el ejemplo clásico de un error 404 que NUNCA debería dar tu página web.

Vale lo se, esto es muy antiguo, pero en pleno s.XXI hay páginas web con errores como el que te muestro.

Webnode - Configuración del mensaje de página no encontrada (Error 404)

Esta pantalla es terrible, además no muestra ningún motivo por el que la página solicitada no está disponible, simplemente no está…

Qué es el error 404? ¿Cómo solucionarlo? | Systems

Ejemplos de un error 404 bien cuidados

En realidad no hay errores 404 buenos, pero si que los puedes trabajar de tal manera para que la experiencia de usuario sea satisfactoria y le puedas guiar de vuelta hacia tu sitio web. A continuación te muestro algunos ejemplos:

14 propuestas originales de páginas de error 404

Esta simpática página de error de Homer Simpson, es perfecta. Por un lado te indica que la página que la página ya no existe en este servidor y además, te da una serie de links donde está el contenido que le puede interesar al lector.

Personalizar la página de error 404 en WordPress - DecodeCMS

Este es otro ejemplo divertido que le indica al lector que puede que se haya perdido y le da la opción de ir a la página de inicio para buscar el contenido.

Finalmente te muestro yo utilizo en esta misma página. En la que indico que la página ya no existe y le doy varias opciones de contenido para indicar al lector que vaya a buscar el contenido más adecuado para él.

¿Cómo encontrar URL con errores en mi sitio web?

Detectar error 404 en tu sitio web en realidad es fácil, basta con utilizar alguna de las herramientas de analítica web siguientes: Google Search Console, W3C Link Checker, Broken Link Check o Dead Link Checker.

Todas ellas responden a un funcionamiento similar, simplemente hay que introducir una dirección web determinada y te mostrará un análisis completo de todas las direcciones de un sitio web.

Si el resultado muestra páginas con error deberás valorar si el error hace una referencia a una página interna o externa a tu sitio web.

La solución normalmente será tan fácil como poner una redirección 301 hacia la dirección correcta o bien retirar las direcciones erróneas a través del Google Search Console. Puedes revisar la entrada ¿Qué es una redirección 301 y cuando utilizarla?

¿Por qué es tan importante tenerlo bien optimizado?

Te propongo el siguiente ejemplo:

¿Te imaginas visitar una tienda de tu barrio o tu ciudad en horario comercial y encontrarla cerrada, con las persianas bajadas, sin nota alguna sobre el motivo de por qué está así?

Es posible que pienses:

  • … que el propietario está enfermo y no ha podido ir a trabajar.
  • … que ha tenido un improviso y ha tenido que salir corriendo.
  • … que ha cerrado la tienda que llevaba abierta hace 10 años.
  • … puedes pensar infinitos escenarios

En cualquier caso, si el propietario no ha informado lo que ha pasado con su tienda y la encuentres cerrada, probablemente te vas a ir a la tienda de la competencia a buscar lo que estabas buscando.

Si por el contrario te encuentras un cartel en la puerta que te indica:  «He tenido que salir urgentemente, volveré en 15 minutos»

Es probable que si sientes cierta afinidad y empatía con esa tienda y su propietario. Si pasa esto puede que vuelvas mas tarde si te va bien, o incluso puede que esperes a que regrese si no tienes prisa.

Mejora de la experiencia del usuario

Una página de error 404 bien optimizada va a hacer la misma función que el cartel en la puerta de una tienda física. Informar a tu lector que algo ha pasado con esa página pero lo tienes controlado y le puedes guiar hacia el contenido que está buscando.

El lector que ha llegado a tu página verá que la página ya no está disponible, pero que puede acceder al contenido que busca de otra manera o incluso, puede contactar contigo desde esa página. Pero además, estarás contribuyendo a mejorar tu reputación, tu imagen y tu credibilidad.

Conseguirás retener a tus lectores

El 90% de usuario que llegan a una página de error (http 404) se van y no regresarán jamás.

Si tienes la página bien optimizada y controlada tu lector no se irá de la página, sino que accederá al sitio dónde esté el contenido que anda buscando.

Posicionamiento SEO

¡Google lo mide todo! Por supuesto, si un usuario llega a tu sitio y a los pocos segundos se va, Google lo sabe. Si esto pasa repetidamente los buscadores te penalizarán disminuyendo el PageRank de tu sitio web completo y perderás posiciones en el buscador.

Si por lo contrario, y a pesar de encontrar un error 404 se puede navegar hasta el contenido que están buscando, Google lo sabrá. Verá que los usuarios no abandonan tu sitio a pesar de encontrar estos errores 404 y no te penalizará.

CUIDADO: ¡Que no digo que no se tenga que arreglar! Digo que no es tan grave.

Consideración final

Optimizar y personalizar una página de error 404 no significa que ya esté todo solucionado. Tienes que trabajar para prevenir que estos errores aparezcan en tu sitio. Algunas buenas prácticas que puedes aplicar son:

  • Tener una buena planificación de las URL de tu sitio.
  • Utilizar enlaces permanentes únicamente con el nombre de tu entrada.
  • Quitar del índice de Google de mediante el Search Console, aquellas páginas que hayas quitado o modificado de tu sitio.
  • Utilizar redirecciones 301 y 302 según consideres. Más adelante hablaremos de ellas.
  • Indicarle a google mediante Yoast SEO que no indexe determinado contenido si realmente no lo tiene que indexar.

Ahora si, ha llegado el momento que te explique cómo puedes personalizar tu página de error 404 utilizando Divi.

Cómo personalizar la página de error 404 usando WordPress y Divi

Ahora que ya conoces la importancia de tener el error 404 bajo control, te voy a mostrar cómo puedes crear una página personalizada utilizando el constructor de Divi. Has de tener en cuenta que existen otras formas de hacerlo. Existen plugins especialmente pensados para esta función, también la podrías crear un Elementor o con cualquier constructor que estés utilizando.

En este caso te voy a mostrar cómo puedes crear una página sencilla utilizando Divi.

Acceder al generador de temas

El generador de temas de Divi es una herramienta muy útil y potente para maquetar tu página web, pero la realidad es que muy poca gente (al principio) conoce de su existencia y no la utiliza. Con ella puedes maquetar prácticamente todo el contenido de tu página web de una forma completamente personalizada. Puedes modificar el diseño por defecto de las páginas, de las entradas del blog, de la página de entradas del blog, categorías o autores de wordpres, etc. Por supuesto también vas a poder maquetar la página de error 404.

Crear una plantilla de error 404

1. Para poder crearla tendrás que ir al menú de WordPress > Divi > Generador de temas.

2. Una vez allí tendrás que hacer clic en la opción agregar nueva plantilla y seleccionar la opción 404 página

3. Desactivaras las opciones de cabecera y pie de página tal y como te muestro en la siguiente imagen.

4. Finalmente tendrás que hacer clic en cuerpo personalizado y seleccionar la opción construir cuerpo personalizado que te aparecerá

Maquetar la página de error 404

Si conoces Divi estarás familiarizado o familiarizada con la pantalla del constructor que acaba de aparecer ante tus ojos. Ahora simplemente puedes dar rienda suelta a tu imaginación y crear una página de error personalizada a tu gusto. Si quieres ver el proceso completo, te he preparado un vídeo en el que explico todo el proceso.

Video resumen de todo el proceso de creación

Conclusiones

Por fin llegamos al final de esta entrada teórico práctica en la que has aprendido la importancia de los errores 404,  por qué hay que minimizarlos al máximo y tenerlos bajo control. En este aspecto guiar a tu lector a través de tu página web tiene que ser tu gran obsesión. Tu objetivo será a partir de ahora que no abandonen tu sitio si no encuentran una página.

Te resumo los principales beneficios de tener los errores 404 bajo control:

  • Mejoraras la experiencia de usuario de tus lectores.
  • Puedes mostrar el contenido que tienes en tu web.
  • Consecuentemente conseguirás retener lectores y que no abandonen tu web.
  • Google sabrá que los usuarios no abandonan tu página y por tanto mantendrá o mejorará tu posicionamiento.
  • Haciendo esto y aplicando una estructura de enlaces nofollow, mejorarás el posicionamiento SEO de tu web.

En esta entrada te explico que ¿Qué es eso de las redirecciones 301 o 302?.  También te explicaré  cómo puedes añadir o retirar url’s del índice de Google para mejorar tu posicionamiento orgánico.

Hasta entonces solo deseo que te haya parecido interesante esta entrada del blog pero sobre todo que lo apliques en tu sitio web y que compartas este conocimiento.

Por supuesto, si tienes dudas me las puedes dejar en los comentarios y estaré encantado de respondértelas.

Y a nivel personal te pediré que si te gustan estos contenidos los compartas entre las personas de tu círculo social, y que te  a mi lista para no perderte ni un solo contenido.

Francisco Sánchez

Francisco Sánchez

Diseño web especializado en conversiones. Fundador Nomadwebs.com Mi propósito es acompañar a emprendedores y Pymes en la digitalización de negocios utilizando el diseño web, estrategias de marketing digital y embudos de venta.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Anuncio - Hosting Web de SiteGround - Diseñado para una fácil administración web. Haz clic para saber más.

Te puede interesar

¡WordPress cumple 20 años! La herramienta que revolucionó Internet

¡WordPress cumple 20 años! La herramienta que revolucionó Internet

Si hoy te hablo de WordPress y lo estás leyendo, creo que no hace falta que te lo presente. Desde sus modestos inicios como plataforma de blogs, WordPress ha evolucionado en las dos últimas décadas para convertirse en el sistema de gestión de contenido más popular del...

Crea tu web sin programar con Divi, Elementor y Midjourney

Crea tu web sin programar con Divi, Elementor y Midjourney

¿Te gustaría crear tu propia web sin necesidad de saber programar? ¿Quieres saber cuáles son las mejores opciones para hacerlo de forma rápida y eficaz? En este post te voy a hablar de los dos constructores visuales más populares y potentes del mercado: Divi y...

Cómo añadir textos en Divi correctamente

Cómo añadir textos en Divi correctamente

Imagina por un momento que eres yo. Y ahora te cuento una situación bastante habitual. Me paso unas semanas, quizá un par de meses, realizando la web de un cliente. Se la entrego perfecta, toda limpia, con todas las tipografías perfectas, las imágenes en su sitio,...