Cómo redirigir a los usuarios móviles en tu sitio web

¿Alguna vez has intentado escribir la URL m.facebook.com en tu escritorio? Pruébalo y verás que el sitio se ve extraño en la pantalla grande.

Del mismo modo, intenta abrir un sitio web local aleatorio en tu dispositivo móvil. Puedes encontrar algunos sitios que no están optimizados para dispositivos móviles y, por lo tanto, desconciertan a primera vista. Estos sitios tienden a perder su público móvil frente a sus competidores.

Diseño web receptivo

En estos dí­as, todas las buenas plataformas CMS permiten crear sitios web utilizando diseños adaptable, que se modifica según el tamaño de la pantalla.

Es importante revisar cómo aparece tu sitio web en diferentes dispositivos; esto puede significar la diferencia entre mantener a tus visitantes interesados "‹"‹en tu sitio web y perderlos para no volver nunca.

También es importante mencionar que, dado que Google se está enfocando primero en la indexación móvil, la versión móvil de tu sitio web es lo que cuenta para Google, lo que significa que es poco probable que tengas un buen rendimiento en las búsquedas si provocas que los visitantes tengan una mala experiencia de usuario.

Sitios web móviles

Si bien cada vez es menos común, algunas empresas aún prefieren tener un sitio web separado para los usuarios de dispositivos móviles. Esto conlleva muchos problemas potenciales que pueden evitarse fácilmente.

Chequea que tu sitio esté optimizado para móviles

Puedes chequear qué tan optimizado para móviles está tu sitio con un informe gratuito de WooRank.

Si decides tener un sitio web móvil separado, hay dos cosas importantes que deben tenerse en cuenta para garantizar una excelente experiencia de navegación móvil para tus usuarios:

1. Crea un sitio web móvil que brinde una excelente experiencia de usuario
2. Redirecciona tu sitio para usuarios de dispositivos móviles

Por supuesto, si tienes un sitio web para dispositivos móviles creado con herramientas de diseño web receptivo, no tendrí­as que preocuparte por redirigir a tus visitantes móviles.

Redirigir tu sitio web móvil

Si creas un sitio web móvil independiente pero no lo configuras para redirigir a tus usuarios móviles de la manera correcta, todo el tiempo y el esfuerzo dedicados a la creación de un sitio web móvil serán en vano.

Por lo tanto, hoy vamos a discutir las diferentes formas en que puedes redirigir a los usuarios móviles a tu sitio móvil. Los redireccionamientos solo son aplicables si tienes un sitio web móvil independiente.

¿Cómo redirecciono a un sitio móvil?

Ahora que estás a punto de aprender cómo redirigir a tus usuarios móviles a tu sitio web móvil, expliquemos cómo funciona el redireccionamiento.

Existen navegadores de escritorio para usuarios de escritorio y navegadores móviles para usuarios de dispositivos móviles. Ambos tipos de navegadores enví­an datos en forma de 'user-agent' al servidor web donde reside tu sitio web. Este 'agente de usuario' contiene información que le indicará al servidor web el tipo de dispositivo en el que se abre el navegador. Esta información incluye el nombre del navegador, la versión y otra información sobre el sistema operativo.

Ingresa la siguiente URL en tu teléfono inteligente: detectmobilebrowser.com. La información que ves allí­ es algo similar a la información enviada a tu servidor web desde todos los dispositivos móviles desde los que se accede a tu sitio web.

Además del método de detección de 'user-agent', hay un factor más que ayuda a detectar usuarios móviles. Ese factor es la resolución de pantalla. Sin embargo, con los dispositivos modernos, las resoluciones de pantalla son más altas para pantallas de teléfonos inteligentes aún más pequeñas. Por tanto, el factor user-agent es el método más utilizado para identificar a los usuarios móviles.

Ahora, vayamos al grano y hablemos de los diversos métodos mediante los cuales puedes aplicar un redireccionamiento a tu sitio para tus usuarios móviles.

