Crear páginas de error 404 con WordPress y Visual Composer

Nikola Puciriusa Última actualización 02.09.2021
6 min.
Última actualización 02.09.2021

Siempre puede ocurrir que el sitio web tu esté siendo mantenido, las páginas individuales no son accesibles o contienen enlaces incorrectos, lo que a menudo conduce a un 404 sitio . Esto no es agradable, pero con páginas de error bien diseñadas se puede mantener a los visitantes de tu . Le mostramos cómo hacerlo con WordPress y Visual Composer .

El propósito de una página de error 404 es informar a los visitantes de tu sobre el error que se ha producido. Y para redirigirlos a las partes de tus que todavía están disponibles o funcionan. De este modo, se reduce la tasa de rebote.

Un 404 personalizado sitio también es ideal para promocionar e insertar elementos de llamada a la acción. Esto significa que, básicamente, puede realizar las mismas funciones que una página de aterrizaje y una página de destino en funcionamiento.

¿Lo sabías?

El inventor de la World Wide Web Tim Berners-Lee tenía una oficina en la sala 404 del CERN (Organización Europea para la Investigación Nuclear), donde alojó el primer servidor web. El error 404 recibió su nombre porque a menudo no se podía encontrar a Tim.

Nos fijamos en los siguientes puntos:

  • ¿Qué es una página de error 404?
  • Variantes de error 404
  • Cuándo se producen los errores 404 
  • Cómo solucionar los errores 404
  • Ejemplos buenos y creativos de páginas 404
  • Crear una página de error 404 personalizada con WordPress
  • Página de error 404 con Visual Composer crear

¿Qué es un 404 sitio?

Descrito brevemente, el error 404 es un código de respuesta del Protocolo de Transferencia de Hipertexto (HTTP). Significa que el servidor no puede encontrar la fuente solicitada. O la parte de la ruta del sitio web que viene después del "/". Básicamente, esto significa que el sitio específico que debe mostrarse no está disponible.

La mayoría de las veces, se muestra un mensaje de error 404 como el siguiente:

  • HTTP 404
  • 404 no encontrado / no encontrado
  • 404
  • Error 404 / Error
  • 404 Esta página no existe (sitio no existe)
  • Página no encontrada
  • Archivo no encontrado
  • Directorio no encontrado 
  • URL solicitada no encontrada
  • ... y variaciones similares

Posibles razones por las que se producen errores 404:

  • Un WordPress sitio o un post se borra o se mueve a otro sitio sin redirigir los enlaces
  • Un visitante introduce el nombre del dominio de forma incorrecta (falta una letra, error ortográfico, etc.)
  • Los antiguos enlaces (que han cambiado) siguen figurando en las fuentes externas
  • El servidor/sitio web se ha colapsado, está en mantenimiento o tiene problemas técnicos que hacen que el sitio web no se visualice correctamente (por ejemplo, interrupción de la conexión).

Además de los errores 404, existen los siguientes códigos de estado HTTP:

  • 100-199 Respuesta: Solicitar al destinatario y continuar el proceso
  • 200-299 Exitoso: Solicitud exitosa y aceptada
  • 300-399 Redirección: Requiere una acción adicional para completar la solicitud.
  • 400-499 Error del cliente: Solicitud no válida o solicitud no puede ser completada.
  • 500-599 Error del servidor: El servidor no pudo aceptar la solicitud

Cómo solucionar los errores 404

Por un lado, a través de los redireccionamientos, puede remitir a los visitantes de tu directamente a páginas de destino que se ajusten lo más posible al contenido de la solicitud original. En RAIDBOXES , no es necesario un WordPress adicionalPlugin para configurar los redireccionamientos y las reglas de redireccionamiento. Consulte las instrucciones sobre los redireccionamientos 301 y 302.

