Guía SEO para dispositivos móviles (segunda parte)

Si ya has leído la primera parte de nuestra guía de posicionamiento web para móviles, seguramente sabrás la que se está cociendo (y si todavía no lo has hecho, aún estás a tiempo). El 21 de abril de 2015 Google actualizará su algoritmo favoreciendo el posicionamiento en los resultados de búsqueda de las webs que cumplen con sus requisitos de SEO móvil.

Como ángel custodio, el equipo de CREDIA se propone ser tu guía en este viaje hacia la salvación digital. En esta segunda parte te introduciremos los aspectos más técnicos de la optimización web para móvil, descubriendo cómo indicarle correctamente a Google la configuración de tu sitio y solucionar eventuales problemas de usabilidad.

Ahora déjanos cogerte de la mano y… ¡disfruta de lectura!

TERCER PASO: SEÑALARLE A gOOGLE NUESTRA CONFIGURACIÓN MÓVIL

En esta sección analizaremos qué señales enviar a Google para que entienda nuestra configuración móvil. Ten en cuenta que cada configuración que detallamos a continuación tiene que cumplir también con los requisitos de la configuración antecedente.

En general, sea cual sea la configuración (diseño adaptable, páginas dinámicas o páginas específicas para móviles que usan URL independientes), las webs optimizadas para dispositivos móviles deben incluir una etiqueta meta “viewport” en la head del HTML.

 Viewport

Viewport HTML

Esta etiqueta proporciona al navegador las instrucciones necesarias para adaptar las dimensiones y la escala de una página al ancho de pantalla del dispositivo. Sin ella, de hecho, el navegador procesará inicialmente la página con el tamaño de pantalla propio de ordenadores (normalmente, sobre 980px, aunque varía según los dispositivos) y luego intentará mejorar su aspecto. Para los usuarios, esto implica la necesidad de pulsar dos veces o “pellizcar” la pantalla para ampliar la visión de la página y poder interactuar con el contenido.

La parte del etiquetado “width=device-width” da instrucciones a la página para que se ajuste al tamaño de la pantalla, mientras que la parte “initial-scale=1” permite redimensionar la página cuando se gira el dispositivo en horizontal.

Además del uso del “viewport” en las tres tipologías de configuración móvil, existen unos requisitos específicos para cada una de ellas, que te detallamos a continuación.

1. DISEÑO WEB ADAPTABLE (RWD)

Si hemos implementado todas las medidas descritas hasta el momento, con esta configuración no queda nada más que hacer. Para resumir, es fundamental:

  • Permitir a los robots de búsqueda de Google el rastreo del sitio;
  • Dar acceso completo al CSS, al Javascript y a los archivos de imágenes;
  • Asegurarse de que cada página utilice el meta tag “viewport”.

En caso de que quieras más información, las páginas de asistencia de Google para señalizar de manera correcta esta configuración están disponibles aquí.

2. PUBLICACIÓN DINÁMICA

Cuando se utiliza la publicación dinámica, el contenido para móviles se encuentra “oculto” al rastrearlo con un agente de usuario para ordenadores; en cambio, a través de la cabecera “Vary HTTP”, es posible indicar al servidor que envíe una pista para solicitar el rastreo de la página también por parte del Googlebot para Smartphones.

Cuando abrimos una página dinámica, el contenido mostrado variará en función del tipo de agente de usuario que acceda a la página. La razón es que el contenido de una página web está almacenado en diferentes cachés, como CDN, ISP, navegadores y el mismo índice de Google. Por lo tanto, cuando una página de nuestro sitio web es solicitada, los componentes, o hasta la entera página, podrían ser procesados sin que la solicitud pase por el servidor.

Lo que conseguimos con la cabecera “Vary HTTP” es que el navedador y Google entiendan que el contenido tiene que variar en función del agente de usuario que solicite la página. Esto significa que Google es capaz de ordenar cada versión de nuestra página por separado, según se trate de búsqueda desde ordenador o desde móvil.

Dicha cabecera es:

User agent

Puedes visualizar la cabecera de una página web a través de herramientas como el Server Header Checker de SEO Book.