• El método plugin
• El método Javascript
• El método PHP
• El método .htaccess
• El nuevo método CSS @media

El método plugin

Si estás utilizando una plataforma de sistema de gestión de contenido (CMS) como WordPress o Joomla, tienes suerte. Tienen plugins listos para usar que ayudan a redirigir a los usuarios móviles a tu sitio web móvil.

Algunos de estos plugins de redireccionamiento móvil son los siguientes:

Para WordPress - Simple Mobile URL Redirect, WordPress Mobile Pack
Para Joomla - Redirecciones de URL
Para Magento - Recursos técnicos
Para Drupal - Simple Mobile Redirect, Mobile JS Redirect

Si tu sitio web está creado en cualquier otro CMS, intenta buscar en Google un complemento que ayude con las redirecciones móviles para ese CMS particular.

El método JavaScript

Con un código JavaScript, puedes redirigir a tus visitantes móviles a tu sitio móvil. Este código JS puede detectar el tamaño de la pantalla o el agente de usuario.

El código JS que usa el tamaño de pantalla se puede encontrar en el siguiente artí­culo.

El código JS que usa el agente de usuario puedes encontrarlo en el siguiente artí­culo.

Puedes aplicar estos dos conjuntos de códigos a tu sitio. Sin embargo, ambos métodos presentan desventajas.

En el método del tamaño de pantalla, estás definiendo la resolución de la pantalla, pero en estos dí­as tenemos pantallas de dispositivos portátiles más pequeñas con una resolución más alta. Esto puede resultar en una detección incorrecta de los usuarios móviles.

En el método de agente de usuario, es difí­cil realizar un seguimiento de cada agente de usuario nuevo y agregarlo al código JS. Hay muchos agentes de usuario y esto cambia constantemente con las tecnologí­as en desarrollo. Echa un vistazo a esta extensa lista de agentes de usuario.

Y la mayor desventaja de todas es para los usuarios que no tienen JavaScript instalado en sus teléfonos. Aunque, la mayorí­a de los teléfonos están equipados con JavaScript, algunos optan por desactivarlo. Algunos modelos antiguos de Blackberry no admiten JavaScript. Para superar estos obstáculos, puedes utilizar la redirección del lado del servidor para sitios codificados en PHP o ASP.

El método PHP

Si tu sitio está codificado en PHP, puedes utilizar este método para redirigir a tus usuarios móviles. La ventaja de utilizar este método es que no está limitado a navegadores que se ejecutan en JavaScript. Sin embargo, tendrás que enumerar varios agentes de usuario.

Para que este script funcione, las extensiones de tu página deben ser .php y tu cuenta de hosting debe ser compatible con PHP. Agrega el siguiente código a la sección  de tu sitio web.

<? php
$ iphone = strpos ($ _ SERVER ['HTTP_USER_AGENT'], "iPhone");
$ android = strpos ($ _ SERVER ['HTTP_USER_AGENT'], "Android");
$ palmpre = strpos ($ _ SERVER ['HTTP_USER_AGENT'], "webOS");
$ berry = strpos ($ _ SERVER ['HTTP_USER_AGENT'], "BlackBerry");
$ ipod = strpos ($ _ SERVER ['HTTP_USER_AGENT'], "iPod");

if ($ iphone || $ android || $ palmpre || $ ipod || $ berry == true)
{
    echo "œ](https://s3.amazonaws.com/woocms.woorank.com/2020/05/poor-mobile-optimization.png" ;
 }
?>

Puedes encontrar este código en el siguiente artí­culo.

Reemplaza http://m.site.com con la URL de tu sitio móvil.

El método .htaccess

Otro método alternativo para redirigir al usuario móvil a tu sitio web móvil, basado en el tipo MIME que admite el navegador, es el método .htaccess. Por ejemplo, si el tipo de navegador es compatible con el tipo MIME que incluye WML (Lenguaje de marcado inalámbrico), el navegador es de un dispositivo móvil.

