Google usluga za provjeru mobilne verzije. Ako Google kaže „Ova stranica nije optimizirana za mobilne uređaje. Emulatori mobilnih uređaja: Android Studio i Apple Xcode

Dobar dan prijatelji. Danas ću se malo odmaknuti od alata za oglašavanje i započeti novu kolumnu na blogu. Zove se "Webmastering" i uključivat će korisne materijale o poboljšanju performansi i kvalitete web stranice, odredišnih stranica. Počet ću s pregledom super alata za provjeru mobilnosti web stranice.

Provjera brzine web mjesta s Googleom

Google za to nudi 2 alata.

# 1 PageSpeed Insights

Mislim da ga dobro poznajete. Umetnite vezu na svoju web lokaciju, pritisnite gumb "Analiziraj" i dobijte rezultat u obliku dvije kartice.

Kartica "Za mobilne uređaje" uključuje izvješće o brzini učitavanja web stranice za Mobilni uredaji i - važno! - ocjena pogodnosti mjesto za pametne telefone. Kartica "Za računala", odnosno, ista analiza za radnu površinu.

Najbolji dio je što vam usluga omogućuje preuzimanje optimiziran slike, css i skripte za korištenje na vašoj web stranici. Evo takvih besplatna pomoć s google -a.

Kao što možete vidjeti na snimci zaslona, imam ozbiljnih problema s mobilnom verzijom. Kako si?

# 2 Testmysite.Withgoogle

Zapravo, ovo je isti alat, samo ima prekrasan omot. Ovu sam uslugu otkrio neki dan i podmitio me obrazac za prijavu.

Kad umetnete vezu na web mjesto i kliknete "Provjeri", usluga će ponuditi rezultat u obliku punopravne dinamičke odredišne stranice na kojoj će vam jezgrovito i uvjerljivo reći kako stvari stoje s web mjestom i ponuditi preuzmite cijelo izvješće.

Naravno, tražio sam cjelovito izvješće i primio ga poštom za par minuta. Izgleda razumno, nekoliko zaslona korisnih uputa s vezama na određene materijale:

Značajno je napomenuti da će se, ako analizirate isto mjesto, brojke za te alate neznatno razlikovati. Međutim, oni rade na istoj tehnologiji.

Ovako u samo nekoliko sekundi možete ne samo provjeriti mobilnost web stranice i provjeriti brzinu učitavanja - već i preuzeti punopravno izvješće s optimiziranim sadržajem. Besplatno je. S google -a

Pa, kako ste s mobilnošću?

Verzije web stranica nisu samo mogući hir programera, dodatna stavka troškova (ili zarade, ako govorimo o izvođačima radova) i manifestacija brige za posjetitelje resursa. Prema posljednjim izjavama predstavnika Google korporacije, web lokacije koje ne zadovoljavaju zahtjeve responzivnog dizajna bit će pesimizovane u pretraživanju s mobilnih uređaja. Domaća tražilica Yandex također je izdala preporuke "Koliko je važno biti mobilan" i uvjerila se da će, djelujući radi pogodnosti korisnika mobilnih uređaja, u rezultatima pretraživanja označavati mobilne verzije i davati prednost prilagodljivim stranicama.

Dakle, programeri moraju nužno prilagoditi web mjesta za pametne telefone i provjeriti upotrebljivost prikaza resursa. Inače, u bliskoj budućnosti možete očekivati gubitak značajnog dijela prometa, a time i potencijalnih kupaca, jer su novi algoritmi rada Googlea i Yandexa već na snazi. Možete provjeriti mobilnu verziju web stranice različiti putevi: promjenom preglednika prilikom prelaska u način za programere, korištenjem emulatora mobilnih uređaja ili web usluga.

Prijatnost web stranica za mobilne uređaje

Prilagodljivost mobilnim uređajima procjenjuje se prema različitim parametrima. Važno je provjeriti mobilnu verziju web stranice ne samo u smislu ispravnog prikaza, valja uzeti u obzir i druge čimbenike:

