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 el 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 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 licencias 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 los usuarios.

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

No se puede reproducir el video

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, te recomendamos que incluyas videos o animaciones mediante etiquetas estándar HTML5.

En el caso de 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 las 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. De esa forma, tu sitio será accesible para las personas que usan tecnologías de asistencia a fin de navegar en Internet 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 videos en el sitio Fundamentos de la Web de Google.

Redireccionamientos defectuosos

Si tienes URL separadas para dispositivos móviles, te recomendamos que redirecciones 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 para computadoras de escritorio está configurado para redireccionar automáticamente a los usuarios de dispositivos móviles a la página principal de tu sitio móvil, independientemente de la URL a la que querían acceder en primer lugar. Esto sucede incluso si el sitio móvil cuenta con una página equivalente a la versión para computadoras de escritorio que redirecciona al usuario.
Diagrama de cómo funcionan los redireccionamientos defectuosos
  • Las URL del sitio para computadoras de escritorio se generan de forma dinámica con parámetros de URL que no mapean 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. Te recomendamos que configures el redireccionamiento correctamente si cuentas con 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 solo redireccione a los usuarios de Android a la versión móvil , pero 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 con un diseño web responsivo, que entregará el mismo contenido para los usuarios de computadoras de escritorio y los de smartphones.

Errores 404 solo en dispositivos móviles

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

Errores 404 solo en dispositivos móviles

Para garantizarle al usuario la mejor experiencia posible, si detectas que visita una página para computadoras de escritorio desde un dispositivo móvil y tienes una página equivalente en otra URL, redirecciónalo a ella 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 publicaciones dinámicas, 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 un 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. Este tipo de elementos (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 que el usuario complete 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 implementarlo de las siguientes formas:
    • 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 un sitio web entrega 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. El hecho de tener que esperar demasiado tiempo para ver el contenido puede frustrar a los usuarios.

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 los siguientes artículos:

Configura el viewport correctamente

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

  • Usar viewports 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 viewport de un ancho mínimo poco realista, lo que puede obligar a los usuarios que acceden con dispositivos más pequeños a tener que desplazar el dedo horizontalmente para poder leer el contenido. Esto sucede cuando se utilizan valores absolutos en las declaraciones CSS de las páginas o cuando se usan imágenes diseñadas para un ancho de navegador específico (como 980 px). A fin de corregir este error, asegúrate de que las páginas utilicen valores relativos de ancho y posición para los elementos CSS, y comprueba que también se adapten las imágenes. Obtén más información.

Tamaño de fuente pequeño

Evita definir un tamaño de fuente demasiado pequeño que obligue a los visitantes que usan dispositivos móviles a pellizcar el contenido para acercar el texto y poder leerlo. Después de especificar un viewport para tus páginas web, configura los tamaños de fuente de modo que se adapten correctamente en él. Obtén más información sobre las prácticas recomendadas 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 próximos entre sí al nivel de que los usuarios de dispositivos móviles no puedan presionar con el dedo el elemento deseado sin tocar también el elemento más cercano. A fin de solucionar estos errores, asegúrate de definir un tamaño adecuado para dispositivos móviles correspondiente a los botones y los vínculos de navegación, además de dejar suficiente espacio entre ellos. Obtén más información sobre cómo aplicar el tamaño adecuado a los botones táctiles.