Queremos

asegurarnos de
que tu sitio
aparezca en los
resultados de
bsqueda.

En estas secciones, te enseamos a:

Configurar el sitio para varios

dispositivos, que los motores de
bsqueda comprendan la
configuracin, evitar errores habituales
que se producen por el camino.
En primer lugar, te mostramos lo que significa pasarse
a la tecnologa mvil y cmo dar este paso mediante un
mtodo de configuracin elegido entre tres opciones.

Cuando decimos "mvil", nos referimos a los smartphones,

no a los tablets ni a los telfonos de gama baja.
ELEGIR LA CONFIGURACIN PARA MVILES

Seleccionar la configuracin para mviles

Configuracin La URL no cambia? el cdigo HTML no cambia?

Diseo web adaptable

Publicacin dinmica

URL independiente

Diseo web adaptable: proporciona el mismo cdigo HTML en la misma URL

independientemente del dispositivo del usuario (ordenador, tablet, mvil o

navegador no visual), pero puede procesar la presentacin de manera diferente (es

decir, "responder") en funcin del tamao de la pantalla. El diseo adaptable es el

patrn de diseo que Google recomienda.

Publicacin dinmica: utiliza la misma URL independientemente del dispositivo,

pero genera una versin diferente del cdigo HTML para diferentes tipos de

dispositivo en funcin de lo que el servidor sabe del navegador del usuario.

URL independientes: proporciona cdigo diferente para cada dispositivo y en

URL independientes. Esta configuracin intenta detectar el dispositivo de los

usuarios y, a continuacin, redirecciona a la pgina correspondiente mediante

redireccionamientos HTTP junto con la cabecera Vary: HTTP.

En segundo lugar, asegrate de que los motores de
bsqueda, por ejemplo, Google, puedan comprender la
configuracin del sitio para indicar a los navegadores
que la pgina se adaptar a todos los dispositivo
sealar la configuracin a los motores de bsqueda

DISEO WEB ADAPTABLE

El diseo web adaptable es una configuracin en la que el servidor siempre enva el

mismo cdigo HTML a todos los dispositivos y se utiliza cdigo CSS para modificar

el procesamiento de la pgina en el dispositivo.

El diseo adaptable proporciona a todos los dispositivos un mismo cdigo

que se ajusta al tamao de pantalla.

Para indicar a los navegadores que la pgina se adaptar a todos los dispositivos,

aade una metaetiqueta en el encabezamiento del documento:

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

sealar la configuracin a los motores de bsqueda

La metaetiqueta viewport da instrucciones al navegador sobre cmo ajustar las

dimensiones y la escala de la pgina a la anchura del dispositivo. Cuando el

metaetiqueta viewport no est presente, los navegadores para mviles

automticamente procesan la pgina con una anchura de pantalla propia de

ordenadores (por lo general, unos 980 px, aunque puede variar segn el dispositivo).

A continuacin, los navegadores para mviles intentan mejorar el aspecto del

contenido aumentando los tamaos de fuente, y adaptando el tamao del

contenido para que se ajuste a la pantalla o mostrando solo la parte del contenido

que cabe en pantalla.

Para los usuarios, esto se traduce en que los tamaos de fuente pueden tener un

aspecto cambiante y que quiz tienen que tocar la pantalla dos veces o pellizcarla

para hacer zoom a fin de poder ver y utilizar el contenido. Puede que Google

determine que una pgina no est optimizada para mviles si obliga a seguir este

tipo de interaccin en un dispositivo mvil.

Como la pgina de la izquierda

no dispone de metaetiqueta
viewport especificada, el
navegador para mviles da por
sentado que la anchura es la
de un ordenador y adapta la
pgina para que quepa en
pantalla, por lo que el
contenido es difcil de leer. A la
derecha vemos la misma
pgina con una metaetiqueta
viewport especificada que
hace coincidir la pgina con la
anchura del dispositivo.
sealar la configuracin a los motores de bsqueda

Si quieres que las imgenes sean adaptables, incluye el elemento <picture>.

Por regla general, si el sitio funciona en un navegador reciente,

como Google Chrome o Apple Mobile Safari, debera funcionar

con nuestros algoritmos.

Por qu usar el diseo adaptable

Recomendamos el uso del diseo web adaptable porque ofrece los siguientes

aspectos positivos:

Si se usa una sola URL, a los usuarios les resulta ms fcil compartir el contenido y

enlazarlo.

Ayuda a los algoritmos de Google a asignar correctamente las propiedades de

indexacin a la pgina en vez de tener que sealar la existencia de pginas

correspondientes para ordenadores o para mviles.

Requiere menos tiempo de ingeniera para mantener varias pginas para el mismo

