¿Está tu etiqueta viewport configurada para dispositivos móviles?

Las metaetiquetas son la base de todo código HTML para crear un buen sitio web. Son usadas desde hace años y son una pieza fundamental de revisión para los motores de búsqueda. Por lo tanto, se han convertido también en un elemento vital a considerar cuando se realiza una optimización web.

Si estás leyendo esto es porque tal vez estás interesado en mejorar tu sitio web y con justa razón. Algunas estadísticas aportadas por Cliento afirman la relevancia que tiene una página web optimizada para los usuarios:

• 94% de las primeras impresiones están relacionadas con el diseño de tu sitio web.
• 75% de la credibilidad de un sitio web proviene de su diseño.
• 40% de los usuarios abandonarían un sitio web si no es compatible con su dispositivo móvil.
• 48% de los usuarios se frustran cuando un sitio web no responde a las versiones móviles.

Esto deja más que claro la importancia que tiene implementar un diseño web responsive para tu sitio web, que responda a las necesidades de los usuarios y te ayude a generar mayor engagement.

Es aquí donde las metaetiquetas son más importantes que nunca. Cada vez más los motores de búsqueda están llenos de sitios en competencia con tu negocio y todos ellos están creando más de una estrategia para posicionarse en los mejores resultados. Sin embargo, una de las claves para mejorar tu posición y que muchos negocios no toman en cuenta son las etiquetas viewport.

Si nunca habías escuchado este concepto, descuida. En este artículo te brindaremos toda la información que necesitas para conocer su importancia y saber si actualmente está configurada para dispositivos móviles.

Si esta etiqueta no está configurada en tu sitio web, probablemente tus visitantes no siempre tendrán una experiencia positiva de navegación en sus dispositivos móviles. Seguro más de una vez te has topado con sitios que no cuentan con un diseño web responsive y al interactuar con ellos es imposible no sentir frustración o ganas de salir de allí inmediatamente. 

Si el sitio de tu empresa presenta este problema, esa es justo la sensación que estás provocando en tus visitantes. Y si tu sitio no ha obtenido el nivel de visitas e interacciones que desearías, esta puede ser la razón.

Cómo se ve un sitio web con y sin viewport

Cuando no creas una metaetiqueta viewport para los dispositivos móviles, esos dispositivos presentarán un sitio web con el ancho de una pantalla de computadora de escritorio y lo escalará para que se ajuste a la pantalla, por lo que el texto y los gráficos serán muy pequeños. A esto se le llama ancho de reserva y varía de los 800 a los 1024 pixeles.

Cuando creas una metaetiqueta viewport para los dispositivos móviles, el ancho del sitio web se ajusta de manera automática al dispositivo móvil del usuario, dando una mejor experiencia.

En los siguientes ejemplos puedes ver claramente la diferencia: 

La primera imagen no cuenta con una etiqueta viewport, por lo tanto el diseño asume que tiene el ancho de una pantalla de computadora de escritorio. Mientras que la segunda imagen tiene establecido el viewport, así que el buscador del móvil sabe de qué forma hacer coincidir el ancho del dispositivo y ajustar la página para que el contenido se pueda leer con facilidad.

De forma interna un sitio optimizado para dispositivos móviles contiene un código como el siguiente:

Los dispositivos móviles que son de pantalla estrecha procesan las páginas en una viewport, la cual suele ser más ancha que la pantalla; luego reducen el resultado procesado para que se pueda ver todo a la vez. De esta manera, los usuarios pueden desplazarse y hacer zoom para ver diferentes áreas del sitio.

El viewport, como puedes ver, es una forma eficiente de hacer que los sitios no optimizados para dispositivos móviles se vean mejor en pantallas estrechas. Pero ¿cómo saber si está configurado en tu sitio web? Compruébalo en la siguiente sección.

1. Realiza una prueba de optimización para móviles

Para saber si tu sitio web cuenta con la etiqueta viewport, entra al sitio de Prueba de optimización para móviles de Google. Pega tu URL o código en la casilla correspondiente y haz clic en «Probar URL». 

