Cómo usar ventanas gráficas para SEO

Cómo usar ventanas gráficas para SEO

Como hemos cubierto anteriormente, la optimización móvil de un sitio web es un factor importante al clasificar los resultados de una búsqueda realizada en Un dispositivo móvil. Y con las búsquedas móviles superando las búsquedas de escritorio, esto es un factor que no se puede ignorar. Un factor importante para determinar la optimización móvil es qué tan bien se representa y muestra una página en diferentes tamaños de pantalla para varios dispositivos móviles.

Una de las mejores maneras de hacer esto, y la forma preferida por Google, es a través del diseño receptivo utilizando las ventanas gráficas.

¿Qué son las ventanas gráficas?

La ventana gráfica es la ventana en la que se puede ver una página web. Ten en cuenta que no es el área en la que se muestra una página, ya que las dimensiones de una página pueden ser más grandes que la ventana gráfica. Esto es lo que sucede cuando necesitas desplazarte de izquierda a derecha para ver una página. Este desplazamiento lateral se produce cuando a una página le falta la ventana gráfica o tiene una ventana gráfica no configurada.

Add Short Image Description here

La ventana gráfica se agrega y configura en una página utilizando la metaetiqueta de ventana gráfica. Esta etiqueta, al igual que otras metaetiquetas, es una pieza de HTML que va en la página <head>:

<meta name="viewport" content="width=device-width, initial-scale=1”>

La primera parte del atributo de contenido, width=device-width, es lo que le dice a los navegadores que muestren la página de forma de que se ajuste al ancho de la pantalla del dispositivo. La segunda parte, initial-scale=1, instruye a los navegadores para que la página sea lo más ancha posible cuando una página se muestra en horizontal (como cuando giras el teléfono de lado).

Para ver la ventana gráfica de una página en acción, simplemente cambia el tamaño de tu navegador para ver cómo se ajusta la página:

Configured mobile viewport in action

Diseñar de forma realmente responsive

Una vez que hayas configurado la ventana gráfica de la página, dimensiona el contenido de la página según la ventana gráfica. Para asegurarte de que tu página se muestra de manera óptima para dispositivos móviles, sigue estas pautas

  • Evita elementos de ancho fijo como imágenes grandes. Ajusta los elementos de forma de que se ajusten al ancho de la ventana gráfica. De lo contrario, la imagen podría terminar siendo más grande que la ventana gráfica, lo que requeriría desplazamiento lateral.

  • No confíes en un ancho particular para renderizar tu página. El ancho de la pantalla varía de un dispositivo a otro, así que asegúrate de que tu página se muestre correctamente en cualquier ancho.

  • Usa valores de ancho relativo en el CSS de tu página. El uso de valores absolutos puede hacer que los elementos se carguen más que la ventana gráfica. Lo mismo ocurre con los valores de posicionamiento. Los valores absolutos grandes pueden hacer que los activos se carguen fuera de la ventana gráfica.

Cómo usar la ventana gráfica para SEO móvil

Configurar la ventana gráfica, por sí solo, no hará que una página tenga un rango más alto en los resultados de búsqueda de Google. Sin embargo, lo que hace el diseño receptivo es ayudar a que tu página sea amigable para dispositivos móviles. Y lo hace de una manera relativamente rápida, fácil e indolora en comparación con las otras opciones:

  • Diseño dinámico: Esta opción implica detectar el agente de usuario y servir diferentes códigos HTML en función de si el usuario está en un dispositivo móvil o navega desde un dispositivo de escritorio. El diseño dinámico requiere que uses el encabezado Vary HTTP para evitar que los servidores de caché sirvan accidentalmente la versión incorrecta. Esto también indicará a los agentes de usuarios móviles de los motores de búsqueda que accedan a la versión de la página móvil.

  • Subdominio móvil: También conocido como mDots, esta opción implica una cantidad significativa de tiempo y recursos de desarrollo. Implica construir un sitio móvil completamente diferente y alojarlo en un subdominio, generalmente algo como m.dominio.com o mobile.dominio.com. En general, Google es bastante eficiente al descubrir la relación entre el contenido alojado en un subdominio móvil y en el sitio de escritorio. Sin embargo, nunca puedes estar 100% seguro cuando se trata de subdominios, por lo que debes incluir una etiqueta rel="canonical" que apunte a la versión de escritorio. Este método generalmente no se recomienda y está cayendo en desuso, especialmente para sitios web grandes y/o complejos.

Teóricamente, podrías usar una de las opciones anteriores para diseñar la versión móvil de tu sitio y hacer que sea compatible con dispositivos móviles. Sin embargo, usar un diseño responsive configurando la ventana móvil es la forma más fácil y efectiva. Además, es el método recomendado por Google así que ya sabes que es compatible con SEO.

Guías recientes