contenido.

No es necesario realizar un redireccionamiento para que los usuarios lleguen a la vista

optimizada para su dispositivo, de modo que se reduce el tiempo de carga.

Ahorra recursos cuando Googlebot rastrea tu sitio. En el caso de las pginas con diseo

web adaptable, cualquier agente de usuario de Googlebot solo tiene que rastrear tu

pgina una vez para recuperar todas las versiones del contenido. Esta mejora en la

eficiencia de rastreo puede ayudar de forma indirecta a Google a indexar una parte

mayor del contenido del sitio y a mantenerlo adecuadamente actualizado.

sealar la configuracin a los motores de bsqueda

JavaScript
Un tema que se debera tener en cuenta a la hora de crear sitios optimizados para

mviles es el uso de JavaScript para modificar el modo en el que se procesa y se

comporta el sitio en distintos dispositivos. JavaScript suele utilizarse, por ejemplo,

para determinar qu anuncio o qu resolucin alternativa de imagen se mostrar en

la pgina.

A continuacin te indicamos tres configuraciones populares de JavaScript en sitios

optimizados para mviles:

JavaScript adaptable: en esta configuracin, todos los dispositivos reciben el mismo

contenido HTML, CSS y JavaScript. Cuando el cdigo JavaScript se ejecuta en el

dispositivo, el procesamiento o el comportamiento de este sitio cambia. Si un sitio web

necesita JavaScript, esta es la configuracin recomendada por Google.

Deteccin combinada: en esta configuracin, el sitio utiliza JavaScript y la deteccin de

servidor de la capacidad del dispositivo para mostrar contenido distinto en funcin del

dispositivo.

JavaScript dinmico: en esta configuracin, todos los dispositivos reciben el mismo

cdigo HTML, pero el cdigo JavaScript se enva desde una URL que ofrece de forma

dinmica un cdigo JavaScript adaptado al agente de usuario del dispositivo.

sealar la configuracin a los motores de bsqueda

Publicacin dinmica
La publicacin dinmica es una configuracin en la que el servidor responde con

varios cdigos HTML (y CSS) en la misma URL segn el agente de usuario que

solicite la pgina.

Dado que no es del todo evidente que con esta configuracin el sitio modifique el

cdigo HTML segn los agentes de usuario para mviles, se recomienda que el

servidor enve una pista para solicitar que el Googlebot para smartphones tambin

rastree la pgina y as detectar el contenido para mviles.

La publicacin dinmica enva un cdigo distinto para cada dispositivo,

pero en la misma URL.

Deteccin correcta de agentes de usuario

La deteccin de agentes de usuario (a veces llamada "husmeo" de agentes de

usuario) suele ser una tcnica propensa a errores. Hay muchas causas, pero hay

tres tipos de errores que son ms habituales:

sealar la configuracin a los motores de bsqueda

La deteccin de agentes de usuario depende de tener una lista de cadenas de agentes

de usuario (o subcadenas) para determinar las coincidencias. Dichas listas necesitan

un mantenimiento y una actualizacin constantes, y no coincidirn con los agentes de

usuario nuevos. En realidad, muchas de esas listas no se mantienen adecuadamente y

estn desfasadas, lo que afecta negativamente a la experiencia de los usuarios.

Al buscar coincidencias de agentes de usuario, es habitual obtener coincidencias

errneas, a veces al detectar un agente de usuario de ordenador como uno de mvil o

viceversa. Del mismo modo, un error habitual que cometen los sitios es tratar los

dispositivos tablet como smartphones sin darse cuenta. Si ests detectando los

agentes de usuario de los navegadores que acceden a tu sitio, asegrate de que la

deteccin se realice buscando cadenas especficas para smartphone (buscando

aquellas que contengan las palabras "Android" y "Mobile") en lugar de cadenas

genricas para mviles (buscando nicamente "Android"). (Ms informacin)

Ten mucho cuidado con el encubrimiento al detectar agentes de usuario, ya que,

durante ese proceso, el sitio detecta la clase o el tipo de dispositivo buscando el nombre

de este en la cadena de agente de usuario; no debera buscar especficamente el

Googlebot. Todos los agentes de usuario del Googlebot se identifican a s mismos como

dispositivos mviles especficos, y deberas tratarlos exactamente del mismo modo que

trataras a esos dispositivos. Por ejemplo, el Googlebot para smartphones se identifica

a s mismo como un iPhone y deberas ofrecerle la misma respuesta que recibira un

usuario de iPhone (redireccionamiento, contenido optimizado, etc.).

WEB RESPONSIVE

bibliografa:

- Google.com

- Web Designer Depot

http://donweb.com