Qué es la optimización móvil

Cómo optimizar tu sitio en dispositivos móviles para SEO

What Is Mobile Friendliness?

La optimización móvil es la medida de qué tan bien está diseñado y optimizado un sitio web para cargar en un dispositivo móvil, como un teléfono inteligente o una tableta.

En términos simples, es cuando tu sitio puede reducirse para ajustarse a cualquier pantalla y al mismo tiempo permitir a los usuarios consumir contenido, navegar por el sitio y lograr sus objetivos tan fácilmente como con la versión de escritorio. También significa no lanzar anuncios intrusivos o agresivos que bloqueen tu contenido en dispositivos móviles.

La optimización móvil se puede lograr de dos maneras (que desarrollaremos más adelante):

  1. Usando el concepto de "móvil primero" o el diseño responsive.

  2. Crear un sitio web separado (generalmente alojado en un subdominio móvil) optimizado para dispositivos móviles y redirigir a los usuarios móviles a ese sitio.

¿Importa la optimización móvil para SEO?

La optimización móvil es importante para SEO. De hecho, es una señal de clasificación en los algoritmos de Google y Bing cuando detectan que un usuario está haciendo una búsqueda en un dispositivo móvil. Los sitios web optimizados para dispositivos móviles, en general, superarán a los sitios no optimizados para dispositivos móviles en los resultados de búsqueda móvil.

Por lo tanto, si tu sitio web depende o está dirigido a los usuarios móviles, la optimización móvil es vital para tu SEO.

Incluso si tu empresa no depende del tráfico móvil, gracias a que Google lanzó su índice "móviles primero", la compatibilidad móvil se ha hecho importante para todos.

¿Listo para comenzar con tu estrategia móvil?
Lee nuestra guía básica de SEO móvil!

¿Qué es un sitio web optimizado para dispositivos móviles?

Un sitio optimizado para dispositivos móviles está diseñado para usuarios móviles

Cuando creas tu sitio web, hay tres formas de diseñarlo para que sea compatible con dispositivos móviles:

  • Diseño dinámico: Esta opción implica detectar el agente de usuario y servir diferentes códigos HTML en función de si el usuario está en un dispositivo móvil o navega desde un dispositivo de escritorio. El diseño dinámico requiere que uses el encabezado Vary HTTP para evitar que los servidores de caché sirvan accidentalmente la versión incorrecta. Esto también indicará a los agentes de usuarios móviles de los motores de búsqueda que accedan a la versión de la página móvil.

  • Subdominio móvil: También conocido como mDots, esta opción implica una cantidad significativa de tiempo y recursos de desarrollo. Implica construir un sitio móvil completamente diferente y alojarlo en un subdominio, generalmente algo como m.dominio.com o mobile.dominio.com. En general, Google es bastante eficiente al descubrir la relación entre el contenido alojado en un subdominio móvil y en el sitio de escritorio. Sin embargo, nunca puedes estar 100% seguro cuando se trata de subdominios, por lo que debes incluir una etiqueta rel="canonical" que apunte a la versión de escritorio. Este método generalmente no se recomienda y está cayendo en desuso, especialmente para sitios web grandes y/o complejos.

  • Diseño responsive: Esta opción no requiere mucho en términos de tiempo y recursos de desarrollo, ya que no requiere ningún cambio en el código aparte de crear una metaetiqueta. Crear un sitio responsive es tan simple como agregar la etiqueta metaportportal en la sección <head> de la página. La ventana gráfica le dice a los navegadores que representen una página según el tamaño de la pantalla. Una ventana gráfica responsive se ve así:

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    

Este es el método recomendado por Google para crear un sitio web óptimo para dispositivos móviles. Prueba la capacidad de respuesta de tu sitio web cambiando el tamaño de tu navegador de esta manera:

Mobile friendliness responsive design

Un sitio optimizado para dispositivos móviles prioriza la experiencia del usuario móvil

