Estás leyendo la publicación: 14 prácticas recomendadas de optimización móvil que debe conocer
Ha pasado un tiempo desde que Google comenzó a implementar su primer índice móvil.
Cuando esto se anunció por primera vez, los profesionales de SEO corrían por todas partes para asegurarse de que su sitio cumpliera con Core Web Vitals de Google y las pautas de desarrollo móvil de mejores prácticas.
La optimización para la web móvil es un subcampo completamente completo dentro de SEO, que requiere conocimientos de nivel especializado y sus propias mejores prácticas para tener éxito.
Tanto es así, que muchas industrias requieren una implementación completa y de calidad de su sitio web en dispositivos móviles. Y no todos están a la altura.
En muchos casos, a veces la mayoría de los sitios no cumplen con su objetivo de cumplir.
Claramente, esto es un error debido al hecho de que el diseño móvil es una parte tan frecuente de nuestra sociedad digital:
- 96% de los estadounidenses entre 18 y 29 años posee un teléfono inteligente.
- A partir de 2020, había más 3.600 millones de usuarios que usó un dispositivo de teléfono inteligente en todo el mundo. Habrá 4.300 millones para 2023.
- En 2020, los usuarios móviles gastaron 90% de su tiempo en aplicaciones en lugar de navegadores móviles.
- cuentas de Google para 93,22% de la cuota de mercado de búsqueda móvil en los Estados Unidos en 2021.
- El resultado inicial de la búsqueda móvil en Google tiende a lograr un 26,9% CTR orgánico (tasa de clics).
Para aprovechar la mejor presencia en línea posible, debe optimizar para diferentes tipos de dispositivos y resoluciones de pantalla. No solo para computadoras de escritorio.
Y ahora, Google está implementando la actualización de la experiencia de su página de escritorio. Pero esa actualización está más allá del alcance de este artículo, aunque juega en la experiencia de la página en general.
Para lograr la mejor implementación móvil absoluta, es importante asegurarse de crear un sitio móvil que cumpla con estas mejores prácticas, y que también cree oportunidades para aumentar sus números de Core Web Vitals.
Al usar un diseño receptivo y no un subdominio m-dot, observar las mejores prácticas con la creación y optimización de imágenes y observar la compresión y la minificación, puede lograr un sitio móvil de calidad que llegue a la mayor cantidad de personas posible dentro de su audiencia.
Ahí es donde su sitio móvil tendrá éxito.
1. Asegúrese de que todo el contenido sea el mismo en computadoras de escritorio y dispositivos móviles
La idea detrás de esta mejor práctica es evitar contenido duplicado y acusaciones de encubrimiento.
Para estar seguro, siempre asegúrese de que todo el contenido sea el mismo en la versión de escritorio de su sitio que en el móvil.
Una de las mejores técnicas para asegurarse de que esto suceda es el diseño receptivo.
El diseño receptivo, para aquellos que no lo saben, implica la creación de una hoja de estilo que utiliza “consultas de medios” para realizar la transición automática de los diseños entre una amplia variedad de plataformas y dispositivos.
Si desea exprimir toda la velocidad posible y hacer que su diseño sea simple y eficaz, considere buscar sprites CSS para reducir las solicitudes del lado del servidor.
2. Arriba del pliegue no se ha ido por completo
Es importante recordar que en un entorno móvil, donde las cosas se desplazan sin cesar, la mitad superior de la página no desaparece por completo.
Todavía es preferible tener al menos parte del contenido de texto en la parte superior del pliegue en un diseño móvil, para mostrarle a alguien que hay una razón para desplazarse.
Los beneficios psicológicos y los deseos de querer ver lo que ofreces no se han ido por completo, por lo que aún tienes que optimizarlo un poco en muchos dispositivos móviles diferentes.
3. Utilice un enfoque de desarrollo ‘de arriba hacia abajo’
Un enfoque de desarrollo “desde arriba hacia abajo” significa que usted considera todas las posibles consecuencias de cada decisión tomada en un diseño de principio a fin.
Primero desarrolla para dispositivos móviles, en lugar de para computadoras de escritorio, y luego agrega un diseño móvil después. Este enfoque de desarrollo es ideal porque no introduce problemas en el diseño final.
He aquí un ejemplo: Usted crea un sitio web de escritorio. Alrededor de las tres cuartas partes del proceso, decide que desea crear un sitio móvil encima.
Tú creas la maqueta. Pero, después de codificar la maqueta y moverse a lo largo de las transiciones, encuentra un error aquí. Y encuentras un error allí. Entonces encuentras un error allí. Esto se debe a que el enfoque de abajo hacia arriba no funciona y hace que el alcance se desplace.
Este es el fenómeno en el que surgen problemas no vistos en el último minuto, lo que provoca errores imprevistos y aumentos en las horas que no se contemplaron originalmente cuando se analizó originalmente el proyecto.
La verdad es que si el enfoque de arriba hacia abajo para el diseño de respuesta móvil se considerara directamente desde el principio, estos errores y las cosas que deben resolverse no aparecerían al final, causando este temido problema.
4. Sin embargo, no se concentre exclusivamente en el consumidor móvil
A medida que los dispositivos móviles y de escritorio se fusionan, también lo hacen los objetivos y deseos de los usuarios de estas plataformas.
Cuando se enfoca en lo que su usuario desea lograr en función de la plataforma, crea un enfoque holístico que llega a los clientes a través de su sitio web de manera más efectiva.
Ya sea que un usuario compre un producto o realice una investigación sobre los servicios que brinda, la combinación de objetivos de usuario y adquisiciones de clientes del negocio continuará.
Tanto es así, que centrarse específicamente en estos ideales y valores será menos necesario.
No menos importante, fíjate, solo menos necesario a medida que continúa esta combinación de dispositivos móviles y de escritorio.
5. Usa técnicas de diseño receptivo
Los días de los sitios web separados de m-dot (m.example.com) han terminado.
No existe una posible razón canjeable para usar una implementación de este tipo en la era de los dispositivos móviles.
La estructura puede ser muy complicada, con varias URL que crean problemas de contenido duplicado si no están optimizadas correctamente.
Hay muchas técnicas disponibles para garantizar que se complete una transición efectiva, pero por lo demás, las implementaciones de m-dot han seguido el camino del dodo con la llegada de nuevas tecnologías.
Hoy en día, la implementación ideal implica un diseño receptivo. Estos diseños utilizan lo que se denomina consultas de medios para definir las resoluciones de visualización que admitirá el diseño.
Cada resolución por separado es lo que se denomina un “punto de ruptura” en el diseño, o el punto en el que el diseño receptivo pasa de una resolución a la siguiente.
El beneficio de usar este tipo de estructura es que no se encuentra con los problemas de contenido duplicado que tendría en una implementación de m-dot.
Además, su implementación móvil estará en la última tecnología.
6. Piense en ‘Código’ en lugar de ‘Imágenes en todas partes’ para aumentar la velocidad del sitio
¿Realmente necesita usar ese fondo de dos colores como fondo repetido de 2 píxeles de ancho por 1200 píxeles de alto?
Si no lo hace, y puede codificarlo en su lugar, codifíquelo en su lugar.
Si bien algo tan pequeño no hará mella en la velocidad del sitio, las optimizaciones pueden sumarse a medida que se completan.
La próxima vez que realice una auditoría del sitio o cree un sitio web, piense: “¿Realmente necesito esta imagen aquí o simplemente puedo codificarla?”
Si la imagen realmente no es necesaria, la codificación del objeto podría ayudar a aumentar la velocidad del sitio exponencialmente, especialmente los diseños en el sitio que utilizan una gran cantidad de gráficos.
7. Personaliza WordPress para dispositivos móviles
Hay muchos complementos disponibles para WordPress.
Tanto es así, que algunos incluso brindan funcionalidad para una mayor compatibilidad móvil.
Los complementos más útiles para este propósito son Duda Mobile, W3 Total Cache, así como complementos para minimizar HTML y CSS.
8. No utilice intersticiales intrusivos para vender su producto
Sí. Sabemos. Su producto es lo más grandioso y asombroso que ha agraciado este planeta. Es por eso que probablemente estemos visitando su sitio web e investigando antes de comprar.
Pero no necesitamos tener un anuncio intrusivo que bloquee nuestra actividad en su sitio para molestarnos en la venta.
Siempre que sea posible, mantenga los anuncios intersticiales intrusivos al mínimo y mantenga los anuncios hacia abajo o hacia un lado con la opción de hacer clic en el anuncio y eliminarlo como mínimo.
Es importante tener en cuenta que Google penaliza los anuncios intersticiales intrusivos.
Vale la pena leer sus guías para desarrolladores junto con las pautas para webmasters sobre este tema, así como su publicación de blog sobre este tema.
9. Verifique su sitio en múltiples sistemas operativos y de visualización
Cualquier SEO debe saber cómo identificar las debilidades en la implementación existente de un sitio web, incluido dónde y cómo encontrar problemas en varias pantallas y dispositivos.
Desea consultar su sitio en más de un sistema operativo, así como en más de un dispositivo de visualización. Hacer esto asegura que su sitio sea compatible con la mayor variedad posible de pantallas y plataformas.
Pero, ¿y si no puedes permitirte mil dispositivos para comprobarlos?
Todo esto se reduce a unas pocas aplicaciones. ¡Sí! Es posible verificar este tipo de problemas con más de una aplicación.
Extensión de Chrome para desarrolladores web de Google
Si tiene un presupuesto ajustado, utilice Extensión de Chrome para desarrolladores web de Google puede ayudarlo a examinar cómo se ve su sitio en diferentes tamaños y resoluciones de pantalla.
También ofrece la capacidad de ver cómo se ve su sitio a través de diferentes orientaciones de dispositivos, cómo interactúan las entradas táctiles a través de la simulación y mucho más.
También es posible usar su herramienta de depuración para examinar el código de un sitio en busca de problemas.
NavegadorPila
NavegadorStack.com es una gran herramienta para probar en muchos navegadores, sistemas operativos y resoluciones de pantalla diferentes. También tienen una extensión de Google Chrome que puedes aprovechar para este propósito.
Puede probar cualquier sitio en más de 2000 dispositivos, navegadores y sistemas operativos reales.
Al tener una cuenta paga, obtiene acceso ilimitado a la extensión de su navegador para realizar pruebas.
Pruebas entre navegadores
CrossBrowserTesting.com es una alternativa a BrowserStack que puede usar para probar navegadores y dispositivos.
Ofreciendo más de 1.500 navegadores y plataformas para pruebas, su oferta de productos no se queda corta en lo que puede hacer.
Las comparaciones de capturas de pantalla son posibles con su herramienta, además de poder simular cómo se comporta su sitio web en dispositivos del mundo real.
10. Siga las mejores prácticas de video móvil
¡Sí, hay mejores prácticas de SEO para videos móviles! Google todavía necesita tener algunas señales incrustadas en la página para que su motor de búsqueda entienda mejor el video que está en esa página.
Este artículo de Matt Southern, de Search Engine Journal, detalla las cinco prácticas recomendadas de SEO para videos de Google.
Cosas como el texto en la página, los enlaces de referencia, los datos estructurados y los archivos de video son importantes.
También hay otras cosas que debes tener en cuenta al crear videos.
Por ejemplo, desea asegurarse de que sus videos sean accesibles al público. Esto significa asegurarse de que su configuración de privacidad de YouTube esté configurada como pública y de que debe tener una página web accesible a Google con ese video.
Con datos estructurados, se recomienda usar el tipo de datos VideoObject en Schema.org.
Google recomienda usar el siguiendo las mejores prácticas de video móvil para una implementación impecable de video móvil:
- Uso de controles personalizados con un elemento raíz div, junto con un elemento multimedia de video y un elemento secundario div dedicado a los controles de video.
- Usando un botón de reproducción/pausa de video.
- Asegurando que el usuario pueda buscar hacia atrás y hacia adelante.
- Su implementación técnica integral de un video móvil es insuperable y lo guía a través del proceso paso a paso.
Como dice Google:
“Si el motivo principal de visita del usuario es un video, esta experiencia de usuario debe volverse inmersiva y atractiva”.
Aparte de lo obvio, otros Mejores prácticas de SEO para videos móviles incluir:
Hacer que sea lo más fácil posible para que Google encuentre tus videos. Esto significa:
- Usando un mapa del sitio de video: Si no envía un mapa del sitio de video, es posible que Google no pueda encontrar sus videos directamente. Un mapa del sitio de video hace que sea aún más fácil para usted enviar este mapa del sitio en Google Search Console, lo que hace que sea aún más fácil para Google rastrear y potencialmente indexar sus videos.
- No utilice acciones de usuario complejas o fragmentos de URL: Si se usan para cargar sus videos, es posible que Google no encuentre sus videos en absoluto, porque estas cosas en su página son demasiado complejas para que Google las entienda.
- Utilice una etiqueta HTML fácilmente identificable: Algunos de los válidos incluyen video, iframe, object o incrustar. Es más fácil para Google identificar videos cuando están incrustados en etiquetas comunes.
- Asegúrate de que tus videos se puedan indexar. Sucede: a veces alguien puede hacer un cambio en un archivo robots.txt que bloquea el rastreo de los archivos de video (sin que sea culpa suya… con suerte). Si sus videos estaban indexados y ahora de repente no lo están, vale la pena echar un vistazo a su archivo robots.txt para asegurarse de que no estén bloqueados.
- Use formatos de miniaturas compatibles con Google: También hay mejores prácticas de miniaturas que debe seguir en la documentación anterior para desarrolladores web de Google
El SEO de video móvil no siempre es tan fácil como uno piensa.
Si bien no es necesario marcar todas las casillas, hay cosas que podrían ser perjudiciales para el rastreo y la indexación de su video móvil si no lo están.
11. Usa datos estructurados de Schema.org
Los datos estructurados de Schema.org son importantes no solo para identificar las páginas de su sitio que tienen información estructurada especial que los motores de búsqueda necesitan ver, sino que cuando el índice móvil entre en pleno juego, espere ver una mayor dependencia de Schema.
Este es un método conciso y fácil de comprender la información que luego se puede traducir en fragmentos enriquecidos en los resultados de búsqueda móvil.
Pero, de cualquier manera, la opinión de este autor es que los datos estructurados de Schema se pueden usar incluso en implementaciones de escritorio porque pueden ayudarlo a aparecer en los resultados de fragmentos enriquecidos en función de su palabra clave específica. Esto puede ayudar a mejorar la visibilidad de su sitio cuando se implementa correctamente.
12. No bloquee scripts de soporte como JavaScript, CSS o cosas como imágenes
Esto debería ser de sentido común al desarrollar sitios para cualquier plataforma, ya sea de escritorio o móvil, pero algunas personas aún lo hacen.
Es importante asegurarse de que las secuencias de comandos de soporte para su diseño móvil no estén bloqueadas, ya que este bloqueo puede generar problemas como 404 suaves móviles en el futuro. También puede resultar en 404 de escritorio.
Pero, si bloquea estos archivos para que Google no los rastree, no podrán rastrearlos para ver si su sitio web funciona correctamente.
Cuando no pueden hacer esto, esto puede resultar en clasificaciones más bajas porque no pueden entender completamente su sitio web.
13. Compresión y optimización de imágenes
Para la web móvil, la optimización de imágenes es un componente crítico para hacerlo bien. Esto significa que debe asegurarse de que las imágenes estén correctamente optimizadas para todos los tamaños de imagen en todas las resoluciones posibles.
No es posible crear una imagen y garantizar que se pueda ver en todas partes. Bien tu puedes. Pero se verá distorsionado en las resoluciones para las que no fue creado.
En su lugar, se recomienda utilizar las mejores prácticas holísticas de SEO y asegurarse de crear imágenes de alta calidad en cada resolución pero que también se carguen rápidamente.
Es por eso que existen varias mejores prácticas de diseño receptivo que Google recomienda utilizando para optimizar sus imágenes para la plataforma móvil. Ellos recomiendan lo siguiente:
- Utilice tamaños de imagen relativos. Si usa tamaños de imagen relativos, termina evitando que desborden la etiqueta del contenedor que alberga la imagen.
- Utilice imágenes en línea. Es posible reducir la velocidad de la página asegurándose de que se utilicen imágenes en línea para reducir las solicitudes de archivos. Estos deben usarse en páginas que no pueden usarse en ningún otro lugar de su sitio.
- Para dispositivos de mayor DPI, use el atributo srcset para imágenes. Esto le ayuda a agregar más de un archivo de imagen para diferentes dispositivos.
- Si está haciendo SEO de comercio electrónico, es posible que desee que las imágenes de sus productos sean expandibles. Es posible que los clientes deseen ampliar la imagen que potencialmente están comprando en su dispositivo para verla mejor. Por lo tanto, proporcionar esta opción tiene sentido.
El truco para integrar imágenes en sus optimizaciones móviles es: lograr un equilibrio entre el tamaño de la imagen, cargarlas en un dispositivo móvil y garantizar la velocidad de página correcta sin disminuir la calidad de la imagen en ningún dispositivo importante que esté buscando su audiencia.
14. Optimice el tamaño general de la página
El tamaño de la página es una consideración importante para un sitio web optimizado para dispositivos móviles. Para ser realmente compatible con dispositivos móviles, el tamaño de la página debe cargarse rápido. Para hacer esto, es necesario optimizar el tamaño general del DOM.
Para hacer esto de manera efectiva, debe tener en cuenta no solo lo que discuto en el enlace anterior, sino también lo siguiente:
No utilice fuentes personalizadas innecesarias
El uso de fuentes personalizadas innecesarias puede complicar el proceso de carga de su página y aumentar la cantidad de scripts necesarios para procesar su página.
Esto se traduce en un mayor tiempo de carga de la página y puede aumentar sus puntajes Core Web Vitals fuera del rango deseable.
Siempre que sea posible, use fuentes del sistema en su lugar y puede reducir al mínimo el impacto que esto causa.
Optimice sus imágenes
También desea asegurarse de optimizar sus imágenes mientras conserva la calidad de la imagen. No es un resultado profesional si alguien llega a su sitio y la calidad de su imagen es granulosa debido a la sobrecompresión, no ha logrado el mejor resultado.
Idealmente, debe usar tamaños de archivo de imagen que estén en línea con lo que producirá la más alta calidad en los dispositivos móviles para los que su sitio está optimizado mientras se asegura de no caer por debajo de ese punto de calidad.
Este es un acto de equilibrio delicado y requiere alguien con experiencia en la optimización de imágenes para llegar a los resultados deseados.
Reduzca la cantidad de recursos que necesitan el DOM general y la ruta de representación crítica
Cuantos más recursos necesite su página para renderizar, mayor será la velocidad de descarga de su página. Nunca debería necesitar más de 10 complementos (máximo) y tres o cuatro archivos de script para procesar una página web.
Este autor ha visto situaciones en las que se están cargando 160 complementos y el tamaño del archivo de la página es de 10 MB. Absolutamente no es donde quieres estar.
Para ser más efectivo, la opinión de este autor es que las páginas en un sitio de WordPress nunca deben exceder los 150-250 KB, en promedio, y no deben incluir más de cinco a siete recursos como máximo (CSS, fuente externa si es necesario, un archivo publicitario, un archivo JavaScript y tres complementos). Si necesita más, es posible que no esté tan optimizado como cree.
Y no subestime los ahorros que le ahorrará el uso de fuentes del sistema en lugar de fuentes web externas.
Minifica tus páginas
El proceso de minificación en sus páginas implica comprimir sus archivos para ahorrar espacio y, como resultado, reducir los tiempos generales de carga de la página.
El uso de la minificación como proceso lo ayudará a deshacerse de los espacios en blanco no deseados en su código y comprimir ese código para que ocupe el mínimo espacio posible necesario.
Idealmente, el mejor proceso no implicará complementos. Le gustaría contratar a un desarrollador para minimizar manualmente sus páginas.
Si ya está sobrecargado de complementos, agregar otro para minimizar sus páginas es una mala idea. En estos casos, querrá utilizar un desarrollador de nivel profesional para garantizar el mejor resultado.
Si ya tiene complementos mínimos, usar un desarrollador profesional para esta tarea lo ayudará a lograr mejores tiempos de carga de la página y puntajes Core Web Vitals.
Si es absolutamente necesario usar un complemento, solo asegúrese de usarlo como una medida temporal hasta que pueda hacer que un desarrollador profesional ingrese y minimice manualmente su código.
Mobile-First está aquí; La necesidad de implementación ha alcanzado una masa crítica
Con la llegada del primer índice móvil de Google, la implementación de su sitio web multiplataforma, multidispositivo y compatible ahora ha alcanzado una prioridad enorme.
Esto significa que cuanto más se demore, más tendrá que tener solo una implementación móvil, pero tener la implementación móvil correcta le costará de muchas maneras.
No solo clasificaciones.
Si aún no has dado el salto al móvil, ¿por qué no?
Más recursos:
