Redireccionar a versión móvil con htaccess

por CTD
REDIRECCIONAR A VERSIÓN MÓVIL

[vc_row][vc_column][vc_column_text]

Redireccionar a versión móvil es algo que últimamente me han solicitado algunos de mis clientes. Y es que a menudo disponen de una página web antigua que no ofrece una versión adaptada para dispositivos móviles. También he tenido casos en los que la versión móvil, aún siendo responsive, no convencía en diseño y/o funcionalidad y es entonces cuando la opción de realizar una página web específica y que sólo se ejecute en móvil o tablet, coge fuerza.

Hay cientos de motivos que podríamos enumerar y necesitaríamos otro blog por los cuales un sitio web debe disponer de una buena versión para dispositivos móviles. Yo lo que voy a hacer es indicar los que en mi opinión son los más importantes y determinantes ya que, aunque parezca mentira, aún hay muchísimas webs por ahí que no están optimizadas responsivamente o no tienen versión móvil.

Si no tienes versión móvil no existes

Desde hace algunos años, creo que fue por los vuelos del 2014, son más los usuarios que navegan por Internet con su móvil que con cualquier otro aparato, ya sea ordenador de sobremesa, portátil, tablet etc. Luego, lo más probable es que la gente que entra en tu web lo haga desde un móvil. Un ser humano no tarda ni dos segundos en decidir si se queda en una web a la que acaba de entrar. Para tomar esa decisión se tienen en cuenta unos cuantos factores, pero sin duda, uno de los más importantes es el primer impacto visual que la web genera. Como sabrás, al entrar en en una página que no esta optimizada para móviles, lo que hace al adaptarse a la pequeña pantalla de nuestro dispositivo es, en la mayoría de los casos, empequeñecer todo el contenido lo que obliga a agrandar la pantalla para poder verlo según convenga. En algunos casos, es aún peor, ya que, según como esté hecha la web los elementos no se ordenan correctamente o no se redimensionaran como deben y se ven fatal.  No hace falta mencionar cual es el resultado: el usuario vuelve atrás, a los resultados de búsqueda y pincha en la web de la competencia.

Redireccionar a versión móvil es una práctica que cada vez es más habitual no sólo a nivel de aspecto gráfico, visual o funcional sino que también en lo que tiene que ver con el posicionamiento del sitio. Son muchos los ítems que hay que optimizar para que Google lo tenga en cuenta y sume puntuación a nuestro global de posicionamiento. Una velocidad de carga satisfactoriamente rápida de la web es un concepto en el que el buscador pone especial énfasis en que toda web debe de disponer y hasta ofrece una herramienta gratuita como es PageSpeed Insights para que los desarrolladores o los SEO, podamos ver qué carencias tiene nuestro sitio, y como las podemos enderezar. Si escaneas tu web con PageSpeed Insights podrás ver como la herramienta te ofrece los resultados de optimización de la web por un lado para escritorio y por otro, para movil. De alguna u otra forma, el propio Google ya te está indicando que debes diferenciar entre las dos versiones a la hora desarrollar el sitio web.

Hoy en día todas las plantillas de WordPress o en HTML vienen diseñadas de forma responsiva o lo que es lo mismo: adaptadas a cualquier dispositivo móvil. Si lo que nos encontramos es un proyecto que nos han solicitado que se haga a medida, tendremos que hacer uso de librerías de desarrollo como bootstrap para estar seguros de que la web se va a poder ver en todos los dispositivos.

Redireccionar a versión móvil pensando en el posicionamiento

Es muy interesante tener en cuenta que disponer de una buena versión móvil optimizada puede hacer que el posicionamiento de nuestra web mejore mucho. Me he encontrado con casos de clientes que, sin exagerar, viven de su versión móvil. En la época pre responsive, en algunos proyectos se realizaba la web y luego la versión movil con el típico subdominio: «m.dominio.com». Pocos fueron los proyectos que realicé poniendo en práctica esa metodología pero debo decir que la versión móvil, en la mayoría de los casos, se posicionaba muchísimo mejor que la de escritorio y que suponía la mayor parte de trafico del sitio. Incluso hoy en día, recuperando algunas de esas versiones móvil antiguas y escaneándoals con PageSpeed Insights la puntuación suele ser muy buena.

