Para sus proyectos, probablemente haya notado hace mucho tiempo que la cantidad de usuarios móviles crece constantemente. Para algunos, la tendencia es menos notoria y, en algunos proyectos, esta cifra se duplica o más cada año. Según los datos de LiveInternet, más del 50% del tráfico en Runet corresponde a dispositivos móviles. Por cierto, muchos lectores de este blog se han estado quejando durante mucho tiempo de que aquí no hay una versión móvil 🙂 que, por supuesto, se solucionará en un futuro próximo.
Este hecho de la movilización tampoco puede ser ignorado por las plataformas de búsqueda. Poco a poco, dan ventajas en la búsqueda móvil a aquellos sitios que se adaptan a los dispositivos de los usuarios.
Al principio, Google le dio a los sitios una marca en fragmentos que se mostrarían correctamente en teléfonos móviles.
Además, Google ha creado una herramienta para ayudar a los webmasters a comprobar la exactitud de la visualización del sitio web en dispositivos móviles:
https://www.google.com/webmasters/tools/mobile-friendly/
El 21 de abril, Google lanzó un nuevo algoritmo llamado Mobilegeddon en Occidente. Ahora pasar la prueba de optimización para dispositivos móviles es uno de los factores de SEO que Google tiene en cuenta. Hasta ahora, no ha habido cambios importantes en las SERP, pero puede prepararse ahora.
¿Cómo puede hacer que su sitio responda a Google? El secreto es simple: debe establecer una tarea para sus programadores / diseñadores de diseño. Bueno, si no hay tiempo para esperar, entonces ... puedes usar MobileCheat 🙂
De hecho, esta es una tecnología no probada, no se sabe a qué conducirá en el futuro, así que úsela solo bajo su propio riesgo y riesgo. Aquí se pueden realizar al menos una serie de pruebas.
Cómo omitir la prueba de Google con MobileCheat
Solo hay dos cosas que hacer:
1. Agregue la metaetiqueta de la ventana gráfica al código.
2. Cierre el acceso del robot a los archivos CSS o la carpeta donde se encuentran a través de robots.txt.
Por ejemplo, así es como mi blog pasa la prueba predeterminada:
Cuando se cierra el CSS, la imagen cambia:
Parece que nada ha cambiado en el sitio, pero los resultados de las pruebas son completamente diferentes. Por cierto, en algunos sitios me gusta deshabilitar CSS, para que sea más conveniente verlos y usarlos 🙂 por lo tanto, este es un esquema completamente justificado. Pero se presenta solo con fines informativos.
¿Qué piensas sobre esto? ¿Google lo contará como un movimiento de contraataque con un caballero o lo ha pensado todo de antemano e inmediatamente comprobará y hará jaque mate al sitio? 🙂
Los motores de búsqueda se esfuerzan por mejorar los resultados de búsqueda para los usuarios de dispositivos móviles (teléfonos inteligentes, tabletas), por lo que los sitios optimizados para diferentes tamaños de pantalla se mostrarán más alto que los sitios sin dicha optimización. Esto también incluye las versiones móviles de los sitios.
Signos de un sitio optimizado para dispositivos móviles:
- Contenido convenientemente legible (lectura sin aumento), botones y campos de formulario grandes.
- Falta de imágenes "pesadas", elementos Flash y animación excesiva.
- Falta de subprogramas de Java y complementos de Silverlight.
- Falta de barra de desplazamiento horizontal.
- La velocidad mínima de carga del sitio web.
- La navegación más sencilla.
- La metaetiqueta de la ventana gráfica está registrada.
Servicios para comprobar la "movilidad" del sitio
Para demostrar el trabajo de los servicios, tomemos el sitio de mis buenos socios: la agencia de traducción CONTEXT.
1. Compatible con dispositivos móviles de Google
Puede verificar cualquier sitio simplemente escribiendo su dirección en la línea.
Muestra en la pantalla cómo se ve el sitio en un teléfono inteligente y brinda una evaluación general de su optimización para dispositivos móviles.
A diferencia de otros servicios, aquí puede consultar no todos los sitios, sino solo el suyo. Es decir, después de que el sitio se agrega a la interfaz del webmaster con la confirmación de los derechos sobre el mismo.
El servicio muestra la calificación general, verifica 6 puntos de cumplimiento y muestra cómo se ve el sitio en un teléfono inteligente.
3. Comprobador de Bing
Se comprueba la optimización global más el cumplimiento de 4 puntos.
También muestra cómo se ve el sitio en la pantalla de un teléfono inteligente (por supuesto, en las ventanas del sistema operativo, mientras que los servicios anteriores mostraban un teléfono inteligente Android \u003d)).
4. Comprobador móvil de W3C
El "más largo" de todos los servicios. Tan "largo" que no esperé el final de la prueba \u003d)
Esperé 5 minutos, mientras que el resto de los servicios se completaron en 5-20 segundos.
5. Respondedor
A diferencia de los demás, no da ninguna clasificación, pero muestra cómo se ve su sitio en 6 dispositivos diferentes en dos orientaciones para IOS y Android, lo cual es muy bueno.
UPD1: 20/07/2017:
6. Adaptador
El servicio sugerido en los comentarios a este artículo. Yo personalmente no lo usé, pero todo parece estar bastante bien. Las capacidades son similares a las del respondedor, pero también hay una evaluación del resultado de adaptabilidad.
UPD2: 3.11.2017:
7. iloveadaptive.com
Otro nuevo servicio sugerido en los comentarios. En cuanto a mí, un poco de sobrepeso y poco práctico, pero esto vale la pena con grandes oportunidades. Incluso hay clasificación por sistema operativo.
Salida
Sin duda, la adaptación del sitio para dispositivos móviles no es solo un homenaje a la moda y el tiempo, sino un atributo necesario de un sitio moderno que ayuda no solo al usuario final.
Por tanto, recomiendo a todo aquel que quiera estar más cerca del cliente y tener más visitas / leads que adapten sus sitios lo antes posible. Hazme una pregunta -
Eh, de nuevo Google nos "complace" con sus reglas y algoritmos, creando nuevas "migrañas" para los webmasters. En esta ocasión, se nos ofrece probar un nuevo algoritmo compatible con dispositivos móviles, que mostrará sitios adaptados en la búsqueda móvil y reducirá los recursos "no móviles".
¿Cómo funcionará todo esto?
Es muy simple: todos los sitios que no estén adaptados para dispositivos móviles (según Google) simplemente serán ignorados por el motor de búsqueda y aparecerán en los últimos lugares en la búsqueda móvil, y los recursos móviles subirán más. Por ejemplo, si hay varios sitios con temas similares, entonces en la tableta el usuario encontrará aquellos que tienen un diseño adaptado para ver en dispositivos móviles.
Mis impresiones de esta innovación son dobles: por un lado, todo es correcto, si utilizo la búsqueda en una tableta o smartphone, entonces quiero ver en las SERP aquellos sitios que se comportan correctamente en la pantalla. Por otro lado, el algoritmo para determinar la "movilidad" es tan extraño que hace pensar en la conveniencia de tal "saber hacer". Por supuesto, revisé mis sitios en busca de recomendaciones y encontré un comportamiento extraño, por decir lo mínimo, de Google hacia el análisis de recursos.
Vale la pena decir que, al crear sitios, siempre verifiqué la apariencia en varios dispositivos de forma manual y a través de servicios, por lo que estaba tranquilo sobre la "movilidad", pero resultó no ser tan simple. Por lo tanto, Google recomienda probar sus recursos a través de una prueba compatible con dispositivos móviles:
Simplemente ingrese la dirección del sitio o página y haga clic en "Analizar". Mientras revisaba la página principal del sitio de mi amigo de Crimea krimeo.ru durante la prueba, vi que la página estaba optimizada para dispositivos móviles.
No es sorprendente que la plantilla responda y el sitio se vea muy bien en diferentes dispositivos. Entonces decidí revisar mi sitio y cuál fue mi sorpresa cuando este recurso no pasó la prueba.
Interesante ... la plantilla de este blog también es responsive, he accedido varias veces tanto desde una tableta como desde un smartphone ... ¿por qué entonces no le gustó a Google?
Comencé a analizar qué exactamente en el sitio podría provocar tal resultado. La solución se encontró donde menos esperaba esto: en mi sitio, las miniaturas de los artículos se mostraban en un rectángulo de 720x350px, y esto (según Google) no hace que el sitio se considere móvil. Sorprendentemente, cuanto más grande es la imagen (botones), más fácil es para los usuarios de dispositivos móviles golpear con el dedo ... pero Google piensa lo contrario.
También es sorprendente que al visualizar el sitio en un teléfono inteligente, todas las imágenes se adaptan perfectamente al tamaño de la pantalla y no se observan "jambas". Bueno, decidí realizar un experimento e hice que el tamaño de las imágenes fuera adaptable, es decir, cuanto menor sea el tamaño de la pantalla del dispositivo, menor será la imagen del sitio. Intente agarrar la esquina del navegador con el mouse y hacerlo más pequeño .. 
Ahora, algunos webmasters pueden tener otro problema: si Google se comportó de esta manera con miniaturas grandes, entonces la situación con las ilustraciones de los artículos será la misma, y \u200b\u200besto es mucho más importante que la página principal. Para hacer esto, necesita hacer que las imágenes sean adaptables para todo el sitio, utilizando los medios para iniciar un script js, pero eso no es todo, la carpeta de caché y la regla para guardar imágenes deben estar duplicadas en .htaccess
De hecho, los artículos que contienen imágenes de gran tamaño no pasan la prueba de Google, y aquellos con ilustraciones más pequeñas se consideran totalmente optimizados para dispositivos móviles. No daré capturas de pantalla, solo tome la URL de una publicación separada y verifique si tiene "movilidad".
¿Por qué más el robot de Google ve que el blog no está optimizado para dispositivos móviles?
Porque robots.txt tiene muchas restricciones innecesarias.
Solo hay una restricción en el archivo robots.txt virtual de WordPress generado automáticamente:
No permitir: / wp-admin
Y esto es lo que Google escribe sobre por qué los creadores de WordPress hicieron que robots.txt sea el predeterminado:
Para asegurarse de que las páginas se indexen y se muestren correctamente, debe otorgar acceso al robot de Google a JavaScript, CSS y gráficos en su sitio. El robot de Google debería ver su sitio como un usuario habitual. Si el archivo robots.txt no permite el acceso a estos recursos, Google no podrá analizar e indexar correctamente el contenido. Esto puede degradar la clasificación de búsqueda de su sitio.
User-agent: * Disallow: / wp-admin Disallow: / wp-includes Disallow: / wp-content / plugins Host: Your_site Sitemap: http: // Your_site / sitemap_index.xml (Sitemap by WordPress SEO by Yoast) Usuario -agente: Googlebot-Image Allow: / wp-content / uploads / User-agent: YandexImages Allow: / wp-content / uploads /
Espero que Google mejore su algoritmo de verificación y dé resultados reales, porque "en la vida real" en tabletas y teléfonos inteligentes, muchos sitios se ven geniales.
Podemos ver tal sorpresa en la forma de un algoritmo compatible con dispositivos móviles desde el 21 de abril de 2015. Google nos "mima")). ¿Vive en paz? ¡Aquí tienes un Panda! ¿Pocos? ¡Aquí también hay un pingüino! ¿Echar? ¡Adáptese a dispositivos móviles!
Salida
Depende de usted decidir qué hacer con esta información, si cambiar a diseños receptivos o no es un asunto personal de cada webmaster, pero estas nuevas reglas ya han entrado en vigencia.
Por cierto, "optimizado para dispositivos móviles" no es solo un diseño de sitio receptivo, una versión móvil separada y un complemento para WordPress también son adecuados aquí, lo principal es que el sitio se ve correcto en cualquier dispositivo. Toma esto en cuenta.
Hoy ya no es necesario convencer a nadie de la necesidad de una versión móvil del sitio. Después de todo, cada día hay más visitantes de teléfonos inteligentes y tabletas. En el momento de escribir este artículo, aproximadamente el 20% de los visitantes de mi blog utilizan dispositivos móviles para navegar. Es decir, uno de cada cinco visita mi sitio web desde un teléfono o tableta.
Hace varios años, ni siquiera pensaba en esos visitantes, pero cuando su número superó el 10% del número total, comencé a utilizar un diseño receptivo. Esto hizo posible mostrar correctamente el contenido en dispositivos móviles y aumentar la lealtad tanto de los visitantes como de los motores de búsqueda al sitio.
La versión móvil del sitio y el diseño adaptable no son lo mismo. Este artículo se centrará en probar el diseño receptivo cuando el diseño del sitio cambie según la resolución de pantalla del dispositivo del visitante.
Para asegurarse de que su sitio se muestre correctamente en dispositivos móviles, debe verificar, y para esto hay varios servicios y herramientas útiles.
Comprobación rápida del diseño receptivo
Navegador de Internet popular (navegador) Mozilla Firefox equipado con herramientas integradas para comprobar la idoneidad del diseño del sitio web para su visualización en dispositivos móviles. Para usarlo, vaya a "Menú" - "Desarrollo" - "Diseño adaptable". O simplemente presione tres teclas en el teclado al mismo tiempo ++ [M]
Debería ver algo como lo siguiente:
Al cambiar la resolución y la orientación de la pantalla, puede verificar cómo se mostrará su sitio a los visitantes móviles.
Navegador de Google Cromo también tiene soporte incorporado para verificar la capacidad de respuesta del diseño del sitio. Para hacer esto, vaya al menú, seleccione el elemento "Herramientas adicionales" y luego "herramientas de desarrollo" (o presione la tecla ).
Después de eso, haga clic en el icono de diseño receptivo (o haga clic simultáneamente en el teclado ++ [M]):
En el medio de la pantalla, verá cómo se mostrará su sitio en las pantallas de los dispositivos móviles:
Pruebas de SEO de diseño móvil
Como saben, los dos líderes mundiales en búsquedas, Google y Yandex, tienen su propia opinión inmodesta sobre cómo debería verse el sitio en las pantallas de los dispositivos móviles. Y si el sitio se reconoce como un inconveniente para los visitantes de dispositivos móviles, entonces baja en los resultados de búsqueda. Entonces, desde un punto de vista de SEO, si no desea perder visitantes móviles, entonces no solo debe tener un diseño receptivo, sino que los motores de búsqueda también deben considerarlo como tal, es decir, adecuado para dispositivos móviles.
Para verificar la adaptabilidad utilizando el servicio de Google, vaya a la siguiente dirección y escriba el nombre de su sitio: https://www.google.com/webmasters/tools/mobile-friendly/.
Así es como se ve el resultado de revisar mi blog:
Con Yandex es un poco más complicado, para la verificación, debe registrarse en el servicio Yandex.Webmaster y usar la versión beta de la interfaz:
Servicios en línea para probar la adaptabilidad
La tarea principal de estos servicios es presentar (mostrar) cómo se verá su sitio en un dispositivo móvil. Hay muchos sitios con esta funcionalidad. Daré solo algunos de ellos. En la mayoría de los casos, duplican la funcionalidad incorporada de FireFox y Chrome.
Cambiar el tamaño de Google
Empezaré de nuevo con Google, que tiene su propio servicio de demostración adaptable: http://design.google.com/resizer/#
Mosca de pantalla de Quirktools
El segundo servicio bonito es http://quirktools.com/screenfly/. ¡Le mostrará cómo podría verse su sitio incluso en la televisión!
Adaptador de Symby.ru
Bueno, para no ofender al "fabricante nacional", daré un ejemplo de otro sitio: http://symby.ru/adaptest/. En una página, verá varias vistas a la vez con diferentes resoluciones de pantalla.
La velocidad de la versión móvil del sitio.
Una vez que se haya asegurado de que su sitio responda y se muestre correctamente en las pantallas de la mayoría de los dispositivos, debe verificar su velocidad. Nuevamente, aplicado a visitantes móviles.
PageSpeed \u200b\u200bInsights
Google, como siempre, está por delante del resto: https://developers.google.com/speed/pagespeed/insights/. Este servicio le mostrará cómo se ve el sitio en la pantalla del teléfono y le dará recomendaciones para optimizar el código para aumentar la velocidad de carga en los dispositivos móviles.
WebPageTest
Y para concluir, daré un ejemplo de un servicio que no solo mostrará cómo se ve el sitio en un dispositivo móvil, sino que también mostrará la velocidad de su trabajo: http://www.webpagetest.org/
conclusiones
En mi opinión, en el trabajo diario, al realizar cambios en el diseño del sitio, es más fácil utilizar las capacidades integradas de los navegadores FireFox y Chrome. Después de eso, por supuesto, debe verificar la lealtad de los motores de búsqueda a su diseño. Y solo entonces, para calmar el alma o para lucirse, puede utilizar los servicios en línea.
En muchos países, los teléfonos inteligentes se utilizan con más frecuencia para navegar por Internet que las computadoras. Por tanto, es muy importante adaptar el sitio para dispositivos móviles. Descubra si sus páginas son convenientes para los usuarios de teléfonos inteligentes con una herramienta especial en Search Console.
Utilizando
Es fácil verificar si una página es conveniente para verla en un teléfono inteligente: solo especifique su URL completa. La verificación suele tardar menos de un minuto. Si hay redirecciones en la página, también se procesarán.
Según los resultados de la verificación, verá cómo se ve la página en un teléfono inteligente y descubrirá qué problemas pueden surgir al verla. La mayoría de las veces se trata de letra pequeña (difícil de leer en una pantalla pequeña) y elementos Flash (no compatible con la mayoría de los dispositivos móviles).
No se ha establecido el valor de la metaetiqueta de la ventana gráfica
El código de la página no especifica la propiedad de la ventana gráfica, que le dice al navegador cómo cambiar el tamaño de los elementos de la página para que se ajusten al tamaño de la pantalla del dispositivo. Para que su sitio se muestre correctamente en diferentes tamaños de pantalla, ajuste la ventana gráfica con la metaetiqueta de la ventana gráfica. Para obtener detalles sobre esto, consulte la sección Conceptos básicos del diseño web adaptable de nuestra guía.
La metaetiqueta de la ventana gráfica debe tener el ancho del dispositivo
No es posible adaptar la página para pantallas de diferentes tamaños, ya que la propiedad de la ventana gráfica con un ancho fijo está especificada en su código. En este caso, debe aplicar un diseño receptivo ajustando la escala de la página para que se ajuste a la pantalla.
Contenido más ancho que la pantalla
Este informe identifica páginas que requieren desplazamiento horizontal para ver texto e imágenes. Este problema se produce cuando las dimensiones de los estilos CSS se establecen en valores absolutos o cuando se utilizan imágenes diseñadas para un ancho específico de la ventana del navegador. Asegúrese de que los valores de ancho y posicionamiento de los elementos CSS sean relativos y que las imágenes estén escaladas. Para obtener detalles sobre esto, consulte la sección Tamaños de contenido para la ventana gráfica de nuestro tutorial.
Letra demasiado pequeña
Este informe enumera las páginas en letra pequeña que los usuarios deben usar gestos de zoom para leer. Después de configurar la ventana gráfica, debe definir los tamaños de las fuentes para que se muestren correctamente en ella.
Los elementos interactivos están demasiado cerca
Este informe enumera las páginas en las que los elementos de navegación están tan juntos que es difícil para un usuario tocar uno sin tocar otros. Tenga cuidado con los tamaños óptimos de botones, enlaces, etc., y el espacio entre ellos para que los usuarios de dispositivos móviles se sientan cómodos interactuando con ellos.
¿Que sigue?
- Cómo averiguar qué problemas encontramos con la visualización de su sitio en dispositivos móviles mediante un informe especial (para ello, debe verificar la propiedad del sitio en su cuenta de Search Console)
- Cómo optimizar un sitio web para dispositivos móviles (para páginas en WordPress, Joomla! Y otros sistemas de gestión de contenido)