2.1 CÓMO DETECTAR CORRECTAMENTE LOS AGENTES DE USUARIO

A menudo, detectar los agentes de usuario puede resultar en errores, puesto que los distintos navegadores indican de diferentes maneras que están operando en un dispositivo móvil. En particular, es importante evitar:

  • Depender de una lista de cadenas de agentes de usuario para determinar las coincidencias, ya que éstas requieren mantenimiento y actualizaciones constantes;
  • Obtener coincidencias de agentes de usuario erróneas, detectando un agente de usuario de ordenador como uno de móvil o viceversa, ya que así se procesaría una versión incorrecta de la página. Un error habitual consiste en enviar a los usuarios de tabletas la versión para móvil en lugar de la de escritorio;
  • Identificar el Googlebot de manera específica, ya que esto podría ser considerado cloaking (encubrimiento); todos los agentes de usuario del Googlebot se identifican a sí mismos como dispositivos móviles específicos y, entonces, deberíamos tratarlos exactamente del mismo modo en que trataríamos a esos dispositivos.

Si bien la cabecera“Vary HTTP” es muy importante, recuerda que también es necesario cumplir con todos los demás requisitos de los que hemos hablado previamente. En resumen, debemos:

  • Permitir que los robots de búsqueda de Google rastreen el sitio;
  • Darles acceso completo al CSS, al Javascript y a los archivos de imágenes;
  • Asegurarnos de que cada página utilice el meta tag “Viewport”;
  • Asegurarnos de que cada página utilice la cabecera “Vary HTTP”;
  • Detectar a los usuarios móviles a través de su agente de usuario y tratar el Googlebot como si fuera un usuario cualquiera.

Las páginas de asistencia de Google para señalizar de manera correcta esta configuración están disponibles aquí.

3. URL INDEPENDIENTES

La estructura de URL independientes es la configuración más complicada técnicamente para la adaptación móvil. La cuestión principal en este caso es que, sin la correcta señalización, Google no será capaz de entender que nuestras páginas tienen una versión para móvil diferente de la de escritorio, lo que puede causar problemas de duplicación, con la consecuencia que ambas versiones competirían entre ellas en los resultados de búsqueda. Para señalar a los Googlebots que tenemos esta configuración es necesario añadir unos atributos específicos en el código HTML o bien en el sitemap de la página.

3.1 ATRIBUTOS
3.1.1 MÉTODO HTML

Para indicar que tenemos dos diferentes URL – una para el móvil y otra para el escritorio – hay que “dejar una nota” en la cabecera de ambas páginas, de manera que podamos subrayar la relación existente entre las dos versiones y que Google sepa distinguir cuándo usar cada una de ellas. En concreto, hay que:

  1. Añadir un atributo rel=“alternate” en la versión de escritorio que apunte a la URL móvil correspondiente.
  2. Añadir un atributo rel=“canonical” en la versión móvil que apunte a la URL de escritorio correspondiente.

Por ejemplo, en la versión de escritorio podemos poner:

rel alternateY en la versión móvil:

rel canonicalEn este caso, el atributo en la versión de escritorio de la página informa Google de que existe otra versión alternativa de la misma, de la que proporciona la URL específica, con el fin de que éste procese la segunda cuando el tamaño de la pantalla del usuario resulte más pequeño de 640px.

En cambio, el atributo en el HTML de la página móvil avisa Google de que existe una versión principal de ésta y le señala dónde puede encontrarla. De esta manera, evitamos cualquier problema de duplicación y, por consiguiente, de competencia entre las dos versiones de la misma página.

3.1.2. MÉTODO SITEMAP

El segundo método consiste en añadir el atributo rel=“alternative” al sitemap XML del sitio. No obstante, no podemos prescindir de insertar el rel= “canonical” en las URL de la versión móvil.

A pesar de que Google lo soporte, este método no es recomendable, ya que resulta mucho más fácil identificar cualquier incidencia que pueda afectar la configuración si el atributo se encuentra en la cabecera de la página.

De todas maneras, aquí puedes ver cómo estructurar el sitemap para incluir el atributo:

como estructurar el sitemap

3.2 REDIRECCIÓN AUTOMÁTICA

