Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo mejorar su plantilla de página 404 en WordPress (2 maneras)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres mejorar la plantilla de tu página 404 en WordPress?

Si sustituye la página 404 predeterminada de WordPress por su propio diseño, podrá mostrar contenido e información interesante a los visitantes. Esto puede mejorar la experiencia del usuario y mantener a la gente en su sitio durante más tiempo.

En este artículo, le mostraremos cómo personalizar la plantilla de su página 404 en WordPress.

How to improve your 404 page template in 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.

The 404 template included in the ThemeIsle Hestia WordPress theme

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.

The WPBeginner custom 404 page

Una página 404 personalizada es una buena forma de promocionar contenidos, como las entradas más populares o los productos de tu tienda online. También puedes enlazar a tus perfiles en medios sociales, destacar tus últimos comentarios, etc.

Si buscas inspiración, en esta página hemos recopilado los mejores ejemplos de diseño de páginas de error 404.

Dicho esto, veamos cómo puede mejorar la plantilla de su página 404 en WordPress.

Tutorial en vídeo

Subscribe to WPBeginner

Si prefiere instrucciones escritas, siga leyendo. También puedes enlazar directamente con el método que prefieras:

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.

SeedProd license key

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”.

The SeedProd page builder plugin

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.

SeedProd's ready-made 404 templates

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.

Choosing a professionally-designed 404 template

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.

Building a custom 404 page for your WordPress website

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.

Changing the text in a custom 404 page

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”.

Adding your own logo to a 404 page

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.

Adding a custom navigation menu to a 404 page

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.

Adding text to a custom 404 page

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, puede promocionar la entrada más popular de su blog de WordPress o la página que le ayuda a ganar más dinero en Internet.

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.

Changing the button label

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.

Creating a custom CTA button

Para obtener más consejos de diseño, consulte nuestra guía sobre cómo elegir una combinación de colores perfecta para su sitio de WordPress.

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.

How to add shortcode to your website's 404 page

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.

Adding shortcode to you website's 404 page

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’.

Previewing the 404 page's 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’.

The MonsterInsights' popular posts widget settings

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 un mercado o 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 ofertas.

En el menú de la izquierda, busque el bloque Productos más vendidos y arrástrelo a su estructura / disposición / diseño / plantilla.

How to show best-selling products on a 404 page

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.

Displaying WooCommerce products on a 404 page

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.

Showing different WooCommerce products on a 404 page

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.

The WPForms form builder plugin

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.

How to add a contact form to your website's 404 page

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.

A custom 404 page, created using SeedProd

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”.

Saving your SeedProd 404 template

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”.

Naming your WordPress template

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”.

Activating a SeedProd template for your WordPress website

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.’

Activating a template for your WordPress website

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.

Opening the WordPress full-site editor (FSE)

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”.

How to edit the 404 template using the full-site editor

Ahora verás una lista de todas las plantillas que componen tu tema basado en bloques, como la página de resultados de búsqueda y la página de archivo.

Sólo tiene que seguir adelante y hacer clic en “404”.

Improving the built-in 404 design using FSE

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.

Editing the 404 template in your WordPress theme

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 “+”.

Adding blocks to a 404 page design using the block-based WordPress editor

Ahora puede escribir el bloque que desea añadir a la página 404.

Por ejemplo, puede que desee mostrar las entradas recientes de su sitio. Esto puede ser especialmente eficaz si publica contenido sensible al tiempo, como si gestiona un sitio web agregador de noticias.

Para ello, sólo tienes que escribir “Últimas entradas” y arrastrar el bloque a tu diseño.

Adding the Latest Posts block to a 404 page design

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.

How to customize blocks in a WordPress 404 page

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.

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.

Publishing a custom 404 page template

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.

Click 404 logs menu option

Si quieres más recomendaciones de plugins, echa un vistazo a nuestra lista de los mejores plugins gratuitos de redirección 404 para WordPress.

Esperamos que este artículo te haya ayudado a mejorar la plantilla de tu página 404 en WordPress. Puede que también quieras ver nuestra guía sobre cómo establecer los objetivos de Google Analytics para tu sitio de WordPress y nuestra selección experta de las mejores aplicaciones de números de teléfono virtuales para empresas.

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

10 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    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.

  3. Joe Wocoski says

    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

  4. Cheri- CreationScience4kids says

    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. :-)

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.