Los mejores sitios son siempre notables por su atención al detalle. Un detalle a menudo subestimado es la existencia de una página de error 404 útil y fácil de usar. WordPress proporciona una manera fácil de crear y personalizar la página de error 404, pero desafortunadamente, la simplicidad en la personalización no significa automáticamente efectividad.

El conocido experto en SEO de WordPress, Joost de Valk (también conocido como yoast), informa sobre sus recientes hallazgos de varios años de auditorías SEO en sitios web. Según este informe, un número significativo de los sitios web auditados tuvo problemas para optimizar su página de error 404. El tema predeterminado de WordPress (actualmente TwentyTwelve) tiene una plantilla muy básica para este caso y no muchos propietarios de sitios van más allá.

¿Por qué es importante?

Veamos esto desde el punto de vista del sentido común. ¿Cuándo ocurre un error 404? Cuando alguien hace clic en un enlace que debe apuntar al contenido de su sitio, pero por alguna razón no hay una página correspondiente: tal vez haya cambiado un enlace permanente o eliminado la página, tal vez haya cambiado las etiquetas o la categoría de slug, tal vez el enlace fue simplemente incorrecto. Hay varias razones para el error, pero no se puede negar un hecho importante: el visitante ya está en su sitio, ya está interesado en algo, ya ha hecho un esfuerzo para encontrarlo, por lo que este esfuerzo debería ser recompensado

Una de las reglas fundamentales de la IU es no dejar a los usuarios en callejones sin guía. Siempre hay un botón de retroceso en el navegador, pero ¿realmente desea que su visitante tenga que usarlo?

Apple 404

manzana proporciona un mapa del sitio en su página de error 404 acompañado de un mensaje simple y claro.

37 Signals 404

37 señales aproveche la oportunidad adicional para presentar sus productos y brinde información de contacto para resolver el problema.

Zurb 404

Zurb La página de error 404 enfatiza la opción de contactarlos con un problema. Los diseñadores deberían resolver problemas, ¿verdad?

Problogger 404

Problogger presenta una amplia gama de diversos contenidos para sumergirse en la lectura.

Justin Tadlock's 404

Justin Tadlock El blog usa rutas de navegación para presentar un enlace de página de inicio.

Crear página de error 404 personalizada en WordPress

¿Qué se puede hacer para mejorar esta situación? ¿Cómo se puede convertir el error en una oportunidad?

En la búsqueda de ideas y directrices, podemos consultar el WordPress Codex o las Directrices para webmasters de Google como puntos de partida perfectos. En realidad, nuestra tarea principal es bastante simple: explicar por qué no se puede ubicar una página y ofrecer sugerencias para llegar a la pantalla de la derecha. Desde este punto de vista podemos derivar una lista de posibles componentes que crea una página de error 404 "perfecta":

  • un claro mensaje de error de una manera simple y amigable, con disculpas por la inconveniencia;
  • la apariencia del resto del sitio con claras opciones de marca y navegación;
  • posibles alternativas y sugerencias sobre cómo encontrar la información deseada. Un formulario de búsqueda, enlaces a contenido relevante y / o popular y la página de inicio son todas las soluciones posibles para esta parte;
  • una forma de informar un error si el usuario lo desea; puede proporcionar un correo electrónico de contacto u otra información de contacto.

De esta lista podemos determinar consejos e ideas útiles sobre qué incluir en una plantilla de error 404:

  • publicaciones recientes y / o populares, o alternativamente publicaciones al azar;
  • opciones de suscripción (como RSS) además de los detalles de contacto;
  • mapa del sitio, especialmente en el caso de sitios pequeños;
  • promociones o información sobre sus ofertas y servicios;
  • materiales de marca para identificar fácilmente su sitio y su industria;
  • información sobre la URL solicitada y el contenido más relevante;
  • tagcloud como una manera rápida de ubicar al visitante en el contexto de su sitio;
  • un sistema de notificación y / o rastreo para estar al tanto de cualquier error 404 en su sitio.

Una cosa importante acerca de una página de error 404 es un estado HTTP 404 adecuado que debe ser servido por el servidor. Afortunadamente, WordPress maneja esto automáticamente para nosotros, de modo que podamos centrar nuestros esfuerzos en crear la página. Necesitamos que el tema activo tenga una plantilla separada para la página llamada 404.php. La estructura básica de la plantilla es bastante simple:

El marcado que crea la estructura de la página debe corresponderse con el utilizado por el tema activo. Alternativamente, puede proporcionarse un estilo adicional para imitar esa estructura. Al incluir las llamadas estándar get_header y get_footer, nos aseguramos de que la página tenga todos los elementos de marca y las opciones de navegación, y todos los scripts y estilos estén cargados correctamente.