Cuando usamos la configuración de URL independientes, lo más normal es redirigir de manera automática los usuarios hacia la URL que más utilidad les proporcione.

Algunos sitios web sólo redirigen a los usuarios que acceden a una página en versión de escritorio a través de su Smartphone hacia la relativa versión móvil (redirección “unidireccional”); otros, en cambio, redirigen tanto a los usuarios móviles como a los de desktop hacia sus respectivas versiones de la página (redirección “bidireccional”).

En general, ambos métodos son eficaces. No obstante, es aconsejable ofrecer a los usuarios la posibilidad de anular la redirección si lo desean, por ejemplo a través de un enlace en el footer. Asimismo, deberíamos asegurarnos de que la redirección sea coherente con los atributos rel= “alternate” y rel= “canonical”.

Una advertencia: si nuestro sitio web usa la redirección automática, es fundamental que tratemos los Googlebots igual que todos los demás agentes de usuario y los redirijamos de la manera apropiada (o, en alternativa, que la redirección sea realizada voluntariamente por el mismo agente de usuario).

Por último, si una página de nuestro sitio web no tiene una versión equivalente para móvil, deberíamos mantener nuestros usuarios en la página desktop en vez de redirigirlos a otras páginas móviles.

3.2.1. CÓMO REALIZAR LA REDIRECCIÓN AUTOMÁTICA

Los únicos métodos de redirección automática soportados por Google son:

  • Redirección HTTP;
  • Redirección JavaScript.

En el primer caso, es recomendable que el servidor acompañe la redirección con un código de estado HTTP del tipo 302 o 301.

Si, por alguna razón, este tipo de redirección resulta difícil de implementar, podemos usar JavaScript para el mismo fin. Eso sí, hay que tener en cuenta que el segundo método implica un mayor tiempo de carga, ya que el navegador tendrá que bajar la página, analizarla y ejecutar el JavaScript antes de empezar la redirección.

 3.3 RESUMEN

Además de añadir los atributos y la redirección automática, obviamente, es necesario realizar todos los pasos anteriores. Por razones de claridad, los recopilamos aquí:

  • Permite a todos los Googlebot rastrear tu sitio
  • Asegúrate de que las páginas móviles utilizan la etiqueta meta “viewport”
  • Asegúrate de que cada página utiliza la cabecera “vary HTTP”
  • Detecta a los usuarios móviles a través de su agente de usuario y considera el Googlebot como un usuario normal
  • Señala la relación entre dos URL usando los atributos rel=“alternate” y rel=“canonical”
  • Asegúrate de que las redirecciones automáticas sean coherentes con tus atributos
  • Asegúrate de que las redirecciones automáticas traten los Googlebots como usuarios normales.

Puedes encontrar las páginas de soporte de Google para señalar la configuración de URL independientes aquí.

CUARTO PASO: CONTROLAR Y SOLUCIONAR PROBLEMAS DE USABILIDAD MÓVIL

Si en Webmaster Tools abrimos Tráfico de búsqueda > Usabilidad móvil, Google nos enseñará un informe sobre todas las páginas rastradas que tienen problemas de usabilidad, especificando el tipo de incidencia por cada una de ellas.

Como en Credia nos solemos preocupar del cuidado de nuestra web, no tenemos errores de nuestra web para enseñarte; no obstante, te ponemos esta captura de pantalla para que pueda servir de ejemplo:

Problemas de usabilidad movil

Entre las tipologías de error que podríamos encontrarnos, hay:

  • Problemas de la ventana gráfica (no configurada, con ancho de pantalla fijo, etc.)
  • Tamaño de fuente demasiado pequeño
  • Elementos táctiles demasiado próximos entre sí
  • Uso de Flash

Un consejo: dicho informe se basa en los datos recogidos por Google cuando rastrea nuestro sitio web y, por lo tanto, podría actualizarse con cierto retraso; en este sentido, sería mejor usar la herramienta de prueba de optimización para móviles de Google para confirmar que el problema se ha solucionado de manera correcta. Si necesitas, también puedes echar un ojo a la guía de usabilidad móvil para webmasters de Google.

1. VENTANA GRÁFICA NO CONFIGURADA O DE ANCHO DE PANTALLA FIJO