nedostatak animacije, "težak" dizajn i slike;
brzina učitavanja resursa (trebala bi biti minimalna);
nema potrebe za vodoravno pomicanje;
nedostatak dodataka Silverlight i Java aplikacija;
jednostavna navigacija web mjestom;
kôd sadrži meta oznaku okvira za prikaz.

Ako su gornji uvjeti ispunjeni, algoritmi najčešćih tražilica prepoznaju web stranicu kao prikladnu za mobilne uređaje i povećavaju poziciju web stranice u rezultatima pretraživanja u odnosu na neprilagođene resurse.

Pravo testiranje na mobilnim uređajima

Najprikladniji način je testiranje mobilne verzije stranice na pravim pametnim telefonima. Ova metoda će omogućiti testiranje u stvarnim uvjetima. U idealnom slučaju, bolje je provjeriti web resurs na nekoliko uređaja, ali ako proračun projekta ne uključuje troškove kupnje nekoliko pametnih telefona najpopularnijih modela, bit će dovoljan Android ili Apple uređaj.

Promjena veličine prozora preglednika

Najjednostavnije, ali ne i optimalno u smislu provjere valjanosti, je promijeniti veličinu prozora preglednika. Ako je stranica izrađena pomoću tehnologije, na ovaj način možete provjeriti mobilnu verziju web stranice. No, u slučajevima kada se primjenjuje zasebni dizajn, resursu je potrebna jasna naznaka da je korisnik došao sa pametnog telefona, tableta ili drugog mobilnog uređaja. Tako, ovuda omogućuje provjeru dostupnosti mobilne verzije web stranice. No, vjerojatno se neće ocijeniti ispravnost prikaza (u tehničkom smislu).

Prebacivanje u način rada za razvojne programere u pregledniku

Najbolji način provjere mobilne verzije web stranice (Google ili Yandex, kao i druge tražilice ističu prilagodljivost na popisu najvažnijih čimbenika koji utječu na rangiranje) je prebacivanje u način rada za razvojne programere u pregledniku. Metoda funkcionira na sličan način s više preglednika:

Mozilla: Možete se prebaciti u način rada za programere odabirom opcije "Responsive Design" u izborniku "Develop"; prešanje kombinacija Ctrl+ Shift + M; klikom na gumb "Responsive Design Mode" na alatnoj traci web razvojnog programera;
Chrome: prebacite se u način rada za mobilne uređaje pritiskom na F12, a zatim odaberite ikonu mobilne verzije (pametni telefon u gornjem lijevom kutu prozora koji se pojavi).

U Operi se možete prebaciti na način za programere kako biste provjerili mobilnu verziju pritiskom na Ctrl + Shift + i, ali postoji još jedan način. Posebna verzija preglednika - Opera Mobile Classic Emulator - omogućuje vam ocjenjivanje mobilnog dizajna na mnogo načina. Verzije programa postoje za glavne operacijske sustave.

Emulatori mobilnih uređaja: Android Studio i Apple Xcode

Mobilnu verziju web stranice (Yandex i Google) možete provjeriti pomoću emulatora mobilnih uređaja, koji su za Android i Apple Android Studio ili Apple Xcode.

Takvi alati prilično točno reproduciraju web mjesto kako će izgledati na mobilnim uređajima: programi su unaprijed instalirani s najčešćim verzijama preglednika za mobilne uređaje. Međutim, emulatori ne uzimaju u obzir brzinu preuzimanja i neke druge nijanse koje se mogu uočiti u stvarnim uvjetima.

Da biste to provjerili, samo instalirajte jedan od gore navedenih programa na svoje računalo i otvorite web mjesto iz emulatora.

Web usluge provjere valjanosti mobilnog dizajna

Ima još jednostavni načini provjerite mobilnu verziju stranice. Na primjer, mrežna usluga Responsinator omogućuje vam da procijenite ispravnost prikaza resursa na mobilnim uređajima i jednostavnost korištenja web stranice od strane korisnika. Resurs prikazuje web mjesto onako kako bi se prikazalo u šest različitih uređaja na temelju Androida ili Applea i u više orijentacija.

