Ángel

4 métodos técnicos de optimización para dispositivos móviles paso a paso

Oct 15, Posted by in Móvil

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Pin It Share 0 Filament.io 0 Flares ×

1

Google en su artículo nos recomienda utilizar diferentes tipos de configuraciones para optimizar tu sitio web para dispositivos móviles, los cuales dependen de la programación en la que se desarrolló tu sitio web y se describen a continuación:

Responsive Web Design

El responsive web design es un tipo de programación que se enfoca a sitios web diseñados para que sean totalmente visibles en diferentes dispositivos, ya sean computadoras o dispositivos móviles con una resolución de pantalla diferente.

2

Google recomienda utilizar el siguiente código para la programación de dispositivos móviles:

@media only screen and (max-width:640px) { … }

Con el cual el navegador tomará el código que se encuentre dentro de este código para pantallas que tengan un tamaño máximo de lo que se especifica en la sentencia max-width. Este ejemplo es de 640px, pero puede variar dependiendo de la programación de cada sitio web. Este método es el que Google recomienda utilizar, pero en caso de no poder realizarlo nos presenta las siguientes opciones.

Publicación dinámica de diferentes HTML en la misma URL

Una publicación dinámica es aquella en la que el servidor responde con varios códigos HTML y CSS en la misma URL, dependiendo del user-agent que solicite la página.

Normalmente los user-agents para móviles se encuentran ocultos, por lo que Google recomienda que el servidor indique al Googlebot para smartphone que también rastree estas páginas y así lo pueda indexar en el contenido para móviles. Para realizar esta indicación se hace mediante la cabecera Vary HTTP, la cual tiene dos usos importantes:

  1. Señala a los servidores de cache que deben tener en cuenta el user-agent a la hora de decidir si muestran la página que se encuentra en cache o no.
  2. Ayuda al robot de Google a detectar más rápido el contenido que se encuentra optimizado para móviles.

La cabecera Vary HTTP forma parte de la respuesta del servidor a una solicitud, de la forma siguiente:

GET /page-1 HTTP/1.1
Host: www.example.com
(…rest of HTTP request headers…)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(… rest of HTTP response headers…)

Esto significa que el contenido de la respuesta variará en función del user-agent que solicite la página.

Diferente URL para móviles

Para esta configuración se debe crear un subdominio en el cual todo debe estar optimizado para dispositivos móviles, como lo mencionamos en un post anterior, lo normal es tener nuestro sitio web http://alturainteractive.com y crear nuestro subdominio http://m.alturainteractive.com el cual será el que se encuentra optimizado para móviles.

Para que nuestro sitio web para móviles sea accesible para los Googlebots debemos realizar anotaciones en ambos sitios.

  1. En el sitio principal debemos añadir la etiqueta rel=”alternate” y señalar la URL para móviles correspondiente, con el fin de que el robot de Google pueda detectar este contenido.
    <linkrel=”alternate”media=”only screen and (max-width: 640px)” href=”http://m.alturainteractive.com/”>
  2. En el sitio para móviles debemos añadir la etiqueta rel=”canonical” y que señale la URL del sitio principal correspondiente, todo esto, como se mencionó en el post de Métodos técnicos de optimización de tu sitio web,  para evitar que el contenido sea tomado como contenido duplicado.
    <linkrel=”canonical”href=”http://alturainteractive.com/”>

App indexing

Otro método de optimización para los dispositivos móviles se utiliza cuando cuentas con una aplicación móvil y le das a los usuarios la opción de ver el mismo contenido que en la web pero dentro de la aplicación, para lo cual podrás insertar botones en los SERPS para ofrecer la posibilidad de acceder al contenido desde tu aplicación.

3

Para realizar esto debemos agregar la etiqueta  rel=”alternate” como se muestra a continuación:

<html><head><link rel=”alternate” href=”android-app://com.example.android/http/example.com.gizmos/></head><body> … </body></html>

Para que funcione correctamente el código lo debemos implementar tanto en la web como dentro de nuestra aplicación de la siguiente manera:

<activity android:name=”com.example.android.GizmosActivity” android:label=”@string/title_gizmos”><intent-filter android:label=”@string/filter_title_viewgizmos”><action android:name=”android.intent.action.VIEW” /><data android:scheme=”http”  android:host=”example.com” android:pathPrefix=”/gizmos” /><category android:name=”android.intent.category.DEFAULT” /><category android:name=”android.intent.category.BROWSABLE” /></intent-filter></activity>

Logrando así que el contenido se presente de una manera más adecuada para todos los usuarios, sin importar desde qué dispositivo se intente abrir nuestro sitio web. Como se mencionó para que Google indexe con mayor facilidad tu sitio web es recomendable utilizar responsive web design ya que es la configuración recomendada por Google, para que sea la misma URL para todos los dispositivos y que el CSS cambie la forma en que la página aparece en el dispositivo, todo esto para que el usuario se dirija siempre a la misma dirección sin importar el dispositivo en el que se encuentra.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Pin It Share 0 Filament.io 0 Flares ×

Acerca de Angel Contreras

Soy Licenciado en Sistemas Computacionales Administrativos, egresado de la Universidad Veracruzana. Durante mis estudios me enfoqué principalmente al desarrollo web, conocimiento que me ha permitido saber cómo funcionan y cómo están estructurados los sitios web y la manera en que trabajan los buscadores, además de poder aportar mis conocimientos dentro de Altura Interactive para utilizar las herramientas SEO que permiten facilitar el trabajo y otorgar un mejor resultado a nuestros clientes.


0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Pin It Share 0 Filament.io 0 Flares ×
Contáctanos
contact