La Guía 360º del SEO para Móviles

¿Y está pensando en el acceso móvil? Ya no se trata de la “ola del futuro”, está sucediendo ahora.

Esto es lo que afirmaba Google en su ebook de 2011 ZMOT: Ganando el momento cero de la verdad, y que es hoy más cierto que nunca.

Los smartphones se han convertido en una valiosísima parte del tráfico orgánico, por lo que es absolutamente decisivo optimizar tu web para estos dispositivos.

El problema es: ¿Cómo lo haces? ¿Qué alternativas tienes? ¿Por dónde empiezas?

Para ayudarte a determinar el mejor enfoque para manejar el tráfico móvil he preparado un resumen con las cuestiones más importantes, junto con las mejores prácticas SEO y un puñado de herramientas útiles.

Cuando hayas terminado con esta guía tendrás una visión 360º de todo lo que conlleva optimizar un sitio web para la búsqueda móvil.

Por qué es importante el SEO para móviles

Aparte de todas esas estadísticas que muestran cómo el uso de smartphones ha alcanzado a los equipos de escritorio, hay varias razones por las que es importante tener un sitio optimizado para móviles, especialmente si quieres estar bien posicionado en los resultados de Google:

• La experiencia de usuarios móviles es un factor de ranking – Desde junio de 2013 Google considera la configuración para smartphones en los resultados de búsqueda y en abril de 2015 actualizó sus algoritmos para favorecer a los sitios optimizados para estos dispositivos. Mientras no ofrezcas una versión para móviles en condiciones estás perdiendo un impulso en las clasificaciones. Puedes saber más sobre esto aquí.
• Los sitios para móviles se etiquetan en las SERP – Desde noviembre de 2014 Google muestra la etiqueta “para móvil” en los resultados de búsqueda en smartphones. No tener un sitio optimizado puede significar una pérdida importante de clics.
• Google envía avisos a los sitios mal optimizados para móviles – Desde enero de 2015 el buscador envía notificaciones a los webmasters de sitios que ofrecen una mala experiencia en móviles. Aunque por el momento no se trata de una penalización, nadie sabe qué efectos tendrán estos avisos en el futuro.
• La mitad del tráfico de búsqueda es móvil – Desde 2015 Google procesa más búsquedas en smartphones que en equipos de escritorio. La búsqueda móvil domina el terreno y Google va a llegar a donde haga falta para que las páginas que aparecen en sus resultados ofrezcan una experiencia optimizada para teléfonos inteligentes.

Conoce el grado de optimización de tu web

Lo primero que debes hacer es averiguar dónde estás en términos de móvil. Conocer los problemas de optimización de tu sitio te permitirá diseñar el plan de acción más adecuado.

Para hacer la comprobación, realiza la prueba de optimización para móviles de Google. Esta herramienta analiza tu sitio y enumera los problemas que tiene desde la perspectiva de la usabilidad y la optimización.

El test puede dar dos resultados:

• El sitio está optimizado para móviles – Estupendo. Aun así puede que tu sitio presente algunos inconvenientes, como por ejemplo estar bloqueando recursos mediante el archivo robots.txt.
• El sitio suspende – Tienes trabajo por delante. Los errores más comunes son que el texto es demasiado pequeño para leerlo, que los enlaces están demasiado juntos, o que no hay definida una ventana gráfica para dispositivos móviles. Junto a los problemas detectados la herramienta proporciona información sobre cómo corregirlos.

Otras herramientas útiles para validar la preparación de tu sitio para móviles son MobiReady y W3C Móbile Checher.

Alternativas para construir un sitio optimizado para móviles

Básicamente, tienes tres alternativas:

1. Diseño adaptable o responsive
2. Publicación dinámica
3. URL independientes

A continuación te explico cada opción en detalle.

1. Diseño adaptable o responsive