Los usuarios no interactúan con páginas en dispositivos móviles de la misma manera que lo hacen en computadoras de escritorio. Por lo general, buscan lograr un objetivo de inmediato, ya sea ejecutando una transacción, encontrando información o buscando la ubicación física de una tienda. Por supuesto, esto parece una optimización básica de la tasa de conversión, y ciertamente se puede aplicar a las páginas de destino de tu escritorio. Sin embargo, gracias a la paciencia acortada de los usuarios de dispositivos móviles, tienes aún menos margen de tiempo con los dispositivos móviles. Sigue estas pautas al optimizar el contenido y el diseño móvil de tus páginas:

  • Evite complementos como Flash, Java o Silverlight. La mayoría de los navegadores móviles no admiten estas tecnologías, por lo que no se cargarán para los usuarios móviles. Si deseas efectos especiales o contenido, usa HTML5.

  • Haza que tu tamaño de fuente sea legible sin hacer zoom. Si configuraste tu ventana gráfica móvil, haz que tu fuente base sea de 16 píxeles, el tamaño predeterminado para la mayoría de las fuentes. Luego define los tamaños de texto para los encabezados relativos a la fuente base. Quédate con una tipografía óptima para dispositivos móviles como Arial, Helvetica, Times/Times New Roman o Verdana.

  • Diseña con pantallas táctiles en mente. Esto significa hacer que los botones táctiles sean lo suficientemente grandes y con suficiente relleno, para evitar clics accidentales. Pocas cosas son más frustrantes para los usuarios que los enlaces y botones que son demasiado pequeños o que están demasiado juntos. Haz objetivos táctiles de al menos 48 píxeles de alto y ancho con 32 píxeles adicionales en cada lados.

  • Haz que la navegación sea simple y obvia: 40% de los visitantes se irán a la página de un competidor si no puede navegar fácilmente en un dispositivo móvil. Diseña tu sitio verticalmente, haz que el botón de inicio sea grande y obvio y nunca uses menús de navegación desplegables. Raramente funcionan correctamente en pantallas móviles.

  • Trata a tus páginas móviles como si fueran las páginas de conversión de la versión de escritorio. Coloca el texto más importante en la parte superior de la página junto con los botones de CTA. No agregues detalles innecesarios a la parte superior de la página, los usuarios que necesitan información adicional se desplazarán hacia abajo o harán clic en una página secundaria.

Un sitio optimizado para móviles es rápido... realmente rápido

Los usuarios que buscan con un dispositivo móvil tienen períodos de atención famosamente cortos, y simplemente no esperan a que se cargue un sitio web. De hecho, la mayoría de los usuarios abandonarán un sitio web que no se cargue en tres segundos o menos. Los estándares de Google son aún más estrictos: el contenido por encima del pliegue (ATF) debe presentarse en un segundo o menos.

Desafortunadamente, cada carga de cualquier página web viene con ciertas implicancias:

  • Búsqueda de DNS: 200 milisegundos
  • Conexión TCP: 200 milisegundos
  • Solicitud y respuesta HTTP: 200 milisegundos
  • Tiempo de respuesta del servidor
  • Tiempo de carga del cliente

Esos primeros tres pasos son necesarios simplemente para establecer una conexión con el servidor web, lo que significa que solo hay unos 400 milisegundos del proceso que puedes controlar al optimizar la velocidad de la página. Optimiza el tiempo de carga de la página para minimizar la cantidad de tiempo que los usuarios tienen que esperar a que cargue.

Usa la Developer Console de Chrome para encontrar cuellos de botella y otros aspectos que ralentizan tus páginas.

Considera Google AMP para dispositivos móviles

Si tu sitio web se basa en el consumo de contenido, ya que tu negocio depende de que las personas visiten tu sitio web para leer artículos o mirar videos, hay un acceso directo a la optimización móvil: el Proyecto de páginas móviles aceleradas de Google (AMP, por su sigla en inglés). AMP es un estándar de código abierto que fue diseñado para crear sitios web de carga extremadamente rápida optimizados para la experiencia del usuario móvil. Funciona así:

  • AMP utiliza un conjunto limitado de propiedades HTML personalizadas para activos como imágenes, videos y marcos que predeterminan las relaciones de aspecto para que los navegadores sepan cómo se verá la página antes de comenzar a renderizarla.

  • AMP JavaScript controla toda la cadena de carga de la página y prioriza el contenido ATF por encima de otras solicitudes. Los elementos y el contenido de terceros debajo del pliegue comienzan a cargarse después del contenido principal, por lo que los visitantes pueden comenzar a leer/mirar casi inmediatamente después de llegar a la página.

  • El diseño predeterminado y la carga asincrónica eliminan el procesamiento de páginas de forma entrecortada, lo que significa que tus usuarios no experimentarán una de las mayores quejas de los navegadores móviles: el procesamiento lento y entrecortado que hace que los objetos en la página salten con cada nuevo cálculo del navegador.

Crear páginas AMP es una forma relativamente rápida y fácil de garantizar que las versiones móviles de tus páginas marquen las tres casillas de compatibilidad móvil:

  • Diseño web responsive

  • Experiencia de usuario mejorada

  • Alta velocidad de página

Guías recientes