Cuando diseñamos sitios web de WordPress, uno de los elementos más pasados por alto pero cruciales es la página de error 404. Muchos propietarios de sitios no se dan cuenta de que una página 404 bien elaborada puede ser una herramienta poderosa para la retención y el compromiso del usuario.
En nuestra experiencia, una página 404 predeterminada es una oportunidad perdida. Hemos visto de primera mano cómo una página 404 personalizada puede convertir un punto de salida potencial en una oportunidad para guiar a los visitantes de regreso a contenido valioso.
En este artículo, le mostraremos 2 métodos efectivos para mejorar su plantilla de página 404 de WordPress.
¿Por qué mejorar su plantilla de página 404 en WordPress?
La mayoría de los temas de WordPress vienen con una plantilla 404 básica, incluidos los temas predeterminados de WordPress.
Por ejemplo, en la siguiente imagen, puede ver la página 404 de ThemeIsle Hestia.
La mayoría de estas plantillas predeterminadas son simples y no muestran ningún contenido de su sitio. Esto significa que es más probable que cualquiera que aterrice en su página 404 abandone su sitio web de WordPress, lo que aumentará su tasa de rebote.
Esto son malas noticias para su SEO de WordPress y puede afectar dónde aparece su sitio en los rankings de los motores de búsqueda.
Dicho esto, es una buena idea crear una página 404 con su propio contenido y marca.
Una página 404 personalizada es una excelente manera de promocionar contenido, como las publicaciones o productos más populares de tu tienda en línea. También puedes incluir enlaces a tus perfiles de redes sociales, destacar tus comentarios más recientes y más.
Si buscas inspiración, hemos recopilado los mejores ejemplos de diseño de páginas de error 404 para que los veas.
Dicho esto, veamos cómo puedes mejorar tu plantilla de página 404 en WordPress. Puedes usar los enlaces rápidos a continuación para saltar directamente al método que deseas usar:
- Método 1: Crea una página 404 personalizada en WordPress sin código (recomendado)
- Method 2: Create a 404 Page Using the Full Site Editor (Block Themes Only)
Método 1: Crea una página 404 personalizada en WordPress sin código (recomendado)
La mejor manera de mejorar la página 404 de tu sitio es usando SeedProd.
SeedProd es el mejor constructor de páginas de destino para WordPress. Te permite crear, editar y personalizar tus páginas de WordPress sin escribir ningún código.
SeedProd viene con más de 300 plantillas listas para usar, incluyendo muchos diseños 404. Esto significa que puedes crear una página 404 con diseño profesional en minutos.
Lo primero que debes hacer es instalar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Existe una versión gratuita de SeedProd que te permite crear hermosas páginas de mantenimiento y páginas de 'próximamente'. Sin embargo, utilizaremos el plugin premium ya que te permite reemplazar la plantilla 404 integrada de tu tema.
Después de activar el plugin, SeedProd te pedirá tu clave de licencia.
Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de ingresar la licencia, haz clic en el botón 'Verificar clave'.
Una vez que hayas hecho eso, ve a SeedProd » Landing Pages. En la sección 'Página 404', haz clic en 'Configurar una página 404'.
Ahora puedes elegir una plantilla para tu página 404.
Para previsualizar un diseño, simplemente pasa el cursor del ratón sobre él y luego haz clic en la lupa.
Cuando encuentres un diseño que te guste, simplemente haz clic en 'Elegir esta plantilla'.
Estamos usando 'Oh No 404 Page' en todas nuestras imágenes, pero puedes usar el diseño que quieras.
Después de seleccionar una plantilla, serás llevado al constructor de arrastrar y soltar, donde podrás comenzar a personalizar la página 404.
En el lado izquierdo de la pantalla, encontrarás bloques y secciones que puedes agregar a tu diseño. El lado derecho de la página muestra una vista previa en vivo.
La mayoría de las plantillas 404 ya tienen algunos bloques, que son una parte fundamental de todos los diseños de SeedProd.
Para personalizar cualquiera de estos bloques, simplemente haz clic para seleccionarlo en tu diseño. Luego, puedes hacer cambios usando la configuración en el menú de la izquierda.
Para agregar un nuevo bloque a tu diseño, simplemente busca el bloque en el menú de la izquierda. Luego, arrástralo a tu diseño. Ahora puedes personalizar el bloque siguiendo el proceso descrito anteriormente.
Para empezar, normalmente querrás agregar el logo de tu sitio web a la página 404 para que los visitantes sepan que todavía están en tu sitio.
Para reemplazar el logo de SeedProd con tu propia marca, simplemente haz clic para seleccionar el logo de marcador de posición en tu diseño. Luego, pasa el mouse sobre la imagen en el menú de la izquierda.
Cuando aparezca, haz clic en el botón 'Seleccionar imagen'.
Esto abre la biblioteca de medios de WordPress, donde puedes seleccionar cualquier imagen o subir un nuevo archivo desde tu computadora.
Muchas plantillas 404 también muestran el menú de navegación principal de tu sitio. Si tienes varios menús, es posible que prefieras mostrar uno diferente en su lugar.
Para hacer este cambio, simplemente haz clic en el bloque 'Nav Menu' en tu plantilla. Luego, puedes abrir el menú desplegable 'Menu' y elegir cualquier menú de la lista.
Para más información, por favor consulta nuestra guía sobre cómo agregar menús de navegación personalizados en temas de WordPress.
Cuando un visitante llega a tu página 404, puede confundirse sobre cómo llegó allí y qué hacer a continuación. Dicho esto, es una buena idea agregar algo de texto explicando que el contenido no se puede encontrar y sugiriendo algunas acciones a seguir.
Para hacer esto, agrega un bloque de 'Encabezado' y un bloque de 'Texto' a tu diseño. Luego puedes escribir tu mensaje en el editor de texto en el menú de la izquierda.
A continuación, vamos a cambiar el botón 'Volver a inicio' para que anime a las personas a ver una publicación específica en lugar de simplemente regresar a la página de inicio.
Por ejemplo, podrías promocionar tus publicaciones más recientes o mostrar tus publicaciones con más comentarios.
Para personalizar el botón, simplemente haz clic para seleccionarlo en el diseño de la página. En el campo 'Enlace', escribe la URL que deseas usar en su lugar.
Dado que el botón ya no enlaza a la página de inicio, querrás reemplazar la etiqueta 'Volver a inicio'. Simplemente ve y escribe un nuevo mensaje en el cuadro 'Texto del botón'.
Una vez que hayas hecho eso, haz clic en la pestaña 'Avanzado'. Aquí, puedes cambiar el color, el tamaño y más del botón.
Esto es todo lo que necesitas para crear una página 404 personalizada simple. Sin embargo, hay muchas otras características y contenido que pueden mejorar la experiencia del visitante, mantener a las personas interesadas e incluso ayudarte a obtener más conversiones.
Dicho esto, veamos algunas características avanzadas que puedes agregar a tu página 404.
Agrega tus publicaciones más populares a tu página 404 de WordPress
Para empezar, quizás quieras mostrar una lista de tus publicaciones más populares. Dado que estos artículos son populares, hay una buena probabilidad de que los visitantes encuentren algo que les guste.
Puedes crear esta lista automáticamente usando el plugin MonsterInsights. Es la mejor solución de análisis para WordPress, utilizada por más de 3 millones de sitios web.
MonsterInsights puede ver qué publicaciones reciben más visitantes y agregarlas a tu página 404. Para más detalles, consulta nuestra guía sobre cómo mostrar las publicaciones populares por visitas en WordPress.
Después de activar MonsterInsights, puedes mostrar tus publicaciones más populares agregando un shortcode en WordPress. En el menú de la izquierda de SeedProd, simplemente busca el bloque 'Shortcode' y arrástralo a tu diseño.
Ahora, copia el siguiente shortcode:
[monsterinsights_popular_posts_widget theme="beta"]
Después de eso, haz clic para seleccionar el bloque Shortcode en el editor de SeedProd. Ahora puedes pegar el código en el menú de la izquierda.
Por defecto, SeedProd no muestra una vista previa de tus publicaciones más populares dentro del editor de páginas, por lo que deberás hacer clic en el botón 'Vista previa' en la esquina superior derecha para ver el shortcode en acción.
Si deseas ver la lista de publicaciones populares dentro del editor de SeedProd, simplemente haz clic en el interruptor 'Mostrar vista previa del shortcode'.
En el shortcode anterior, estamos usando theme=“beta” para nuestra lista, pero MonsterInsights tiene varios temas diferentes que puedes usar.
Para ver los diferentes temas, ve a Insights » Publicaciones Populares en el panel de WordPress y luego haz clic en 'Widget de Publicaciones Populares'.
Ahora puedes hacer clic en los diferentes temas para ver una vista previa.
Cuando encuentres un diseño que te guste, simplemente actualiza el shortcode en SeedProd. Por ejemplo, si deseas usar el tema 'Alpha', deberás escribir:
[monsterinsights_popular_posts_widget theme="alpha"]
Muestra tus productos más populares de WooCommerce
Si tienes una tienda en línea, es posible que desees mostrar tus productos de WooCommerce más vendidos en la página 404. De esta manera, tu página 404 personalizada puede ayudarte a generar más ventas.
En el menú de la izquierda, busca el bloque de Productos más vendidos y arrástralo a tu diseño.
SeedProd mostrará algunos productos automáticamente. Sin embargo, puedes ajustar este bloque seleccionándolo en el editor y luego usando la configuración en el menú de la izquierda.
Por ejemplo, puedes cambiar el número de columnas en el bloque, agregar paginación, permitir a los compradores filtrar los productos más vendidos, y más.
Para más información, consulta nuestra guía sobre cómo mostrar productos populares de WooCommerce.
A pesar del nombre, puedes usar este bloque para mostrar otros tipos de productos. Por ejemplo, podrías mostrar productos en oferta o tus artículos mejor valorados.
Para ver las diferentes opciones, abre el menú desplegable 'Tipo' y luego elige una opción de la lista.
Agrega un formulario de contacto a tu página 404 de WordPress
También podrías querer agregar un formulario de contacto para que los visitantes puedan comunicarse si no encuentran lo que buscan. Este formulario también ofrece a las personas una forma fácil de reportar errores 404 para que puedas corregir estos enlaces rotos y mejorar la experiencia para futuros visitantes.
Para más información, por favor consulta nuestra guía completa sobre cómo corregir enlaces rotos en WordPress.
La mejor manera de agregar un formulario de contacto a tu sitio es usando el plugin WPForms. Es el mejor plugin de formularios de contacto para WordPress y viene con un constructor de formularios de arrastrar y soltar.
Para más detalles, consulta nuestra guía paso a paso sobre cómo crear un formulario de contacto en WordPress.
Una vez que hayas creado un formulario de contacto, puedes agregarlo a tu página 404 usando el bloque 'Formulario de contacto'. Simplemente busca el bloque en el menú de la izquierda y arrástralo a tu diseño.
Luego, abre el menú desplegable 'Seleccionar un formulario' y elige tu formulario de contacto de la lista.
El editor de páginas ahora mostrará una vista previa del formulario de contacto.
Es posible que desees agregar algo de texto introductorio a tu formulario de contacto o animar a los visitantes a ponerse en contacto.
Para hacer esto, simplemente agrega un bloque de 'Encabezado' o 'Texto' encima de tu formulario de contacto y luego escribe el texto que deseas usar.
Cómo publicar la página 404
Cuando estés satisfecho con el aspecto de la página 404, es hora de publicarla.
Simplemente haz clic en la flecha desplegable junto a 'Guardar' y luego selecciona 'Guardar como plantilla'.
Cuando se te solicite, escribe un nombre para la plantilla. Esto es solo para tu referencia, así que puedes usar lo que quieras.
Después de eso, haz clic en ‘Guardar Plantilla’.
En la siguiente ventana emergente, haz clic en ‘Regresar al Editor de Página’. Luego puedes hacer clic en el botón ‘X’ en la esquina superior derecha para cerrar el editor de páginas de SeedProd.
En este punto, es posible que veas una ventana emergente preguntando si deseas publicar tu diseño 404. Si estás de acuerdo, haz clic en ‘Sí, Activar’.
Si no deseas publicar la plantilla en este momento, haz clic en ‘No, Cerrar’ en su lugar.
Después de eso, puedes publicar el diseño en cualquier momento yendo a SeedProd » Páginas. Aquí, haz clic en el interruptor en la sección ‘Página 404’ para que muestre ‘Activa’.
Para ver tu página 404 en acción, simplemente agrega /404 al final de tu nombre de dominio.
Después de publicar tu página 404 personalizada, es una buena idea rastrear cómo interactúan las personas con esa página. Esto te permite ver qué funciona y qué no, para que puedas ajustar tu diseño 404 y obtener más conversiones e interacciones.
Para obtener más información, consulta nuestra guía para principiantes sobre cómo instalar Google Analytics en WordPress.
Método 2: Crea una página 404 usando el Editor de Sitio Completo (Solo Temas de Bloques)
Si estás utilizando un tema de WordPress habilitado para bloques, entonces puedes editar la página 404 de tu sitio en el editor de sitio completo.
Para empezar, dirígete a Apariencia » Editor en el panel de WordPress.
Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema.
Para editar la página 404, haz clic en 'Plantillas'.
Ahora verás una lista de todas las plantillas que componen tu tema basado en bloques, como tu página de blog y página de archivos.
Simplemente haz clic en '404'.
WordPress ahora mostrará una vista previa del diseño actual de la página 404.
Para continuar y editar esta plantilla, haz clic en el pequeño icono del lápiz.
El editor de sitio completo funciona de manera similar al editor de contenido de WordPress estándar.
Para agregar bloques al diseño, haz clic en el botón '+'.
Ahora puedes escribir el bloque que deseas agregar a la página 404.
Por ejemplo, es posible que desees mostrar tus publicaciones recientes. Para hacer esto, simplemente escribe 'Últimas publicaciones' y luego arrastra el bloque a tu diseño.
Después de agregar un bloque, es posible que desees personalizarlo.
Puedes hacer clic para seleccionar el bloque en la vista previa. El menú del lado derecho mostrará todas las configuraciones que puedes usar para cambiar el contenido y la apariencia del bloque.
Las opciones que ve pueden variar según el bloque que haya seleccionado. Sin embargo, normalmente podrá cambiar el color de fondo, el color del texto y cambiar el tamaño de la fuente.
Incluso puede que desee mostrar las publicaciones recientes como un menú desplegable si es necesario.
Ahora puede continuar agregando bloques a su diseño y ajustándolos siguiendo el mismo proceso descrito anteriormente. También puede que desee organizar sus widgets de WordPress en columnas o usar patrones de bloques de WordPress para crear una página 404 personalizada más rápido.
Cuando esté satisfecho con el aspecto de la página 404, haga clic en 'Guardar' para publicarla.
Ahora, si agrega /404 al final del nombre de dominio de su sitio web, verá la página 404 personalizada en acción.
¿Cuándo debes redirigir las páginas 404?
Una de las causas más comunes de los errores 404 es cuando el visitante cometió un error genuino al escribir la URL.
En este caso, por lo general no necesitas redirigir al usuario a otra página. Pero te recomendamos seguir las mejores prácticas que te hemos mostrado para que vuelvan a encarrilarse.
Dicho esto, si no tienes tiempo para crear una plantilla de página 404 personalizada, es posible que desees redirigir a los usuarios a la página de inicio mientras tanto. De esta manera, aún puedes mantener a los usuarios en tu sitio web.
Aparte de eso, también sugerimos encarecidamente rastrear y redirigir los errores 404. Hacer esto te permite encontrar qué enlaces los usuarios no pudieron acceder y puedes redirigirlos a las páginas más relevantes.
Como resultado, puedes maximizar la oportunidad de aumentar las visitas a la página y reducir las tasas de rebote. Además, puedes conservar los backlinks que se han enlazado a estas páginas para mantener la autoridad de tu dominio.
El plugin All in One SEO tiene un práctico registro de errores 404 y una función de redirección que puedes usar. No necesitas ningún conocimiento técnico para usarlo correctamente, ya que es bastante fácil de usar desde el principio.
Si deseas más recomendaciones de plugins, consulta nuestra lista de los mejores plugins gratuitos de redirección 404 para WordPress.
Tutorial en video
Esperamos que este artículo te haya ayudado a mejorar la plantilla de tu página 404 en WordPress. También te puede interesar ver nuestras selecciones expertas de los mejores plugins de publicaciones populares para WordPress y nuestro artículo sobre la anatomía de una página de destino de alta conversión.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Olaf
La página 404 es una mezcla de diversión y desafío para mí. Intento diseñarla de manera que no solo coincida con el estilo del sitio web, sino que también aporte un poco de humor a una situación frustrante en la que el contenido simplemente ya no existe y no volverá. En ese momento, el usuario está obviamente frustrado y listo para buscar en otro lado. ¿Cómo lo retienes? Ese es el objetivo secundario de una página 404. Es interesante experimentar con diferentes formas de retener al usuario y evitar aumentar innecesariamente la tasa de rebote. Hay bastantes métodos, y el más efectivo parece ser ofrecer contenido alternativo que pueda interesarle, para que no se vaya de inmediato.
Lo que más disfruto, sin embargo, es idear diseños y conceptos humorísticos para hacer sonreír al usuario, incluso en una situación tan desagradable. Creo que esto ayuda a evitar que el usuario se frustre y ayuda a construir una buena relación desde el principio. Y, sobre todo, si puedes hacer sonreír a alguien, puedes convertir fácilmente una desventaja en una ventaja. Por eso me encanta crear páginas 404 y pensar ideas para ellas.
Jiří Vaněk
Tener una página 404 personalizada en lugar de la predeterminada que ofrece WordPress es muy importante para mí por varias razones. Se ve mejor gracias a gráficos personalizados, que incluso pueden aliviar la frustración del usuario por no encontrar lo que buscaba. Además, puede dirigir al usuario a otro artículo similar, manteniéndolo en el sitio mucho más tiempo que una página 404 típica y aburrida proporcionada por WordPress. Personalmente, solía crear páginas 404 en Elementor, pero tu ejemplo en SeedProd es muy inspirador. Me gustaría crear una página 404 en un sitio web donde ya estoy usando SeedProd, y esta es una gran fuente de inspiración y ayuda para mí.
Tracy A
Gracias por el artículo, es un buen comienzo. Si es posible, ¿hay otros métodos posibles si uno no tiene conocimientos de código? Estoy tratando de reducir el número de plugins, ya que instalarlos parece ralentizar algunos sitios web.
Soporte de WPBeginner
Our plugin recommendation is what we recommend for users who do not have coding knowledge. For your plugin concerns, we would recommend taking a look at our article below that covers why this should not be a concern
https://014.leahstevensyj.workers.dev/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Administrador
Dennis Muthomi
Después de leer esto, creo que es hora de mejorar mi página 404 simple agregando enlaces a algunos de mis artículos más populares.
De esa manera, los visitantes que aterricen en mi página 404 tendrán contenido útil con el que interactuar y TOMAR ACCIÓN, en lugar de solo ver un mensaje de error.
¡Gracias por esto!
Jiří Vaněk
Esa es honestamente una muy buena idea, y terminé adoptándola también. Estaba pensando en cómo mantener a la gente en el sitio que buscaba algo que podría haber eliminado porque estaba desactualizado. Es por eso que coloqué un widget en mi página 404 que muestra los artículos más leídos, y luego monitoreé si los usuarios hacían clic en esos enlaces. Y sí, lo hicieron. Gracias a esto, la página 404 no solo cumple su propósito informativo al informar a los usuarios que el contenido ya no está disponible, sino que también ayuda a mantener a la gente en el sitio ofreciéndoles otro contenido que podría interesarles. No es una solución perfecta, pero definitivamente es algo que ayuda.
Mrteesurez
En cuanto a redirigir a los usuarios.
Ha compartido la mejor práctica sugiriendo rastrear y redirigir errores 404.
Si uno puede encontrar el enlace particular que lleva a un error 404, definitivamente será útil ya sea para crear contenido alrededor de él o para redirigir a los usuarios a una página relacionada que podría serles relevante.
Moinuddin Waheed
Gracias por dar las opciones de diseño para hacer una página de error 404 intuitiva e innovadora.
He estado viendo buenas páginas de error 404 y no estaba seguro de que hacerla fuera tan fácil.
Seedprod ofrece muchas opciones para ajustar la página de error 404 y hacerla lo más intuitiva e innovadora posible para que la mala experiencia de los usuarios se convierta en una buena experiencia.
Pramendra Singh
Gracias, señor. Esto es lo que estaba buscando desde hace mucho tiempo. Gran publicación.
Joe Wocoski
Hola,
Acabo de leer sobre la página 404, pero no soy experto en código. Tu artículo parece complicado y las publicaciones populares no me convencen.
¿Qué sería un widget simple que pueda usar para mostrar una sola lista de mis pestañas principales en la página 404 debajo de la búsqueda.
¿Tienes un widget para enviar a los lectores de vuelta a mi página principal del blog o a mis otras 9 pestañas principales?
Muchas gracias
Joe Wocoski
arman
Este código muestra los encabezados de las publicaciones, pero quiero mostrar también el contenido de las publicaciones. Gracias de antemano.
Personal de WPBeginner
Intenta actualizar la estructura de tus permalinks visitando Ajustes -> Permalinks. Simplemente haz clic en el botón guardar cambios sin realizar ningún cambio en tu estructura de permalinks.
On Boit Quoi Ce Soir
Hola, muy buen artículo, ¡gracias! Sin embargo, algo simplemente no funciona. Al llamar en la página 404.php (una vez activado el plugin), simplemente no se muestra. ¿Alguna idea de por qué está sucediendo esto?
Ali Sajjad
Gracias por esta útil publicación, quiero saber cómo puedo curvar mi primera publicación desde el encabezado, como una curva con sombra.
CANALWP
Gracias por este increíble artículo. Me preguntaba cómo puedo agregar mi categoría a esta página y también imágenes. Gracias.
Cheri- CreationScience4kids
Thanks! I’d used wp.com for 2 years before moving to selfhosting. It was exciting to take out all the dates on my articles, but then I started realizing my most popular page by far was the 404! I did the work to use the redirect plugin (also great for posts with rotten original headlines), but haven’t done it for all 400+.
The email alert will be a relief and the most recent/popular/etc posts idea is great.