Como su nombre indica, el sitio responde al dispositivo desde el que se accede, adaptando la presentación de la página al tamaño de la pantalla. Los sitios de este tipo varían la disposición de los elementos de la página conforme lo hace el tamaño de la ventana de navegación. Es la configuración que Google recomienda.

Las características del diseño adaptable o responsive son:

• Misma URL tanto para móviles como para equipos de escritorio
• Mismo código HTML para todos los dispositivos
• Básicamente el mismo contenido en todos los dispositivos
• La página se adapta automáticamente a la configuración de pantalla

Ventajas e inconvenientes del diseño adaptable o responsive

El diseño adaptable o responsive ofrece importantes beneficios respecto a las otras alternativas, aunque también algunos inconvenientes que afortunadamente pueden paliarse.

Ventajas:

• Los usuarios pueden interactuar mejor con el sitio, copiando, pegando y compartiendo socialmente las mismas URL, al margen del tipo dispositivo que usen
• Es más fácil para Google consolidar la autoridad de la página en una única URL
• Proporciona mejor eficiencia de rastreo ya que el buscador no tiene que visitar varias URL por página
• Sólo hay que mantener una versión del código para el sitio
• No es necesario tener en cuenta a los agentes de usuario, lo que evita algunos de los problemas de otras alternativas

Inconvenientes:

• Apenas hay margen para personalizar el contenido que se muestra el usuario en función del dispositivo, por lo que las posibilidades de ofrecer una experiencia diferente a los usuarios móviles es muy limitada
• Debido a que las páginas emplean el mismo código para todos los dispositivos, la velocidad de carga en redes móviles tiende a ser más lenta que con otras opciones

Cuestiones técnicas del diseño adaptable o responsive

Media queries

La característica más llamativa del diseño adaptable es que la página se autoajusta en base al tamaño de la pantalla, orientación y resolución. Para lograr esto, se emplea un código CSS conocido como media querie que permite adaptar el contenido dinámicamente.

Este es el aspecto de una media querie para una pantalla de 767 pixels o menos:

@media only screen and (max-width: 767px) {
.site-title {
font-size: 24px;
font-size: 2.4rem;
}
[otros estilos]
}

Hojas de estilo separadas

Es posible que al configurar el diseño responsive de tu sitio quieras usar una hoja de estilo separada. En tal caso, debes incluir el siguiente código HTML en la cabecera de la página:

<link href=”movil.css” type=”text/css” media=”screen and (max-device-width: 767px)” rel=”stylesheet”/>

Meta Viewport

Al usar diseño adaptable, los navegadores necesitan saber cómo de grande deberá mostrarse la página. La forma de comunicarlo es mediante la metaetiqueta viewport.

La meta viewport debe colocarse en la cabecera de la página, tal y como sigue:

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

Lo que este etiqueta indica es lo siguiente:

• width=device-width – El tamaño de la página debe ser el mismo que el de la pantalla del dispositivo.
• initial-scale=1.0 – El zoom aplicado a la página debe equivaler inicialmente al tamaño de la pantalla (p.e. al tamaño en posición horizontal).

JavaScript

Una de las limitaciones del diseño adaptable es que ofrece un margen muy pequeño para personalizar la experiencia de usuario para diferentes dispositivos.

Pues bien, existe la posibilidad de emplear JavaScript para mostrar un contenido distinto en cada dispositivo. Por ejemplo, enseñar un anuncio concreto a los usuarios de escritorio y otro diferente a los de móviles.

Las configuraciones más populares de JS son:

• JavaScript adaptable – El código JS se comporta de distinta manera en función del dispositivo en el que se ejecuta. Es la configuración que Google recomienda.
• Detección combinada – Se envía un código JS diferente a cada tipo de dispositivo.
• JavaScript dinámico – Similar al anterior, solo que la detección del dispositivo y el envío del código se hace a través de una URL dinámica.

En esta página tienes varias herramientas JavaScript para sitios responsive.

2. Publicación dinámica

