queremos que tu sitio - donweb.com by dattatec · ordenadores (por lo general, unos 980 px, aunque...
TRANSCRIPT
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