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)
Buen día a todos, amigos e invitados de mi blog. Hoy mi artículo será bastante breve, pero hoy no pierde su relevancia. Es decir, quiero contarles algo como que Google verifique la versión móvil del sitio. Y tal vez ni siquiera hubiera escrito un artículo tan obvio si este cheque no me hubiera desconcertado recientemente.
Comprobando con google
Antes, la gente no se preocupaba por el diseño receptivo o el móvil. Pero luego, cuando apareció información que los motores de búsqueda bajarían en los resultados de búsqueda de sitios que no tenían una versión móvil, la gente se esforzó (como es el caso de HTTPS). La gente inmediatamente comenzó a pedir versiones móviles a autónomos, algunos instalaron complementos especiales que podían funcionar mal.
Y ahora, cuando alguien adquirió un diseño adaptable o una versión móvil, lo verificó de inmediato en un servicio especial de Google, que solo observa cómo su diseño cumple con los requisitos. Ahora la interfaz ha cambiado un poco, pero la esencia sigue siendo la misma.
Para comprobar este caso por sí mismo, debe ir a este servicio: search.google.com/search-console/mobile-friendly... Después de eso, ingrese la dirección de este sitio en la barra de URL y espere. Después de un breve período de tiempo, se le dará toda la información sobre si su sitio cumple con los requisitos de Google para diseño móvil.
No entiendo...
Sé perfectamente bien que mi sitio ha sido adaptado, especialmente porque recientemente modifiqué el diseño. Pero recientemente, por diversión, fui a este servicio para ver qué diría el viejo Gosha, y me sorprendió mucho. El caso es que el servicio me dijo que mi blog nunca ha sido adaptado y es poco legible para dispositivos móviles.
No podía entender cuál era el problema, así que comencé a buscar una solución en Internet. Y lo encontré en un sitio. Resulta que todo estaba en el archivo robots.txt. Lo tenía escrito en blanco y negro para que los motores de búsqueda no indexaran los archivos de mi tema, por lo que no vio ninguna versión móvil.
Después de eliminar una línea del robot ( No permitir: / wp-content / themes / my theme), el servicio determinó inmediatamente que mi versión móvil era normal. Así que no se preocupe si de repente tiene lo mismo. Lo más probable es que simplemente no permitiste que Google indexara tu tema.
Bueno, sobre esto probablemente terminaré mi artículo hoy. Espero que lo haya encontrado util. Como puedes ver google comprobar la versión móvil del sitio le permite ver cómo el sitio se adapta a sus requisitos. Pero, de hecho, es raro encontrar un sitio web que no tenga su propia versión móvil o capacidad de respuesta. Pasará un poco más de tiempo y todos los sitios recién creados tendrán automáticamente un certificado SSL.
Gracias por leerme. Seguro que te estaré esperando de nuevo en las páginas de mi blog. Mientras tanto, le recomiendo que lea otros artículos. Estoy seguro de que encontrará muchas cosas interesantes para usted. Buena suerte para ti. ¡Adiós!
Saludos cordiales, Dmitry Kostin.
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.
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 -
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? 🙂
