Come reindirizzare gli utenti mobili sul tuo sito Web
Hai mai provato a digitare l’URL m.facebook.com sul tuo desktop? Provalo, e vedrete che il sito sembra strano sul grande schermo.
Allo stesso modo, prova ad aprire un sito Web locale casuale sul tuo telefonino. Potresti imbatterti in alcuni siti che non sono ottimizzati per i dispositivi mobili e quindi ti butta fuori a prima vista. Tali siti hanno la tendenza a perdere il loro pubblico mobile ai loro concorrenti.
Responsive Web Design
In questi giorni, tutte le buone piattaforme CMS consentono di costruire siti web utilizzando responsive design, che si adatta a seconda delle dimensioni dello schermo.
È importante rivedere come appare il tuo sito web su diversi dispositivi – questo può significare la differenza tra mantenere i visitatori impegnati sul tuo sito web e perderli, per non tornare mai più.
E ‘ importante ricordare anche che da quando Google si è trasferito a mobile first indicizzazione, la versione mobile del tuo sito web è ciò che conta per Google, il che significa che è improbabile che eseguire bene nella ricerca se provoca i visitatori di avere una cattiva esperienza utente.
Siti Web per dispositivi mobili
Mentre sta diventando sempre più raro, alcune aziende preferiscono ancora avere un sito Web separato per gli utenti mobili. Questo viene fornito con un sacco di potenziali problemi che possono essere facilmente evitati.
Controlla per assicurarti che il tuo sito web sia mobile friendly
Puoi controllare che il tuo sito web sia stato configurato correttamente per dispositivi mobili eseguendo una recensione gratuita di WooRank.
Quando si scende lungo il percorso separato del sito web mobile, ci sono due cose importanti che devono essere curate al fine di garantire una grande esperienza di navigazione mobile per i tuoi utenti mobili:
- Creare un sito web mobile che fornisce una grande esperienza utente
- Reindirizzare il sito per gli utenti mobili
Naturalmente, se si dispone di un sito web mobile creato utilizzando strumenti per responsive web design, non si dovrebbe preoccupare di reindirizzare i visitatori mobili.
Reindirizzare il tuo sito Web mobile
Se crei un sito Web mobile separato ma non lo configuri per reindirizzare i tuoi utenti mobili nel modo giusto, tutto il tempo e gli sforzi messi nella creazione di un sito Web mobile andrebbero sprecati.
Quindi, oggi ci accingiamo a discutere i diversi modi in cui è possibile reindirizzare gli utenti mobili al tuo sito mobile. I reindirizzamenti sono applicabili solo se si dispone di un sito Web mobile separato.
Come faccio a reindirizzare a un sito mobile?
Ora che stai per imparare come reindirizzare i tuoi utenti mobili al tuo sito Web mobile, spieghiamo come funziona il reindirizzamento.
C’è il browser desktop per gli utenti di desktop e browser mobili per gli utenti di dispositivi mobili. Entrambi questi tipi di browser inviano dati sotto forma di “user-agent” al server web in cui risiede il tuo sito web. Questo’ user-agent ‘ contiene informazioni che indicano al server Web il tipo di dispositivo in cui viene aperto il browser. Queste informazioni includono il nome del browser, la versione e altre informazioni sul sistema operativo.
Ad esempio, prova a inserire il seguente URL sullo smartphone – detectmobilebrowser.com. Le informazioni che vedi sono in qualche modo simili alle informazioni inviate al tuo server Web da tutto il dispositivo mobile da cui si accede al tuo sito web.
Oltre al metodo di rilevamento ‘user-agent’, c’è un altro fattore che aiuta a rilevare gli utenti mobili. Questo fattore è la risoluzione dello schermo. Tuttavia, con i dispositivi moderni, le risoluzioni dello schermo sono più alte per schermi di smartphone ancora più piccoli. Quindi il fattore user-agent è il metodo più comune utilizzato per identificare gli utenti mobili.
Ora, veniamo al lavoro e parlare dei vari metodi con cui è possibile applicare un reindirizzamento al tuo sito per gli utenti mobili.
- Il metodo Plugin
- Il metodo Javascript
- Il metodo PHP
- Il .Metodo htaccess
- Il nuovo metodo CSS @media
Il metodo Plugin
Se si utilizza una piattaforma di Content Management System (CMS) come WordPress o Joomla, siete fortunati. Hanno plugin già pronti che aiutano a reindirizzare gli utenti mobili al tuo sito web mobile.
Alcuni di questi plugin di reindirizzamento mobile specifici per CMS sono i seguenti:
Per WordPress – Simple Mobile URL Redirect, WordPress Mobile Pack
Per Joomla-Simple Mobile Detection
Per Magento-URL Redirect
Per Drupal-Simple Mobile Redirect, Mobile JS Redirect
Se il tuo sito web viene creato in qualsiasi altro CMS, prova una ricerca su Google per un plugin che aiuta con i reindirizzamenti mobili per quel particolare CMS.
Il metodo JavaScript
Utilizzando un codice JavaScript è possibile reindirizzare i visitatori mobili al tuo sito mobile. Questo codice JS può rilevare le dimensioni dello schermo o l’agente utente.
Il codice JS che utilizza le dimensioni dello schermo può essere trovato nel seguente articolo: Come reindirizzare il tuo sito web alla sua versione mobile.
Il codice JS che utilizza l’user-agent-questo codice nel seguente articolo: Redirect dispositivi mobili.
Puoi applicare entrambi questi set di codici al tuo sito. Tuttavia, ci sono aspetti negativi di entrambi questi metodi.
Nel metodo delle dimensioni dello schermo, si sta definendo la risoluzione dello schermo, ma in questi giorni abbiamo schermi di dispositivi portatili più piccoli con una risoluzione più elevata. Questo può finire nel rilevamento non corretto degli utenti mobili.
Nel metodo user-agent, è difficile tenere traccia di ogni nuovo e imminente user-agent e aggiungerli al codice JS. Ci sono molti user-agent e questo continua a cambiare costantemente con lo sviluppo delle tecnologie. Ad esempio, dai un’occhiata a questo ampio elenco di user-agent.
E il più grande svantaggio di tutti è per gli utenti che non hanno JavaScript installato sui loro telefoni. Anche se, la maggior parte dei telefoni sono dotati di JavaScript alcuni scelgono di disabilitarlo. Alcuni vecchi modelli Blackberry non supportano JavaScript. Per superare questi ostacoli, è possibile utilizzare il reindirizzamento lato server per i siti codificati in PHP o ASP.
Il metodo PHP
Se il tuo sito è codificato in PHP puoi usare questo metodo per reindirizzare i tuoi utenti mobili. Il vantaggio di utilizzare questo metodo è che non si è limitati ai browser che girano su JavaScript. Tuttavia, dovrai elencare più user-agent.
Affinché questo script funzioni, le estensioni della pagina devono essere .php e il tuo account di hosting devono supportare PHP. Aggiungi il seguente codice alla sezione
del tuo sito web.
<?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"; } ?>Puoi trovare questo codice nel seguente articolo: Simple PHP Mobile Website Redirect Code.
Sostituisci http://m.site.com con l’URL del tuo sito mobile.
Il.metodo htaccess
Un altro metodo alternativo di reindirizzare l’utente mobile al tuo sito web mobile, in base al tipo MIME il browser supporta, è il .metodo htaccess. Ad esempio, se il tipo di browser supporta il tipo MIME che include WML (Wireless Markup Language), il browser proviene da un dispositivo mobile.
È possibile inserire il codice consigliato in questo articolo intitolato Redirect a un sito mobile con .htaccesso.
Ma prima di incollare questo codice, assicurati di eseguire il backup del tuo esistente .file htaccess. Installazione del .codice htaccess in modo errato può causare problemi nel tuo sito. Se non siete sicuri di come farlo da soli chiedere l’aiuto di uno sviluppatore web.
Sostituisci http://m.example.com con l’URL del tuo sito web mobile.
Il nuovo metodo CSS @media
CSS ha un metodo integrato per rilevare i browser mobili. Quindi visualizza gli stili CSS in base alle dimensioni della finestra del browser. Per questo non è necessario un sito mobile separato. Sono necessari due fogli di stile all’interno di una pagina Web, il primo per il tipo di supporto “schermo” (per monitor desktop) e l’altro per il tipo di supporto “palmare” (per smartphone).
Per implementare questo metodo è necessario incollare il seguente set di codici nel tag
del 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 />Troverete questo codice e molte altre varianti in questa pagina intitolata Media Query per dispositivi standard.
Ci sono molti aspetti negativi dell’utilizzo di questo metodo. Richiede l’aggiunta di un enorme set di codice CSS al sito. Ci sono ancora alcuni dispositivi che non supportano i tipi di supporti “palmari” e rendono le pagine con le impostazioni di visualizzazione “schermo”.
Quindi ci sono molti modi per reindirizzare gli utenti mobili al tuo sito mobile, come elencato sopra. Puoi inserire più script nella sezione head del tuo sito Web, ad esempio lo script che rileva le dimensioni dello schermo e gli interpreti.
Ma il tuo lavoro non è fatto fino a quando non hai i tuoi reindirizzamenti mobili che funzionano bene anche per i bot dei motori di ricerca. In particolare, nel caso di Google, ci sono alcune configurazioni che è necessario fare in modo che si differenziano tra l’URL del desktop e URL mobile.
Per ulteriori informazioni, leggi il blog di Google webmastercentral sui cambiamenti nelle classifiche dei risultati di ricerca degli smartphone e le informazioni sulle tecniche di reindirizzamento supportate da Google.
Devi aggiungere un URL canonico al tuo sito Web mobile, in modo che Google comprenda la relazione tra l’URL del tuo cellulare e l’URL del desktop.
Per aiutare Googlebot a scoprire la posizione delle pagine mobili del tuo sito, Google raccomanda che i siti web debbano:
Aggiungere un tag rel=”alternate” sulla pagina desktop che punta all’URL mobile corrispondente.
Aggiungi un tag rel=”canonical” sulla pagina mobile che punta all’URL del desktop corrispondente.
Ciò consente ai crawler di Google di comprendere la relazione tra i due URL: desktop e mobile.
Dopo aver inserito reindirizzamenti corretti sul tuo sito per gli utenti mobili, è il momento di verificare se i reindirizzamenti funzionano bene per diversi dispositivi. Testarlo manualmente su qualsiasi dispositivo smartphone disponibile è un modo di andare su di esso. Ma è anche possibile utilizzare questi emulatori mobili per testare il corretto rendering del tuo sito mobile su diversi dispositivi mobili.
Ricorda, l’uso corretto dei reindirizzamenti mobili è un passo fondamentale per garantire che il tuo sito web mobile sia adatto ai motori di ricerca. Se il tuo sito web non viene reindirizzato bene per gli utenti mobili si può anche perdere un sacco di aziende di valore. Quindi, sia per SEO così come cambiamenti positivi nei tassi di conversione è necessario intraprendere azioni immediate per ottenere il vostro sito web reindirizzato per gli utenti mobili utilizzando uno dei metodi di cui sopra.
Questo post del blog è stato aggiornato il 15 gennaio 2020