Si tenemos en cuenta, como he mencionado antes, que ya hay mayoría de usuarios que prefieren navegar con móvil que con cualquier otro dispositivo, disponer de una versión dedicada para móviles puede ser una gran apuesta para mejorar el posicionamiento de tu web.

Por tanto, si tienes una web antigua pero con un diseño que aún se aguanta, que no es responsiva, y lo que te interesa es ganar tráfico te puedes plantear perfectamente la realización de una versión sólo para dispositivos móviles y redireccionar a versión móvil desde el servidor.

Procedimiento para redireccionar a versión móvil con .htacces

Lo primero que hay que hacer es decidir donde vamos a instalar la versión móvil de nuestra web. Lo que yo recomiendo es hacerlo como se ha hecho toda la vida, es decir. instalarlo en un subdominio del dominio principal. Ejemplo: m.midominio.com. Y ya podemos desarrollar la versión móvil en el subdominio para redireccionar a versión móvil más tarde.

Como ya sabemos, los navegadores, al acceder a tu página web adaptan el HTML de la misma automáticamente según la resolución de pantalla. En el caso que nos atañe, la problemática empieza cuando esa resolución es inferior a una pantalla de escritorio, ya que es en ese momento cuando el navegador detecta que estamos en un dispositivo móvil. Bien, hay diversas maneras de indicar a los navegadores, en qué momento queremos que nuestra versión de escritorio deje de serlo y pase a ser la de móviles. Mi preferida y la que mejor resultados me ha dado es la de hacer uso de directivas (fragmentos de código) en el fichero .htacces que hoy por hoy se encuentra, o debería encontrarse en todas y cada una de las webs si el tipo de servidor es Apache.

El fichero .htaccess se suele encontrar en la raíz del proyecto junto a el resto de ficheros y directorios principales de la web. Se denomina así siendo una abreviatura  de «Hypertext Access» y en él, podemos configurar todo tipo de directrices que queramos que el servidor realice en el sitio web. Se puede acceder a él fácilmente mediante FTP o, segun donde tengas el hosting, en el visor de archivos del panel de control.

ATENCIÓN: antes de realizar cualquier cambio en el .htaccess, hay que hacer una copia de seguridad

Pues si, ojo con eso, por que una de las carencias que tiene seguir este procedimiento es que el fichero .htaccess es muy delicado: es posible que dejarnos un simple punto o unas comitas de más, eso haga que la web no funcione y nos retorne un error 500 o similar que nos puede hacer entrar en pánico. Por tanto, lo más conveniente es realizar una copia de seguridad (te lo descargas en el Escritorio por ejemplo) y siempre tendrás el archivo originario por lo que pueda pasar.

Normalmente, no dispondremos de ningún editor asociado para la edición de el fichero .htaccess así que al ejecutarlo, lo más seguro es que se abra en el típico bloc de notas o similar según el sistema operativo en el que nos encontremos.

Cuando lo abramos veremos una serie de codificaciones que, si no eres un crack en servidores, lo más normal es que no entiendas absolutamente nada, pero da igual. Lo único que hay que tener claro es que hay que buscar donde dice:

RewriteEngine On
RewriteBase /

Hay que pegar el siguiente galimatías:

RewriteCond %{HTTP_USER_AGENT} (android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|mobile.+firefox|netfront|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ ce|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-) [NC]
RewriteRule ^$ https://m.midominio.com [R,L]

Naturalmente, donde pone «m.midominio.com» hay que substituirlo por el subominio donde se ha instalado la versión móvil de nuestro proyecto y listo.

Como ves, utilizar el htacces para redireccionar a versión móvil es muy interesante. No tienes que tocar código de ficheros de la propia web y como es una orden que le das diréctamente al servidor, es rápido, simple, limpio y efectivo. Y además, el procedimiento es el mismo en cualquier web.

Si tienes alguna duda, deja un comentario.

Gracias al Blogger que me alentó a publicar este post

 

 

[/vc_column_text][/vc_column][/vc_row]

Esto, también te interesa ...

Dejar comentario