Queremos asegurarnos de que tu sitio aparezca en los resultados de búsqueda.

En estas secciones, te enseñamos a:

Configurar el sitio para varios dispositivos, que los motores de búsqueda comprendan la configuración, evitar errores habituales que se producen por el camino.

En primer lugar, te mostramos lo que significa pasarse

a la tecnología móvil y cómo dar este paso mediante un

método de configuración elegido entre tres opciones.

Cuando decimos "móvil", nos referimos a los smartphones, no a los tablets ni a los teléfonos de gama baja.

ELEGIR LA CONFIGURACIÓN PARA MÓVILES

Diseño web adaptable: proporciona el mismo código HTML en la misma URL

independientemente del dispositivo del usuario (ordenador, tablet, móvil o

navegador no visual), pero puede procesar la presentación de manera diferente (es

decir, "responder") en función del tamaño de la pantalla. El diseño adaptable es el

patrón de diseño que Google recomienda.

Publicación dinámica: utiliza la misma URL independientemente del dispositivo,

pero genera una versión diferente del código HTML para diferentes tipos de

dispositivo en función de lo que el servidor sabe del navegador del usuario.

URL independientes: proporciona código diferente para cada dispositivo y en

URL independientes. Esta configuración intenta detectar el dispositivo de los

usuarios y, a continuación, redirecciona a la página correspondiente mediante

redireccionamientos HTTP junto con la cabecera Vary: HTTP.

Seleccionar la configuración para móviles

Configuración

Diseño web adaptable

Publicación dinámica

URL independiente

¿La URL no cambia? ¿el código HTML no cambia?

En segundo lugar, asegúrate de que los motores de

búsqueda, por ejemplo, Google, puedan comprender la

configuración del sitio para indicar a los navegadores

que la página se adaptará a todos los dispositivo

señalar la configuración a los motores de búsqueda

El diseño web adaptable es una configuración en la que el servidor siempre envía el

mismo código HTML a todos los dispositivos y se utiliza código CSS para modificar

el procesamiento de la página en el dispositivo.

DISEÑO WEB ADAPTABLE

El diseño adaptable proporciona a todos los dispositivos un mismo código que se ajusta al tamaño de pantalla.

Para indicar a los navegadores que la página se adaptará a todos los dispositivos,

añade una metaetiqueta en el encabezamiento del documento:

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

señalar la configuración a los motores de búsqueda

La metaetiqueta viewport da instrucciones al navegador sobre cómo ajustar las

dimensiones y la escala de la página a la anchura del dispositivo. Cuando el

metaetiqueta viewport no está presente, los navegadores para móviles

automáticamente procesan la página con una anchura de pantalla propia de

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

A continuación, los navegadores para móviles intentan mejorar el aspecto del

contenido aumentando los tamaños de fuente, y adaptando el tamaño 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 tamaños 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 página no está optimizada para móviles si obliga a seguir este

tipo de interacción en un dispositivo móvil.

Como la página de la izquierda

no dispone de metaetiqueta

viewport especificada, el

navegador para móviles da por

sentado que la anchura es la

de un ordenador y adapta la

página para que quepa en

pantalla, por lo que el

contenido es difícil de leer. A la

derecha vemos la misma

página con una metaetiqueta

viewport especificada que

hace coincidir la página con la

anchura del dispositivo.

señalar la configuración a los motores de búsqueda

Recomendamos el uso del diseño web adaptable porque ofrece los siguientes

aspectos positivos:

Por qué usar el diseño adaptable

Si se usa una sola URL, a los usuarios les resulta más fácil compartir el contenido y

enlazarlo.

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

indexación a la página en vez de tener que señalar la existencia de páginas

correspondientes para ordenadores o para móviles.

Requiere menos tiempo de ingeniería para mantener varias páginas 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 páginas con diseño

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

página 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.

Si quieres que las imágenes sean adaptables, incluye el elemento <picture>.

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

como Google Chrome o Apple Mobile Safari, debería funcionar

con nuestros algoritmos.

señalar la configuración a los motores de búsqueda

Un tema que se debería tener en cuenta a la hora de crear sitios optimizados para

móviles 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é resolución alternativa de imagen se mostrará en

la página.

A continuación te indicamos tres configuraciones populares de JavaScript en sitios

optimizados para móviles:

JavaScript

JavaScript adaptable: en esta configuración, todos los dispositivos reciben el mismo

contenido HTML, CSS y JavaScript. Cuando el código JavaScript se ejecuta en el

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

necesita JavaScript, esta es la configuración recomendada por Google.

Detección combinada: en esta configuración, el sitio utiliza JavaScript y la detección de

servidor de la capacidad del dispositivo para mostrar contenido distinto en función del

dispositivo.

JavaScript dinámico: en esta configuración, todos los dispositivos reciben el mismo

código HTML, pero el código JavaScript se envía desde una URL que ofrece de forma

dinámica un código JavaScript adaptado al agente de usuario del dispositivo.

La publicación dinámica envía un código distinto para cada dispositivo, pero en la misma URL.

señalar la configuración a los motores de búsqueda

La publicación dinámica es una configuración en la que el servidor responde con

varios códigos HTML (y CSS) en la misma URL según el agente de usuario que

solicite la página.

Dado que no es del todo evidente que con esta configuración el sitio modifique el

código HTML según los agentes de usuario para móviles, se recomienda que el

servidor envíe una pista para solicitar que el Googlebot para smartphones también

rastree la página y así detectar el contenido para móviles.

Publicación dinámica

La detección de agentes de usuario (a veces llamada "husmeo" de agentes de

usuario) suele ser una técnica propensa a errores. Hay muchas causas, pero hay

tres tipos de errores que son más habituales:

Detección correcta de agentes de usuario

señalar la configuración a los motores de búsqueda

La detección 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 actualización constantes, y no coincidirán con los agentes de

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

están desfasadas, lo que afecta negativamente a la experiencia de los usuarios.

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

erróneas, a veces al detectar un agente de usuario de ordenador como uno de móvil o

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

dispositivos tablet como smartphones sin darse cuenta. Si estás detectando los

agentes de usuario de los navegadores que acceden a tu sitio, asegúrate de que la

detección se realice buscando cadenas específicas para smartphone (buscando

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

genéricas para móviles (buscando únicamente "Android"). (Más información)

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 debería buscar específicamente el

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

dispositivos móviles específicos, y deberías tratarlos exactamente del mismo modo que

tratarías a esos dispositivos. Por ejemplo, el Googlebot para smartphones se identifica

a sí mismo como un iPhone y deberías ofrecerle la misma respuesta que recibiría un

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

bibliografía:

- Google.com

- Web Designer Depot

WEB RESPONSIVE

http://donweb.com