Cómo crear una versión móvil de tu web

Desde hace años que se viene hablando de las versiones móviles de los sitios web, sobre todo desde la revolución de los smartphones, pero desde hace 2-3 años a esta parte lo que se intuía como una opción es ya una necesidad, tanto por el cambio del comportamiento de los usuarios, que cada vez usan más sus dispositivos móviles incluso superando ya a la navegación de escritorio, como por su incidencia en los resultados de búsqueda que incluso Google ha anunciado.

Ofrecer a los usuarios y a los robots de los buscadores una versión móvil de nuestra web es ya una necesidad si queremos que nuestro proyecto online arraigue con fuerza, y para eso tenemos 3 opciones posibles.

Diseño web adaptable

Este tipo de diseño es la mejor opción para la mayoría de sitios web.
El diseño adaptable o responsive es aquel que adapta la estructura y los contenidos al tamaño de la pantalla del usuario tratando de facilitar el acceso a la web en pantallas más pequeñas.

Este tipo de diseño web tiene múltiples ventajas como puede ser el ahorro de recursos ya que el sitio web es el mismo tanto para dispositivos móviles como para navegadores de escritorio y el mantenimiento o la actualización es más sencillo. Además cualquier acción que se lleve a cabo (SEO, PPC, Analítica web…) se realiza tanto para los usuarios móviles como para los de escritorio al mismo tiempo.

Este tipo de diseño puede presentar algunos inconvenientes en determinados proyectos que necesiten de requerimientos muy específicos y que su adaptación a pantallas más pequeñas no sea viable por la propia naturaleza del servicio, pero éstos son casos, muy concretos y poco frecuentes.

Contenido dinámico

Esta solución presenta 2 versiones web, una para móvil y otra para escritorio, pero manteniendo siempre la misma URL.
Es la segunda opción recomendada por Google en el caso de que no pueda llevarse a cabo un diseño adaptable.

En esta opción se debe prestar especial atención en la forma en la que se dirige a la versión móvil tanto a los usuarios como a los robots de los buscadores, y deben identificarse las cadenas de agente de usuario del navegador para su correcto funcionamiento, utilizando además la cabecera “Vary HTTP” e informar al robot mobile de los buscadores del contenido para estos dispositivos.
Si quieres conocer algo más sobre su implementación de esta cabecera vista esta página para desarrolladores de Google

Esta opción nos permitirá un mayor control sobre la versión móvil y de escritorio ya que se desarrollan de forma independiente y además aprovechará por ejemplo, como la versión responsive, la fuerza de nuestras campañas SEO.
Por contra nos exigirá mayor cantidad de recursos ya que tendremos que desarrollar de forma paralela 2 versiones de nuestra web

Sitios web independientes

Con mucho la opción menos recomendada de entre las que se tratan en este artículo.
Esta opción también presenta 2 versiones web diferentes, una para los dispositivos móviles y otra para los de escritorio pero dirigiendo a cada grupo de usuarios a una URL diferente.
La redirección se lleva a cabo identificando las cadenas del agente de usuario y enviado a los usuarios a su versión web correspondiente según está información.

El caso más habitual de las 2 versiones de URL sería algo así:

  • Versión móvil: http://movil.midominio.es
  • Versión escritorio: http://www.midominio.es

En esta opción se debe prestar especial atención a las etiquetas que se deben añadir en cada versión de la web para que los robots de los buscadores entiendan la relación entre ambas y sepan cual es el contenido que debe indexarse y cual es el contenido alternativo para los móviles y tabletas.

Las etiquetas a implementar sería así:

Para la versión de escritorio se empleará la etiqueta alternate:

<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://movil.midominio.es" >

Para la versión móvil se empleará la etiqueta canonical:

<link rel="canonical" href="http://www.midominio.es" >

Además de esto, se debe incluir en el sitemap del sitio web ambas versiones para que los robots sean capaces de indexar ambas versiones de forma más eficiente y rápida, quedando de la siguiente manera

<?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.midominio.es
<xhtml:link rel="alternate" media="only screen and (max-width: 640px)"
href="http://movil.midominio.es" />
</url>
</urlset>

Esto es todo. Espero que te haya servidor como ayuda u orientación a la hora de saber que tipo de sitio web móvil se ajusta más a tus necesidades.

Soy Consultor SEO

Puedo ayudar a su proyecto online a conseguir la visibilidad que necesita