Hagamos un recorrido. Haces una consulta rápida en Google y lees un montón de resultados. Entonces, localizas varios sitios web que tienen la respuesta que estás buscando.
Pero el primer sitio web, y el más prometedor, que seleccionas de la SERP no funciona correctamente en tu dispositivo móvil favorito.
- Fecha:
Contenido
Preguntas
Así que lo cierras y ves si el siguiente sitio tiene lo que necesitas - no es gran cosa, ¿verdad?
Bueno, ¿y si ese sitio de alto rango que acabas de cerrar hubiera sido el tuyo?
¿Se ha preguntado alguna vez cuántas veces le ha pasado lo mismo a su sitio web?
¿Cuántas personas han cerrado su sitio web y han contribuido a su tasa de rebote?
¿Cuántos usuarios han descartado su sitio porque no les funcionaba?
Bueno, ¿y si ese sitio de alto rango que acabas de cerrar hubiera sido el tuyo?
¿Se ha preguntado alguna vez cuántas veces le ha pasado lo mismo a su sitio web?
¿Cuántas personas han cerrado su sitio web y han contribuido a su tasa de rebote?
¿Cuántos usuarios han descartado su sitio porque no les funcionaba?
El contenido es el rey, pero como vemos aquí, no es el único factor decisivo. El dispositivo que muestra el contenido también determina la experiencia del usuario.
Pero como la mayoría de los sitios web se hacen en un PC, sus propietarios a menudo se olvidan de optimizarlos para otros dispositivos.
¿Comete usted el mismo error?
Compruebe si su sitio web es apto para móviles >>>
Hoy en día, casi todo el mundo tiene un smartphone y lo utiliza para buscar en Internet. No puede centrarse únicamente en los usuarios de ordenadores de sobremesa y esperar salir airoso. Haz que tu sitio sea apto para móviles si quieres asegurarte de que menos gente lo abandone.
El dispositivo móvil que muestra su sitio web también determina la experiencia del usuario.
Proporcione a su sitio web un diseño adaptable y compatible con dispositivos móviles
Su sitio web tiene un aspecto estupendo y funciona a las mil maravillas en el PC; eso es fantástico.
¿Has probado a abrirlo en un smartphone?
¿Tiene este aspecto?
Si es así, entonces tienes un gran problema. Ese sitio web es prácticamente inutilizable en móvil.
Lamentablemente, que un sitio web sea apto para PC no significa que también lo sea para móviles.
Y debido al índice mobile-first de Google, si su sitio no es apto para móviles, es posible que nunca vea la luz de la página 1 de las páginas de resultados de los motores de búsqueda (SERPs).
¿Qué hay que hacer?
El primer paso importante para que su sitio sea apto para móviles es trabajar en un diseño responsivo.
Cuando un sitio es adaptable, se muestra correctamente en pantallas de todos los tamaños, como esta:
Cómo dar a su sitio web un diseño optimizado para móviles
Hay dos formas de convertir su sitio web en una experiencia adaptada a dispositivos móviles. Cada solución tiene sus propias ventajas y desventajas.
✓ La forma más rápida: instalar un dedicado como WPtouch para dar a su sitio web un diseño responsivo en cuestión de minutos. Es el método más sencillo, pero no está exento de riesgos; los plugins son propensos a romperse y (en los casos más extremos) incluso a ser pirateados.
✓ La forma más fiable y segura: modificar el código de tu sitio web para incluir soluciones responsive.
Cómo codificar a mano un sitio web responsivo
Si quieres tomar el asunto en tus propias manos y transformar tu sitio web de escritorio en un sitio web responsivo y apto para móviles, necesitarás incorporar:
- Una ventana gráfica.
- Imágenes adaptables.
- Un diseño fluido.
- Consultas de medios.
Te enseñaremos todo el código que necesitas para que tu sitio web sea responsive. Pero primero, asegúrate antes de hacer cambios en tu código.
Cómo configurar una ventana gráfica en un sitio web
Las ventanas gráficas ayudan a cada navegador a saber cómo adaptar las dimensiones de su página web a su pantalla.
Si añades una ventana gráfica al código HTML de tu sitio web, tus páginas se adaptarán automáticamente a cualquier dispositivo móvil.
Añade esto:
Para definir la ventana gráfica de una página, añada esta línea de código HTML dentro de la etiqueta <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Cómo hacer que las imágenes sean adaptables
Cuando se trata de compatibilidad móvil, es importante que el visitante no tenga que desplazarse a izquierda y derecha para ver el contenido de su sitio web.
Esto se aplica también a todas las imágenes, especialmente a las infografías.
Las imágenes con capacidad de respuesta deben reducirse y ampliarse automáticamente para ajustarse perfectamente a la anchura de la pantalla de cada visitante.
Por lo tanto, debe utilizar la propiedad max-width.
Cómo añadir el ancho máximo para que sus imágenes sean responsivas
Abrir la hoja de estilos de su sitio (el archivo CSS).
Añade «max-width: 100%» para la etiqueta <img>, así:
img {
max-width: 100%;
}
Ahora, si tus imágenes son más anchas que la ventana gráfica que has añadido en el paso anterior, se encogerán automáticamente para ajustarse al espacio disponible.
Cómo instalar un diseño fluido
Cuando tienes un diseño responsivo en tu sitio web, los elementos de la página se adaptan por sí solos a cualquier pantalla. Por ejemplo, si tienes una tabla fluida, la tabla cambiará de tamaño con la pantalla. De esta forma, puedes ver todas las columnas sin tener que desplazarte a la izquierda o a la derecha, incluso en una pantalla de móvil pequeña.
Hay varios métodos de diseño fluido que puedes probar, dependiendo de tu sitio web:
- Flexbox.
- Multicol.
- Rejilla.
Utilízalos cuando sea apropiado.
Cuándo utilizar Flexbox
Utilice este método cuando tenga varios elementos de distinto tamaño y desee encajarlos en una fila. Añada la propiedad «display: flex» a su etiqueta HTML, como en este ejemplo:
.items {
display: flex;
}
Cuándo utilizar Multicol
Este método divide su contenido en columnas. Utiliza la propiedad de recuento de columnas, así:
.container {
column-count: 3;
}
En este ejemplo, se obtienen tres columnas.
Cuándo utilizar la cuadrícula
Como su nombre indica, este método crea una cuadrícula en la que encajar sus elementos. He aquí un ejemplo:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
La propiedad grid-template-columns establece el número de pistas de columnas (tres en este ejemplo) y sus tamaños (1 fr).
¿Todavía no está seguro de cuál utilizar? puede detectar e implementar automáticamente el mejor diseño fluido.
Cómo añadir media queries a su sitio web
Las consultas de medios son otra forma de adaptar tu contenido a cualquier tamaño de pantalla. Pero tienen otra ventaja mucho más notable: adaptan su sitio a características específicas propias de distintos dispositivos.
Por ejemplo, el cursor de un ratón de ordenador puede pasar por encima de los elementos de la página, y los teléfonos inteligentes tienen pantallas táctiles. Si tiene en cuenta estas características, podrá adaptar la experiencia del usuario a cualquier tipo de dispositivo.
Hay mucho que asimilar cuando se trata de consultas de medios, pero MDN Web Docs tiene instrucciones muy detalladas.
Una vez que hayas hecho todo, comprueba lo bien que funciona viendo tu sitio en muchos dispositivos diferentes.
Haga que su sitio web se adapte perfectamente a los dispositivos móviles
El primer paso cubría el marco técnico que hace que tu sitio web se adapte bien a los dispositivos móviles.
Buenas noticias: ésa fue la parte más difícil. Sólo quedan unos pocos pasos más.
Con un diseño adaptable, tu sitio es casi totalmente apto para móviles. ¿Qué más necesitas para terminar el trabajo?
Lo siguiente es
- Utilizar texto grande y fácil de leer. Los titulares y subtítulos deben ser especialmente llamativos.
- Los elementos interactivos (como botones y casillas de verificación) deben ser lo suficientemente grandes como para llamar la atención.
- Evite los párrafos largos. Siempre es mejor que sean cortos.
- Utilice generosamente el espacio negativo. Evitará que su sitio parezca estrecho.
- Deje espacio alrededor de los enlaces y otros elementos interactivos. Así, los usuarios no pulsarán accidentalmente lo que no quieren pulsar.
No bloquee su contenido con ventanas emergentes
Las ventanas emergentes dificultan que el visitante obtenga la información que busca y provocan altas tasas de rebote, es decir, que la gente abandone el sitio en cuanto entra en él.
Ahora bien, algunos tipos de ventanas emergentes son bastante importantes. La mayoría de los sitios web necesitan utilizar cookies, y el suyo probablemente no sea una excepción. Y el GDPR hizo obligatorio pedir permiso a los usuarios para utilizar sus datos, por lo que no puedes evitar usar un popup para eso.
Sin embargo, sus usuarios no visitan su sitio para ver ventanas emergentes. Cuando toda la página está bloqueada por una solicitud, es posible que los visitantes no estén tan dispuestos a ponerse en su lugar. Al contrario, está garantizado que les molestará, e incluso puede que se vayan sin navegar por su sitio en absoluto.
Qué hacer en su lugar
Los usuarios toleran mejor las ventanas emergentes cuando ocupan una pequeña parte de la pantalla. Y si son fáciles de cerrar y descartar, aún mejor.
Corrija los errores técnicos de su sitio web
Hasta el más mínimo contratiempo será fácil de detectar en una pantalla pequeña, incluidos los temidos errores 404.
Aunque una página 404 con un diseño divertido puede serle útil, un error sigue siendo un error; perturbará la experiencia del usuario. Es mejor eliminarlos por completo como factor
Cómo descubrir los errores técnicos de su sitio web
¿Qué otros errores pueden arruinarle el día a un usuario móvil? Por nombrar algunos:
- Enlaces rotos.
- Imágenes rotas.
- Redirecciones de página no deseadas.
- CSS y Javascript defectuosos.
Problemas del servidor (por ejemplo, tiempo de espera de la puerta de enlace).
Todos ellos harán huir al usuario si no haces algo.
Arregla todos los errores del sitio web que encuentres tan rápido como puedas.
No deje que códigos como «Status: 503» te confundan: aquí tienes algunos consejos de expertos para solucionarlos.
Después, acostúmbrate a escanear tu sitio con regularidad (una vez a la semana está bien) y soluciona los errores a tiempo.
Haga que su sitio se cargue rápidamente
Visitas tu sitio y tarda demasiado en cargarse. ¡Oh, no!
¿Se ha caído Internet? ¿No? Por desgracia, ahora su usuario puede decidir que su sitio web no funciona y no volver jamás.
Por eso, es importante hacer todo lo que esté en su mano para asegurarse de que su sitio se carga rápidamente en todo momento.
Cómo hacer que su sitio web cargue más rápido
Siga estos seis consejos para que su sitio web cargue más rápido:
- Optimice sus imágenes. Minimice el tamaño de sus archivos ajustando su altura y anchura, guárdelas en el formato adecuado y comprímalas.
- Active la compresión (si aún no lo está). La compresión GZIP es uno de los métodos más populares.
- Utiliza la caché del navegador. Busca el archivo .htaccess de tu dominio y establece los tiempos de expiración de los elementos de tu página.
- Utiliza la carga lenta. Al igual que la compresión, suele estar ya activa. Si no lo tienes, puedes insertar el atributo loading=»lazy» en las etiquetas HTML de los elementos que quieras que se carguen lentamente. También puedes utilizar un plugin como Smush.
- Optimiza el código de tus páginas. Si tienes suficientes conocimientos de HTML, Javascript y otros lenguajes que forman tu sitio, puedes intentar recortar el código. Ten cuidado de no romper nada.
- Fusiona elementos cuando sea necesario. Por ejemplo, si tienes dos imágenes una al lado de la otra, fusionarlas en una sola ayudará a que la página cargue más rápido.
Optimice su sitio web para la búsqueda local y por voz
Los smartphones son fáciles de llevar a todas partes, lo que los convierte en una herramienta perfecta para navegar por Internet en la calle.
¿El usuario necesita encontrar algo cerca? Su objetivo está a sólo una pregunta de distancia.
Y como es probable que la pregunta contenga la palabra «dónde», su sitio web tiene que estar preparado para ello. Eso se consigue mediante la optimización para la búsqueda local y, combinada con el SEO para móviles, resulta sorprendentemente eficaz para la búsqueda por voz al mismo tiempo.
Simplemente haga lo siguiente
- Utilice palabras clave y frases basadas en la ubicación en su contenido. Suelen contener palabras como dónde, más cerca, más próximo, cerca de mí, o en «nombre de su ubicación». Por ejemplo: lavadero de coches cerca de mí.
- Tenga una página de preguntas frecuentes en su sitio. Las respuestas deben ser concisas y directas.
- Ponga el nombre, la dirección y el número de teléfono de su empresa en la página de inicio de su sitio web. Mejor aún, póngalos en el pie de página.
- Cree un perfil de empresa en Google y rellénelo con toda la información que pueda. Esto es necesario si quiere aparecer en Google Maps.
- Recopile opiniones positivas de clientes: cuantas más, mejor.
Haga que el primer desplazamiento sea eficiente
Lo ideal sería poder cautivar al visitante nada más ver su sitio web. Pero en una pantalla pequeña no se puede ver todo lo que se desea. Entonces, ¿qué hacer?
Haz que la parte «sobre el pliegue» de tu sitio (lo que los usuarios ven en el primer desplazamiento) sea una auténtica maravilla.
¿Cuáles son los elementos imprescindibles que debes poner ahí?
- Título descriptivo y llamativo.
- Menú de navegación.
- Barra de búsqueda.
- Llamada a la acción.
Pero eso es sólo lo básico.
He aquí un par de ideas para expertos:
- Un elemento interactivo (como una foto panorámica, un modelo en 3D o un juego sencillo). Incluso un vídeo normal funciona.
- Una CTA flotante que permanezca siempre en la pantalla sin importar cuánto se desplace hacia abajo.
SEO para móviles: Cómo optimizar su sitio para cualquier dispositivo
Haga que sus resultados de búsqueda sean atractivos
Como dice el refrán, el mejor lugar para esconder secretos es la página 2 de Google.
Sin embargo, esto sólo es cierto para la versión de escritorio.
Google para móviles viene con desplazamiento infinito, que presenta los 40 primeros resultados en lugar de 10 antes de que encuentres el botón «Ver más».
Sin embargo, con 10 primeros resultados o sin ellos, tus resultados de búsqueda nunca recibirán clics si no destacan.
Y, como con cualquier otra cosa, hay que destacar bien. ¿Cómo aplica este principio a sus resultados de búsqueda?
Cómo hacer que sus resultados de búsqueda destaquen
Hay tres formas estupendas de hacer que los resultados de su búsqueda sean más interesantes para su futuro visitante:
- Utilice las mejores palabras clave. No sólo en términos de volumen de búsquedas: utilice las palabras clave que capten mejor que otras la intención de búsqueda de los usuarios. Para averiguar cuáles son esas palabras clave, tiene que ponerse en el lugar de los usuarios. O simplemente pregunte a los usuarios que conoce sobre sus preferencias de búsqueda.
- Utilice títulos y descripciones llamativos. Las palabras clave son un ingrediente principal; el otro ingrediente son las palabras poderosas que despiertan las emociones de los usuarios. ¿Sabe qué emociones son apropiadas para su contenido?
- Añada datos estructurados. Marque los elementos de su página para crear fragmentos enriquecidos en los que se pueda hacer clic.
SEO para móviles: Cómo optimizar su sitio para cualquier dispositivo
En resumen
Hace años, Google vio el potencial de los dispositivos móviles, y resulta que tenía toda la razón.
El gigante de las búsquedas invirtió mucho en la facilidad de uso de los móviles, y no hay duda: Internet es mucho mejor gracias a ello. Los contenidos en línea son ahora mucho más agradables a la vista y fáciles de usar.
Pero, ¿está su sitio web a la altura? ¿Obtienen los usuarios la misma experiencia en todos sus dispositivos?
Si tiene la más mínima duda, es hora de utilizar todas las herramientas a su disposición para asegurarse de que su sitio cumple los requisitos.
Empiece hoy mismo a mejorar su posicionamiento en las búsquedas y la participación de los usuarios con un sitio web adaptable.
No olvide elegir el mejor alojamiento de la plataforma de alojamiento OpenZone. Obtenga soporte 24/7 de nuestro equipo. Nuestra infraestructura potenciada se centra en el autoescalado, el rendimiento y la seguridad.
¡Déjenos mostrarle la diferencia! ¡Echa un vistazo a nuestros planes!
La Fortuna, San Carlos, Alajuela, Costa Rica, 100m al norte de Iglesia Evangélica, Barrio Jauri.
Acerca de OpenZone
ICANN
© 2010 - 2024. Todos los derechos reservados. | Diseñado por OpenZone