Errores habituales

En esta página se describen algunos de los errores más frecuentes de diseño para móviles que cometen los webmasters.

JavaScript, CSS y archivos de imagen bloqueados

Para un procesamiento y una indexación óptimos, permite siempre el acceso del robot de Google al código JavaScript y CSS, así como a los archivos de imagen del sitio web. De este modo, el robot de Google verá el sitio web como lo haría un usuario normalmente. Si no se permite el rastreo de estos elementos con el archivo robots.txt del sitio web, el funcionamiento de nuestros algoritmos quedará afectado de forma directa, ya que no se podrá procesar ni indexar el contenido correctamente. Esto puede afectar negativamente al posicionamiento en los resultados de búsqueda.

  1. El robot de Google debe poder rastrear tanto el código JavaScript y CSS como los archivos de imagen. Para ello, usa la función Explorar como Google de Google Search Console. Esto te permite observar exactamente cómo el robot de Google ve y procesa el contenido, y así tendrás más información para identificar y solucionar una serie de problemas de indexación en tu sitio web.

  2. Consulta y prueba el archivo robots.txt en Google Search Console.

  3. Prueba las páginas para móviles con la prueba de optimización para móviles a fin de saber si tu sitio web se considerará como compatible para móviles.

  4. Si usas URL distintas en las páginas para móviles, asegúrate de probar tanto la versión para ordenador como la versión para móviles de la URL. De esta forma, puedes confirmar que el redireccionamiento funcione y se pueda rastrear.

Contenido que no puede reproducirse

Algunos tipos de vídeo o de contenido no se pueden reproducir en dispositivos móviles, como en el caso del contenido restringido por licencia o para el que se necesite Flash u otros reproductores poco compatibles con los dispositivos móviles. Puede ser muy frustrante para el usuario que el contenido que aparece en un sitio web no pueda reproducirse.

Cuando los usuarios visiten una página con contenido no compatible para dispositivos móviles, verán un mensaje de error similar al siguiente:

Vídeo que no se puede reproducir

En estos casos, los usuarios no disfrutarán de una buena experiencia.

En vez de utilizar un reproductor de vídeo propio o de poner el contenido en formatos no compatibles, se recomienda incluir vídeos o animaciones mediante etiquetas estándar HTML5.

En el caso del contenido animado para el que se necesite Flash u otros reproductores multimedia, recomendamos usar animaciones HTML5 que funcionen en todos los navegadores web. Google Web Designer facilita la creación de estas animaciones en HTML5.

  • Utiliza el estándar HTML5 para animaciones con el fin de proporcionar una buena experiencia a todos los usuarios.
  • Usa vídeos insertados que puedan reproducirse en todos los dispositivos.
  • Recomendamos ofrecer una transcripción del vídeo. De este modo, podrán acceder a tu sitio web aquellas personas que usen tecnologías de apoyo para la navegación o cuyos navegadores no sean compatibles con formatos de vídeo de propiedad exclusiva.

Para obtener más información, consulta nuestras prácticas recomendadas para vídeo en el sitio web Web Fundamentals de Google.

Redireccionamientos defectuosos

Si tienes varias URL para móviles, debes redirigir a los usuarios móviles que visiten las URL para ordenadores a las URL para móviles correspondientes. No se debería redirigir a otras páginas (por ejemplo, siempre a la página principal).

Ejemplos:

  • El servidor del sitio web para ordenadores está configurado para redirigir a los usuarios móviles a la página principal del sitio web para móviles, independientemente de la URL solicitada, aunque en el sitio web para móviles haya una página equivalente a la página para ordenadores que redirige al usuario.
  • Las URL del sitio web para ordenadores se generan de forma dinámica con parámetros de URL que no redirigen correctamente a la URL para móviles equivalente. Por ejemplo, un usuario que busca el horario de un tren en una fecha específica en el sitio web para ordenadores se frustrará cuando se le redirija a la página de búsqueda del horario general en el sitio web para móviles. Recomendamos configurar el redireccionamiento correctamente si hay una URL para móviles equivalente, de modo que los usuarios accedan a la página que buscan.

  • El sitio para ordenadores solo redirige a determinados dispositivos móviles. Por ejemplo, es posible que un sitio web solo redirija a la versión para móviles a los usuarios de Android, y no a los usuarios de iPhone o Windows Phone.

  • Usa Google Search Console. Si eres un usuario verificado, te enviaremos un mensaje si detectamos que alguna página del sitio web redirige a los usuarios de smartphone a la página principal. Además, puedes ver los redireccionamientos defectuosos detectados en la sección Errores de rastreo en smartphones de Search Console. Usa las URL de ejemplo que facilitamos en Search Console como punto de partida para saber el origen exacto del problema en la configuración del servidor.

  • Configura el servidor para que redirija a los usuarios de smartphones a la URL equivalente de tu sitio web para smartphones.

  • Si una página del sitio web no tiene ninguna versión equivalente para smartphones, mantén a los usuarios en la página para ordenadores y no los redirijas a la página principal del sitio web para smartphones. En este caso, es mejor no hacer nada que hacerlo mal.

  • Prueba un diseño web adaptable en el que se muestre el mismo contenido tanto para los usuarios de ordenador como para los de smartphone.

Errores 404 en móviles

En algunos sitios web se muestra contenido a los usuarios de ordenador que acceden a una URL concreta, pero se muestra una página de error a los usuarios de móviles cuando acceden a esa URL.

Errores 404 en móviles

Para garantizar al usuario la mejor experiencia posible, si detectas que un usuario accede a una página para ordenadores desde un dispositivo móvil y dispones de una página equivalente para móviles en otra URL, redirígelos a esa URL en lugar de mostrar una página de error 404 o de error 404 leve. Además, asegúrate de que la página optimizada para móviles no sea una página de error.

