¿Tienes un proyecto en mente? CuéntanosloLa optimización web móvil es el proceso que consiste en garantizar el acceso de los visitantes tu sitio web desde dispositivos móviles para que tengan una experiencia optimizada.
¿Qué es la optimización del móvil?
Todos los años, la gente pasa cada vez más tiempo en sus dispositivos móviles y tabletas, pero muchos sitios web aún no están diseñados para dar cuenta de los diferentes tamaños de pantalla y los tiempos de carga. La optimización móvil echa un vistazo a el diseño del sitio, la estructura del sitio, la velocidad de la página.
Estos elementos son muy importantes para la optimización de tu web móvil.
Velocidad de Página
Debido a problemas de hardware y de conectividad, la velocidad de la página es aún más importante para los usuarios móviles que los usuarios de escritorio. Más allá de la optimización de imágenes, querrás el almacenamiento en caché del navegador apalancamiento, y reducir las redirecciones.
No bloquee CSS, JavaScript, o imágenes
En los viejos tiempos, algunos dispositivos móviles no podían apoyar a todos estos elementos, por lo que los webmasters de sitios móviles bloqueaban uno o los tres. Pero en su mayor parte, ya no es verdad, GoogleBot es capaz de ver y clasificar el mismo contenido de los usuarios. Estos elementos también son fundamentales para ayudar a Google entender si tienes un sitio de respuesta o una solución móvil diferente.
No uses flash
El plug-in puede no estar disponible en el teléfono de tu usuario, lo que significa que perderá en todo. Si desea crear efectos especiales, utilizar HTML5 en su lugar.
No utilices los pop-ups
Puede ser difícil y frustrante para tratar de cerrar estos en un dispositivo móvil. Esto podría llevar a una alta tasa de rebote.
Diseño para el dedo gordo
La navegación de pantalla táctil puede conducir a los clics accidentales si tus botones son demasiado grandes, demasiado pequeño, o en la trayectoria de un dedo que está tratando de obtener la página para desplazarse.
Optimizar los títulos y las descripciones de meta
Recuerda que estás trabajando con menos espacio en la pantalla cuando un usuario busca información, utilizando un dispositivo móvil. Para mostrar tu mejor trabajo, ser lo más conciso posible (sin sacrificar la calidad de la información) al crear títulos, URL y descripciones meta.
Utilice Schema.org datos estructurados
Debido al espacio limitado de la pantalla, un resultado de búsqueda con fragmentos enriquecidos es aún más probable que destaque.
Optimizar para la búsqueda local
Si su negocio tiene un elemento local, recuerde para optimizar su contenido móvil para la búsqueda local. Esto incluye la estandarización de su nombre, dirección y número de teléfono , además, incluye su ciudad y nombre del estado en los metadatos de su sitio.
Configuración de sitio móvil
Probablemente la decisión más importante que va a hacer cuando la creación de un sitio es decidir si desea utilizar una porción dinámica de respuesta, o configuración del sitio aparte. Cada uno tiene sus ventajas y desventajas. Google prefiere el diseño de respuesta, pero apoya las tres opciones, siempre y cuando se hayan configurado correctamente.
Diseño web Responsive
El diseño web reponsive, utiliza preguntas de los medios de CSS3 para servir el mismo contenido a los usuarios móviles y de escritorio usando una cuadrícula de fluidos y un diseño flexible para adaptarse automáticamente al tamaño de la pantalla del usuario.
Utilizan preguntas de los medios para orientar el diseño basado en ancho de la pantalla, la orientación y resolución. Por ejemplo, podría utilizar el siguiente CSS para instruir a los navegadores cómo mostrar contenido para una pantalla que es 420 o menos píxeles de ancho:
Código de ejemplo : pantallamedia y (max-width: 420px) {.class {[estilos para esta clase aquí]}}
Y para enlazar a una hoja de estilo separada en cambio, poner el siguiente código HTML en medio de sus etiquetas <head>:
Código de ejemplo : <Link href = tipo «mobile.css» = media = «pantalla y (max-device-width: 480px)» «text / css» rel = «stylesheet» />
Te permiten tener una gran variedad de estas preguntas de los medios para que los usuarios de pequeñas pantallas de los teléfonos móviles, pantallas más grandes que la media, e incluso tabletas puedan ver un sitio que se ve diseñado para sus dispositivos.
Utilice un emulador como el Responsive Web Design Tool Prueba para verificar que su diseño de respuesta tenga el aspecto que desea.
Porción dinámica
Si no tiene los recursos para un rediseño completo del sitio o quiere mostrar contenido diferente para los visitantes móviles de lo que haces por los de pc, una solución es utilizar una URL para mostrar diferentes conjuntos de HTML y CSS, dependiendo de qué tipo de dispositivo el visitante está utilizando. Esto puede ser útil, por ejemplo, si es un restaurante que quiere un visitante móvil para ver una muestra de opiniones y un mapa de su ubicación en lugar de su sitio web.
Basado en el agente de usuario se llama porción dinámica y el uso de la cabecera HTTP Vary, que se ve así:
Varíe encabezado HTTP :
GET / Página-1 HTTP / 1.1
Anfitrión: www.example.com
(… Resto de cabeceras de petición HTTP …)
HTTP / 1.1 200 OK
Content-Type: text / html
Varíe: User-Agent
Content-Length: 5710
(… Resto de cabeceras de respuesta HTTP …)
En pocas palabras, esto significa que el contenido que se muestra puede variar en función del agente de usuario que solicita la página.
La porción dinámica no es el compromiso perfecto que podría parecer. Por un lado, se basa en tener una lista actualizada de los agentes de usuario, lo que significa que cada vez que un nuevo dispositivo móvil llega al mercado esa lista debe actualizarse. Y no es raro que las pc y dispositivos móviles puedan ser erróneamente servido con el HTML para el otro dispositivo.
URL móvil separada
Otra opción es crear un segundo sitio, paralelo para los usuarios móviles. Esto le permite crear contenido totalmente personalizado para visitantes móviles. Para evitar la URL confusión, la mayoría de los sitios móviles paralelos utilizan un subdominio «m».
Herramientas relacionadas
Mobile Emulator
Esta herramienta le permite ver el contenido de su sitio en una amplia variedad de dispositivos móviles.
Moz Local
Asegúrese de que el SEO local es el fin con esta herramienta de Moz.
MozBar
Compruebe el marcado de datos estructurados y redirige a esta barra de herramientas de Moz.
Responsive Web Design Testing Tool
Vea como su sitio responde a una variedad de tamaños de pantalla estándar.
Screaming Frog
Revise sus redirecciones mediante el análisis de su sitio con esta herramienta.
User Agent Switcher
Este complemento de Firefox te permite ver el contenido de tu sitio cuando se accede desde un agente de usuario diferente.
