Servizio Google per la verifica della versione mobile. Se Google dice "Questa pagina non è ottimizzata per i dispositivi mobili. Emulatori di dispositivi mobili: Android Studio e Apple Xcode

Buon pomeriggio amici. Oggi mi allontanerò un po' dagli strumenti pubblicitari e aprirò una nuova rubrica sul blog. Si chiama "Webmastering" e includerà materiali utili per migliorare le prestazioni e la qualità del sito, landing page. Inizierò con una panoramica di uno strumento interessante per controllare la mobilità di un sito web.

Controllo della velocità del sito con Google

Google offre 2 strumenti per questo.

# 1 PageSpeed Insights

Penso che tu lo conosca bene. Inserisci un link al tuo sito, premi il pulsante "Analizza" e ottieni il risultato sotto forma di due schede.

La scheda "Per dispositivi mobili" include un rapporto sulla velocità di caricamento del sito per dispositivi mobili e - importante! - valutazione di convenienza sito per smartphone La scheda "Per computer", rispettivamente, la stessa analisi per il desktop.

La parte migliore è che il servizio ti permette di scaricare ottimizzato immagini, css e script da utilizzare sul tuo sito. qui è così aiuto gratuito da google.

Come puoi vedere dallo screenshot, sto riscontrando seri problemi con la versione mobile. Come va?

# 2 Testmysite.Withgoogle

In effetti, questo è lo stesso strumento, ha solo un bellissimo involucro. Ho scoperto questo servizio l'altro giorno e sono stato corrotto dal modulo di segnalazione.

Quando inserisci un link al sito e fai clic su "Verifica", il servizio offrirà il risultato sotto forma di una pagina di destinazione dinamica a tutti gli effetti, sulla quale ti dirà in modo succinto e convincente come stanno le cose con il sito e ti offrirà scarica il rapporto completo

Naturalmente, ho chiesto un rapporto completo e l'ho ricevuto per posta in un paio di minuti. Sembra ragionevole, diverse schermate di istruzioni utili con collegamenti a materiali specifici:

È interessante notare che se si analizza lo stesso sito, le cifre per questi strumenti saranno leggermente diverse. Tuttavia, lavorano sulla stessa tecnologia.

È così che, in pochi secondi, puoi non solo controllare la mobilità del sito e controllare la velocità di caricamento, ma anche scaricare un rapporto completo con contenuti ottimizzati. È libero. Da google

Bene, come va con la mobilità?

Le versioni del sito non sono solo un possibile capriccio degli sviluppatori, un'ulteriore voce di spesa (o guadagno, se parliamo di appaltatori) e una manifestazione di preoccupazione per i visitatori della risorsa. Secondo le ultime dichiarazioni dei rappresentanti della società Google, i siti che non soddisfano i requisiti del responsive design saranno pessimizzati nella ricerca effettuata da dispositivi mobili. Il motore di ricerca nazionale Yandex ha anche emesso raccomandazioni "Quanto è importante essere mobili" e ha assicurato che, agendo per la comodità degli utenti di dispositivi mobili, segnerà le versioni mobili nei risultati di ricerca e darà la preferenza alle pagine adattive.

Quindi, gli sviluppatori devono necessariamente adattare i siti agli smartphone e verificare la funzionalità della visualizzazione delle risorse. Altrimenti, nel prossimo futuro puoi aspettarti la perdita di una parte significativa del traffico, e quindi dei potenziali clienti, perché i nuovi algoritmi di lavoro di Google e Yandex sono già in vigore. Puoi controllare la versione mobile del sito diversi modi: cambiando il browser quando si passa alla modalità sviluppatore, utilizzando emulatori di dispositivi mobili o servizi web.

Compatibilità del sito web per i dispositivi mobili

L'adattabilità ai dispositivi mobili viene valutata in base a vari parametri. È importante verificare la versione mobile del sito non solo in termini di corretta visualizzazione, vale la pena considerare altri fattori:

mancanza di animazione, design e immagini "pesanti";
velocità di caricamento delle risorse (dovrebbe essere minima);
non c'è bisogno di scorrimento orizzontale;
mancanza di plugin Silverlight e applet Java;
navigazione semplice del sito;
il codice contiene il meta tag viewport.

Se le condizioni elencate sono soddisfatte, gli algoritmi dei più comuni motori di ricerca riconoscono la pagina web come adatta ai dispositivi mobili e aumentano la posizione del sito nei risultati di ricerca in relazione alle risorse non adattate.

Veri test su dispositivi mobili

Il modo più conveniente è testare la versione mobile del sito su veri smartphone. Questo metodo consentirà di eseguire test in condizioni reali. Idealmente, è meglio controllare una risorsa web su più dispositivi, ma se il budget del progetto non include i costi per l'acquisto di più smartphone dei modelli più popolari, sarà sufficiente un dispositivo Android o Apple.

Ridimensionamento della finestra del browser

Il più semplice, ma non ottimale in termini di convalida, è ridimensionare la finestra del browser. Se la pagina è realizzata utilizzando la tecnologia, puoi controllare la versione mobile del sito in questo modo. Ma nei casi in cui viene applicato un design separato, la risorsa necessita di una chiara indicazione che l'utente provenga da uno smartphone, tablet o altro dispositivo mobile. Così, Da questa parte consente di verificare la disponibilità di una versione mobile del sito. Ma è improbabile che la correttezza del display (in termini tecnici) venga valutata.

Passaggio alla modalità sviluppatore nel browser

Il modo migliore per verificare la versione mobile di un sito (Google o Yandex, così come altri motori di ricerca evidenziano l'adattabilità nell'elenco dei fattori più importanti che influenzano il ranking) è passare alla modalità sviluppatore nel browser. Il metodo funziona in modo simile con più browser:

Mozilla: puoi passare alla modalità sviluppatore selezionando l'opzione "Responsive Design" nel menu "Sviluppo"; premendo la combinazione Ctrl+ Maiusc + M; cliccando sul pulsante "Responsive Design Mode" sulla barra degli strumenti dello sviluppatore web;
Chrome: passa alla modalità mobile premendo F12, quindi seleziona l'icona della versione mobile (smartphone nell'angolo in alto a sinistra della finestra che compare).

In Opera, puoi passare alla modalità sviluppatore per controllare la versione mobile premendo Ctrl + Maiusc + i, ma c'è un altro modo. Una versione speciale del browser - Opera Mobile Classic Emulator - consente di valutare il design mobile in molti modi. Esistono versioni del programma per i principali sistemi operativi.

Emulatori di dispositivi mobili: Android Studio e Apple Xcode

Puoi controllare la versione mobile del sito (Yandex e Google) utilizzando emulatori di dispositivi mobili, che per Android e Apple sono rispettivamente Android Studio o Apple Xcode.

Tali strumenti riproducono in modo abbastanza accurato il sito come apparirà sui dispositivi mobili: i programmi sono preinstallati con le versioni più comuni dei browser per dispositivi mobili. Tuttavia, gli emulatori non tengono conto della velocità di download e di alcune altre sfumature che possono essere osservate in condizioni reali.

Per verificarlo, basta installare uno dei programmi di cui sopra sul tuo computer e aprire il sito dall'emulatore.

Servizi web di convalida del design mobile

Ci sono più modi semplici controlla la versione mobile del sito. Ad esempio, il servizio online Responsinator consente di valutare la correttezza della visualizzazione della risorsa sui dispositivi mobili e la facilità di utilizzo del sito da parte dell'utente. La risorsa mostra il sito come apparirebbe in sei diversi dispositivi basato su Android o Apple e in più orientamenti.

Verifica dell'ottimizzazione delle pagine web per i dispositivi mobili

Altre risorse che consentono di verificare la versione mobile del sito valutano inoltre l'adattabilità e non solo mostrano come apparirebbe il sito su dispositivi diversi. I servizi più affidabili sono Google Mobile Friendly e Yandex WebMaster (controllo delle pagine web). Anche il controllore di Bing o, ad esempio, il controllore mobile del W3C stanno valutando l'ottimizzazione del sito per i dispositivi mobili.

Tutto ciò che viene richiesto al webmaster quando si valuta la versione del sito per dispositivi mobili che utilizzano i servizi online è inserire l'indirizzo della risorsa e attendere il completamento dell'analisi. La maggior parte dei servizi di cui sopra verifica le ottimizzazioni per i parametri di ottimizzazione per dispositivi mobili sopra elencati.

Quindi, puoi valutare l'adattabilità di una risorsa web in diversi modi: dal test su smartphone, tablet o altri dispositivi mobili reali o modificando le dimensioni della finestra del browser web, controllando gli emulatori o nella modalità sviluppatore del browser web, e terminando con utilizzando i servizi di Yandex e Google. È molto facile controllare la versione mobile del sito in modo completo e questo ti consentirà di apportare le modifiche necessarie e migliorare la posizione del sito nei risultati di ricerca.

Ecco il caso, Google inizierà presto (si dice - dal 21 aprile 2015) a classificare molto male i siti che non sono stati testati da Google Webmaster per la facilità di visualizzazione sui dispositivi mobili.

Non è chiaro esattamente, il sito avrà problemi solo se viene mostrato agli utenti mobile, o anche a chi ha effettuato l'accesso da PC, cioè ci sarà un problema a parte?

In sostanza, questo quasi non cambia per i siti che hanno la metà, o una parte significativa, del traffico mobile. Pertanto, è meglio superare il test il più rapidamente possibile.

Ti dirò come fare questo:

Prima	Dopo

Il primo pezzo, che ha aiutato a risolvere il problema senza ulteriori gesti.

In robots.txt aggiungi la riga:
Consenti: /wp-content/themes/ Nome_modello/style.css

(Se il file con stili si trova a un indirizzo diverso, registralo. Se ci sono più file con stili, inserisci le righe per ogni file.)

Secondo momento, se vediamo il messaggio “ Elementi interattivi sono troppo vicini l'uno all'altro". Mostrato su google.com/webmasters/tools/mobile-friendly.
Assegna semplicemente più rientri per collegamenti e pulsanti negli stili alla classe desiderata. Afferra il margine o il riempimento da 5px.
A volte il blocco Adsense può creare un problema del genere. Forse devi inserire un blocco più grande o con un carattere più grande.

P.S. Inizialmente, mi aspetto che il primario sia stato fatto da te.

Eh, ancora una volta Google ci "piace" con le sue regole e algoritmi, inventando nuove "emicranie" per i webmaster. Questa volta ci viene offerto di provare un nuovo algoritmo ottimizzato per i dispositivi mobili, che consentirà di visualizzare siti adattati nella ricerca per dispositivi mobili e ridurre le risorse "non mobili".

Come funzionerà tutto questo?

Molto semplice: tutti i siti che non sono mobile-friendly (secondo Google) verranno semplicemente ignorati motore di ricerca e visualizzati nella ricerca mobile negli ultimi posti e le risorse mobili aumenteranno più in alto. Ad esempio, se ci sono diversi siti con un tema simile, sul tablet l'utente troverà quelli che hanno un design adattato per la visualizzazione su dispositivi mobili.

Le mie impressioni su questa innovazione sono duplici: da una parte è tutto corretto, se utilizzo la ricerca su tablet o smartphone, allora voglio vedere nella SERP quei siti che si comportano correttamente a schermo. D'altra parte, l'algoritmo per determinare la "mobilità" è così strano che fa pensare all'opportunità di tale "saper fare". Ovviamente, ho controllato i miei siti per consigli e ho trovato strano, a dir poco, comportamento di Google nei confronti dell'analisi delle risorse.

Vale la pena dire che ho sempre, durante la creazione di siti, controllato aspetto esteriore su vari dispositivi manualmente e tramite servizi, quindi ero tranquillo sulla "mobilità", ma si è rivelato non così semplice. Pertanto, Google consiglia di testare le tue risorse tramite un test ottimizzato per i dispositivi mobili:

Basta inserire l'indirizzo del sito o della pagina e fare clic su "Analizza". Durante il test della pagina principale del sito del mio amico di Crimea krimeo.ru, ho visto che la pagina era ottimizzata per i dispositivi mobili.

Non sorprende che il suo modello sia reattivo e il sito abbia un bell'aspetto diversi dispositivi... Quindi ho deciso di controllare il mio sito e qual è stata la mia sorpresa quando questa risorsa non ha superato il test.

Interessante... il template di questo blog è anche responsive, ho avuto accesso sia da tablet che da smartphone più volte... perché allora a Google non è piaciuto?

Ho iniziato ad analizzare cosa esattamente sul sito potesse provocare un tale risultato. La soluzione è stata trovata dove meno me lo aspettavo: sul mio sito le miniature degli articoli venivano visualizzate in un rettangolo di 720x350px e questo (secondo Google) non rende il sito considerato mobile. Sorprendentemente, più grande è l'immagine (pulsanti), più facile è per gli utenti di dispositivi mobili colpire con un dito ... ma Google la pensa diversamente.

È anche sorprendente che durante la navigazione del sito su uno smartphone, tutte le immagini siano perfettamente adattate alle dimensioni dello schermo e non si notino "stipiti". Bene, ho deciso di condurre un esperimento e ho adattato la dimensione delle immagini, ad es. minore è la dimensione dello schermo del dispositivo, minore è l'immagine sul sito. Prova ad afferrare l'angolo del browser con il mouse e a rimpicciolirlo..
Ora alcuni webmaster potrebbero avere un problema diverso: se Google si comportasse in questo modo con le miniature grande taglia, il che significa che con le illustrazioni agli articoli, la situazione sarà la stessa, e questo è molto più importante di home page... Per fare ciò è necessario rendere le immagini adattive per l'intero sito, utilizzando il mezzo di lancio dello script js, ma non è tutto, la cartella della cache e la regola per il salvataggio delle immagini devono essere duplicate in .htaccess

In effetti, gli articoli che contengono immagini di grandi dimensioni non superano il test di Google e quelli con illustrazioni più piccole sono considerati completamente ottimizzati per dispositivi mobili. Non fornirò schermate: prendi semplicemente l'URL di una pubblicazione separata e controlla la "mobilità".

Perché altrimenti Googlebot vede che il blog non è ottimizzato per dispositivi mobili?

Perché ci sono molte restrizioni non necessarie in robots.txt.

C'è solo una restrizione nel file WordPress virtual robots.txt generato automaticamente:

Non consentire: / wp-admin

Ed ecco cosa scrive Google sul motivo per cui i creatori di WordPress hanno creato robots.txt come questo per impostazione predefinita:

Per garantire l'indicizzazione e il rendering corretti delle pagine, devi concedere a Googlebot l'accesso a JavaScript, CSS e file grafici sul posto. Googlebot dovrebbe vedere il tuo sito come un utente normale. Se il file robots.txt non consente l'accesso a queste risorse, Google non sarà in grado di analizzare e indicizzare correttamente i contenuti. Questo può degradare le classifiche di ricerca del tuo sito.

Agente utente: * Disallow: / wp-admin Disallow: / wp-includes Disallow: / wp-content / plugins Host: Your_site Sitemap: http: // Your_site / sitemap_index.xml (Sitemap by WordPress SEO by Yoast) User -agent : Consenti immagine Googlebot: / wp-content / caricamenti / Agente utente: YandexImages Consenti: / wp-content / caricamenti /

Spero che Google migliori il suo algoritmo di verifica e dia risultati reali, perché "nella vita reale" su tablet e smartphone, molti siti hanno un bell'aspetto.

Possiamo vedere una tale sorpresa sotto forma di un algoritmo ottimizzato per i dispositivi mobili dal 21 aprile 2015. Google ci "vizia")). Vivi in pace? Ecco una Panda per te! Pochi? Anche qui c'è un pinguino! Mandare via? Diventa ottimizzato per i dispositivi mobili!

Produzione

Sta a te decidere cosa fare con queste informazioni, se passare a responsive design o meno è una questione personale per ogni webmaster, ma queste nuove regole sono già entrate in vigore.

A proposito, in "ottimizzato per dispositivi mobili" è considerato non solo il design del sito reattivo, qui sono adatti anche una versione mobile separata e un plug-in per WordPress, l'importante è che il sito appaia corretto su qualsiasi dispositivo. Tieni conto di questo.

Per i tuoi progetti, probabilmente avrai notato molto tempo fa che il numero utenti mobiliè in costante crescita. Per alcuni, la tendenza è meno evidente e su alcuni progetti questa cifra raddoppia o più ogni anno. Secondo i dati di LiveInternet, oltre il 50% del traffico su Runet è rappresentato da dispositivi mobili. A proposito, molti lettori di questo blog si lamentano da molto tempo che non esiste una versione mobile qui 🙂 che, ovviamente, verrà sistemata nel prossimo futuro.

Anche questo fatto di mobilitazione non può essere ignorato dalle piattaforme di ricerca. Gradualmente, danno vantaggi nella ricerca mobile a quei siti che si adattano ai dispositivi degli utenti.

Inizialmente, Google ha contrassegnato i siti in frammenti che sarebbero stati visualizzati correttamente sui telefoni cellulari.

Inoltre, Google ha creato uno strumento per aiutare i webmaster a verificare la correttezza della visualizzazione del sito web sui dispositivi mobili:
https://www.google.com/webmasters/tools/mobile-friendly/

Il 21 aprile, Google ha lanciato in Occidente un nuovo algoritmo chiamato Mobilegeddon. Ora superare con successo il test Mobile Friendly è uno dei fattori SEO presi in considerazione da Google. Finora non ci sono stati grandi cambiamenti nella SERP, ma puoi prepararti ora.

Come si fa a rendere un sito web responsive per Google? Il segreto è semplice: devi impostare un'attività per i tuoi programmatori/progettisti di layout. Bene, se non c'è tempo per aspettare, allora ... puoi usare MobileCheat 🙂

In realtà, questa è una tecnologia non testata, non si sa cosa porterà in futuro, quindi usala solo a tuo rischio e pericolo. Almeno una serie di test può essere eseguita qui.

Come bypassare il test di Google con MobileCheat

Ci sono solo due cose da fare:

1. Aggiungi il meta tag viewport al codice.

2. Chiudere l'accesso del robot ai file CSS o alla cartella in cui si trovano tramite robots.txt

Ad esempio, questo è il modo in cui il mio blog supera il test predefinito:

Quando il CSS viene chiuso, l'immagine cambia:

Sembra che nulla sia cambiato sul sito, ma i risultati dei test sono completamente diversi. A proposito, su alcuni siti mi piace disabilitare i CSS, in modo che sia più conveniente visualizzarli e usarli 🙂 quindi è uno schema completamente giustificato. Ma è presentato solo a scopo informativo.

Cosa ne pensi di questo? Google conterà questo come una contromossa con un cavallo o ha pensato tutto in anticipo e metterà immediatamente sotto scacco e scacco matto il sito? ?