Errores comunes

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

JavaScript, CSS y archivos de imagen bloqueados

Para lograr un procesamiento y una indexación óptimos, permite siempre que el robot de Google acceda al código JavaScript y CSS, y a los archivos de imagen que usa tu sitio web. De ese modo, el robot de Google podrá ver tu sitio como lo haría un usuario común. Si el archivo robots.txt de tu sitio no permite el rastreo de estos elementos, se verá afectada de forma directa la efectividad con la que nuestros algoritmos indexan y procesan tu contenido. Esto puede generar clasificaciones subóptimas.

  1. Asegúrate de que el robot de Google pueda rastrear tanto el código JavaScript y CSS, como los archivos de imagen mediante la Herramienta de inspección de URL en Search Console. La herramienta te muestra cómo ve y procesa tu contenido el robot de Google, y te ayuda a identificar y solucionar los problemas de indexación de tu sitio.

  2. Examina y prueba tu archivo robots.txt en Search Console.

  3. Realiza la prueba de optimización para dispositivos móviles en tus páginas móviles a fin de comprobar si nuestros sistemas determinan que tu sitio web es compatible para usuarios de estos dispositivos.

  4. Si usas URL separadas en las páginas para dispositivos móviles, asegúrate de probar tanto la versión la URL para computadoras de escritorio como la de dispositivos móviles. De ese modo, confirmarás si se puede rastrear el redireccionamiento.

Contenido que no se puede reproducir

No es posible reproducir ciertos tipos de video o contenido en dispositivos móviles, como el que se encuentra restringido por licencia o para el que se necesitan Flash o reproductores poco compatibles con dispositivos móviles. El hecho de que no se pueda reproducir el contenido que aparece en un sitio web suele ser un aspecto frustrante para el usuario.

Cuando los usuarios visitan una página que incluye contenido no compatible con sus dispositivos móviles, ven un mensaje de error similar al siguiente:

Video que no se puede reproducir

Un mensaje así perjudica la experiencia del usuario en un dispositivo móvil.

En vez de utilizar un reproductor de video propio o de ofrecer el contenido en formatos no compatibles, recomendamos incluir videos o animaciones mediante etiquetas estándar HTML5.

En el caso del contenido animado, usa animaciones HTML5 que sean compatibles con todos los navegadores web. Con Google Web Designer, es muy sencillo crear estas animaciones en HTML5.

  • Usa estándares HTML5 para animaciones a fin de proporcionar una experiencia positiva a todos los usuarios.
  • Usa videos incorporados que puedan reproducirse en todos los dispositivos.
  • Considera ofrecer una transcripción del video. Eso hace que tu sitio sea accesible para las personas que usan tecnologías de asistencia para la navegación o quienes tengan navegadores no compatibles con formatos de video de propiedad exclusiva.

Para obtener más información, consulta las prácticas recomendadas sobre video en el sitio Fundamentos de la Web de Google.

Redireccionamientos defectuosos

Si tienes URL separadas para dispositivos móviles, te recomendamos redireccionar a los usuarios de estos dispositivos que visiten las direcciones para computadores de escritorio a las URL correspondientes para dispositivos móviles. No deberías redireccionarlos a otras páginas (por ejemplo, a la principal).

Ejemplos:

  • El servidor de tu sitio de computadoras de escritorio está configurado para redireccionar a los usuarios de dispositivos móviles a la página principal de tu sitio móvil, independientemente de la URL que se solicitó en primer lugar, incluso si el sitio móvil tiene la página equivalente a la página para computadoras de escritorio que redirecciona al usuario.
  • Las URL del sitio de computadoras de escritorio se generan de forma dinámica con parámetros de URL que no redireccionan correctamente a la dirección equivalente para dispositivos móviles. Por ejemplo, un usuario que busque el horario de un tren en una fecha específica en el sitio para computadoras de escritorio se frustrará cuando se lo redireccione a la página de búsqueda del horario general en el sitio móvil. Recomendamos configurar el redireccionamiento correctamente si hay una URL equivalente para dispositivos móviles, de modo que los usuarios lleguen a la página que buscan.

  • El sitio para computadoras de escritorio solo redirecciona a ciertos dispositivos móviles. Por ejemplo, es posible que un sitio redireccione a la versión para dispositivos móviles a los usuarios de Android solamente, y no a los usuarios de iPhone o Windows Phone.

  • Usa Search Console. Si eres un usuario verificado, te enviaremos un mensaje en caso de que detectemos que alguna de las páginas de tu sitio redirecciona a los usuarios de smartphones a la página principal.

  • Configura el servidor para que redireccione a los usuarios de smartphones a la URL equivalente del sitio para estos dispositivos.

  • Si una página de tu sitio no tiene una URL equivalente para smartphones, mantén a los usuarios en la página para computadoras de escritorio y no los redirecciones a la página principal del sitio para smartphones. En este caso, es mejor no hacer nada que hacerlo mal.

  • Prueba un diseño web responsivo, que publicará el mismo contenido tanto para los usuarios de computadoras de escritorio como para los de smartphones.

Errores 404 solo en dispositivos móviles

Algunos sitios muestran contenido a los usuarios de computadoras de escritorio que acceden a una URL, mientras que los usuarios de dispositivos móviles ven una página de error.

Errores 404 solo en dispositivos móviles

