A partir del 21 de abril, los contenidos web que no se adapten a la tecnología móvil sufrirán penalizaciones en su ranking de resultados de búsquedas.

Este cambio afectará a las búsquedas móviles en todos los idiomas a nivel mundial y tendrá un impacto significativo en los resultados. En consecuencia,los usuarios encontrarán más fácil obtener resultados relevantes, de alta calidad de búsqueda y optimizados para sus dispositivos.

Enlaces de interés

• Prueba de optimización para móviles (mobile-friendly) Test 1: Introduce la url de tu web y te indicará si la página tiene un diseño optimizado para móviles.  
• PageSpeed Insights Test 2: introduce la url de tu sitio web y al pulsar el botón Analizar aparecerán los resultados de Velocidad y Experiencia de Usuario para móviles en una escala 1/100.
• Personaliza el software del sitio web para usuarios de móviles: si tu web site utiliza software de terceros (WordPress, Joomla!, Drupal, Blogger, v Bulletin, Tumblr, DataLife Engine, Magento, PrestaShop, Bitrix, Google Sites), esta completa guía de Google te resultará muy útil.
• Guía SEO para móviles: te ayuda a configurar el sitio para varios dispositivos para que los motores de búsqueda comprendan la configuración y evitar errores habituales.
• Usabilidad móvil: la usabilidad móvil resulta del todo relevante para obtener unos resultados de búsqueda óptimos.

Aspectos básicos a tener en cuenta

- si usas diseño web adaptativo en el que el código HTML es el mismo para todos los dispositivos y son las CSS las encargadas de modificar el procesamiento de la página, se recomienda el uso de media queries. Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla. Se convirtió en un estándar recomendado por la W3C en junio del 2012 y es un principio básico de la tecnología de diseño web adaptaivo.  Media Query.

Ejemplo: @media only screen and (max-width: 620px) {...}.

Si optamos por la publicación dinámica de diferentes HTML en la misma URL, el servidor responderá en función del user-agent que solicite la página. Se recomienda que el servidor envíe una sugerencia para detectar el contenido móvil. Esta sugerencia se implementa mediante la cabecera Vary (Variable) HTTP.

El contenido de la respuesta variará en función del user-agent que solicite la página. Si el servidor ya utiliza la cabecera Vary HTTP, puedes añadir User-Agent a la lista que ya se ha proporcionado.

• En el caso de URL para móviles independientes, la recomendación es la siguiente: Para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles. Ejemplo: 

<link rel="alternate" media="only screen and (max-width: 620px)" href="https://m.tutorialesenlinea.es/default"/>

• Y para las páginas para móviles, añade una etiqueta de enlace rel="canonical" que señale la URL para equipos de escritorio. Ejemplo:

<link rel="canonical" href="https://tutorialesenlinea.es/default"/>

Errores comunes en los sitios desarrollados para smartphones que debemos evitar:

• los vídeos no se reproducen porque no usamos tecnología html5 estándar.
• Redireccionamientos defectuosos.
• Error 404 (Page Not Found) sólo para smartphones.
• baja velocidad de carga de la página.
• No prestar atención a la usabilidad: tamaño incorrecto de los textos e imágenes, colores inapropiados, ubicación inadecuada de las opciones de navegación, falta de implementación de los atajos de teclado, etc.
• llamadas a enlaces externos que se abren en otras ventanas.
• Ausencia de un apartado de contacto o método de retroalimentación.
• No proporcionar un enlace al sitio web completo.

Recomendamos Leer:

• Está Tu Sitio Web Optimizado Para Móviles