Ha pasado un tiempo desde que Google comenzó a implementar su índice móvil primero.
Cuando esto se anunció por primera vez, los profesionales de SEO estaban corriendo por todas partes para asegurarse de que su sitio cumpliera con las vitalidades básicas de Google y las pautas de desarrollo móvil de las mejores prácticas.
La optimización para la web móvil es un subcampo completamente integral dentro de SEO, que requiere conocimiento 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 miden.
En muchos casos, a veces la mayoría de los sitios se quedan cortos para cumplir con su objetivo de cumplir.
Claramente, este es un error debido al hecho de que el diseño móvil es una parte tan frecuente de nuestra sociedad digital:
- El 96% de los estadounidenses de 18 a 29 años poseen un teléfono inteligente.
- A partir de 2020, había más de 3.600 millones de usuarios que usaban un dispositivo de teléfono inteligente en todo el mundo. Habrá 4.300 millones para 2023.
- En 2020, los usuarios móviles pasaron el 90% de su tiempo en aplicaciones en lugar de los navegadores móviles.
- Google representa el 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 CTR orgánico del 26.9% (tasa de clics).
Para aprovechar la mejor presencia en línea posible, debe optimizar para muchos tipos diferentes de dispositivos y resoluciones de pantalla. No solo para escritorios.
Y ahora, Google está implementando su actualización de experiencia en la página de escritorio. Pero esa actualización está más allá del alcance de este artículo, aunque se reproduce en la experiencia de la página en general.
Para lograr la mejor implementación móvil absoluta, es importante garantizar que cree un sitio móvil que cumpla con estas mejores prácticas, y que también crea oportunidades para aumentar sus números centrales de vital web.
Al utilizar 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 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 escritorio y móvil
La idea detrás de esta mejor práctica es evitar el contenido duplicado y las 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 usar para asegurarse de que esto suceda es un diseño receptivo.
El diseño receptivo, para aquellos que no saben, implica la creación de una hoja de estilo que utiliza “consultas de medios” para hacer transiciones automáticas entre una amplia variedad de plataformas y dispositivos.
Si desea exprimir toda la velocidad posible y hacer que su diseño sea delgado y malvado, considere buscar sprites CSS para reducir las solicitudes del lado del servidor.
2. Por encima del pliegue no se ha ido por completo
Es importante recordar que en un entorno móvil, donde las cosas se desplazan sin parar, por encima del pliegue no se ha ido por completo.
Todavía es preferible tener al menos parte del contenido de texto sobre el 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 ofrece no se han ido por completo, por lo que aún tiene que optimizar esto en muchos dispositivos móviles diferentes.
3. Use un enfoque de desarrollo ‘de arriba hacia abajo’
Un enfoque de desarrollo “de arriba hacia abajo” significa que considera todas las consecuencias potenciales de cada decisión tomada en un diseño de principio a fin.
Usted se desarrolla para móvil primero, en lugar de escritorio primero, y luego se aplica un diseño móvil después. Este enfoque de desarrollo es ideal porque no introduce problemas en el diseño final.
Aquí hay un ejemplo: crea un sitio web de escritorio. Alrededor de las tres cuartas partes del camino a través del proceso, decide que desea crear un sitio móvil además de él.
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í. Luego encuentras un error allí. Esto se debe a que el enfoque ascendente no funciona y causa un escalofrío.
Este es el fenómeno en el que surgen problemas invisibles en el último minuto, causando errores imprevistos y aumentos en las horas que no se proporcionaron originalmente cuando el proyecto se alcanzó originalmente.
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 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 se fusionan el móvil y el escritorio, también lo son 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 esté comprando un producto o realizando investigaciones sobre los servicios que brinda, la combinación de objetivos del usuario y adquisiciones de clientes del negocio continuará.
Tanto es así, que centrarse específicamente en estos ideales y valores será menos necesario.
No es menos importante, sí, solo menos necesaria, ya que esta combinación de dispositivos móviles y de escritorio continúa.
5. Utilice técnicas de diseño receptivas
Los días de sitios web de M-Dot separados (m.example.com) han terminado.
No hay una razón posible canjeable para usar dicha implementación en la era móvil primero.
La estructura puede ser muy desordenada, con múltiples URL creando problemas de contenido duplicados si no están optimizados correctamente.
Existen muchas técnicas disponibles para garantizar que se complete una transición efectiva, pero de lo contrario, las implementaciones de M-DOT han seguido el camino del dodo con el advenimiento de las nuevas tecnologías.
Hoy, la implementación ideal implica un diseño receptivo. Estos diseños usan lo que se llaman consultas de medios para definir las resoluciones de visualización que el diseño admitirá.
Cada resolución separada es lo que se llama 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 duplicados que usted en una implementación 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 el fondo de repetición de 2 píxeles de ancho por 1200 píxeles de altura?
Si no lo hace, y puede codificarlo en su lugar, codificarlo en su lugar.
Si bien algo tan pequeño no hará una gran mella en la velocidad del sitio, las optimizaciones pueden sumar 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 en su lugar?”
Si la imagen realmente no es necesaria, codificar el objeto podría ayudar a aumentar la velocidad del sitio exponencialmente, especialmente los diseños en el sitio que utilizan una sobreabundancia de gráficos.
7. Personalice WordPress para dispositivos móviles
Hay muchos complementos disponibles para WordPress.
Tanto es así, que algunos incluso proporcionan 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 minificar HTML y CSS.
8. No use intersticiales intrusivos para vender su producto
Sí. Lo sabemos. Su producto es lo mejor y más increíble para adornar este planeta. Es por eso que probablemente estamos visitando su sitio web e investigando sobre él antes de comprar.
Pero no necesitamos tener un anuncio intrusivo que bloquee nuestra actividad en todo su sitio para molestarnos en la venta.
Siempre que sea posible, mantenga los intersticiales intrusivos al mínimo y mantenga los anuncios hacia la parte inferior o fuera de un lado con una opción para hacer clic en el anuncio y eliminarlo al menos.
Es importante tener en cuenta que Google penaliza los intersticiales intrusivos.
Vale la pena leer sus guías de desarrolladores junto con sus pautas de webmaster sobre este tema, así como su publicación de blog sobre este tema.
9. Verifique su sitio en múltiples sistemas de operación y visualización
Cualquier SEO debe saber cómo identificar las debilidades en la implementación existente de un sitio web, incluyendo dónde y cómo encontrar problemas en varias pantallas y dispositivos.
Desea verificar su sitio en más de un sistema operativo, así como a más de un dispositivo de visualización. Hacer esto asegura que su sitio sea compatible con una amplia gama de pantallas y plataformas como sea posible.
Pero, ¿qué pasa si no puede pagar mil dispositivos para verificarlos?
Todo esto se reduce a algunas aplicaciones. ¡Sí! Es posible verificar este tipo de problemas con más de una aplicación.
Extensión del desarrollador web de Google Chrome
Si tiene un presupuesto, el uso de la extensión del desarrollador web de Google Chrome Extension puede ayudarlo a examinar cómo se ve su sitio en muchos tamaños y resoluciones de pantalla diferentes.
También ofrece la capacidad de ver cómo se ve su sitio a través de diferentes orientaciones del dispositivo, cómo interactúan las entradas táctiles a través de la simulación y mucho más.
También es posible utilizar su herramienta de depuración para examinar el código de un sitio para obtener problemas.
Browserstack
Browserstack.com es una gran herramienta para probar en muchos navegadores, sistemas operativos y resoluciones de visualización. También tienen una extensión de Google Chrome que puede aprovechar para este propósito.
Puede probar cualquier sitio en más de 2,000 dispositivos reales, navegadores y sistemas operativos.
Al tener una cuenta pagada, obtiene acceso ilimitado a la extensión de su navegador para las pruebas.
Prueba de navegador cruzado
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 las pruebas, su oferta de productos no tiene la falta de lo que puede hacer.
Las comparaciones de captura de pantalla son posibles con su herramienta, junto con 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 video de video móvil! Google todavía necesita tener algunas señales integradas en la página para que su motor de búsqueda comprenda mejor el video que está en esa página.
Este artículo del propio Matt Southern de Search Engine Detalla las cinco mejores prácticas de SEO recomendadas de SEO.
Las 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 quieres tener en cuenta mientras creas videos
Por ejemplo, debe asegurarse de que sus videos sean accesibles para el público. Esto significa asegurarse de que su configuración de privacidad de YouTube esté configurada en público, y que debe tener una página web accesible para Google con ese video.
Con datos estructurados, se recomienda usar el tipo de datos de VideoBject en schema.org.
Google recomienda usar las siguientes mejores prácticas de video móvil para una implementación de video móvil impecable:
- Uso de controles personalizados con un elemento de raíz Div, junto con un elemento de medios de video y un elemento Div Child que se dedica a los controles de video.
- Usando un botón de video de reproducción/pausa.
- Asegurar 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 del usuario para visitar es para video, esta experiencia del usuario debe volverse inmersiva y volver a participar”.
Además de lo obvio, otras mejores prácticas de SEO de video móvil incluyen:
Haciendo que Google sea lo más fácil de encontrar sus 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 le facilita el envío de este mapa del sitio en la consola de búsqueda de Google, lo que hace que sea aún más fácil para Google rastrear y potencialmente indexar sus videos.
- No use acciones de usuario complejas o fragmentos de URL: Si estos 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 lo entienda.
- Use una etiqueta HTML fácil de identificar: Algunos de los válidos incluyen video, iframe, objeto o incrustación. Es más fácil para Google identificar videos cuando están integrados en etiquetas comunes.
- Asegúrese de que sus videos puedan ser indexados. Sucede: a veces alguien puede hacer un cambio en un archivo robots.txt que impide que los archivos de video se arrastren (sin culpa por su propia … con suerte). Si sus videos estaban siendo indexados, y ahora de repente no lo son, vale la pena echarle un vistazo a su archivo robots.txt para asegurarse de que no estén siendo bloqueados.
- Use formatos de miniatura soportados por Google: También hay mejores prácticas en miniatura que debe seguir en la documentación anterior del desarrollador web de Google
El SEO de video móvil no siempre es tan fácil como uno puede pensar.
Si bien no se necesitan todas las casillas, hay cosas que podrían ser perjudiciales para su video móvil rastreando e indexando si no lo son.
11. Use datos estructurados Schema.org
Los datos estructurados de Schema.org son importantes no solo para identificar páginas en su sitio que tengan información especial y estructurada que los motores de búsqueda deben ver, sino que cuando el índice móvil entra en juego, espere ver una mayor dependencia del esquema.
Este es un método conciso y fácil de comprender la información que luego puede traducirse en fragmentos ricos en los resultados de búsqueda móvil.
Pero, de cualquier manera, es la opinión de este autor que los datos estructurados de esquema se utilizarán incluso en las implementaciones de escritorio porque puede ayudarlo a aparecer en resultados de fragmentos ricos 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 los scripts de apoyo como JavaScript, CSS o cosas como imágenes
Esto debería tener sentido común al desarrollar sitios para cualquier plataforma, ya sea escritorio o móvil, pero algunas personas aún lo hacen.
Es importante asegurarse de que el soporte de scripts para su diseño móvil no esté bloqueado, porque este bloqueo puede dar lugar a problemas como móviles suaves 404 en el futuro. También puede dar como resultado un escritorio 404.
Pero, si bloquea estos archivos para que Google se arrastre por Google, no pueden rastrear estos archivos para ver que su sitio web funcione correctamente.
Cuando no pueden hacer esto, esto puede dar lugar a una clasificación más baja porque no pueden comprender 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 acertar. Esto significa que debe asegurarse de que las imágenes estén optimizadas adecuadamente para todos los tamaños de imagen en todas las resoluciones posibles.
No es posible crear una imagen y asegurarse de que sea visible en todas partes. Bueno, puedes. Pero se verá distorsionado con las resoluciones para las que no estaba hecho.
En su lugar, usar las mejores prácticas de SEO holística y asegurarse de crear imágenes que son de alta calidad en cada resolución pero que también carguen rápidamente es algo que se recomienda.
Es por eso que hay varias prácticas de diseño receptivas que Google recomienda usar para optimizar sus imágenes para la plataforma móvil. Recomiendan lo siguiente:
- Use tamaños de imagen relativos. Si usa tamaños de imagen relativos, termina evitando que desborden la etiqueta de contenedor que alberga la imagen.
- Use imágenes en línea. Es posible reducir la velocidad de la página asegurando que se usen imágenes en línea para reducir las solicitudes de archivos. Estos deben usarse en páginas que no se pueden usar en otras partes de su sitio.
- Para dispositivos DPI más altos, 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 sus imágenes de productos sean expandibles. Es posible que los clientes deseen ampliar la imagen que potencialmente están comprando en su dispositivo para verlo mejor. Entonces, 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 reducir la calidad de la imagen en cualquier dispositivo importante que su audiencia esté buscando.
14. Optimizar el tamaño general de la página
El tamaño de la página es una consideración importante para un sitio web amigable para dispositivos móviles. Para ser verdaderamente amigable con el teléfono móvil, el tamaño de la página debe cargarse rápidamente. Para hacer esto, es necesario optimizar el tamaño general de 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 use fuentes personalizadas innecesarias
El uso de fuentes personalizadas innecesarias puede complicar el proceso de carga de su página y aumentar el número de scripts que se requieren para procesar su página.
Esto se traduce en un aumento en el tiempo de carga de la página y puede aumentar sus puntajes de vital web centrales desde el rango deseable.
Siempre que sea posible, use las fuentes del sistema y puede reducir el impacto que esto causa al mínimo.
Optimizar sus imágenes
También debe asegurarse de optimizar sus imágenes mientras preserva la calidad de la imagen. No es un resultado profesional si alguien llega a su sitio y la calidad de su imagen es granulada debido a la compresión excesiva, no ha logrado el mejor resultado.
Idealmente, debe usar tamaños de archivos 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 sumergirse por debajo de ese punto de calidad.
Este es un acto de equilibrio delicado y requiere a alguien con experiencia en la optimización de imágenes para llegar a los resultados deseados.
Reducir la cantidad de recursos que la ruta general de representación DOM y la crítica
Cuantos más recursos que necesite su página para renderizar, mayor será la velocidad de descarga de su página. Nunca debe necesitar más de 10 complementos (máximo) y tres a cuatro archivos de script para procesar una página web.
Este autor ha visto situaciones en las que se cargan 160 complementos y el tamaño del archivo de la página es de 10 MB. Esto no es absolutamente donde quieres estar.
Para ser la más efectiva, 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 máximo (CSS, fuente externa si es necesario, un archivo AD, un archivo JavaScript y tres complementos). Si necesita más, es posible que no esté tan optimizado como piense.
Y no subestimes los ahorros que utilizan fuentes del sistema a través de fuentes web externas te ahorrarán.
Minificar sus páginas
El proceso de minificación en sus páginas implica comprimir sus archivos para ahorrar espacio y reducir sus tiempos generales de carga de la página como resultado.
El uso de minificación como proceso lo ayudará a deshacerse del espacio en blanco no deseado en su código y comprimir ese código para que ocupe el espacio menos posible necesario.
Idealmente, el mejor proceso no implicará complementos. Desea contratar a un desarrollador para minificar manualmente sus páginas.
Si ya está sobrecargado con complementos, agregar otro para minificar sus páginas es una mala idea. En estos casos, desea utilizar un desarrollador de nivel profesional para garantizar el mejor resultado.
Si ya tiene complementos mínimos, el uso de un desarrollador profesional para esta tarea lo ayudará a lograr tiempos de carga de páginas y puntajes centrales de Web Web Vitals.
Si debe usar un complemento, solo asegúrese de usarlo como medida temporal hasta que pueda hacer que un desarrollador profesional entre y minifique manualmente su código.
Móvil primero está aquí; La necesidad de implementación ha alcanzado la masa crítica
Con la llegada del índice móvil primero en Google, la implementación de su sitio web multiplataforma, de servicio cruzado y compatible con una prioridad masiva.
Esto significa que cuanto más tiempo retrases, más no tener solo una implementación móvil, pero no Tener la implementación móvil correcta le costará de muchas maneras.
No solo las clasificaciones.
Si aún no has dado el salto a Mobile, ¿por qué no?
Más recursos:
Imagen destacada: Dragana Gordic/Shutterstock
(Tagstotranslate) SEO (T) SEO móvil