El sitio detecta el tipo de dispositivo desde el que se accede y muestra la versión correspondiente de la página dinámicamente. El usuario tiene la sensación de ver lo mismo que todos, cuando en realidad puede tener frente a sí una versión de la página muy diferente a la que vería en otro dispositivo.

Las características de la publicación dinámica son:

• Misma URL para todos los dispositivos
• Distinto código HTML para móviles que para equipos de escritorio
• Contenido y disposición de la página en función del dispositivo

Ventajas e inconvenientes de la publicación dinámica

La publicación dinámica puede parecer la solución ideal, pero es que difícil conseguir que funcione correctamente.

Ventajas:

• Permite proporcionar una experiencia personalizada para los usuarios de móviles
• Facilita a Google la tarea de consolidar la autoridad de la página en una única URL
• Suele ofrecer mejores tiempos de carga que el diseño adaptable o responsive

Inconvenientes:

• La detección del agente de usuario puede fallar, provocando la carga de una versión incorrecta de la página y una mala experiencia de uso
• Es posible que Google entienda una acción de encubrimiento o cloaking si la detección del agente de usuario falla con los robots de búsqueda
• Las redes de distribución de contenido o CDN pueden decidir no mostrar la versión cacheada de la página, convirtiendo la CDN en inútil
• Obliga a mantener dos sitios por separado

Cuestiones técnicas de la publicación dinámica

Cabecera Vary: User-Agent

La publicación dinámica usa la cabecera HTTP Vary: User-Agent para indicar que la configuración de la página puede variar en función del agente de usuario. De esta forma, los robots saben que deben emplear otros agentes para obtener la versión móvil de la página.

Es bueno saber que la cabecera Vary no es una metaetiqueta y que tampoco se encuentra en el código HTML de la página. Es un valor incluido en la cabecera que devuelve el servidor:

GET /page-1 HTTP/1.1
Host: www.example.com
(…resto de cabeceras HTTP solicitadas…)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(… resto de cabeceras HTTP respondidas…)

Para añadir la cabecera Vary: User Agent mediante .htaccess, puedes usar siguiente código:

Header append Vary User-Agent

En WordPress, puedes hacerlo mediante una función en el archivo functions.php:

function add_vary_header($headers) {
$headers[‘Vary’] = ‘User-Agent';
return $headers;
}
add_filter(‘wp_headers’, ‘add_vary_header’);

Si quieres añadir la cabecera sólo en ciertas páginas, puedes usar PHP:

<?php
header(“Vary: User-Agent, Accept”);
?>

En Nginx, usa el módulo ngx_headers_more:

more_set_headers -s 200 “Vary: ” “Accept-Encoding, User-Agent”;

Una vez implementado, ten en cuenta que la respuesta Vary debe ser siempre “User-Agent”, a diferencia de “Accept-Encoding” que es lo que mostraría una página no dinámica. Puedes comprobar las cabeceras Vary HTTP con la herramienta Explorar como Google en WMT, así como con esta otra herramienta de SEOBook.

Detección de agentes de usuario

Una de las desventajas más importantes de las páginas que usan publicación dinámica es que a veces detectan erróneamente el agente de usuario. Esto provoca problemas con las redes de distribución de contenido o CDN, e incluso con el mismo Google.

Para asegurarte de que la detección de agentes de usuario se realiza correctamente, sigue estos consejos:

• Actualiza la lista de agentes de usuario a menudo, especialmente cuando sale un nuevo modelo de móvil al mercado.
• Usa la palabra “mobile” y no sólo el nombre del dispositivo al buscar coincidencias de agentes de usuario.
• No incluyas en la lista al agente Googlebot, ya que el buscador puede detectar encubrimiento o cloaking (mostrar un contenido al usuario y otro al buscador) y aplicar una penalización.

En esta guía de Google tienes más información sobre como implementar la publicación dinámica en tu sitio.

3. URL independientes

Normalmente se crean dos versiones para cada página el sitio, colocando la de móviles en un subdominio o un subdirectorio. Seguramente habrás visto esta implementación en sitios que redirigen a los smartphone al subdominio m.example.com o al subdirectorio example.com/m/.

