Cuando diseñamos sitios web en WordPress, uno de los elementos más olvidados pero cruciales es la página de error 404. Muchos propietarios de sitios web no se dan cuenta de que una página 404 bien elaborada puede ser una poderosa herramienta para retener y fidelizar a los usuarios.
Según 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 vuelta a contenido valioso.
En este artículo, le mostraremos 2 métodos eficaces para mejorar la plantilla de su 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 básica 404, incluyendo los temas por defecto de WordPress.
Por ejemplo, en la siguiente imagen, puede ver la página 404 de ThemeIsle Hestia.
La mayoría de estas plantillas por defecto son simples y no muestran ningún contenido de su sitio. Esto significa que cualquiera que aterrice en tu página 404 es más probable que abandone tu sitio web WordPress, lo que aumentará tu tasa / tarifa de rebote.
Esto es una mala noticia para el SEO de WordPress y puede afectar a la posición que ocupa su sitio en los motores de búsqueda.
Dicho esto, es una buena idea crear una página 404 con su propio contenido e imagen de marca / marca.
Una página 404 personalizada es una forma estupenda de promocionar contenidos, como los posts más populares o los productos de tu tienda online. También puedes incluir enlaces a tus perfiles en redes sociales, destacar tus últimos comentarios y mucho más.
Si buscas inspiración, en esta página hemos recopilado los mejores ejemplos de diseño de páginas de error 404.
Dicho esto, echemos un vistazo a cómo puede mejorar la plantilla de su página 404 en WordPress. Puedes usar los enlaces rápidos de abajo para saltar directamente al método que quieras usar:
Método 1: Crear una página 404 personalizada en WordPress sin código (recomendado)
La mejor manera de mejorar la página 404 de su sitio es utilizando SeedProd.
SeedProd es el mejor maquetador de páginas de destino para WordPress. Le permite crear, editar y personalizar sus páginas de WordPress sin necesidad de escribir ningún código.
SeedProd viene con más de 300 plantillas listas para usar, incluyendo un montón de diseños 404. Esto significa que puede crear una página 404 con un diseño profesional en cuestión de minutos.
Lo primero que tienes que hacer es instalar el plugin SeedProd. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Hay una versión gratuita de SeedProd que le permite crear hermosas páginas de mantenimiento y próximamente. Sin embargo, vamos a utilizar el plugin premium, ya que le permite reemplazar la plantilla 404 incorporada en su tema.
Después de activar el plugin, SeedProd le pedirá su clave de licencia.
Puede encontrar esta información en su cuenta del sitio web de SeedProd. Tras introducir la licencia, haga clic en el botón “Verificar clave”.
Una vez hecho esto, vaya a SeedProd ” Páginas de destino. En la sección “Página 404”, haga clic en “Establecer una página 404”.
Ahora puede elegir una plantilla para su página 404.
Para obtener una vista previa de un diseño, basta con pasar el ratón por encima y hacer clic en la lupa.
Cuando encuentre un diseño que le guste, sólo tiene que hacer clic en “Elegir esta plantilla”.
Estamos usando ‘Oh No 404 Page’ en todas nuestras imágenes, pero puedes usar el diseño que quieras.
Tras seleccionar una plantilla, accederá al maquetador de arrastrar y soltar, donde podrá empezar a personalizar la página 404.
En la parte izquierda de la pantalla, encontrará bloques y secciones que puede añadir a su diseño. La parte derecha 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 esencial de todos los diseños de SeedProd.
Para personalizar cualquiera de estos bloques, basta con hacer clic para seleccionar ese bloque en su estructura / disposición / diseño / plantilla. A continuación, puedes hacer cambios utilizando los ajustes del menú de la izquierda.
Para añadir un nuevo bloque a su diseño, sólo tiene que buscarlo en el menú de la izquierda. A continuación, arrástrelo a su estructura / disposición / diseño / plantilla. Ahora puede personalizar el bloque siguiendo el proceso descrito anteriormente.
Para empezar, normalmente querrá añadir el logotipo de su sitio web a la página 404 para que los visitantes sepan que siguen en su sitio.
Para sustituir el logotipo de SeedProd por su propia imagen de marca, simplemente haga clic para seleccionar el logotipo marcador de posición en su estructura / disposición / diseño / plantilla. A continuación, pase el cursor sobre la imagen en el menú de la izquierda.
Cuando aparezca, haga clic en el botón “Seleccionar imagen”.
Esto inicia la biblioteca de medios de WordPress, donde puede seleccionar cualquier imagen o subir un nuevo archivo desde su ordenador.
Muchas plantillas 404 también muestran el menú de navegación principal de su sitio. Si tienes varios menús, puede que prefieras mostrar un menú diferente.
Para realizar este cambio, simplemente haga clic en el bloque ‘Menú Nav’ de su plantilla. A continuación, puede abrir el menú desplegable ‘Menú’ y elegir cualquier menú de la lista.
Para obtener más información, consulte nuestra guía sobre cómo añadir menús de navegación personalizados en temas de WordPress.
Cuando un visitante llega a su página de destino 404, puede sentirse confuso acerca de cómo ha llegado hasta aquí y qué hacer a continuación. Dicho esto, es una buena idea añadir un texto que explique que el contenido no se puede encontrar y sugiera algunas acciones a realizar a continuación.
Para ello, añada un bloque de “Titular” y otro de “Texto” a su diseño. A continuación, puede escribir su mensaje en el editor de texto del menú de la izquierda.
A continuación, vamos a cambiar el botón “Volver a inicio” para que anime a la gente a comprobar una entrada específica en lugar de simplemente volver a la página de inicio.
Por ejemplo, puedes promocionar tus entradas más recientes o mostrar las más comentadas.
Para personalizar el botón, basta con hacer clic para seleccionarlo en la estructura / disposición / diseño / plantilla de la página. En el campo “Enlazar”, escriba la URL que desea utilizar en su lugar.
Como el botón ya no enlaza con la página de inicio, tendrás que sustituir la etiqueta “Volver a la página de inicio”. Simplemente escriba un nuevo mensaje en el cuadro “Texto del botón”.
Una vez hecho esto, haz clic en la pestaña “Avanzado”. Aquí puedes cambiar el color y el tamaño del botón, entre otras cosas.
Esto es todo lo que necesita para crear una sencilla página 404 personalizada. Sin embargo, hay muchas otras características y contenidos que pueden mejorar la experiencia del visitante, mantener la participación de la gente e incluso ayudarte a conseguir más conversiones.
Dicho esto, veamos algunas características avanzadas que puede añadir a su página 404.
Añade tus entradas más populares a tu página 404 de WordPress
Para empezar, puede mostrar una lista de sus entradas más populares. Como estos artículos son populares, hay muchas posibilidades de que los visitantes encuentren algo que les guste.
Puedes crear este listado 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é entradas reciben más visitas y añadirlas a tu página 404. Para más detalles, consulta nuestra guía sobre cómo mostrar entradas populares por visitas en WordPress.
Después de activar MonsterInsights, puede mostrar sus entradas más populares añadiendo un shortcode en WordPress. En el menú de la izquierda de SeedProd, simplemente encuentra el bloque ‘Shortcode’ y suéltalo en tu estructura / disposición / diseño / plantilla.
Ahora, copia el siguiente shortcode:
[monsterinsights_popular_posts_widget theme="beta"]
Después, haga clic para seleccionar el bloque Shortcode en el editor SeedProd. Ahora puede pegar el código en el menú de la izquierda.
Por defecto, SeedProd no muestra una vista previa de sus entradas más populares dentro del editor de páginas, por lo que tendrá que hacer clic en el botón “Vista previa” en la esquina superior derecha para ver el shortcode en acción.
Si desea ver la lista de entradas populares dentro del editor SeedProd, entonces simplemente haga clic en el interruptor ‘Mostrar vista previa del shortcode’.
En el shortcode anterior, estamos utilizando theme="beta"
para nuestro anuncio, pero MonsterInsights tiene algunos temas diferentes que puede utilizar.
Para ver los diferentes temas, ve a Insights ” Popular Posts en el escritorio de WordPress y luego haz clic en ‘Popular Posts Widget’.
Ahora puedes hacer clic en los distintos temas para ver una vista previa.
Cuando encuentre un diseño que le guste, simplemente actualice el shortcode en SeedProd. Por ejemplo, si desea utilizar el tema “Alfa”, entonces usted tendría que escribir:
[monsterinsights_popular_posts_widget theme="alpha"]
Mostrar los productos más populares de WooCommerce
Si tienes una tienda online, entonces puede que quieras mostrar tus productos WooCommerce más vendidos en la página 404. De esta forma, tu página 404 personalizada puede ayudarte a conseguir más ventas.
En el menú de la izquierda, busque el bloque Productos más vendidos y arrástrelo a su estructura / disposición / diseño / plantilla.
SeedProd mostrará algunos productos automáticamente. Sin embargo, puede ajustar este bloque seleccionándolo en el editor y utilizando los ajustes del menú de la izquierda.
Por ejemplo, puede cambiar el número de columnas del bloque, añadir paginación, permitir a los compradores filtrar los productos más vendidos, etc.
Para obtener más información, consulte nuestra guía sobre cómo mostrar productos populares de WooCommerce.
A pesar de su nombre, puede utilizar este bloque para mostrar otros tipos de productos. Por ejemplo, puede mostrar los productos que están en oferta o sus elementos / artículos mejor valorados.
Para ver las distintas opciones, abra el menú desplegable “Tipo” y elija una opción de la ficha.
Añadir un formulario de contacto a la página 404 de WordPress
También puede añadir un formulario de contacto para que los visitantes puedan ponerse en contacto con usted si no encuentran lo que buscan. Este formulario también permite informar fácilmente de errores 404 para que puedas corregir estos enlaces rotos y mejorar la experiencia de los futuros visitantes.
Para más información, consulte nuestra guía completa sobre cómo enlazar enlaces rotos en WordPress.
La mejor forma de añadir un formulario de contacto a tu sitio es utilizando el plugin WPForms. Es el mejor plugin de formulario de contacto para WordPress y viene con un editor de arrastrar y soltar.
Para más detalles, consulte 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 añadirlo a tu página 404 utilizando el bloque “Formulario de contacto”. Solo tienes que encontrar el bloque en el menú de la izquierda y arrastrarlo a tu diseño.
A continuación, abra el menú desplegable “Seleccionar un formulario” y elija su formulario de contacto de la lista.
El editor de páginas mostrará ahora una vista previa del formulario de contacto.
Puede añadir algún texto que introduzca su formulario de contacto o anime a los visitantes a ponerse en contacto.
Para ello, añada un bloque de “Titular” o “Texto” encima del formulario de contacto y escriba el texto que desee utilizar.
Cómo publicar la página 404
Cuando esté satisfecho con el aspecto de la página 404, es hora de publicarla.
Basta con hacer clic en la flecha desplegable situada junto a “Guardar” y seleccionar “Guardar como plantilla”.
Cuando se te pregunte, escribe un nombre para la plantilla. Esto es sólo para su referencia, por lo que puede utilizar cualquier cosa que desee.
Después, haz clic en “Guardar plantilla”.
En la siguiente ventana emergente, haga clic en “Volver al editor de páginas”. A continuación, puede hacer clic en el botón ‘X’ de la esquina superior derecha para cerrar el editor de páginas de SeedProd.
En este punto, es posible que aparezca una ventana emergente preguntándole si desea publicar su nombramiento 404. Si está de acuerdo, haga clic en “Sí, activar”.
Si no desea publicar la plantilla en este momento, haga clic en “No, Cerrar”.
Después, puede publicar el diseño en cualquier momento yendo a SeedProd ” Páginas. Aquí, haga clic en el interruptor en la sección ‘Página 404’ para que muestre ‘Activo.’
Para ver su página 404 en acción, sólo tiene que añadir /404 al final de su nombre de dominio.
Después de publicar tu página 404 personalizada, es una buena idea hacer un seguimiento de la participación de la gente en esa página. Esto te permitirá ver qué funciona y qué no para que puedas ajustar el diseño de tu 404 y conseguir más conversiones y participación.
Para obtener más información, consulte nuestra guía para principiantes sobre cómo instalar Google Analytics en WordPress.
Método 2: Crear una página 404 utilizando el editor de sitios completo (solo temas en bloque)
Si utiliza un tema de WordPress activado por bloques, puede editar la página 404 de su sitio en el editor completo del sitio.
Para empezar, diríjase a Apariencia ” Editor en el escritorio de WordPress.
Por defecto, el editor de sitio completo muestra la plantilla de inicio de su tema.
Para editar la página 404, sigue adelante y haz clic en “Plantillas”.
Ahora verás una lista de todas las plantillas que componen tu tema basado en bloques, como la página de tu blog y la página de archivos.
Sólo tiene que seguir adelante y hacer clic en “404”.
WordPress mostrará ahora una vista previa del diseño actual 404.
Para editar esta plantilla, haga clic en el icono del lápiz pequeño.
El editor de sitio completo funciona de forma similar al editor de contenido estándar de WordPress.
Para añadir bloques al diseño, haga clic en el botón “+”.
Ahora puede escribir el bloque que desea añadir a la página 404.
Por ejemplo, puede que quieras mostrar tus últimas publicaciones. Para ello, escriba “Últimas entradas” y arrastre el bloque a su diseño.
Después de añadir un bloque, es posible que desee personalizarlo.
Puede seguir adelante y hacer clic para seleccionar el bloque en la vista previa. El menú de la derecha le mostrará todos los ajustes que puede utilizar para modificar el contenido y el aspecto del bloque.
Las opciones que vea pueden variar en función del bloque que haya seleccionado. Sin embargo, normalmente podrás cambiar el color de fondo, el color del texto y el tamaño de la fuente.
Si lo desea, puede incluso mostrar las entradas recientes en un menú desplegable.
Ahora puede seguir añadiendo bloques a su diseño y ajustándolos siguiendo el mismo proceso descrito anteriormente. También puede organizar sus widgets de WordPress en columnas o utilizar patrones de bloques de WordPress para crear una página 404 personalizada más rápidamente.
Cuando esté satisfecho con el aspecto de la página 404, haga clic en “Guardar” para activarla.
Ahora, si añades /404 al final del nombre de dominio de tu sitio web, verás la página 404 personalizada en acción.
¿Cuándo debe redirigir las páginas 404?
Una de las causas más comunes de los errores 404 es cuando el visitante realmente cometió un error al introducir la URL.
En este caso, no suele ser necesario redirigir al usuario a otra página. Pero te recomendamos que sigas las buenas prácticas que te hemos mostrado para volver a dirigirlos.
Dicho esto, si no tiene tiempo para crear una plantilla de página 404 personalizada, puede redirigir a los usuarios a la página de inicio mientras tanto. De esta forma, podrás mantener a los usuarios en tu sitio web.
Aparte de eso, también sugerimos encarecidamente rastrear y redirigir los errores 404. Esto te permitirá saber a qué enlaces no han podido acceder los usuarios y redirigirlos a las páginas más relevantes.
Como resultado, puede maximizar la oportunidad de aumentar las páginas vistas 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 utilizar. No necesitas ningún conocimiento técnico para utilizarlo correctamente, ya que es bastante fácil de usar.
Si quieres más recomendaciones de plugins, echa un vistazo a nuestra lista de los mejores plugins gratuitos de redirección 404 para WordPress.
Tutorial en vídeo
Esperamos que este artículo te haya ayudado a mejorar tu plantilla de página 404 en WordPress. Puede que también quieras ver nuestras selecciones de expertos de los mejores plugins de entradas populares para WordPress y nuestro artículo sobre la anatomía de una página de aterrizaje de alta conversión.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Moinuddin Waheed
Thanks for giving the design options for making intuitive and innovative 404 page error.
I have been seeing good 404 error pages and was not sure that making it is so easy.
Seedprod gives so much options to tweak on 404 error page and make it as intuitive and innovative as possible so that users bad experience turns into good experience.
Pramendra Singh
Thank you sir. This is what I was searching for long time. Great Post.
Joe Wocoski
Hi,
I just read about the 404 page, but I am not code literate. Your article seems complicated and the popular posts does not float my boat.
What would is a simple widget that I can use to display a single list of my main tabs on the 404 page under the search.
Do you have a widget to send readers back to my main blog page or my other main 9 tabs?
Thank you very much
Joe Wocoski
arman
This code is showing headings of post but i want to show content of posts also .Thanks in advance
WPBeginner Staff
Try updating your permalink structure by visiting Settings -> Permalinks. Simply click on save changes button without making any changes to your permalink structure.
On Boit Quoi Ce Soir
Hello there, very nice article, thanks ! However something simply does not work. When calling on 404.php page (once plug-in activated), it just does not show. Anyway idea why this is happening?
Ali Sajjad
Thanks for this usefull post, i want to know how i can bend my first post from header just like a curve with shadow?
CANALWP
Thank you for this awesome article. I was wondering how can i add my category to this page and as well images. Thanks.
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.