Redireccionamientos correctos
  • Usa Google Search Console. Si eres un usuario verificado del sitio web, te enviaremos una notificación en el Centro de mensajes.

  • Si tienes un sitio web para smartphones con una URL distinta, configura el servidor para que se redirija a los usuarios de smartphone a la URL equivalente en el sitio web para smartphones.

  • Si usas la publicación dinámica, asegúrate de que la detección del agente de usuario esté configurada correctamente.

  • Si no hay ninguna versión equivalente para smartphone de una página de tu sitio web, mantén a los usuarios en la página para ordenadores. Siempre es mejor para el usuario mostrarle el contenido que estaba buscando que mostrarle una página de error.

  • Usa un diseño web adaptable siempre que sea posible. Esta configuración permite mostrar el mismo contenido a los usuarios, independientemente del dispositivo que usen.

  • Consulta el informe Errores de rastreo de Google Search Console. En la pestaña Smartphone se mostrará una lista de las URL detectadas que devuelven mensajes de error 404 en smartphones.

Evitar los intersticiales

En muchos sitios web se muestran intersticiales o superposiciones con los que se oculta de forma total o parcial el contenido de las páginas que visitan los usuarios. Estos intersticiales (que suelen aparecer en dispositivos móviles para promocionar una aplicación nativa de un sitio web), los formularios de suscripción a listas de distribución o los anuncios pueden empeorar la experiencia de usuario. En casos extremos, los intersticiales se han diseñado para que al usuario le resulte difícil ignorarlos y ver el contenido real de la página. Como el espacio en pantalla de los dispositivos móviles es limitado, los intersticiales tienen un efecto negativo en la experiencia de los usuarios.

Intersticiales de descarga de aplicaciones

Muchos webmasters promocionan las aplicaciones nativas de su empresa a los visitantes del sitio web móvil. Esto hay que hacerlo con cuidado, ya que podrían producirse errores de indexación, lo que afectaría al uso del servicio por parte de los usuarios.

Evitar los intersticiales
El intersticial impide al usuario realizar acciones.
Banner de aplicación
En cambio, un banner, además de presentar la aplicación a los usuarios, les permite realizar acciones.
  • Usa un banner sencillo para promocionar la aplicación junto al contenido de la página. Para ello, puedes usar lo siguiente:

  • Si tienes una aplicación para Android, puedes implementar la indexación de aplicaciones: cuando el contenido indexado de una aplicación sea relevante para una consulta determinada, mostraremos un botón de instalación en los resultados de búsqueda para que los usuarios puedan descargar la aplicación e ir directamente a la página específica de esta.

Cuando en un sitio web se muestra contenido a los usuarios en distintas URL para móviles, es habitual contar con enlaces a la versión para ordenadores, así como con enlaces de la página para ordenadores a la página para móviles. Un error frecuente es que los enlaces apunten a una página irrelevante, como cuando una página para móviles dirige a la página principal de un sitio web para ordenadores.

  • Comprueba los enlaces para asegurarte de que dirijan a la página equivalente adecuada.

Páginas para móviles de carga lenta

Es muy importante asegurarse de que el sitio web para móviles se cargue rápido. Los usuarios se frustrarían bastante si tuvieran que esperar mucho tiempo para ver el contenido.

Utiliza Google PageSpeed Insights para comprobar si hay algún problema que pueda ralentizar la página y céntrate en el subapartado "Velocidad". Procura solucionar los problemas marcados como "Elementos que debes corregir".

Para obtener más información, consulta los artículos sobre los siguientes temas:

Configurar la ventana gráfica correctamente

Dado que los visitantes del sitio web utilizan diferentes dispositivos con varias medidas de pantalla, se debería especificar una ventana gráfica en las páginas mediante la metaetiqueta "viewport". Con esta etiqueta, se indica a los navegadores cómo ajustar el tamaño y la escala de la página para adaptarla al dispositivo. A continuación, te indicamos dos problemas habituales a la hora de definir ventanas gráficas:

  • Usar ventanas gráficas de ancho fijo. Esto hace que la página no se adapte correctamente a los distintos tamaños de dispositivo, que son muchos. Más información
  • Definir un ancho mínimo poco realista en la ventana gráfica, lo que puede hacer que los usuarios con dispositivos más pequeños deban desplazarse horizontalmente para leer el contenido. Esto sucede cuando se utilizan valores absolutos en las declaraciones CSS de las páginas o se usan imágenes diseñadas para que se vean mejor con un ancho de navegador concreto (como 980 píxeles). Para solucionar este error, asegúrate de que se utilicen valores de posición y ancho relativos en las páginas para los elementos CSS y comprueba que las imágenes también puedan adaptarse. Más información

Tamaño de fuente pequeño

Evita definir un tamaño de fuente demasiado pequeño que obligue a los usuarios móviles a pellizcar para ampliar el texto a fin de leerlo. Tras especificar una ventana gráfica para las páginas web, configura los tamaños de fuente para que estas se adapten a la ventana gráfica. Puedes obtener más información sobre las prácticas recomendadas para definir el tamaño de la fuente en Utilizar tamaños de fuente que se puedan leer.

Elementos táctiles demasiado próximos entre sí

Evita colocar elementos táctiles, como botones y enlaces, demasiado próximos entre sí, ya que dificultaría a los usuarios tocar el elemento deseado con el dedo sin tocar también el más cercano. Para solucionar estos errores, procura definir un tamaño adecuado para móviles en los botones y en los enlaces de navegación, además de dejar el espacio suficiente entre ellos. Puedes obtener más información al respecto en Aplicar el tamaño adecuado a los botones táctiles.

Enviar comentarios sobre...