Provjera optimizacije web stranica za mobilne uređaje

Drugi izvori koji vam omogućuju provjeru mobilne verzije web stranice dodatno procjenjuju prilagodljivost, a ne samo pokazuju kako bi web mjesto izgledalo na različitim uređajima. Najpoznatije usluge su Google Mobile Friendly i Yandex WebMaster (provjera web stranica). Bing checker ili, na primjer, Mobile Checker iz W3C, također procjenjuje optimizaciju web mjesta za mobilne uređaje.

Sve što je potrebno od webmastera pri procjeni verzije web stranice za mobilne uređaje koji koriste mrežne usluge je da unesete adresu resursa i pričekate da se analiza završi. Većina gore navedenih usluga testira optimizacije za gore navedene parametre prilagođenosti mobilnim uređajima.

Dakle, prilagodljivost web resursa možete procijeniti na nekoliko načina: od testiranja na stvarnim pametnim telefonima, tabletima ili drugim mobilnim uređajima ili do promjene veličine prozora web preglednika, provjere u emulatorima ili u načinu za razvoj programera web preglednika, pa do koristeći usluge Yandexa i Googlea. Vrlo je lako sveobuhvatno provjeriti mobilnu verziju web stranice, što će vam omogućiti da izvršite potrebna uređivanja i poboljšate položaj web stranice u rezultatima pretraživanja.

Postoji tako nešto, Google će uskoro (prema glasinama - od 21. travnja 2015.) početi jako loše rangirati web stranice koje nisu prošle provjeru u Google Webmasterima radi lakšeg pregledavanja na mobilnim uređajima.

Nije jasno, web mjesto će imati problema samo ako se prikaže mobilnim korisnicima, ili čak onima koji su se prijavili s računala, odnosno bit će zasebnog problema?

U biti, to se gotovo ne mijenja za web stranice koje imaju polovicu ili značajan dio mobilnog prometa. Stoga je bolje proći test što je prije moguće.

Reći ću vam kako to učiniti:

Prije	Nakon

Prvi komad, što je pomoglo u rješavanju problema bez dodatnih gesta.

U robots.txt dodajte redak:
Dopusti:/wp-content/themes/Template_Name/style.css

(Ako se datoteka sa stilovima nalazi na drugoj adresi, registrirajte je. Ako postoji nekoliko datoteka sa stilovima, umetnite retke za svaku datoteku.)

Drugi trenutak, ako vidimo poruku “ Interaktivni elementi su preblizu jedno drugom. " Prikazano na google.com/webmasters/tools/mobile-friendly.
Samo što u stilovima potrebna klasa propisuje više uvlaka za veze i gumbe. Grabi margin ili padding od 5px ili više.
Ponekad Adsense blok može stvoriti takav problem. Možda trebate umetnuti veći blok ili s većim fontom.

p.s. U početku očekujem da ste primarni posao obavili vi.

Eh, opet nas Google "raduje" svojim pravilima i algoritmima, smišljajući nove "migrene" za webmastere. Ovaj nam se put nudi isprobavanje novog algoritma prilagođenog mobilnim uređajima koji će donijeti prilagođena web mjesta u mobilnom pretraživanju i smanjiti "ne-mobilne" resurse.

Kako će sve ovo funkcionirati?

Vrlo jednostavno: sve web lokacije koje nisu prilagođene mobilnim uređajima (prema Googleu) jednostavno će se zanemariti pretraživač i prikazani u mobilnom pretraživanju na posljednjim mjestima, a mobilni resursi će se povećati. Na primjer, ako postoji nekoliko web mjesta sa sličnom temom, tada će na tabletu korisnik pronaći one koje imaju prilagođen dizajn za gledanje na mobilnim uređajima.