Las características de URL independientes son:

• Distintas URL para móviles que para equipos de escritorio
• Distinto código HTML para móviles que para equipos de escritorio
• Contenido y disposición de la página en función del dispositivo

Ventajas e inconvenientes de usar URL independientes

Ventajas:

• Más fácil de implementar que la publicación dinámica
• Se pueden ofrecer contenidos y una experiencia de usuario totalmente diferente a los usuarios de móviles
• Permite un seguimiento más segmentado al tener cada versión su propia cuenta de Analytics y Webmaster Tools (también una desventaja)

Inconvenientes:

• Existe el riesgo de contenido duplicado si la implementación no se lleva a cabo correctamente
• Requiere de redirecciones, lo que ralentiza la carga
• Puede que el buscador divida la autoridad del sitio entre las dos versiones
• Los datos de seguimiento se almacenan en cuentas separadas de Analytics y Webmaster Tools (también una ventaja)
• Obliga a mantener dos sitios por separado

Cuestiones técnicas de URL independientes

Rel=”Alternate”

La etiqueta HTML rel=”alternate” se usa para indicar al buscador dónde se encuentra la versión móvil o alternativa de la página.

Por ejemplo, para la página de escritorio http://www.example.com/version-para-escritorio.html, la etiqueta alternate se incluiría en la cabecera del código HTML, tal y como sigue:

<link rel=”alternate” media=”only screen and (max-width: 767px)”
href=”http://m.example.com/version-para-movil.html” >

Este código señala la versión de la página correspondiente para pantallas de 767 pixels o menos y debería incluirse en todas las páginas de escritorio que cuenten con una versión para móviles.

Rel=”Canonical”

La etiqueta HTML rel=”canonical” se usa para indicar al buscador dónde se encuentra la versión para equipos de escritorio de la página.

Por ejemplo, para la página de móviles http://m.example.com/version-para-movil.html, la etiqueta canonical se incluiría en la cabecera del código HTML, tal y como sigue:

<link rel=”canonical” href=”http://www.example.com/version-para-escritorio.html” >

Este código señala la versión de la página correspondiente para equipos de sobremesa y debería incluirse en todas las páginas para móviles que cuenten con una versión de escritorio.

Sitemaps

Un método alternativo a la etiqueta alternate consiste en incluir la versión móvil de cada página en el mapa del sitio.

La notación aceptada es la siguiente:

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
<loc>http://www.example.com/version-de-escritorio.html</loc>
<xhtml:link
rel=”alternate”
media=”only screen and (max-width: 767px)”
href=”http://m.example.com/version-de-moviles.html” />
</url>
</urlset>

Ten en cuenta que aunque los sitemaps evitan tener que incluir la etiqueta alternate, la etiqueta canonical sigue siendo necesaria para evitar la duplicidad de contenidos de la versión móvil.

Redireccionamientos automáticos

Probablemente quieras que los usuarios sean redirigidos automáticamente a la versión correspondiente de su dispositivo. Es decir, que los usuarios de móvil sean enviados a la versión móvil y los usuarios de escritorio a la versión de escritorio, independientemente de la URL introducida en el navegador web.

Google soporta dos tipos de redireccionamientos:

• Redireccionamientos HTTP – Se realizan a partir del agente de usuario que aparece en las cabeceras de solicitud HTTP. Puede implementarse con .htaccess (recomendado) o con PHP. Al contrario de lo que se aconseja para los redireccionamientos en general (que sean 301), en este caso se recomienda emplear 302. Con el visor de redirecciones móviles de Pure Oxigen Labs puedes comprobar los diferentes códigos de respuesta del servidor para varios dispositivos.
• Redireccionamientos JavaScript – Son más lentos que los HTTP ya que es necesario cargar la página antes de ejecutar el código JS. Por tanto, sólo deberías emplearlos en caso de que no puedas emplear redireccionamientos HTTP.