Tal como explicamos en los apartados anteriores, ambos problemas se solucionan correctamente implementando la etiqueta meta “viewport”. Revisa el TERCER PASO: SEÑALIZAR NUESTRA CONFIGURACIÓN MÓVIL A GOOGLE si tienes dudas.

2. EL CONTENIDO NO SE ADAPTA A LA VENTANA GRÁFICA

Este tipo de error indica que hay páginas de nuestro sitio web en las que el contenido es más grande que la propia ventana, por lo que los usuarios tendrán que desplazarse horizontalmente para leerlo. Para evitar esto, al diseñar nuestra página es recomendable tanto usar valores de posición y ancho relativos para los elementos CSS como consentir que las imágenes puedan escalarse.

3. TAMAÑO DE FUENTE PEQUEÑO

Las páginas con este tipo de error muestran un texto demasiado pequeño para que el usuario pueda leerlo sin tener que “pellizcar” la pantalla y ampliar la visión de forma táctil. Para mantener el texto legible, Google recomienda:

  • Usar un tamaño de fuente base de 16 píxeles CSS (aunque éste se debería ajustar según lo requieran las propiedades de la fuente usada);
  • Usar tamaños proporcionados al tamaño base para definir la escala tipográfica;
  • Usar la altura de línea predeterminada del navegador de 1,2 em, para dejar espacio vertical entre las líneas del texto;
  • Limitar la cantidad de fuentes y la escala tipográfica para evitar que el diseño de la página pueda parecer descuidado y excesivamente complejo.

El siguiente ejemplo muestra un tamaño de fuente base de 16px aplicado a la página entera, mientras que todos los demás elementos tienen un tamaño proporcionado al de la fuente base:

body{font-size:16px; line-height:1.2em;}

p{font-size:120%;}

h1{font-size:250%;}

h2{font-size:200%;}

De esta manera, la proporción entre los tamaños de las fuentes de los varios elementos se mantiene invariable, independientemente de la anchura de la pantalla. Asimismo, se ha configurado una altura de línea de 1.2 em, lo que favorece la lectura del texto.

4. ELEMENTOS TÁCTILES DEMASIADO PRÓXIMOS ENTRE SÍ

Este error ocurre cuando vínculos de navegación y botones están tan cercanos entre ellos que el usuario móvil se deja los dedos de la mano (y la paciencia) en el intento de clicar un elemento sin accionar los demás. Para elementos táctiles como menús y botones, Google recomienda un tamaño de por lo menos 48 píxeles (7mm), tanto de alto como de ancho; para links insertados en el texto, en cambio, es suficiente seguir los consejos del párrafo anterior.

Si, por alguna razón, no es posible crear elementos táctiles de 48px, la sugerencia es dejar por lo menos 32px d espacio entre ellos. Muy a menudo, de hecho, este error es causado más bien por la demasiada proximidad de los elementos táctiles que por la pequeñez de los mismos.

5. USO DE FLASH

La mayoría de navegadores móviles no reproducen el contenido basado en Flash. Así pues, los usuarios de dispositivos móviles no podrán utilizar una página que dependa de Flash para mostrar el contenido, las animaciones o la navegación. Por lo tanto, lo más recomendable sería diseñar el layout y las animaciones de la página utilizando las tecnologías web modernas, tales como CSS y JavaScript.

QUINTO PASO: ERRORES DE RASTREO MÓVIL

Muchos sitios web optimizados para móviles contienen a menudo errores de configuración que hacen que el sitio aparezca entre resultados de búsqueda diferentes de aquellos entre los cuales se pretendía posicionarlo. Afortunadamente, Google identifica muchas de estas incidencias y las señala como errores de rastreo; para averiguarlo, abre Rastreo>Errores de rastreo en Webmaster Tools y selecciona la tabla “Smartphone”.

GWT smartphoneA continuación te detallamos los varios tipos de errores que pueden ocurrir y cómo solucionarlos.

1. ERRORES DEL SERVIDOR

Se trata de un error en el que el Googlebot para móviles recibe un código de estado 500 al rastrear una página. Google proporciona alguna ayuda básica explicando cómo enfrentar este tipo de incidencias; sólo en caso de que hubiese algún problema grave nos enviaría instrucciones más detalladas.