Moji dojmovi o ovoj inovaciji su dvojaki: s jedne strane, sve je točno, ako koristim pretraživanje na tabletu ili pametnom telefonu, tada želim vidjeti u SERP -u ona mjesta koja se na ekranu ispravno ponašaju. S druge strane, algoritam za određivanje "mobilnosti" toliko je čudan da tjera na razmišljanje o svrsishodnosti takvog "znanja". Naravno, provjerio sam svoje web lokacije radi preporuka i otkrio čudno, u najmanju ruku, Googleovo ponašanje prema raščlanjivanju resursa.

Vrijedi reći da sam uvijek, pri izradi web stranica, provjeravao izgled na raznim uređajima ručno i putem servisa, pa sam bio miran oko "mobilnosti", no pokazalo se da to nije tako jednostavno. Stoga Google preporučuje testiranje vaših resursa putem testa prilagođenog mobilnim uređajima:

Samo unesite adresu web stranice ili stranice i kliknite "Analiziraj". Dok sam provjeravao glavnu stranicu web stranice mog krimskog prijatelja krimeo.ru kroz test, vidio sam da je stranica optimizirana za mobilne uređaje.

Nije iznenađujuće što njegov predložak odgovara i web stranica izgleda odlično različitih uređaja... Tada sam odlučio provjeriti svoju web stranicu i kakvo me iznenađenje učinilo kad ovaj resurs nije prošao test.

Zanimljivo ... predložak ovog bloga je također responzivan, nekoliko puta sam pristupao i s tableta i sa pametnog telefona ... zašto se to onda nije svidjelo Googleu?

Počeo sam analizirati što bi točno na web mjestu moglo izazvati takav rezultat. Rješenje je pronađeno tamo gdje sam to najmanje očekivao: na mojoj web stranici minijature članaka bile su prikazane u pravokutniku 720x350px, a to (prema Googleu) ne čini web lokaciju mobilnom. Iznenađujuće, što je veća slika (gumbi), korisnici s mobilnih uređaja lakše će udariti prstom ... ali Google misli drugačije.

Iznenađujuće je i to da se prilikom pregledavanja web mjesta na pametnom telefonu sve slike savršeno prilagođavaju veličini zaslona i ne primjećuju se nikakvi "zastoji". Pa, odlučio sam provesti eksperiment i prilagodio veličinu slika, tj. što je veličina zaslona uređaja manja, slika na web mjestu je manja. Pokušajte uhvatiti kut preglednika mišem i smanjiti ga.
Sada neki webmasteri mogu imati drugačiji problem: ako se Google ovako ponašao sa sličicama velika veličina, što znači da će s ilustracijama članaka situacija biti ista, a to je mnogo važnije od početnu stranicu... Da biste to učinili, morate učiniti slike prilagodljivim za cijelu web lokaciju, koristeći sredstva za pokretanje js-skripte, ali to nije sve, mapa predmemorije i pravilo za spremanje slika moraju se duplicirati u .htaccess

Doista, članci koji sadrže slike velikih veličina ne prolaze Googleov test, a oni s manjim ilustracijama smatraju se potpuno optimiziranima za mobilne uređaje. Neću davati snimke zaslona - samo uzmite URL zasebne publikacije i provjerite ima li "mobilnosti".

Zašto inače Googlebot vidi da blog nije optimiziran za mobilne uređaje

Budući da u robots.txt postoji mnogo nepotrebnih ograničenja.

U automatski generiranoj WordPress virtualnoj datoteci robots.txt postoji samo jedno ograničenje:

Zabrani: / wp-admin

Evo što Google piše o tome zašto su kreatori WordPressa prema zadanim postavkama napravili ovakvu datoteku robots.txt:

Da biste osigurali ispravno indeksiranje i iscrtavanje stranica, morate omogućiti Googlebotu pristup JavaScript, CSS i grafičke datoteke na stranici. Googlebot bi trebao vidjeti vašu web stranicu kao redovnog korisnika. Ako datoteka robots.txt odbije pristup tim resursima, Google neće moći pravilno analizirati i indeksirati sadržaj. To može pogoršati ljestvicu pretraživanja vaše web stranice.