Puedes colocar el código recomendado en este artí­culo.

Pero antes de pegar este código, asegúrate de hacer una copia de seguridad de tu archivo .htaccess existente. La instalación incorrecta del código .htaccess puede causar problemas en tu sitio. Si no estás seguro de cómo hacerlo tú mismo, solicita la ayuda de un desarrollador web.

Reemplaza http://m.example.com con la URL de tu sitio web móvil.

El método CSS @media

CSS tiene un método incorporado para detectar navegadores móviles. Luego muestra estilos CSS basados "‹"‹en el tamaño de la ventana del navegador. Para ello, no necesitas un sitio móvil independiente. Necesitas dos hojas de estilo dentro de una página web, la primera para el tipo de medio "screen" (para monitores de escritorio) y la otra para el tipo de medio "handheld" (para teléfonos inteligentes).

Para implementar este método, debes pegar el siguiente conjunto de códigos en la etiqueta  de tu documento HTML.

<br />
/* Smartphones (portrait and landscape) ----------- */<br />
@media only screen<br />
and (min-device-width : 320px)<br />
and (max-device-width : 480px)<br />
/* Styles */<br />

Encontrarás este código y muchas otras variaciones en la página Media Queries for Standard Devices.

Hay muchas desventajas de utilizar este método. Requiere agregar un gran conjunto de código CSS al sitio. Todaví­a hay algunos dispositivos que no son compatibles con los tipos de medios "handheld" y, en su lugar, procesan las páginas con la configuración de visualización "screen".

Hay muchas formas de redirigir a los usuarios de dispositivos móviles a tu sitio móvil, como indicamos anteriormente. Puedes colocar varios scripts en la sección principal de tu sitio web, por ejemplo, el script que detecta el tamaño de la pantalla y los agentes de usuario.

Pero tu trabajo no está terminado hasta que tus redireccionamientos móviles también funcionen bien para los robots de los motores de búsqueda. Especialmente, en el caso de Google, hay algunas configuraciones que debes hacer para que diferencien entre la URL del escritorio y la URL móvil.

Para obtener más información, lee el blog de Google Webmasters sobre [Cambios en el ranking de resultados de búsqueda para teléfonos inteligentes] (https://webmaster-es.googleblog.com/2013/06/cambios-en-el-ranking-de-resultados-de.html) e información sobre [técnicas de redireccionamiento compatibles] (https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls#automatic-redirection).

Debes agregar una URL canónica a tu sitio web móvil, para que Google comprenda la relación entre tu URL móvil y la URL de escritorio.

Para ayudar al robot de Google a descubrir la ubicación de las páginas móviles de tu sitio, Google recomienda que los sitios web:

• Tengan una etiqueta rel="alternate" en la página de escritorio que apunte a la URL móvil correspondiente.
• Tengan una etiqueta rel="canonical" en la página móvil que apunte a la URL de escritorio correspondiente.

Esto permite que los rastreadores de Google comprendan la relación entre las dos URL: escritorio y móvil.

Una vez que hayas colocado los redireccionamientos adecuados en tu sitio para tus usuarios móviles, es hora de probar si los redireccionamientos funcionan bien para diferentes dispositivos. Probarlo manualmente en cualquier dispositivo de teléfono inteligente disponible es una forma de hacerlo. Pero también puedes utilizar estos emuladores móviles para probar el renderizado de tu sitio móvil en diferentes dispositivos móviles.

Recuerda, el uso correcto de los redireccionamientos móviles es un paso fundamental para garantizar que tu sitio web móvil sea compatible con los motores de búsqueda. Si tu sitio web no está bien redirigido para tus usuarios móviles, es posible que termines perdiendo conversiones. Por lo tanto, tanto para el SEO como para los cambios positivos en las tasas de conversión, debes tomar acciones inmediatas para que tu sitio web sea redirigido para tus usuarios móviles utilizando uno de los métodos anteriores.