{"id":262958,"date":"2022-12-22T12:40:00","date_gmt":"2022-12-22T09:40:00","guid":{"rendered":"https:\/\/inform.click\/diseno-de-paginas-404-intuitivas-y-faciles-de-usar\/"},"modified":"2022-12-22T12:49:00","modified_gmt":"2022-12-22T09:49:00","slug":"diseno-de-paginas-404-intuitivas-y-faciles-de-usar","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/diseno-de-paginas-404-intuitivas-y-faciles-de-usar\/","title":{"rendered":"Dise\u00f1o de p\u00e1ginas 404 intuitivas y f\u00e1ciles de usar"},"content":{"rendered":"<p>\n  Todos hemos interactuado con una p\u00e1gina 404 en alg\u00fan momento.\n<\/p>\n<p>\n  Estas p\u00e1ginas aparecen cuando se rompe el enlace, se elimina una p\u00e1gina o cuando el usuario escribi\u00f3 incorrectamente la direcci\u00f3n de la p\u00e1gina. Pero cualquiera que sea el motivo, sigue siendo un error que debe corregirse. Adem\u00e1s, los enlaces rotos da\u00f1an la clasificaci\u00f3n de su sitio y eso no es lo que necesita. El aspecto SEO de su sitio es incre\u00edblemente importante, por lo que no querr\u00e1 perder el tr\u00e1fico solo porque olvid\u00f3 vigilar las notificaciones 404.\n<\/p>\n<p>\n  Si bien est\u00e1 claro que las p\u00e1ginas 404 deben repararse lo antes posible, nunca se puede pronosticar realmente cu\u00e1ndo el usuario encuentra un enlace roto. Entonces, para estar listo y convertir la experiencia negativa en una positiva, debe personalizar sus p\u00e1ginas 404 y hacerlas f\u00e1ciles de usar e intuitivas.\n<\/p>\n<p>\n  \u00bfListo para aprender a convertir lo malo en bueno? Averig\u00fc\u00e9moslo.\n<\/p>\n<h5>\n  Personaliza la p\u00e1gina 404 para tu sitio<br \/>\n<\/h5>\n<p>\n  Imagina que est\u00e1s navegando por un sitio web incre\u00edblemente colorido y atractivo con muchos elementos interactivos y de repente te topas con una p\u00e1gina en blanco con el mensaje \u00ab404 P\u00e1gina no encontrada\u00bb.\n<\/p>\n<p>\n  Un poco de despertador, \u00bfno?\n<\/p>\n<p>\n  La p\u00e1gina 404 no deber\u00eda parecer una sorpresa desagradable, por eso es tan importante mantener su dise\u00f1o igual que el dise\u00f1o general del sitio.\n<\/p>\n<p>\n  Para eso, mantenga el aspecto de la p\u00e1gina 404 igual que el aspecto de las otras p\u00e1ginas, incluidos el fondo, los colores, las fuentes y otros elementos (si corresponde). Adem\u00e1s, muchos sitios web aprovechan la p\u00e1gina 404 como una oportunidad para enfatizar la marca y record\u00e1rsela a los usuarios una vez m\u00e1s.\n<\/p>\n<p>\n  Al dise\u00f1ar una p\u00e1gina 404 para su sitio, preste atenci\u00f3n al mensaje. Un mensaje bien elaborado es una buena oportunidad para incluir un juego de palabras ingenioso o recordar a los usuarios acerca de sus productos\/servicios de manera discreta.\n<\/p>\n<h5>\n  Explicar lo que pas\u00f3<br \/>\n<\/h5>\n<p>\n  Si observamos la p\u00e1gina 404 predeterminada en Apache, veremos lo siguiente:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-63845266293ac.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-63845266293ac.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Y eso es. El usuario no tiene idea de lo que realmente sucedi\u00f3 y qu\u00e9 hacer a continuaci\u00f3n.\n<\/p>\n<p>\n  Debido a que se preocupa por sus clientes y quiere descartar cualquier experiencia desagradable, proporcione una explicaci\u00f3n del error. Las principales razones del 404 suelen ser:\n<\/p>\n<ul>\n<li>El usuario escribi\u00f3 algo mal,\n  <\/li>\n<li>El enlace est\u00e1 roto,\n  <\/li>\n<li>La p\u00e1gina no existe,\n  <\/li>\n<li>La conexi\u00f3n con el servidor est\u00e1 rota.\n  <\/li>\n<\/ul>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-6384526b3603b.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-6384526b3603b.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Por supuesto, no tiene que enumerar todos los problemas mencionados anteriormente. S\u00f3lo aseg\u00farese de que su explicaci\u00f3n sea comprensible.\n<\/p>\n<p>\n  Al ser honesto sobre el problema, ganar\u00e1 a los usuarios y los alentar\u00e1 a permanecer en el sitio y continuar navegando.\n<\/p>\n<h5>\n  Crea un mensaje atractivo<br \/>\n<\/h5>\n<p>\n  La p\u00e1gina 404 es una oportunidad perfecta para que la marca muestre su identidad a trav\u00e9s de un mensaje bien elaborado.\n<\/p>\n<p>\n  Los mejores ejemplos de 404 p\u00e1ginas a menudo incluyen:\n<\/p>\n<ul>\n<li>juegos de palabras\n  <\/li>\n<li>Mensaje relacionado con los productos o servicios del sitio\n  <\/li>\n<li>Apelaci\u00f3n personal,\n  <\/li>\n<li>Referencias a la cultura pop y eventos reconocibles.\n  <\/li>\n<\/ul>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-6384526eddfe5.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-6384526eddfe5.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Debido a que la p\u00e1gina 404 es un error predeterminado, debe transformarlo en algo completamente opuesto, es decir, una experiencia positiva y divertida.\n<\/p>\n<p>\n  GitHub hizo un trabajo brillante en t\u00e9rminos de dise\u00f1o de su p\u00e1gina 404. Us\u00f3 el estereotipo sobre los desarrolladores y su amor por la saga \u00abStar Wars\u00bb y lo us\u00f3 en su propio beneficio al hacer que tanto los elementos visuales como el mensaje de la p\u00e1gina fueran reconocibles al instante incluso por aquellas personas que no vieron ninguna pel\u00edcula de Star Wars.\n<\/p>\n<h5>\n  Ofrecer una acci\u00f3n a tomar<br \/>\n<\/h5>\n<p>\n  Un llamado a la acci\u00f3n es realmente importante y es una necesidad absoluta para un dise\u00f1o de p\u00e1gina 404.\n<\/p>\n<p>\n  Un usuario nunca debe quedarse con una p\u00e1gina en blanco y cero opciones. Entonces, incluso si sucediera algo como 404, ofrezca una alternativa que conduzca a un beneficio mutuo.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-638452729f69f.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-638452729f69f.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Algunas de las llamadas a la acci\u00f3n m\u00e1s populares para la p\u00e1gina 404 son:\n<\/p>\n<ul>\n<li>una barra de b\u00fasqueda\n  <\/li>\n<li>p\u00e1gina principal\n  <\/li>\n<li>top-productos\/servicios\n  <\/li>\n<li>Suscr\u00edbete a un producto o a un bolet\u00edn\n  <\/li>\n<li>una oferta de una prueba gratuita\n  <\/li>\n<\/ul>\n<p>\n  Presta atenci\u00f3n al dise\u00f1o de los botones CTA. Deben ser f\u00e1ciles de detectar y no deben mezclarse con el fondo, de lo contrario, el usuario no los notar\u00e1. Adem\u00e1s, piensa en el mensaje del bot\u00f3n CTA: en lugar de clich\u00e9s como \u00abHaz clic aqu\u00ed\u00bb, opta por algo m\u00e1s creativo (\u00abMira lo que tenemos\u00bb).\n<\/p>\n<p>\n  Agregar una barra de b\u00fasqueda\n<\/p>\n<p>\n  Un usuario lleg\u00f3 a la p\u00e1gina 404 porque buscaba algo. As\u00ed que ofr\u00e9zcales una opci\u00f3n para intentarlo una vez m\u00e1s agregando una barra de b\u00fasqueda a la p\u00e1gina.\n<\/p>\n<p>\n  Puede respaldarlo con un mensaje como: \u00abParece que su consulta no se encuentra en ninguna parte&#8230; \u00bfPor qu\u00e9 no intentarlo de nuevo?\u00bb Los CTA bien escritos tienen una alta tasa de participaci\u00f3n y funcionan bien junto con las im\u00e1genes.\n<\/p>\n<p>\n  Adem\u00e1s, agregue un texto de sugerencia a la barra de b\u00fasqueda. Una barra con texto genera m\u00e1s interacci\u00f3n que una vac\u00eda.\n<\/p>\n<p>\n  Agregar puntos de salida\n<\/p>\n<p>\n  Una barra de b\u00fasqueda en la p\u00e1gina 404 no es suficiente. \u00bfQu\u00e9 pasa si los usuarios no est\u00e1n seguros de lo que necesitan?\n<\/p>\n<p>\n  Agregue \u00abP\u00e1gina de inicio\u00bb o cualquier otro bot\u00f3n relevante para navegar al usuario desde una p\u00e1gina 404 a una posible conversi\u00f3n. Adem\u00e1s, puede agregar un bot\u00f3n \u00abCont\u00e1ctenos\u00bb para aumentar la confiabilidad.\n<\/p>\n<p>\n  Algunas empresas utilizan la p\u00e1gina 404 como una oportunidad para recordar sus productos y servicios y colocar los enlaces correspondientes en la p\u00e1gina.\n<\/p>\n<p>\n  Muestra tus productos\/servicios\n<\/p>\n<p>\n  Si tiene una tienda de comercio electr\u00f3nico, por ejemplo, puede colocar sus productos m\u00e1s vendidos en la p\u00e1gina 404 para que los usuarios tengan la oportunidad de descubrir sus mejores productos y (\u00a1con suerte!) comprarlos.\n<\/p>\n<p>\n  En cuanto a los otros sitios, seguro que puedes ofrecer algo valioso a tus usuarios. Puede ser una prueba gratuita de un producto, una oferta para inscribirse en un curso o una gu\u00eda de \u00e1reas \u00fatiles del sitio.\n<\/p>\n<h5>\n  Hazlo divertido<br \/>\n<\/h5>\n<p>\n  Como ya dijimos anteriormente, la p\u00e1gina 404 es una experiencia negativa porque el usuario no obtuvo el resultado deseado. Para resolver el problema, haga que la p\u00e1gina sea interactiva o agr\u00e9guele un elemento divertido.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-63845276e501f.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328429-63845276e501f.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Incluso si te posicionas como una marca altamente profesional, un poco de humor no har\u00e1 da\u00f1o. Adem\u00e1s, muchas empresas agregan juegos y videos a su p\u00e1gina 404 para atraer al usuario y mantenerlo entretenido.\n<\/p>\n<h5>\n  Seguimiento del error 404<br \/>\n<\/h5>\n<p>\n  El error 404 no es asunto del usuario. Pero es su tarea rastrearlo e identificar la causa del error y el viaje del usuario.\n<\/p>\n<p>\n  Hay algunas cosas a tener en cuenta al elegir una herramienta para el seguimiento de errores 404.\n<\/p>\n<p>\n  Considere todas las fuentes de error 404\n<\/p>\n<p>\n  Es posible que un error 404 no est\u00e9 necesariamente en su sitio: un cliente puede abrir un bolet\u00edn antiguo y seguir el enlace o puede aparecer en los resultados de b\u00fasqueda en Google.\n<\/p>\n<p>\n  Entonces, cuando elija una herramienta para el monitoreo de errores, verifique que busque errores 404 en todas partes para que pueda corregirlos todos.\n<\/p>\n<p>\n  Informe sobre el costo del error 404\n<\/p>\n<p>\n  Como propietario de un sitio, probablemente tenga un mill\u00f3n de cosas que hacer y es posible que corregir los errores 404 no est\u00e9 en la parte superior de su lista.\n<\/p>\n<p>\n  Es por eso que necesita una herramienta que le permita saber cu\u00e1nto cuestan sus errores 404. Y no estamos hablando de dinero aqu\u00ed: puede ser un porcentaje de conversiones perdidas, una mayor tasa de rebote, una cantidad de usuarios perdidos.\n<\/p>\n<p>\n  Una vez que vea c\u00f3mo los errores 404 afectan su negocio, ser\u00e1 m\u00e1s f\u00e1cil priorizar sus tareas y mover los errores 404 hacia arriba o hacia abajo en la lista.\n<\/p>\n<p>\n  Monitoreo constante\n<\/p>\n<p>\n  Un error 404 no es algo que suceda regularmente. Puede suceder que lo est\u00e9s haciendo perfectamente bien y luego, de repente, un usuario reciba un 404.\n<\/p>\n<p>\n  Es por eso que su herramienta de seguimiento debe monitorear los errores 404 constantemente y notificarle de inmediato si encuentra uno. De esta manera, podr\u00e1 solucionarlo a tiempo y eliminar el riesgo de que otros usuarios tropiecen con la p\u00e1gina 404.\n<\/p>\n<h5>\n  Tipos de herramientas de seguimiento<br \/>\n<\/h5>\n<p>\n  Existen diferentes tipos de herramientas de seguimiento disponibles que lo ayudar\u00e1n a identificar el error 404 y corregirlo con \u00e9xito.\n<\/p>\n<p>\n  herramientas de rastreo\n<\/p>\n<p>\n  Las herramientas de rastreo como Screaming Frog son perfectas para escanear r\u00e1pidamente su sitio web y verificar si hay enlaces rotos.\n<\/p>\n<p>\n  Estas herramientas analizan los enlaces de tu web y te permiten saber cu\u00e1les est\u00e1n rotos y cu\u00e1l es el origen del error. Adem\u00e1s, las herramientas de rastreo suelen ser f\u00e1ciles de administrar e instalar.\n<\/p>\n<p>\n  El mayor defecto de estas herramientas es que solo analizan los enlaces en su sitio web, \u00bfy recuerda lo que dijimos sobre la importancia del an\u00e1lisis avanzado? Adem\u00e1s, las herramientas de rastreo no le indican el costo de un error 404, sino que solo ayudan a identificarlo.\n<\/p>\n<p>\n  Una herramienta de rastreo es definitivamente \u00fatil y debe implementarla regularmente solo para asegurarse de que todo est\u00e9 bien con su tienda. Sin embargo, no olvide realizar an\u00e1lisis regulares y avanzados para asegurarse de que no haya otros errores que pueda haber pasado desapercibidos.\n<\/p>\n<p>\n  Herramientas de v\u00ednculo de retroceso\n<\/p>\n<p>\n  A diferencia de las herramientas de rastreo, las herramientas de backlinks se enfocan en fuentes externas que llevan a los usuarios a los enlaces rotos en su sitio.\n<\/p>\n<p>\n  Link Explorer de Moz es una de las herramientas que lo ayudan a encontrar los sitios web que llevan a los usuarios a su sitio. Dicho an\u00e1lisis es realmente \u00fatil para su SEO, ya que puede eliminar los enlaces 404 y mejorar la clasificaci\u00f3n de su sitio.\n<\/p>\n<p>\n  Pero nuevamente, al igual que con las herramientas de rastreo, las herramientas de seguimiento de backlinks cubren solo un aspecto de la identificaci\u00f3n de los enlaces rotos. Si desea encontrar todos los enlaces de error 404, incluidos los de los boletines antiguos o en las redes sociales, necesitar\u00e1 un an\u00e1lisis m\u00e1s completo.\n<\/p>\n<p>\n  Seguimiento con Google Analytics\n<\/p>\n<p>\n  Una de las formas m\u00e1s comunes y eficientes de rastrear el error de p\u00e1gina 404 es con Google Analytics.\n<\/p>\n<p>\n  Para eso, necesitar\u00e1s copiar este c\u00f3digo:\n<\/p>\n<pre><code>\n&lt;script&gt;\n&lt;![CDATA[\n\u00a0\n\u00a0\u00a0\u00a0\/\/ Create Tracker - Send to GA\n\u00a0\u00a0\u00a0\/\/ Replace UA-11111111-11 with your own Tracking ID\n\u00a0ga('create', 'UA-11111111-11');\n\u00a0\u00a0\u00a0ga('send', {\n\u00a0\u00a0\u00a0\u00a0\u00a0hitType: 'event',\n\u00a0\u00a0\u00a0\u00a0\u00a0eventCategory: '404 Response',\n\u00a0\u00a0\u00a0\u00a0\u00a0eventAction: window.location.href,\n\u00a0\u00a0\u00a0\u00a0\u00a0eventLabel: document.referrer\n});\n]]&gt;\n&lt;\/script&gt;<\/code><\/pre>\n<p>\n  y agr\u00e9guelo a la p\u00e1gina\/plantilla de error 404. Solo recuerda pegar el ID de tu cuenta de Google en el c\u00f3digo.\n<\/p>\n<p>\n  Despu\u00e9s de eso, podr\u00e1 ver qu\u00e9 URL exactas causan el error 404 y d\u00f3nde las obtienen las personas.\n<\/p>\n<h5>\n  Y finalmente: \u00a1arreglar el problema!<br \/>\n<\/h5>\n<p>\n  Los accidentes suceder\u00e1n y eso es un hecho. Es mejor tener una p\u00e1gina 404 atractiva por adelantado que solucionar el problema fren\u00e9ticamente mientras los usuarios molestos esperan.\n<\/p>\n<p>\n  Sin embargo, 404 es un error y debe corregirse. Seg\u00fan la prioridad del error, puede redirigir el enlace, restaurar la p\u00e1gina o corregir el enlace de origen. Adem\u00e1s, haz lo siguiente:\n<\/p>\n<ul>\n<li>Introducir informes 404 automatizados y regulares para vigilar las p\u00e1ginas 404 y corregirlas a tiempo.\n  <\/li>\n<li>Configura notificaciones en tiempo real en 404,\n  <\/li>\n<li>Realice una auditor\u00eda para identificar los enlaces rotos.\n  <\/li>\n<\/ul>\n<p>\n  En general, una p\u00e1gina 404 f\u00e1cil de usar debe aportar valor al usuario, ser consistente en t\u00e9rminos de dise\u00f1o general del sitio web y ayudar a navegar por el sitio. Al seguir estas reglas, retendr\u00e1 a los usuarios y al mismo tiempo aumentar\u00e1 sus conversiones.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2019\/10\/16\/user-friendly-404-pages\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Todos hemos interactuado con una p\u00e1gina 404 en alg\u00fan momento. Estas p\u00e1ginas aparecen cuando se rompe el enlace, se elimina una p\u00e1gina o cuando el usuario escribi\u00f3 incorrectamente la direcci\u00f3n de la p\u00e1gina. Pero cualquiera que sea el motivo, sigue siendo un error que debe corregirse. Adem\u00e1s, los enlaces rotos da\u00f1an la clasificaci\u00f3n de su sitio y eso no es lo que necesita. El aspecto SEO de su sitio es incre\u00edblemente importante, por lo que no querr\u00e1 perder el tr\u00e1fico solo porque olvid\u00f3 vigilar las notificaciones 404. Si bien est\u00e1 claro que las p\u00e1ginas 404 deben corregirse&#8230;<\/p>\n","protected":false},"author":1,"featured_media":187867,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[203,229,60],"tags":[],"class_list":["post-262958","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-libros-de-texto","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/262958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=262958"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/262958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/187867"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=262958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=262958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=262958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}