Korisnički agent: * Disallow: / wp-admin Disallow: / wp-includes Disallow: / wp-content / plugins Domaćin: Vaša web lokacija Karta web stranice: http: // Vaša web stranica / sitemap_index.xml (Karta web mjesta od strane WordPress SEO by Yoast) Korisnički agent : Googlebot-Image Allow: / wp-content / uploads / User-agent: YandexImages Allow: / wp-content / uploads /

Nadam se da će Google poboljšati svoj algoritam provjere i dati stvarne rezultate, jer "u stvarnom životu" na tabletima i pametnim telefonima mnoge web stranice izgledaju sjajno.

Takvo iznenađenje u obliku algoritma prilagođenog mobilnim uređajima možemo vidjeti od 21. travnja 2015. Google nas "kvari")). Živite li u miru? Evo pande za vas! Nekoliko? Evo i pingvina! Poslati? Prilagodite se mobilnim uređajima!

Izlaz

Odlučiti što učiniti s ovim podacima, preći na responzivni dizajn ili ne osobna je stvar svakog webmastera, ali ta su nova pravila već stupila na snagu.

Usput, pod "optimizirano za mobilne uređaje" smatra se ne samo responzivan dizajn web mjesta, već su prikladna i zasebna mobilna verzija i dodatak za WordPress, glavna stvar je da web mjesto izgleda ispravno na bilo kojem uređaju. Uzmite ovo u obzir.

Za svoje ste projekte vjerojatno već davno primijetili da je broj mobilni korisnici stalno raste. Za neke je trend manje uočljiv, a na nekim projektima ova se brojka svake godine udvostruči ili više. Prema podacima LiveInterneta, više od 50% prometa na Runetu otpada na mobilne uređaje. Inače, mnogi čitatelji ovog bloga već duže vrijeme žale se kako ovdje nema mobilne verzije 🙂 koja će, naravno, biti popravljena u bliskoj budućnosti.

Ovu činjenicu mobilizacije ne mogu zanemariti ni platforme za pretraživanje. Postupno, u mobilnom pretraživanju daju prednosti onim web stranicama koje su prilagođene uređajima korisnika.

U početku je Google označavao web -lokacije u isječcima koje bi ispravno prikazali na mobilnim telefonima.

Također, Google je stvorio alat koji će webmasterima pomoći provjeriti ispravnost prikaza web stranice na mobilnim uređajima:
https://www.google.com/webmasters/tools/mobile-friendly/

Google je 21. travnja pokrenuo novi algoritam pod nazivom Mobilegeddon na Zapadu. Uspješno polaganje testa prilagođenosti mobilnim uređajima jedan je od čimbenika SEO -a koji je Google uzeo u obzir. Do sada nije bilo većih promjena u SERP -u, ali sada se možete pripremiti.

Kako učiniti vašu web lokaciju responzivnom za Google? Tajna je jednostavna - morate postaviti zadatak svojim programerima / dizajnerima izgleda. Pa, ako nemate vremena za čekanje, onda ... možete koristiti MobileCheat 🙂

Zapravo, ovo je neprovjerena tehnologija, ne zna se do čega će to dovesti u budućnosti, pa je koristite samo na vlastitu odgovornost i rizik. Ovdje se može obaviti barem niz testova.

Kako zaobići Google test pomoću MobileCheat -a

Postoje samo dvije stvari koje treba učiniti:

1. Dodajte meta oznaku okvira za prikaz u kôd.

2. Zatvorite robotu pristup CSS datotekama ili mapi u kojoj se oni nalaze putem robots.txt

Na primjer, ovako moj blog prolazi zadani test:

Kad se CSS zatvori, slika se mijenja:

Čini se da se na web mjestu ništa nije promijenilo, ali rezultati testova su potpuno drugačiji. Usput, na nekim web stranicama i sam volim onemogućiti CSS, tako da ih je prikladnije pregledavati i koristiti 🙂 stoga je to potpuno opravdana shema. Ali predstavljen je samo u informativne svrhe.

Što misliš o ovome? Hoće li Google ovo računati kao kontra potez s vitezom ili je sve unaprijed smislio pa će web mjesto odmah staviti u šahu i mat? 🙂