Errores habituales

En esta página se explican algunos de los errores más frecuentes que cometen los webmasters al diseñar páginas web para móviles.

Archivos JavaScript, CSS y de imagen bloqueados

Para que el robot de Google pueda renderizar e indexar tu sitio web de manera óptima, permite que acceda a los archivos JavaScript, CSS y de imagen; de este modo, podrá ver tu sitio web tal como lo ve un usuario normalmente. Si el archivo robots.txt de tu sitio web no permite rastrear estos recursos, nuestros algoritmos no pueden renderizar ni indexar el contenido de forma correcta, lo que puede afectar al posicionamiento del sitio web en los resultados de búsqueda.

  1. Comprueba con la herramienta de inspección de URLs de Search Console que el robot de Google pueda rastrear los archivos JavaScript, CSS y de imagen de tu sitio web. En esta herramienta, se muestra cómo ve y renderiza tu contenido el robot de Google, lo que te permite identificar y solucionar varios problemas de indexación de tu sitio web.

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

  3. Examina las páginas de tu sitio web móvil con la prueba de optimización para móviles y descubre si nuestros sistemas consideran que tu sitio web es compatible con los móviles.

  4. Si utilizas URL distintas en la versión para ordenadores y en la versión para móviles, pruébalas ambas. De esta forma, compruebas que la redirección 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 resultar muy frustrante que no pueda reproducirse el contenido que aparece en un sitio web.

Cuando los usuarios visitan una página en la que hay contenido no compatible con su dispositivo móvil, ven 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.

Recomendamos que no se utilicen reproductores de vídeo de propiedad exclusiva y que no se publique contenido que esté en formatos no compatibles, sino que se incluyan vídeos o animaciones mediante etiquetas estándar HTML5.

Para mostrar contenido animado, sugerimos usar animaciones HTML5 que funcionen en todos los navegadores web. Este tipo de animaciones se pueden crear fácilmente con Google Web Designer.

  • Utiliza los estándares HTML5 en las animaciones para proporcionar una buena experiencia a todos los usuarios.
  • Usa vídeos insertados que puedan reproducirse en todos los dispositivos.
  • Recomendamos ofrecer una transcripción de los vídeos. De este modo, tu sitio web será más accesible para aquellas personas que usen tecnologías de navegación asistida 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 sobre vídeos en el sitio web Aspectos básicos de la Web de Google.

Redirecciones defectuosas

Si tus páginas para móviles tienen URLs independientes, te recomendamos que redirijas a los usuarios de dispositivos móviles que visiten las URL para ordenadores a las URL para móviles correspondientes. No es correcto redirigirlos a otras páginas; por ejemplo, siempre a la página principal.

Ejemplos:

  • El servidor de tu sitio web para ordenadores está configurado de modo que redirige a los usuarios de dispositivos móviles a la página principal del sitio web móvil, sin importar la URL que hayan solicitado y aunque en el sitio web móvil haya una página equivalente.
  • Las URL de tu sitio web para ordenadores se generan de forma dinámica e incluyen parámetros de URL que no redirigen correctamente a la URL para móviles equivalente. Por ejemplo, un usuario que busca el horario de trenes de una fecha concreta en el sitio web para ordenadores puede sentirse frustrado si se le redirige a la página general de búsqueda de horarios del sitio web móvil. Si tienes una URL para móviles equivalente, te recomendamos que configures correctamente la redirección de forma que los usuarios lleguen a la página que estaban buscando.

  • Tu sitio web para ordenadores solo redirige a los usuarios de 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.

  • Utiliza Search Console. Si eres un usuario verificado, te enviaremos un mensaje si detectamos que alguna página de tu sitio web redirige a los usuarios de smartphones a la página principal.

  • Configura tu servidor para que redirija a los usuarios de smartphones a las URL equivalentes de tu sitio web móvil.

  • Si alguna página de tu 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 móvil. En este caso, es mejor no hacer nada que hacerlo mal.

  • Prueba a utilizar un diseño web adaptable para mostrar el mismo contenido tanto a los usuarios de ordenadores como a los de smartphones.

Errores 404 que solo se muestran en dispositivos móviles

En algunos sitios web se muestra contenido a los usuarios de ordenadores que acceden a una URL concreta, pero en cambio a los que acceden a la misma URL con un dispositivo móvil les aparece una página de error.

Errores 404 en móviles