Para garantizar al usuario la mejor experiencia posible, si detectas que un usuario visita una página para computadora de escritorio desde un dispositivo móvil y tienes una página equivalente para dispositivos móviles en otra URL, redirecciónalos a esa URL en lugar de mostrar una página de error 404 o de error leve 404. Además, asegúrate de que la página optimizada para dispositivos móviles no sea una página de error.

Redireccionamientos adecuados
  • Usa Search Console. Si eres un usuario verificado del sitio, te enviaremos una notificación al Centro de mensajes.

  • Si tienes un sitio para smartphones con una URL distinta, configura el servidor para que redireccione a los usuarios de smartphones a la URL equivalente del sitio para estos dispositivos.

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

  • Si una página del sitio no tiene una versión equivalente para smartphones, mantén a los usuarios en la página para computadoras de escritorio. Siempre es mejor que el usuario vea el contenido que estaba buscando que mostrarle una página de error.

  • Usa diseño web responsivo cuando sea posible. Con esta configuración, puedes mostrar el mismo contenido a los usuarios, independientemente del dispositivo que usen.

Evita los elementos intersticiales

En muchos sitios web, se muestran elementos intersticiales o superposiciones que ocultan de forma parcial o total el contenido de la página que visita el usuario. Estos elementos intersticiales (que suelen aparecer en dispositivos móviles para promocionar la app nativa de un sitio web, formularios de registro en listas de distribución o anuncios) pueden afectar la experiencia del usuario. En casos extremos, los elementos intersticiales están diseñados 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 elementos intersticiales tienen un efecto negativo en la experiencia del usuario.

Elementos intersticiales para descargar apps

Muchos webmasters promocionan las aplicaciones nativas de sus empresas a los visitantes del sitio web móvil. Si esto no se realiza con cuidado, puede generar errores de indexación, lo que afectaría el uso del servicio por parte de los usuarios.

Evita los elementos intersticiales
El elemento intersticial impide al usuario completar acciones.
Banner de la app
Un banner, además de presentar la app a los usuarios, les permite completar acciones.
  • Usa un banner sencillo para promocionar tu app junto al contenido de la página. Puedes implementar el banner mediante las siguientes opciones:
    • Usa un banner compatible con navegadores específicos, como los de aplicaciones inteligentes para Safari o los de aplicaciones nativas para Chrome.
    • Usa un banner o una imagen HTML, similar a un típico anuncio pequeño, que dirija a la tienda de aplicaciones correspondiente para que los usuarios descarguen la app.

Cuando en un sitio web se muestra contenido a los usuarios en distintas URL para dispositivos móviles, lo más común es tener vínculos a la versión optimizada para computadoras de escritorio y un vínculo de la página para computadoras de escritorio a la página para dispositivos móviles. Un error frecuente es que los vínculos dirijan a una página irrelevante, como cuando una página para dispositivos móviles dirige a la página principal de un sitio para computadoras de escritorio.

  • Revisa los vínculos para asegurarte de que dirijan a la página equivalente correcta.

Páginas para dispositivos móviles lentas

Es importante asegurarse de que el sitio móvil se cargue rápidamente. Los usuarios pueden sentirse muy frustrados si tienen que esperar demasiado tiempo para ver el contenido.

Usa Google PageSpeed Insights para comprobar si hay algún problema que pueda ralentizar la página (enfócate en la sección secundaria "Velocidad"). Procura solucionar los problemas marcados como elementos que se deben corregir.

Para obtener más información, consulta:

Configura la vista del puerto correctamente

Dado que los visitantes de tu sitio utilizan diferentes dispositivos con varias medidas de pantalla, se debería especificar una vista del puerto en las páginas mediante la metaetiqueta "viewport", que indica a los navegadores cómo ajustar las dimensiones de la página para adaptarlas al dispositivo. A continuación, se indican dos problemas comunes:

  • Usar vistas del puerto con ancho fijo. Esto hace que la página no se adapte correctamente a los distintos tamaños de dispositivo, que son muchos. Obtén más información al respecto.
  • Definir un ancho mínimo poco realista en la vista del puerto, lo que puede obligar a los usuarios con dispositivos más pequeños a 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 específico (como 980 px). A fin de corregir este error, asegúrate de que las páginas usen valores relativos de ancho y posición para los elementos CSS, y comprueba que las imágenes también puedan adaptarse. Obtén más información al respecto.

Tamaño de fuente pequeño

Evita definir un tamaño de fuente demasiado pequeño que obligue a los usuarios de dispositivos móviles a pellizcar para acercar el zoom en el texto a fin de leerlo. Después de especificar una vista del puerto para tus páginas web, configura los tamaños de fuente de modo que se adapten correctamente dentro de la vista del puerto. Obtén más información sobre las recomendaciones relacionadas con el tamaño de fuente en Cómo usar tamaños de fuente legibles.

Elementos táctiles demasiado próximos entre sí

Evita que los elementos táctiles, como botones y vínculos, estén tan próximos entre sí que los usuarios no puedan presionar con el dedo el elemento deseado sin tocar también el elemento más cercano. Para solucionar estos errores, asegúrate de definir un tamaño adecuado para dispositivos móviles en los botones y en los vínculos de navegación, además de dejar suficiente espacio entre ellos. Obtén más información en Cómo aplicar el tamaño apropiado a los botones táctiles.