Compatibilità:

WebSite X5 Pro

Google ammette espressamente la configurazione con URL separate per versioni Desktop e Mobile dello stesso Sito ma si raccomanda di utilizzare alcune annotazioni per permettere ai suoi algoritmi di interpretarle correttamente. Nello specifico Google richiede che:

  • Nella Pagina per Desktop venga aggiunto il tag link rel="alternate" che indirizza alla URL per dispositivi mobili corrispondente.
  • Nella Pagina per Mobile venga aggiunto il tag link rel="canonical" che indirizza alla URL per Desktop corrispondente.


Questo tipo di annotazione indica agli algoritmi di Google che le due URL hanno contenuti equivalenti e che dovrebbero essere considerate come un'unica entità anziché come due entità distinte. Questo punto è molto importante dal momento che se le versioni Desktop e Mobile della Pagina sono considerate come due entità distinte, nei risultati di ricerca vengono visualizzate sia la URL desktop sia la URL per dispositivi mobili. In questo caso, inoltre, per entrambe le Pagine il ranking potrebbe calare a causa di una possibile penalizzazione dovuta alla presenza di contenuti duplicati.


Nell'impostare queste annotazioni occorre poi fare attenzione a:

  • mantenere un rapporto di 1:1 tra le Pagine per Desktop e le corrispondenti Pagine per Mobile. In particolare, bisogna evitare di inserire annotazioni in tante Pagine Desktop che si riferiscono a una stessa Pagina Mobile (o viceversa).
  • impostare i rendirizzamente solo fra Pagine realmente correlate.


Lavorando con WebSite X5, il modo più semplice per procedere è creare il Sito per la versione Mobile come una copia esatta del Sito per la versione Desktop: in questo modo, infatti, entrambi i Siti hanno esattamente le stesse Pagine (file con lo stesso nome) ed è semplice impostare una corrispondenza 1:1 fra loro.


Ipotizzando di dover inserire le annotazioni richieste da Google per gestire le versioni Desktop, Tablet e Smartphone di un Sito Web, devi procedere in questo modo:

  • Apri il progetto del Sito per la versione Desktop, vai al Passo 1 - Impostazioni > Statistiche e Codice e apri la sezione Codice.
  • Nel campo Codice personalizzato seleziona l'opzione Prima della chiusura del tag HEAD e scrivi le seguenti annotazioni:
<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.miosito.it/smartphone/[CURPAGE]">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.miosito.it/tablet/[CURPAGE]">


Dopo aver salvato le modifiche effettuate, lavora sul Sito relativo alla versione Tablet:

  • Apri il Progetto del Sito per la versione Tablet e, come per l'altro Progetto, vai al Passo 1 - Impostazioni > Statistiche e Codice e apri la sezione Codice.
  • Nel campo Codice personalizzato selezionare l'opzione Prima della chiusura del tag HEAD e scrivi la seguente annotazione:
<link rel="canonical" href="http//www.miosito.it/[CURPAGE]">
  • Ripeti le operazioni effettuate per il Sito per Tablet anche per il Sito per Smartphone: l'annotazione da inserire rimane invariata.


Per meglio comprendere il funzionamento del processo appena descritto, considera che:

  • Impostando le annotazioni attraverso la finestra Statistiche e Codice, queste vengono automaticamente inserite nel codice di tutte le Pagine dei Siti.
  • Nelle annotazioni, come valore dell'attributo href deve essere inserita la URL della Pagina su cui si sta lavorando: utilizzando la stringa [CURPAGE] il nome del file relativo alla Pagina viene identificato e inserito in automatico dal Programma.
  • Nelle Pagine della versione Desktop del Sito occorre utilizzare il tag link rel="alternate" per dichiarare tutte le alternative disponibili: nel caso specifico è stato ripetuto 2 volte in modo da collegare sia la versione per Tablet che la versione per Smartphone.
  • Nell'annotazione del tag link rel="alternate" è necessario dichiarare anche quando, al posto della versione Desktop, deve essere proposta la versione Smartphone o la versione Tablet di un Sito. Nel codice di esempio riportato, le stringhe di media query definiscono che per risoluzioni inferiori a 480px Google deve proporre la URL della versione Smartphone mentre per risoluzioni comprese tra 481px e 1024px deve deve proporre quella della versione Tablet del Sito.


Nel caso in cui i Siti delle versioni Desktop, Tablet e Smartphone non contengano esattamente le stesse Pagine e/o contengano Pagine fra loro corrispondenti ma con nomi diversi, è necessario intervenire manualmente sul codice di ogni singola Pagina per inserire correttamente le annotazioni necessarie.

  • Apri il progetto del Sito per la versione Desktop. Al Passo 3 - Mappa selezionare la Pagina su cui vuoi lavorare e clicca sul pulsante Proprietà.
  • Nella finestra Proprietà Pagina apri la sezione Esperto e posizionati nel campo Codice personalizzato.
  • Seleziona l'opzione Prima della chiusura del tag HEAD e scrivi le seguenti annotazioni:
<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.miosito.it/smartphone/page-1.html">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.miosito.it/tablet/page-1.html">

Dove http//www.miosito.it/smartphone/page-1.html e http//www.miosito.it/tablet/page-1.html sono le URL delle Pagine del Sito rispettivamente della versione Mobile e della versione Tablet corrispondenti a quella del Sito della versione Desktop a cui stai lavorando.

  • Ripeti l'ultimo passaggio per tutte le Pagine del Sito in modo da inserire in ognuna di esse le annotazioni con le URL delle Pagine per Smartphone e per Tablet corrispondenti.


Un lavoro analogo deve essere fatto per le Pagine del Sito della versione Smartphone e della versione Tablet. In questi casi l'annotazione da inserire è:

<link rel="canonical" href="http//www.miosito.it/desktop/page-1.html">

Dove http//www.miosito.it/desktop/page-1.html è la URL della Pagina del Sito della versione Desktop corrispondente a quella del Sito della versione Smartphone o della versione Tablet a cui stai lavorando.