Para ofrecer la mejor experiencia de usuario posible, si detectas que un usuario accede a una página para ordenadores desde un dispositivo móvil y tienes una página equivalente para móviles en otra URL, redirígelo a esa URL; no le muestres una página de error 404 o de soft 404. Además, comprueba que la página optimizada para móviles no sea una página de error.

Redirecciones correctas
  • Utiliza Search Console. Si eres un usuario verificado del sitio web, te enviaremos una notificación al centro de mensajes.

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

  • Si utilizas la publicación dinámica, comprueba que la detección de user-agent esté configurada correctamente.

  • Si una página de tu sitio web no tiene ninguna versión equivalente para smartphones, mantén a los usuarios en la página para ordenadores. Es mejor mostrar al usuario el contenido que estaba buscando que una página de error.

  • Usa un diseño web adaptable siempre que sea posible porque, de este modo, podrás mostrar el mismo contenido a todos los usuarios, utilicen el dispositivo que utilicen.

Evitar los intersticiales

En muchos sitios web se muestran intersticiales o superposiciones que ocultan 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 la aplicación nativa de un sitio web, presentar formularios de suscripción a listas de distribución o mostrar anuncios, pueden empeorar la experiencia de usuario. En casos extremos, los intersticiales están diseñados para que a los usuarios les cueste mucho cerrarlos 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 negocio a los usuarios que visitan su sitio web móvil. Hay que ir con cuidado al hacerlo, porque podrían producirse errores de indexación e impedir que los usuarios puedan navegar por el sitio web correctamente.

Evitar los intersticiales
Este intersticial impide que los usuarios completen tareas.
Banner de aplicación
En cambio, un banner, además de presentar la aplicación a los usuarios, les permite realizar acciones.
  • Promociona tu aplicación con un banner simple que aparezca junto al contenido de tus páginas. Para hacerlo, puedes usar lo siguiente:

En los sitios web que muestran contenido en URL distintas en función de si los usuarios utilizan un ordenador o un dispositivo móvil, es habitual que en ambas versiones se incluyan enlaces a la otra. Un error frecuente es que estos enlaces dirijan a una página irrelevante, como cuando una página para móviles dirige a la página principal de la versión para ordenadores del sitio web.

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

Páginas para móviles que se cargan lentamente

Es importante que los sitios web móviles se carguen rápido, porque los usuarios se pueden frustrar bastante si tienen que esperar mucho tiempo para ver el contenido.

Examina tu página con Google PageSpeed Insights y céntrate en la subsección "Velocidad" para ver si hay algún problema que pueda ralentizar la página. Procura solucionar los problemas marcados como "Elementos que debes corregir".

Para obtener más información, consulta estos artículos:

Configurar la ventana gráfica correctamente

Como los visitantes de tu sitio web utilizan dispositivos con pantallas de distintos tamaños, deberías especificar un viewport en tus páginas mediante la metaetiqueta "viewport". Con ella, indicas a los navegadores cómo deben ajustar el tamaño y la escala de las páginas para adaptarlas a los distintos dispositivos. A continuación se indican dos problemas habituales a la hora de configurar viewports:

  • Utilizar viewports de ancho fijo. Así, las páginas no se adaptarán correctamente a los distintos tamaños de dispositivo, que son muchos. Más información
  • Definir un ancho mínimo poco realista en el viewport, lo que puede hacer que los usuarios con dispositivos más pequeños deban desplazarse horizontalmente para leer el contenido. Suele pasar cuando las páginas utilizan valores absolutos en las declaraciones CSS o incluyen imágenes diseñadas para verse de manera óptima con un ancho de navegador concreto (como 980 píxeles). Para solucionar este error, asegúrate de que los elementos CSS de las páginas utilicen valores de posición y ancho relativos, y comprueba que las imágenes también puedan escalarse. Más información

Tamaño de fuente pequeño

No utilices un tamaño de fuente demasiado pequeño que obligue a los usuarios de dispositivos móviles a pellizcar para ampliar el texto y así poder leerlo. Una vez que hayas definido un viewport en tus páginas web, configura los tamaños de fuente para que se adapten al viewport. 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í

No coloques elementos táctiles, como botones y enlaces, tan cerca unos de otros que los usuarios de dispositivos móviles no puedan tocar uno con el dedo sin tocar también el de al lado. Para solucionar este tipo de errores, procura que los botones y los enlaces de navegación tengan un tamaño adecuado para mostrarse en dispositivos móviles, y trata de dejar el espacio suficiente entre ellos. Puedes consultar más información al respecto en el artículo sobre cómo aplicar el tamaño adecuado a los botones táctiles.