2. ERRORES DE PÁGINA NO ENCONTRADA Y ERRORES 404 LEVES

Principalmente, estos son errores de las webs que usan una configuración de publicación dinámica o URL independientes para procesar contenido móvil, ya que, en las páginas de diseño web adaptable, un error 404 no aparece sólo a usuarios móviles. Para solucionarlo tenemos que:

  • Asegurarnos de que la detección de agentes de usuario haya sido configurada correctamente;
  • Si usamos URLs específicas para móvil, asegurarnos de que éstas redirijan a los usuarios móviles hacia la correcta URL correspondiente del sitio móvil;
  • Si una página de nuestra web carece de una versión equivalente para Smartphone, mantener a los usuarios en la página de escritorio en vez de redirigirlos a cualquier otra URL móvil.

3. REDIRECCIONES DEFECTUOSAS

Se trata de un error específico de sitios que usan la configuración de URL independientes y se produce cuando una página para ordenadores redirige a los usuarios de Smartphone hacia una página que no guarda relación con su consulta. Este tipo de error se suele producir cuando:

  • Todas las páginas de un sitio redirigen a los usuarios móvil a la página principal del sitio optimizado para Smartphone, independientemente de la URL solicitada;
  • La URL de la versión desktop de nuestra página contiene parámetros que no pueden aplicarse correctamente a una página móvil correspondiente;
  • Sólo redirigimos algunos tipos de dispositivos móviles y otros no.

Para resolver el error tenemos que comprobar que:

  • Estemos redirigiendo los usuarios de smartphone a la correcta URL móvil correspondiente;
  • Si no existe una URL equivalente, estemos manteniendo a los usuarios en la página de escritorio en vez de redirigirlos hacia otras páginas de la versión móvil;
  • Hayamos configurado correctamente la detección de agentes de usuario.

4. URL BLOQUEADAS

En este último caso, el archivo robots.txt del sitio impide que el robot de Google lleve a cabo el rastreo para smartphone. Será por lo tanto necesario modificar el archivo para consentir el acceso al sitio por parte de todos los robots de búsqueda de Google.

OTROS CONSEJOS

Junto a los 5 pasos que hemos ido explicando a lo largo de esta guía, te dejamos unos pequeños consejos finales:

  • Prescinde del contenido multimedia que no se puede reproducir en dispositivos móviles;
  • Comprueba que la versión móvil de tu sitio cargue rápidamente para ahorrar a los usuarios de tu web la frustración de un largo intervalo de carga;
  • Evita el cross-linking innecesario – Cuando insertas un enlace a la versión de escritorio de tu sitio en la página móvil o viceversa, comprueba que los enlaces envíen a la página equivalente y no a cualquier otra página o a la página de inicio;
  • Asegúrate de que los vínculos de navegación interna sean coherentes con las versiones específicas de cada dispositivo, para así prevenir redirecciones redundantes.

¿…DUDAS?

Como imaginarás, la optimización web para el SEO móvil es un trabajo técnicamente laborioso. Por nuestra parte, nos hemos remangado y hemos hecho todo lo posible para poder proporcionarte la información básica de nuestra “formula seCREDIA” de posicionamiento web para móviles. ¡Ahora es el momento de ponerte tú manos a la obra!

Y recuerda que, en todo momento, el equipo de consultores técnicos de CREDIA está a tu disposición para ayudarte a:

  • Cumplir con todos los requisitos técnicos de Google;
  • Posicionarte en los primeros resultados de búsqueda desde dispositivos móviles;
  • Seleccionar la mejor configuración móvil en relación a las necesidades de tu negocio;
  • Adaptar el diseño de tu web a las pantallas de dispositivos móviles;
  • Mejorar la experiencia de usuario móvil de tu web y, por consiguiente, el porcentaje de conversiones.

¡Echa un ojo a nuestra página de SEO para móviles y lleva tu negocio al mundo móvil!

¿Te ha gustado el contenido?
Déjanos tu voto
[Total: 0 Media: 0]

Deja un Comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies