Responsive design

Cos’è il design reattivo?

Meglio conosciuta come “Responsive Design”, la compatibilità mobile si adatta alla risoluzione dello schermo dei dispositivi. Avrai notato che in alcune pagine i testi sono a volte illeggibili, i pulsanti sono troppo piccoli per cliccarci sopra o anche un menu non adatto alla tua visualizzazione. Responsive è l’arte e il modo di adattarsi a diversi supporti, come lo schermo fisso di un PC, lo schermo di un laptop, un tablet e soprattutto uno smartphone. Dal 21 aprile 2015, aggiornato al 16 maggio 2016, tutti i siti non compatibili con i formati mobile (smartphone e tablet) saranno penalizzati in termini di referenziazione naturale e quindi vedranno un peggioramento del proprio posizionamento nei risultati di ricerca. a causa della loro ergonomia.Ci sono 3 modi per avere a sito web con l’etichetta “mobile compatibile”. Il primo, e probabilmente il più utilizzato, è il Responsive Design. Quest’ultimo tiene conto dello stesso URL, nonché dello stesso codice HTML. Il secondo è il servizio dinamico che utilizza lo stesso indirizzo, ma non lo stesso codice sorgente a seconda del supporto su cui viene visualizzata la pagina. Infine, l’ultimo non tiene conto dell’url o del codice, è l’URL distinto.

Non ci sono preferenze riguardo a questi 3 tipi di formati URL con Google. L’unico criterio importante è l’accessibilità a tutte le pagine del tuo sito da parte dei robot di Google. Vedremo, in secondo luogo, che Google consiglia l’utilizzo del Responsive Web Design.

Quali azioni consiglia Google per i dispositivi mobili?

Evita le animazioni flash, non sono supportate per i dispositivi mobili. È probabile che queste pagine frustrino i tuoi utenti che abbandoneranno il tuo sito, a causa di una brutta esperienza, che avrà conseguenze negative per il tuo sito. Il suo posizionamento sarà così degradato nei risultati di ricerca.

Non rendere le tue risorse non scansionabili dai bot di Google. La pagina sarà probabilmente adattata per i dispositivi mobili, tuttavia Googlebot non la considererà compatibile con il formato mobile. Per informazione: per bloccare determinati accessi o determinate pagine, è possibile modificare il file robots.txt .

Quando la tua pagina è responsive, o quando c’è una pagina simile ma per mobile, segnalala a Google in modo che possa integrare queste informazioni e offrire il giusto risultato con l’URL giusto (classico o mobile) nella SERP a seconda del mezzo dell’utente (mobile o meno).

Perché utilizzare il responsive web design?

Con il Responsive Design, che tu sia su cellulare, tablet o PC, l’URL rimane univoco.
Questo è un incredibile risparmio di tempo con tag canonici che ti consentono di assegnare una pagina preferita a più pagine con contenuti simili (DUST: Duplicate URL Same Text) e quindi evitare contenuti duplicati (promemoria: il contenuto duplicato può essere molto dannoso per il riferimento di il tuo sito). Non devi reindirizzare quando un utente mobile accede al tuo sito con un telefono cellulare e quindi risparmi tempo rispetto al tempo di visualizzazione.
L’utente aGENT esegue la scansione della tua pagina solo una volta in modo che venga indicizzata anche sui dispositivi mobili.

Formati Google AMP e relativi concorrenti

Dopo aver reso il tuo sito responsive, e quindi compatibile per diversi media in modo da offrire una migliore esperienza agli utenti mobile, ecco un elemento che sta diventando sempre più importante: il tempo di caricamento delle tue pagine su mobile.

Vedremo di seguito perché può essere importante implementare nuovi formati per dispositivi mobili, come migliorare il tempo di caricamento delle tue pagine su dispositivi mobili, nonché i diversi attori di questo progetto, i loro vantaggi e svantaggi.

INTRODUZIONE AL FORMATO AMP DI GOOGLE

Gli utenti mobili sono sempre più presenti e l’utilizzo mobile è sempre più radicato nelle nostre abitudini. Tuttavia, esiste ancora un vincolo relativo all’utilizzo di un cellulare: il tempo di caricamento. Un utente attende in media 3 secondi per la visualizzazione della pagina. Oltre questo tempo, la probabilità che lasci la tua pagina aumenta. Per rimediare a questo fenomeno, Facebook sta implementando gli Instant Articles, mentre Google sta lanciando i formati AMP.
AMP o Accelerated Mobile Pages è un formato per le tue pagine web mobile volto ad accelerare i tempi di caricamento e migliorare il UX USER EXesperienza utente . Questo formato è una versione semplificata di una pagina HTML che mostra solo i suoi elementi essenziali. Gli script sono vietati ad eccezione di alcune librerie come AMP JS che non richiedono risorse che potrebbero limitare il tempo di visualizzazione.

FORMATI FACEBOOK E APPLE

In precedenza, vi abbiamo parlato degli articoli istantanei di Facebook. Un altro attore entra in gioco nella guerra delle “pagine mobili”. Questa è Apple, con Apple News. La differenza rimane nel fatto che le pagine AMP sono sul tuo server a differenza dei formati Facebook e Apple che sono memorizzati direttamente nel loro ecosistema, volendo quindi tenerti sul loro sito un po’ più a lungo.

PUBBLICITÀ PER FORMATI MOBILE

Per quanto riguarda la pubblicità, persiste un dettaglio tra i due concorrenti di Google, Apple e Facebook. Nella maggior parte dei casi è possibile visualizzare pubblicità sulle tue pagine. Tuttavia, tieni presente che entrambe le società prenderanno il 30% delle tue entrate da te! Google vorrebbe mostrare un’immagine diversa degli altri due giganti lasciando che i webmaster siano indipendenti?

PAGINE AMP E RIFERIMENTI SEO

In questa terza parte, vedremo come il formato mobile di Google potrebbe migliorare il riferimento naturale, ma anche quali sono i timori a questo livello quando si implementano questi nuovi formati. Quali domande potremmo farci? Ecco, in primo luogo, i punti positivi da tenere in considerazione per il riferimento web.

I BENEFICI INDIRETTI DELLA REFERENZIAZIONE SEO

Le pagine in formato AMP potrebbero influire indirettamente sui riferimenti naturali. Perché indirettamente? Perché, attualmente, Google non comunica né parla dei vantaggi della referenziazione naturale. Ma se seguiamo la logica del motore di ricerca, potremmo stabilire molto rapidamente il collegamento tra l’algoritmo di Google e il formato AMP. Ecco due criteri da tenere in considerazione.
La velocità di caricamento di una pagina è un criterio preso in considerazione nell’algoritmo di Google.
L’utente mobile consulterà più rapidamente le pagine in formato AMP, il che migliora la UX USER EXesperienza utente e porta, allo stesso tempo, più traffico al tuo sito.

PAURE DEL FORMATO AMP LEGATE AI RIFERIMENTI NATURALI

I contenuti tra il formato AMP e HTML genereranno contenuti duplicati?

Il tag AMP ( collegamento rel=amphtml ).

Ecco come dire a Google che queste due pagine sono in formati diversi e hanno lo stesso contenuto.
< link rel=”amphtml” href=”yoursitename/article/amp/”>
< link rel=”canonical” href=”yoursitename/article/”>

Compaiono complicazioni durante la fase di scansione di Googlebot?
Certamente, perché se ciascuna delle pagine del tuo sito ha un formato AMP, allora avrai il doppio degli indirizzi che dovranno essere scansionati.

Dovremmo includere dati strutturati?
Le pagine AMP hanno quindi un URL univoco come abbiamo visto in precedenza, quindi è importante fornire dati strutturati come un’immagine, un titolo, oltre che una descrizione del tipo di contenuto.

Possiamo vedere il traffico generato dalle pagine AMP?
29 gennaio 2016. Questa è la data dalla quale è possibile recuperare i dati consultabili su Google Analytics .

COME INSTALLARE PAGINE CON FORMATO AMP E INSTANT ARTICLE SU WORDPRESS

Vediamo ora come installare pagine in formato AMP e Instant Article su WordPress con il plugin Pagefrog.

Innanzitutto, installa il plugin su WordPress in “Aggiungi estensione”; poi attivalo.

Una volta impostata l’estensione, vai su “Formati per dispositivi mobili”, quindi fai clic su “Inizia configurazione” per uno dei due formati (articolo istantaneo o HTML AMP). Il formato Apple News non è attualmente disponibile.

Una volta installati i formati Facebook e Google, puoi testare le tue pagine AMP inserendo /amp alla fine del tuo url.

Ad esempio: http://www.nomdevotresite/article/amp

Potresti notare che il etichetta canonica è presente per specificare la pagina preferita e quindi evitare contenuti duplicati su ogni pagina.