Es importante que los redireccionamientos sean coherentes con las etiquetas alternate y canonical. Al acceder desde un móvil a la versión de escritorio, el sitio debería redirigir hacia la URL indicada por rel=”alternate”, mientras que al acceder desde un equipo de sobremesa a la versión móvil, el sitio debería redirigir a la URL indicada por rel=”canonical”.

Dicho esto, debes saber que Google aconseja proporcionar a los usuarios la opción de no ser redirigidos. Es decir, que los usuarios de móvil tengan la posibilidad de ver la versión de escritorio, y los usuarios de escritorio la de móvil.

Cómo implementar la versión móvil en gestores de contenido o CMS

Si has creado tu web mediante un sistema de gestión de contenidos o CMS, tales como WordPress o Prestashop, estás de suerte. A diferencia de los sitios creados desde cero mediante programación, los CMS cuentan con todo un abanico de opciones para la optimización móvil sin necesidad de escribir una sola línea de código.

A continuación te doy alternativas para los principales CMS:

• WordPress – Si quieres conservar tu diseño actual para equipos de escritorio, los plugins WPtouch y WP Mobile Detector ofrecen una versión alternativa del sitio a los usuarios de móviles. Pero si no te importa cambiar el aspecto del sitio, otra opción es instalar el tema responsive como cualquiera de los que se ofrecen en el directorio de temas. También puedes instalar temas premium de gran calidad como los de Elegant Themes, Woo Themes o incluso Theme Forest. Personalmente prefiero los temas de StudioPress para mis sitios.
• Joomla! – La versión 3 de Joomla! ya viene preparada para móviles. No obstante, si estás usando una versión anterior y quieres conservar la apariencia del sitio, tienes la posibilidad de instalar una extensión como Mobile Joomla! o Responsivizer.
• Drupal – Puedes encontrar información sobre como optimizar tu sitio en la guía para móviles de Drupal. También hay disponibles varios diseños adaptables.
• Prestashop – Desde la versión 1.5, PrestaShop incluye un tema HTML5 preparado para móviles, que también puedes descargar para la versión 1.4. Se ofrece además una gran variedad de plantillas responsive.
• Magento – En el caso de que tu tema no esté preparado para móviles puedes tratar de editarlo, aunque la solución más sencilla es cambiarlo por otro que ya venga optimizado.

Si te decides por instalar una plantilla nueva, te aconsejo que antes de comprarla la pases tanto por la herramienta de prueba de sitios móviles de Google como por test de velocidad PageSpeed Insights. Si la plantilla no da buenos resultados, descártala.

Por último, si tu CMS no es ninguno de los que he comentado, pásate por ésta guía de Google para personalizar el software de tu web. Es más, sigues sin encontrar aclaraciones para tu CMS, te animo a que mandes un mensaje al equipo del buscador para que lo añadan en la próxima revisión.

Ojo con la implementación automática de sitios para móviles

La implementación automática es una alternativa para los propietarios de webs con pocos recursos. Consiste en servicios online que, tras introducir la URL del sitio, generan una versión para móviles al instante y de forma totalmente automatizada.

Los proveedores más conocidos de este servicio son DudaMobile y bMobilized.

Esta opción puede resultar tentadora para aquellos que no pueden permitirse contratar especialista, pero presenta inconvenientes que no deben pasarse por alto:

• La versión móvil puede ubicarse en el dominio de un tercero – Quizá vaya en el dominio del proveedor del servicio, en cuyo caso el servicio no te interesa. La versión para móviles deberá localizarse en un subdominio o subdirectorio de tu propiedad, y siempre dentro del dominio donde va la versión de escritorio.
• La versión móvil puede no implementar la etiqueta rel=”canonical” – Puesto que el sitio para móviles funciona mediante URL independientes, la etiqueta canonical debe estar presente en las páginas de móvil y apuntar a la URL de escritorio correspondiente.
• Tienes que implementar la etiqueta rel=”alternate” por tí mismo – La etiqueta alternate debe incluirse en las páginas de la versión de escritorio y apuntar a la URL de móvil correspondiente. Es casi seguro que tú serás el encargado de añadir las estiquetas alternate, o bien un sitemap con las URL alternativas.

