Como redirecionar usuários móveis em seu site
você já tentou digitar o URL m.facebook.com no seu desktop? Experimente, e você verá que o site parece estranho na tela grande.Da mesma forma, tente abrir um site local aleatório no seu celular. Você pode se deparar com alguns sites que não são otimizados para dispositivos móveis e, portanto, isso o deixa fora à primeira vista. Esses sites tendem a perder seu público móvel para seus concorrentes.
Web Design Responsivo
atualmente, todas as boas plataformas CMS permitem que você crie sites usando design responsivo, que se adapta dependendo do tamanho da tela.
é importante revisar como seu site aparece em diferentes dispositivos – isso pode significar a diferença entre manter seus visitantes engajados em seu site e perdê-los, para nunca mais voltar.
é importante mencionar também que, desde que o Google mudou para a primeira indexação móvel, a versão móvel do seu site é o que conta para o Google, o que significa que é improvável que tenha um bom desempenho na pesquisa Se fizer com que os visitantes tenham uma experiência de usuário ruim.
sites móveis
embora esteja se tornando cada vez mais incomum, algumas empresas ainda preferem ter um site separado para usuários móveis. Isso vem com muitos problemas potenciais que podem ser facilmente evitados.
verifique se o seu site é compatível com dispositivos móveis
você pode verificar se o seu site foi configurado corretamente para dispositivos móveis executando uma revisão gratuita do WooRank.
ao seguir a rota separada do site móvel, existem duas coisas importantes que precisam ser cuidadas para garantir uma ótima experiência de navegação móvel para seus usuários móveis:
- crie um site móvel que ofereça uma ótima experiência de usuário
- redirecione seu site para usuários móveis
claro, se você tiver um site móvel criado usando ferramentas para web design responsivo, não precisará se preocupar em redirecionar seus visitantes móveis.
redirecionar seu site móvel
se você criar um site móvel separado, mas não configurá-lo para redirecionar para seus usuários móveis da maneira certa, todo o tempo e esforço colocados na criação de um site móvel seria desperdiçado.
portanto, hoje vamos discutir as diferentes maneiras pelas quais você pode redirecionar usuários móveis para o seu site móvel. Os redirecionamentos só são aplicáveis se você tiver um site móvel separado.
Como faço para redirecionar para um site móvel?Agora que você está prestes a aprender como redirecionar seus usuários móveis para o seu site móvel, vamos explicar como o redirecionamento funciona.
existe o navegador de desktop para usuários de desktop e navegadores móveis para usuários de dispositivos móveis. Ambos os tipos de navegador enviam dados na forma de um’ agente do Usuário ‘ para o servidor da web onde seu site reside. Este’ user-agent ‘ contém informações que informarão ao servidor da web o tipo de dispositivo em que o navegador está sendo aberto. Essas informações incluem o nome do navegador, versão e outras informações sobre o seu sistema operacional.
por exemplo, tente inserir o seguinte URL no seu smartphone – detectmobilebrowser.com. as informações que você vê lá são um pouco semelhantes às informações enviadas ao seu servidor web de todo o dispositivo móvel de onde seu site está sendo acessado.
além do método de detecção’ user-agent’, há mais um fator que ajuda a detectar usuários móveis. Esse fator é a resolução da tela. No entanto, com dispositivos modernos, as resoluções de tela são maiores para telas de smartphones ainda menores. Portanto, o fator user-agent é o método mais comum usado para identificar usuários móveis.
agora, vamos começar a trabalhar e falar sobre os vários métodos pelos quais você pode aplicar um redirecionamento ao seu site para seus usuários móveis.
- O Plugin Método
- O Método Javascript
- O PHP Método
- O .método htaccess
- o novo método CSS @ media
o método do Plugin
se você estiver usando uma plataforma de Sistema de gerenciamento de conteúdo (CMS), como WordPress ou Joomla, você está com sorte. Eles têm plugins prontos que ajudam a redirecionar usuários móveis para o seu site móvel.
alguns desses plugins de redirecionamento móvel específicos do CMS são os seguintes:
for WordPress –simple mobile URL Redirect, WordPress Mobile Pack
For Joomla – simple mobile Detection
For Magento – URL Redirects
For Drupal-Simple Mobile Redirect, Mobile js Redirect
se o seu site for criado em qualquer outro CMS, tente uma pesquisa no Google por um plugin que ajude com redirecionamentos móveis para esse CMS específico.
o método JavaScript
usando um código JavaScript você pode redirecionar seus visitantes móveis para o seu site móvel. Este código JS pode detectar o tamanho da tela ou o agente do Usuário.
o código JS que usa o tamanho da tela pode ser encontrado no seguinte artigo: como redirecionar seu site para sua versão móvel.
o código JS que usa o user-agent – este código no seguinte artice: redirecionar dispositivos móveis.
você pode aplicar esses dois conjuntos de códigos ao seu site. No entanto, existem desvantagens em ambos os métodos.
no método de tamanho da tela, você está definindo a resolução da tela, mas hoje em dia temos telas de dispositivos portáteis menores com maior resolução. Isso pode acabar na detecção incorreta de usuários móveis.
no método user-agent, é difícil acompanhar cada novo e próximo user-agent e adicioná-los ao código JS. Existem muitos agentes de usuário e isso continua mudando constantemente com o desenvolvimento de tecnologias. Por exemplo, dê uma olhada nesta extensa lista de agentes de usuário.
e a maior desvantagem de todas é para usuários que não têm JavaScript instalado em seus telefones. Embora a maioria dos telefones esteja equipada com JavaScript, alguns optam por desativá-lo. Alguns modelos antigos do Blackberry não suportam JavaScript. Para superar esses obstáculos, você pode usar o redirecionamento do lado do servidor para sites codificados em PHP ou ASP.
o método PHP
se o seu site está codificado em PHP você pode usar este método para redirecionar seus usuários móveis. A vantagem de usar este método é que você não está limitado a navegadores que são executados em JavaScript. No entanto, você terá que listar vários agentes de usuário.
para que este script funcione, suas extensões de Página devem ser .php e sua conta de hospedagem devem suportar PHP. Adicione o seguinte código à seção
do seu site.
<?php $iphone = strpos($_SERVER,"iPhone"); $android = strpos($_SERVER,"Android"); $palmpre = strpos($_SERVER,"webOS"); $berry = strpos($_SERVER,"BlackBerry"); $ipod = strpos($_SERVER,"iPod"); if ($iphone || $android || $palmpre || $ipod || $berry == true) { echo "](https://s3.amazonaws.com/woocms.woorank.com/2020/05/poor-mobile-optimization.png"; } ?>você pode encontrar este código no seguinte artigo: código de redirecionamento de site móvel PHP simples.
substitua http://m.site.com pelo URL do seu site móvel.
O.método htaccess
outro método alternativo de redirecionar o usuário móvel para o seu site móvel, com base no tipo MIME que o navegador suporta, é o.método htaccess. Portanto, por exemplo, se o tipo de navegador suportar o tipo MIME que inclui WML (Wireless Markup Language), o navegador é de um dispositivo móvel.
você pode colocar o código recomendado neste artigo intitulado redirecionar para um site móvel com .htaccess.
mas antes de colar este código, certifique-se de fazer backup do seu existente .arquivo htaccess. Instalando o.o código htaccess incorretamente pode causar problemas em seu site. Se você não tem certeza de como fazer isso sozinho, peça a ajuda de um desenvolvedor web.
substitua o http://m.example.com pelo URL do seu site móvel.
o novo CSS @media Method
CSS tem um método integrado para detectar navegadores móveis. Em seguida, exibe estilos CSS com base no tamanho da janela do navegador. Para isso, você não precisa de um site móvel separado. Você precisa de duas folhas de estilo em uma página da web, a primeira para o tipo de mídia “tela” (para monitores de desktop) e a outra para o tipo de mídia “portátil” (para smartphones).
para implementar este método, você deve colar o seguinte conjunto de códigos na tag
do seu 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 />você encontrará este código e muitas outras variações nesta página intitulada consultas de mídia para dispositivos padrão.
existem muitas desvantagens de usar este método. Ele requer a adição de um enorme conjunto de código CSS para o site. Ainda existem alguns dispositivos que não suportam tipos de mídia ‘portáteis’ e renderizam as páginas com as configurações de exibição ‘tela’.
portanto, existem muitas maneiras de redirecionar usuários móveis para o seu site móvel, conforme listado acima. Você pode colocar vários scripts na seção principal do seu site, por exemplo, o script que detecta o tamanho da tela, bem como os agentes do Usuário.
mas seu trabalho não é feito até que você tenha seus redirecionamentos móveis funcionando bem para bots de mecanismo de pesquisa também. Especialmente, no caso do Google, existem algumas configurações que você precisa fazer para que eles diferenciem entre o URL da área de trabalho e o URL do celular.
para mais informações, leia o blog do Google webmastercentral sobre mudanças nos rankings dos resultados de pesquisa de smartphones e informações sobre técnicas de redirecionamento suportadas pelo Google.
você precisa adicionar um URL canônico ao seu site móvel, para que o Google entenda a relação entre o URL do seu celular e o URL do desktop.
para ajudar o Googlebot a descobrir a localização das páginas móveis do seu site, o Google recomenda que os sites devem:
adicionar uma tag rel=”alternate” na página da área de trabalho que aponta para o URL móvel correspondente.
adicione uma tag rel=”canonical” na página móvel que aponta para o URL da área de trabalho correspondente.Isso permite que os rastreadores do Google entendam a relação entre os dois URLs – desktop e móvel.
depois de colocar redirecionamentos adequados em seu site para seus usuários móveis, é hora de testar se os redirecionamentos funcionam bem para diferentes dispositivos. Testá-lo manualmente em qualquer dispositivo de smartphone disponível é uma maneira de fazer isso. Mas você também pode usar esses emuladores móveis para testar a renderização correta do seu site móvel em diferentes dispositivos móveis.
lembre-se, o uso correto de redirecionamentos móveis é um passo crítico para garantir que seu site móvel seja compatível com mecanismos de pesquisa. Se o seu site não for redirecionado bem para seus usuários móveis, Você também pode estar perdendo muitos negócios valiosos. Portanto, tanto para SEO quanto para mudanças positivas nas taxas de conversão, você deve tomar medidas imediatas para redirecionar seu site para seus usuários móveis usando um dos métodos acima.
esta postagem do blog foi atualizada em 15 de janeiro de 2020