Ahora, cuando hayamos hecho los preparativos iniciales, completemos la página. Lo mejor que podemos hacer por el visitante en la página 404 es adivinar lo que realmente se solicita y proporcionar la coincidencia más cercana posible. La información sobre la URL solicitada la almacena WordPress en la propiedad $ wp-> request . Podemos analizar esa cadena e intentar encontrar contenido similar en función de los datos de nombre de publicación , que almacena información sobre las publicaciones y las publicaciones de página. Si tal búsqueda no devuelve nada significativo, podemos intentar una búsqueda regular a través del contenido de la publicación. Si estos esfuerzos no producen ningún resultado positivo, siempre podemos proporcionar una lista de publicaciones recientes como una alternativa.

Por supuesto, también incluimos el mensaje amigable, el formulario de búsqueda y un enlace a la página de inicio.

Primero vamos a crear algunas funciones auxiliares para manejar algunas rutinas de plantillas; se pueden incluir en functions.php de su tema o directamente en el comienzo del archivo 404.php.

function frl_get_requested_slug(){global $wp;$q = $wp->request;$q = preg_replace("/(.*)(html|htm|php|asp|aspx)$/","",$q);$parts = explode('/', $q);$q = end($parts);return $q;}

La función frl_get_requested_slug intenta obtener la barra de página solicitada utilizando el objeto global $ wp y las expresiones regulares. El código supone que el sitio usa enlaces permanentes y la solicitud se envía en la forma adecuada.

function frl_list_posts($posts){if(empty($posts))return '';$list = array();foreach($posts as $cpost) {$title = apply_filters('the_title', $cpost->post_title);$url = get_permalink($cpost);$list[] = "
  • frl_load_error_style carga estilos personalizados con la plantilla 404, suponiendo que el archivo .css apropiado se encuentra en la carpeta / css dentro del directorio del tema activo.

    El código de plantilla como planeamos incluye cuatro partes: el mensaje amigable; la búsqueda; la lista de publicaciones recientes; la última oportunidad

    El mensaje amistoso:

    404 Pagina no encontrada

    Lo sentimos, lamentablemente, no pudimos encontrar la página solicitada.

    Busquemos la información que necesita.

    La búsqueda del contenido solicitado:

      'any', 'post_status' => 'publish', 'name' => $ q, 'posts_per_page' => 5); $ query = new WP_Query ($ args);  // consultas por slugif (empty ($ query-> posts)) {// búsqueda de publicaciones $ q = str_replace ('-', '', $ q); $ args = array ('post_type' => 'any ',' post_status '=>' publicar ',' s '=> $ q,' posts_per_page '=> 5); $ query-> query ($ args);} if (! empty ($ query-> posts)) :?> 

    ¿Estabas buscando una de las siguientes páginas?

      mensajes);?>

    En primer lugar, realizamos una consulta de WordPress con un conjunto inicial de argumentos que busca el slug solicitado en un campo de nombre de publicación / página. Si después de eso no obtenemos ningún resultado, reemplazamos los guiones en la cadena solicitada con espacios y realizamos otra consulta que busca las palabras solicitadas en el contenido de las publicaciones / páginas. Si obtuvimos algún resultado, lo enviamos con la ayuda de la función frl_list_posts creada anteriormente .

    Lista de publicaciones recientes:

      'post', 'post_status' => 'publish', 'posts_per_page' => 5); $ query-> query ($ args); if (! empty ($ query-> posts)):?> 

    ¿Por qué no echar un vistazo a las publicaciones más recientes?

      mensajes);?>

    En esta parte, realizamos una consulta para las 5 publicaciones más recientes en el blog y las enviamos de la misma manera que anteriormente.

    La última oportunidad:

    ¿No es bueno?

    Utilice el formulario de búsqueda para volver a intentarlo o comience a navegar desde la página de inicio .

    . Si necesita más ayuda, no dude en ponerse en contacto con [correo electrónico protegido] .

    Finalmente, si ninguna de las opciones anteriores satisface al usuario, ofrecemos un enlace a la página de inicio y proporcionamos un formulario de búsqueda.

    Evitando errores 404 en su sitio

    Parece que hemos hecho todo lo posible para ayudar al visitante en la página de error 404. En realidad, la mejor ayuda que existe es evitar que se use la página 404. En particular, podemos:

    • establecer permalinks bien estructurados desde el inicio del proyecto, por lo que es menos probable que haya necesidad de cambiarlos en el futuro;
    • monitorear los enlaces entrantes que son incorrectos, contactar a los propietarios de los sitios web donde aparecen dichos enlaces, con una solicitud para corregirlos;
    • cuide el contenido anterior, no lo elimine hasta que sea absolutamente necesario y configure una redirección adecuada en la migración de la página.

    No hay excusa real por la cual su sitio o blog no debe tener una página de 404 errores útil y fácil de usar. Espero que esta guía te haya dado algunos consejos útiles.

    ¿Qué tienes en tu página 404? ¿Qué le parece útil cuando encuentra 404 páginas? Háganos saber en los comentarios.

    Imagen / miniatura destacada, imagen perdida a través de Shutterstock.