Una vez que termine de hacer el análisis, podrás saber si tu sitio está optimizado para dispositivos móviles. En ese caso, te aparecerá un mensaje así: 

Esto significa que tu meta viewport está configurada. En caso contrario, el mensaje será el siguiente: 

El mensaje que aparece en la parte inferior «La ventana gráfica no se ha definido al ancho del dispositivo» se refiere precisamente al viewport, el cual no está configurado. Además de esto, también puede mencionarte más problemas dentro de tu página, como tener un texto demasiado pequeño o si los elementos en los que se pueden dar clic están demasiado cerca unos de otros. 

2. Configura la etiqueta viewport en tu sitio web 

Lograr que tu meta viewport esté disponible es más fácil de lo que parece. Tan solo añade el siguiente código HTML en el header de tu sitio web.

En muchos casos, añadir la metaetiqueta viewport en el header hará que esta función se aplique en todo el sitio, lo cual hará que tu sitio web sea compatible con dispositivos móviles. 

Ten cuidado, porque es posible que tengas que añadir la etiqueta a cada una de tus páginas de manera individual; en especial si usas un software diferente para tu sitio web y tus páginas de destino.

Si no utilizas una solución integrada como el CMS de HubSpot, tendrás que hacer una revisión manual para asegurarte de que tus páginas de destino, páginas del sitio y el blog tengan la metaetiqueta viewport para que sean compatibles con dispositivos móviles.

Nota: añadir esta etiqueta no hará que tu sitio web responda a los dispositivos móviles (esto es un proceso totalmente diferente), pero hará que los usuarios de dispositivos móviles no tengan que realizar demasiados zooms para leer e interactuar con el contenido de tu web y su navegación será mucho más satisfactoria.

3. Establece un ancho específico al viewport (de ser necesario) 

El texto subrayado en rojo de la imagen a continuación se refiere al ancho establecido. Si este elemento se queda sin ningún cambio, entonces no estarás definiendo un ancho específico para presentar tu contenido. Esto significa que tu sitio web se ajustará de manera automática al tamaño del dispositivo que el usuario utilice. La mayoría de las personas eligen hacer esto.

En cambio, si deseas presentar un contenido específico en un dispositivo en particular, entonces deberás reemplazar ese texto rojo con el ancho de los pixeles del dispositivo deseado.

Al fijar un ancho en la etiqueta (que no es necesario), cualquier dispositivo presentará el sitio web con un ancho específico. Por lo general, esto no se recomienda a menos que hayas diseñado una página o sitio para el tamaño específico de una pantalla. Además, no puedes establecer más de una etiqueta viewport, así que tendrás que elegir el tamaño de un dispositivo y permanecer con él.

Si quieres establecer un ancho en particular debes saber que existen diferentes unidades de medida de viewport. Por ejemplo, el ancho de un iPhone puede variar, pero si deseas que tu sitio se vea de una forma específica en el iPhone 11 cuando una persona tiene su dispositivo en posición horizontal (este modelo tiene un ancho de 570 px), tu código debe lucir de esta manera: 

Todos los iPads tienen un ancho horizontal de 1024 px, así que tendrías que poner esta etiqueta en tu sitio:

Ten en cuenta que al definir que el ancho de tu diseño equivalga al ancho del dispositivo tendrás problemas cuando los usuarios roten sus dispositivos móviles. Otra solución es que podrías utilizar JavaScript para elegir de manera condicional qué atributos de metaetiqueta deberías seleccionar. Pero todo indica que la solución más sencilla sigue siendo el device-width.

La «escala inicial» de la etiqueta de HTML puede siempre permanecer en uno. Esto indica que, cuando alguien abra tu contenido, el diseño se presente de manera apropiada en una escala de 1:1. Esto ayuda a que tu sitio web aproveche el ancho total de la vista horizontal sin importar la orientación del dispositivo móvil (vertical v.s. horizontal).

Eso es todo. Así de fácil puedes lograr que tu etiqueta viewport esté configurada en tu sitio web. De esta forma, los visitantes podrán tener una navegación más rápida, fácil y cómoda.