Otra posibilidad es encontrar y reparar los enlaces rotos, es decir, sustituirlos por la nueva fuente interna válida. Asegúrese de que todos los enlaces internos conducen a las páginas deseadas. Pida también a los propietarios de las fuentes de enlaces externos que cambien todos los enlaces rotos.

Otro consejo es utilizar URLs y permalinks fáciles de usar: manténgalos cortos, utilice letras minúsculas y describa a dónde conducen los enlaces. Esto le ayudará a controlar los enlaces rotos y a optimizar tu para los motores de búsqueda. Véase el artículo Enlaces internos y SEO con WordPress .

Y por último, debe crear un 404 personalizado sitio . Esto conducirá a los visitantes "perdidos" de vuelta a la página de inicio o al contenido relevante. Al mismo tiempo, no confundirán el error con un fallo de todo el sitio web tus .

Páginas 404 y SEO

La mayoría de los errores 404 no suelen tener un impacto negativo directo en el rendimiento o la clasificación del sitio web. En el peor de los casos, no contienen redireccionamientos. Entonces, la probabilidad de que los usuarios abandonen el sitio por completo y no vuelvan es un 88% mayor, un factor indirecto de SEO. Un buen 404 sitio tiene más que ver con la creación de una mejor experiencia para el público objetivo de tu .

¿Qué son las páginas 404 seleccionables?

Por eso es importante tener una página de error 404 personalizada que conduzca a los visitantes de tu de vuelta a las partes existentes del sitio web. Ahora veamos qué opciones tienes. Las prácticas comunes y recomendadas para crear páginas 404 personalizadas son:

  • Botones de retroceso o de inicio: Ofrezca a la audiencia de tus la opción de volver a las páginas disponibles o a cualquier lugar.
  • Barra de búsqueda: Normalmente, este tipo de errores se producen cuando los usuarios:inside intentan encontrar un contenido específico o sitio . Así que ofrézcales una opción de búsqueda o sugiera páginas de aterrizaje específicas.
  • Formularios de contacto: Los usuarios pueden utilizar un formulario de contacto o un chat en vivo para obtener ayuda si no encuentran el contenido que buscan. O si necesitan ayuda con otras cosas en el sitio web tus .
  • Iconos de las redes sociales: Siempre es bueno enlazar las diferentes plataformas de medios sociales donde se puede encontrar y alcanzar el contenido de tu .
  • Imágenes humorísticas: Esta es una de las prácticas más infravaloradas y claramente infrautilizadas. Ciertamente, el humor puede desactivar el resultado de una percepción (probablemente) negativa. A continuación, algunos ejemplos.

Crear un 404 personalizado sitio con WordPress

Tiene las siguientes opciones para crear un 404 sitio . Con WordPress , con un constructor de sitios web o un constructor de páginas y con código personalizado - como HTML. Así es como funciona con WordPress :

  1. Ir a tu WordPress panel de control
  2. Seleccione el área de "Diseño" a la izquierda
  3. Allí el sub-ítem "Editor
  4. Compruebe si tu WordPress Theme contiene una "plantilla 404" (Ctrl + F y luego introduzca "404.php");
  5. Haga clic en el enlace de la plantilla 404 en la parte derecha de la página. sitio

El contenido es algo así:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Ahora cámbialo según tus necesidades. Sin embargo, es necesario tener conocimientos de HTML para hacerlo. También debe trabajar con un hijo Theme, de lo contrario los cambios de tu pueden ser borrados de nuevo después de una actualización de WordPress Themes .

404 WordPress Plugins

Lo mejor del mundo de WordPress es Plugins. Plugins Hay más de 50.000 páginas web gratuitas para casi cualquier propósito que pueda imaginar: Para páginas 404, páginas 301, redireccionamientos, SEO y mucho más. Consulte el directorio oficial WordPress Plugin .

404 Crear sitio con Visual Composer