Por tanto, si decides que esta opción es la que más te conviene, asegúrate de que el servicio está libre de cualquiera de estos problemas antes de suscribirte a un plan.

Mejores prácticas en SEO para móviles

Puede parecer que los principios de SEO tradicionales, tales como accesibilidad, usabilidad y contenido valen exáctamente igual para móviles. Sin embargo, debido a que los smartphones se usan de forma muy diferente a los equipos de escritorio, estas prácticas no son eficaces .

Si empleas los métodos SEO de toda la vida para la versión móvil de tu sitio, no verás resultados. Pero si en su lugar aplicas prácticas SEO específicas para móviles, todo empezará a funcionar.

Estos son los principios fundamentales:

• No bloquees CSS, JavaScript ni imágenes – A día de hoy Google procesa las páginas web de la misma forma que lo hacen los navegadores, para lo cual necesita acceder a los archivos CSS, JS e imágenes. Si bloqueas estos recursos el buscador no podrá evaluar la versión móvil y, como consecuencia, es posible que tus rankings se vean afectados.
• Mejora la velocidad de carga – A menos que el usuario esté conectado por WiFi, la conexión desde smartphones será más lenta que en equipos de escritorio, de ahí que la velocidad del sitio es una prioridad. Además de reducir el peso de las páginas, es recomendable hacer cosas como aprovechar la caché del navegador y habilitar la compresión. Para medir la velocidad de carga usa las herramientas PageSpeed de Google y Mobitest de Akamai.
• Usa las palabras clave adecuadas – Ten en cuenta que los usuarios de móviles buscan de forma diferente a como lo hacen los de escritorio. Puesto que teclear en una pequeña pantalla es incómodo, prefieren términos cortos y a menudo aceptan las sugerencias del buscador. La herramienta KeywordTool.io es un gran aliado a la hora de buscar palabras clave para móviles.
• Adapta los títulos y descripciones – Deben tener una longitud acorde al espacio disponible en los listados de búsqueda, más reducido que en equipos de escritorio.
• Usa el marcado Schema.org – Debido al reducido tamaño de las pantallas, los fragmentos enriquecidos que aparecen en las páginas de resultados son más prominentes y tienen más probabilidades de recibir clics.
• Optimiza para la búsqueda local – Si tu negocio funciona de forma local, no olvides optimizar también este componente, prestando especial atención al trío nombre, dirección y teléfono en todas las páginas. Aquí tienes una chuleta para el SEO local.

En cuanto al diseño, considera lo siguiente:

• No uses flash – Si el teléfono no es capaz de reproducir archivos SWF, el usuario no verá nada. Si es vital añadir efectos, limítate a HTML5.
• No uses ventanas emergentes o pop ups – Proporcionan una experiencia de uso nefasta al ocupar toda la pantalla y ser muy difíciles de cerrar. Lo más frecuente ante un pop up es que el usuario rebote y se marche a otro sitio que no los use.
• Diseña para el pulgar – Piensa que el usuario va a emplear el pulgar para navegar por tu web. Adapta el tamaño de los botones para evitar pulsaciones accidentales y libera el camino para hacer scroll. Asimismo, cuida que los menús puedan desplegarse con un toque y asegúrate de incluir espacio suficiente entre las opciones. Las herramientas MobileTest,me y Screenfly muestran cómo se verá el sitio en diferentes dispositivos.

No olvides que los sitios para móviles son muy propensos a errores, así que además de seguir estas prácticas te recomiendo echar un vistazo a la página de Google sobre errores frecuentes en los diseños para móviles.

¿Ya sabes cómo optimizar tu sitio para móviles?

Imagen Flickr Creative Commons vía Kārlis Dambrāns