¿Por que es importante usa una etiqueta Viewport?
La facilidad de uso para móviles de un sitio web es un factor importante para la clasificación de los resultados de búsqueda en un dispositivo móvil. Y, dado que las búsquedas en el móvil superan ahora a las del ordenador, la facilidad de uso en el móvil es un factor que no se puede ignorar. Uno de los principales factores para determinar la compatibilidad con los dispositivos móviles es la calidad de la visualización de una página en los diferentes tamaños de pantalla de los distintos dispositivos móviles.
Una de las mejores formas de conseguirlo es a través del diseño responsivo con viewports móviles, que también recomienda Google.
¿Qué es una ventana gráfica?
Un Viewport es una ventana en la que se puede ver una página web. Ten en cuenta que las dimensiones de la página pueden ser mayores que la ventana gráfica, por lo que no es el área en la que se muestra la página. Esto ocurre cuando la página debe ser desplazada de izquierda a derecha para ser vista. Este desplazamiento horizontal puede producirse si la página no admite una ventana gráfica, o si la ventana gráfica aún no está configurada.
Las ventanas se añaden y configuran en una página mediante la etiqueta meta Viewport. Esta etiqueta, como todas las metaetiquetas, es un trozo de HTML que se coloca dentro del de la página.
.
La primera parte del atributo de contenido, “width=device-width”, indica al navegador que debe renderizar la página según el ancho de la pantalla del dispositivo. La segunda parte, “initial-scale=1”, indica al navegador que haga la página lo más ancha posible cuando se muestre en horizontal (por ejemplo, cuando un teléfono móvil se pone de lado).
Para ver la ventana de visualización de la página en acción, cambie el tamaño de su navegador y vea cómo encaja la página.
Configurar el Viewport o comportamiento de la ventana de visualización del móvil
Una vez que hayas establecido la ventana gráfica para tu página, ajuste el tamaño del contenido de la página para que se ajuste a la ventana gráfica. Sigue estas directrices para asegurarte de que tus páginas se muestren adecuadamente en los dispositivos móviles.
- Evita los elementos de anchura fija, como las imágenes grandes. Los elementos deben ajustarse a la anchura de la ventana gráfica. De lo contrario, las imágenes pueden ser más grandes que la ventana gráfica y requerir un desplazamiento horizontal.
- No confíes en un ancho específico para mostrar tu página. La anchura de la pantalla varía de un dispositivo a otro. Por lo tanto, asegúrate de que tus páginas se muestren correctamente independientemente de su anchura.
- Utiliza valores de anchura relativa en el CSS de tu página. El uso de valores absolutos puede hacer que los elementos se carguen más anchos que la ventana de visualización. Lo mismo ocurre con los valores de posicionamiento. Los valores absolutos más grandes pueden hacer que los recursos se carguen fuera de la ventana gráfica.
Cómo utilizar la ventana gráfica para el SEO móvil
La implementación de una ventana gráfica no significa necesariamente que tu página se clasifique mejor en los resultados de búsqueda de Google. Sin embargo, el diseño responsive puede hacer que tus páginas sean más amigables para los móviles. El diseño responsivo hace esto de una manera relativamente rápida, fácil y sin complicaciones en comparación con otras opciones.
Subdominios móviles. Esta opción requiere una inversión considerable de tiempo y recursos de desarrollo. Al igual que con el diseño dinámico, la opción de subdominio móvil requiere crear un sitio completamente nuevo y alojarlo en un subdominio (normalmente m.ejemplo.com o mobile.ejemplo.com). Google conoce bien la relación entre dominios y subdominios, pero nunca puede estar completamente seguro. Por lo tanto, tendrás que añadir una etiqueta canónica a tu sitio móvil que apunte a la versión de escritorio.
Por último, dependiendo del agente de usuario del visitante, tendrás que redirigirlo a las versiones móvil y de escritorio de su sitio, respectivamente. Para empeorar las cosas, los subdominios no pueden compartir de forma fiable el link juice con otros sitios, por lo que los sitios móviles y de escritorio estarán aislados unos de otros. Esto podría ser un problema en el futuro, cuando Google pase a un índice “mobile-first”.
En teoría, puede utilizar cualquiera de los métodos anteriores para diseñar una versión de su sitio web adaptada a los dispositivos móviles. Sin embargo, la forma más fácil y efectiva es crear una ventana gráfica para móviles y utilizar un diseño responsivo. Además, este es el método recomendado por Google, así que ya puedes ver que es bueno para tu SEO.