Una de las formas más fáciles y rápidas de crear un 404 sitio es con un constructor de sitios web o páginas. En este ejemplo, le mostramos cómo crear un 404 personalizado sitio con Visual Composer , utilizando la función de arrastrar y soltar. Tenga en cuenta que esto sólo es posible con la versión Premium.

En primer lugar, debe descargar e instalar Visual Composer Plugin . Vea este video tutorial en YouTube:

YouTube

Al cargar el vídeo, acepta la política de privacidad de YouTube.
Más información

Cargar vídeo

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9DY2FVNHNZd2NvbyIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

En cuanto se haya instalado y activado Plugin , podrá empezar a trabajar. Utilice una de las muchas plantillas. Para ello, haga clic en el símbolo del mercado en el editor del frontend. Seleccione Plantillas e introduzca "404" para encontrar páginas 404 ya hechas.

Este tutorial explica exactamente cómo crear un 404 personalizado sitio con Visual Composer :

YouTube

Al cargar el vídeo, acepta la política de privacidad de YouTube.
Más información

Cargar vídeo

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hSHg2V3dETnVqTSIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Después de haber terminado y guardado tu diseños individuales de páginas 404, ahora puede gestionarlos en el editor. El siguiente vídeo muestra cómo hacerlo:

YouTube

Al cargar el vídeo, acepta la política de privacidad de YouTube.
Más información

Cargar vídeo

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LeG4xT2hmUGRxayIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Para obtener más consejos sobre la creación de un 404 personalizado sitio, las mejores soluciones de Plugin y algo de inspiración para las páginas 404, consulte el post de Visual Composer Páginas 404 con WordPress .

Ejemplos de buenas páginas 404

Hemos recopilado algunas de las páginas de error 404 más creativas -independientemente de WordPress y Visual Composer - para que se inspire en ellas. El 404 de GOG.com sitio es uno de los mejores ejemplos de cómo pensar fuera de la caja. Y eso en el sentido más estricto de la palabra:

404 Página de muestra de GOG
El 404 sitio de GOG.com (Imagen © gog.com)

Dado que se trata de un sitio con valor de entretenimiento, Blizzard tenía que cumplir con un alto estándar en términos de su 404 sitio . El diseño fresco se convierte en un clásico en sí mismo:

Ejemplo de página 404 Blizzard
Blizzard envía a sus ayudantes (Imagen © Blizzard)

El último ejemplo de páginas 404 de Slack es súper simple, pero aún así sorprendente. Es un bello ejemplo de creatividad:

Ejemplo de página 404 Slack
Juguetón y con animación: la página de error 404 de Slack (Imagen © Slack )

Conclusión sobre las páginas 404 con WordPress

Ahora ya sabe cómo crear una página de error 404 para conducir a los visitantes de tu a las subpáginas activas del sitio web tus . Y cómo puede convertir una mala situación en algo que minimice o incluso resuelva la molestia. También, que hay formas muy sencillas de diseñar un 404 de este tipo sitio - siempre que se tenga creatividad y un poco de habilidad gráfica.

Con un constructor de sitios web como herramienta, no necesitas conocimientos de programación para convertir un aburrido 404 sitio en algo que te ponga de buen humor. Y/o que ayude a sus visitantes en su situación. ¿Tiene un buen ejemplo de una página de error 404 con éxito? Entonces no dudes en compartirlo en los comentarios.

tu Preguntas sobre las páginas 404

¿Qué preguntas tiene sobre las páginas de error 404 con WordPress ? Esperamos su comentario. ¿Le interesan los temas de actualidad sobre WordPress y WooCommerce? A continuación, siga RAIDBOXES en Twitter y Facebook, LinkedIn o a través de nuestro newsletter.

Tras sus estudios -Relaciones Públicas y Gestión Publicitaria- Nikola trabaja en el equipo de marketing de Visual Composer . Se centra en la redacción, los medios sociales y la analítica, y se interesa por la psicología y los procesos de toma de decisiones del comportamiento del consumidor.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

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