Dobar dan prijatelji. Danas ću se malo odmaknuti od alata za oglašavanje i pokrenuti novi odjeljak na blogu. Zove se "Webmastering" i uključivat će korisne materijale za poboljšanje performansi i kvalitete stranice, odredišnih stranica. I počet ću s pregledom zgodnog alata za provjeru mobilnosti stranice.
Provjerite brzinu web stranice s Googleom
Da biste to učinili, Google nudi 2 alata.
#1 PageSpeed Insights
Mislim da ga dobro poznaješ. Umetnite poveznicu na svoju stranicu, kliknite gumb "Analiziraj" i dobijete rezultat u obliku dvije kartice.
Kartica "Mobilni" uključuje izvješće o brzini učitavanja stranice za mobilne uređaje i - važno! — ocjena pogodnosti stranica za pametne telefone. Kartica "Za računala" je ista analiza za radnu površinu.
Najbolji dio je što vam usluga omogućuje preuzimanje optimiziran slike, css i skripte za korištenje na svojoj web stranici. Evo neke besplatne pomoći od Googlea.
Kao što možete vidjeti na snimci zaslona, imam ozbiljnih problema s mobilnom verzijom. A kako ide kod tebe?
#2 Testmysite.Withgoogle
Zapravo, ovo je isti alat, samo ima prekrasan omot. Neki dan sam otkrio ovu uslugu i podmitio me obrazac za prijavu.
Kada umetnete poveznicu na stranicu i kliknete "Provjeri", usluga će ponuditi rezultat u obliku cjelovite dinamičke odredišne stranice, na kojoj će sažeto i uvjerljivo reći kako stvari stoje na stranici i ponuditi za preuzimanje cijelog izvješća.
Naravno, tražio sam kompletan izvještaj i par minuta kasnije dobio sam ga poštom. Izgleda razumno, nekoliko ekrana korisnih uputa s poveznicama na određene materijale:
Važno je napomenuti da ako analizirate istu stranicu, brojke za ove alate će se malo razlikovati. Međutim, oni rade na istoj tehnologiji.
Na taj način, u samo nekoliko sekundi, možete ne samo provjeriti pokretljivost stranice i provjeriti brzinu preuzimanja – već i preuzeti cjelovito izvješće s optimiziranim sadržajem. Besplatno je. Od Googlea
Pa, kako si s mobilnošću?
Eh, opet nas Google "veseli" svojim pravilima i algoritmima, smišljajući nove "migrene" za webmastere. Ovaj put nudi nam se da isprobamo novi algoritam prilagođen mobilnim uređajima koji će povećati prilagođene stranice u mobilnom pretraživanju i smanjiti resurse koji nisu "mobilni".
Kako će sve ovo funkcionirati?
Vrlo je jednostavno: sve stranice koje nisu prilagođene za mobilne uređaje (prema Google-u) tražilica će jednostavno zanemariti i pojavit će se na zadnjim mjestima u mobilnom pretraživanju, a mobilni resursi će rasti. Na primjer, ako postoji nekoliko stranica slične teme, tada će korisnik na tabletu pronaći one koje imaju prilagođeni dizajn za gledanje na mobilnim uređajima.
Moji dojmovi o ovoj inovaciji su dvojaki: s jedne strane, sve je točno, ako koristim pretragu na tabletu ili pametnom telefonu, onda želim vidjeti one stranice koje se ispravno ponašaju na ekranu u rezultatima pretraživanja. S druge strane, algoritam za određivanje "mobilnosti" toliko je čudan da tjera na razmišljanje o prikladnosti takvog "know-howa". Naravno, provjerio sam svoje stranice u skladu s preporukama i otkrio čudno, u najmanju ruku, ponašanje Googlea u odnosu na analizu resursa.
Vrijedi reći da sam prilikom izrade web stranica uvijek ručno i putem servisa provjeravao izgled na raznim uređajima, pa sam bio miran oko "mobilnosti", ali pokazalo se da nije tako jednostavno. Dakle, Google preporučuje da provjerite svoje resurse putem testa prilagođenog mobilnim uređajima:
Samo unesite adresu stranice ili stranice i kliknite "Analiziraj". Dok sam provjeravao glavnu stranicu stranice mog prijatelja krimeo.ru kroz test, vidio sam da je stranica optimizirana za mobilne uređaje.
Nije iznenađujuće da je predložak responzivan i stranica izgleda sjajno na različitim uređajima. Tada sam odlučio provjeriti svoju stranicu i kakvo je bilo moje iznenađenje kada ovaj resurs nije prošao test.
Zanimljivo... predložak ovog bloga je također responzivan, više puta sam se ulogirao na tabletu i pametnom telefonu... zašto se onda Googleu nije svidio?
Počeo sam analizirati što bi točno na stranici moglo izazvati takav rezultat. Rješenje je pronađeno tamo gdje sam ga najmanje očekivao: na mojoj stranici su sličice za članke bile prikazane s pravokutnikom veličine 720x350px, a to (prema Googleu) ne čini stranicu mobilnom. Začudo, što je slika (gumb) veća – korisnicima s mobilnih uređaja lakše je udariti prstom... ali Google misli drugačije.
Također je iznenađujuće da se prilikom pregledavanja stranice na pametnom telefonu sve slike savršeno prilagođavaju veličini zaslona i ne uočavaju se "zaglavci". Pa, odlučio sam provesti eksperiment i prilagodio veličinu slika, tj. što je manja veličina zaslona uređaja, to je manja slika na stranici. Pokušajte mišem uhvatiti kut preglednika i umanjiti ga.. 
Sada neki webmasteri mogu imati još jedan problem: ako se Google ovako ponašao s velikim minijaturama, onda će situacija s ilustracijama za članke biti ista, a to je puno važnije od glavne stranice. Da biste to učinili, slike morate učiniti prilagodljivim za cijelu stranicu, pokretanjem js skripte, ali to nije sve, mapu predmemorije i pravilo za spremanje slika treba duplicirati u .htaccess
Tako je – oni članci koji sadrže velike slike ne prolaze Google test, a oni materijali koji nemaju baš velike ilustracije smatraju se potpuno „optimiziranima za mobilne uređaje“. Neću dati 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 ima puno nepotrebnih ograničenja.
Postoji samo jedna zabrana u automatski generiranoj virtualnoj datoteci robots.txt od strane WordPressa:
Zabraniti: /wp-admin
A evo što Google piše o tome zašto su kreatori WordPress-a postavili robots.txt kao zadanu:
Kako biste osigurali da su vaše stranice ispravno indeksirane i prikazane, Googlebotu morate dopustiti pristup JavaScript, CSS i grafičkim datotekama na vašoj web-lokaciji. Googlebot bi trebao vidjeti vašu stranicu kao običan korisnik. Ako je pristup tim resursima blokiran u datoteci robots.txt, Google neće moći pravilno analizirati i indeksirati sadržaj. To može pogoršati poziciju vaše stranice u Pretraživanju.
User-agent: * Disallow: /wp-admin Disallow: /wp-includes Disallow: /wp-content/plugins Host: YourSite Sitemap: http://YourSite/sitemap_index.xml (Sitemap by 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 prave rezultate, jer mnoge stranice izgledaju sjajno “u stvarnom životu” na tabletima i pametnim telefonima.
Takvo iznenađenje u obliku algoritma prilagođenog mobilnim uređajima možemo vidjeti od 21. travnja 2015. godine. Google nas "razmazi")). Živite li mirno? Izvoli Panda! Nekoliko? Nate također Pingvin! otišao? Prilagodite se mobilnim uređajima!
Izlaz
Odlučite sami što ćete s tim podacima, hoćete li se prebaciti na adaptivne dizajne ili ne, osobna je stvar svakog webmastera, ali ova nova pravila već su stupila na snagu.
Usput, ne samo da se adaptivni dizajn web-mjesta smatra "optimiziranim za mobilne uređaje", ovdje su prikladni i zasebna mobilna verzija i dodatak za WordPress, glavna stvar je da stranica izgleda ispravno na bilo kojem uređaju. Uzmite to u obzir.
Pozdrav dragi prijatelji!
Mobilni gadgeti zavladali su svijetom. Bez telefona danas ne idu ni za kruhom.
U današnje vrijeme internet se ubrzano razvija. Brzi rast tržišta mobilnog interneta tjera kreatore web resursa da svoje stranice prilagode ovoj vrsti uređaja.
Moja poanta je da ako želite da vaša stranica bude uspješna i popularna, onda biste trebali razmisliti o tome kako olakšati pregled na svim vrstama gadgeta.
U ovom članku ću vam reći kako provjeriti web mjesto na mobilnim uređajima pomoću posebnih usluga. Uvjetno sam ih podijelio u dvije grupe: besplatne i plaćene.
Svi oni rade na isti način:
- idite na web stranicu razvojnog programera određene usluge
- preuzmite potreban softver
- pokrenuti aplikaciju
- i nakon nekog vremena mobilna verzija vaše web stranice je pred vama!
Postoje usluge koje mogu testirati vašu stranicu na mreži.
Izbor je, kao i uvijek, na vama!
Besplatno
Mobile Friendly. Ovu je aplikaciju kreirao Google posebno kako bi provjerio je li web-resurs optimiziran za pametne telefone i druge gadgete.
Odgovornik. Zahvaljujući ovoj aplikaciji, lako možete vidjeti kako stranica izgleda na Kindleu, iPadu, Androidu, iPhoneu.
iPad Peek. Jedan od najpopularnijih besplatnih alata za testiranje, pomoću kojeg možete vidjeti prikaz vlastite web stranice na iPhoneu i iPadu.
Opera Mini Simulator. Emulator iz Opera sadrži vrlo veliku bazu podataka mobilnih gadgeta. Njegov jedini nedostatak može se smatrati nedostatkom mrežnog načina rada, odnosno da biste testirali svoj resurs, morat ćete preuzeti i instalirati potrebni softver.
Gomez. Ocjenjuje kompatibilnost vašeg resursa s mobilnim uređajima po 30 parametara, što vam omogućuje da dobijete najpotpuniju ocjenu. Za besplatno korištenje morate unijeti svoje kontakt podatke.
MobiReady. Sjajan alat za testiranje koji ocjenjuje responzivnost dizajna. Provjera se temelji na najboljim standardima W3C (World Wide Web Consortium).
Emulator mobilnog telefona i Screenfly. Slične usluge koje također omogućuju pregled statusa web-resursa na zaslonima bilo kojeg gadgeta.
Plaćeno
CrossBrowser Testing. Provjerava na 130 različitih preglednika i 25 operativnih sustava, uključujući: Blackberry, Android, iPad, iPhone. Morat ćete platiti 29,95 USD mjesečno da biste ga koristili.
BrowserStack. Omogućuje brz pristup velikoj bazi podataka. Cijena mu je do 19 dolara za mjesec dana, ali postoji i besplatna verzija.
Browsshot. Dizajniran za uklanjanje s Androida, iPada, iPhonea. Za pet snimaka zaslona morat ćete platiti 1 dolar.
Perfecto Mobile. Omogućuje pristup bazi podataka tableta i mobitela, što vam omogućuje da vidite koliko je dobra optimizacija na svakoj vrsti uređaja. Za njegovu upotrebu morate platiti do 15 dolara po danu.
Preglednik s više preglednika. Aplikacija za više preglednika koja sadrži mobilne emulatore i preglednike za testiranje u bilo kojem formatu. Košta do 140 dolara, postoji i besplatna demo verzija.
Device Anywhere. Izvrstan alat koji vam omogućuje da provjerite web sadržaj testiranjem resursa u stvarnom vremenu. Može biti plaćeno (100 USD mjesečno) i besplatno.
Kao što vidite, postoji mnogo programa i usluga, odaberite najprikladniju opciju i iskoristite je za svoje zdravlje.
Mobilna verzija za tražilice
Ponekad se stranica savršeno prikazuje na svim mobilnim uređajima, ali tražilice google i Yandex ne prepoznaju njezinu mobilnost. Samo Yandex i google imaju dodatne zahtjeve za mobilnu verziju.
Prilagodbu mobilne verzije na Google možete provjeriti pomoću usluge Mobile friendly. Već sam to spomenuo na popisu besplatnih alata.
A za Yandex, sličan alat postoji u trenutno testiranoj verziji računa webmastera (https://beta.webmaster.yandex.ru/).
Pretplatite se na vijesti bloga i naučit ćete puno zanimljivih i korisnih stvari. U međuvremenu se opraštam od vas, vidimo se u novom članku!
Iskreno! Abdulin Ruslan
Evo takvo što, Google će uskoro (prema glasinama - od 21. travnja 2015.) početi vrlo loše rangirati stranice koje Google webmasteri nisu testirali za jednostavnost pregledavanja na mobilnim uređajima.
Nije točno jasno, stranica će imati problema samo ako se prikaže mobilnim korisnicima, ili čak i onima koji su se prijavili s računala, tj. hoće li biti zasebno pitanje?
Gotovo da ne mijenja bit za web-lokacije 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 čip, što je pomoglo da se problem riješi bez dodatnih gesti.
- drugi trenutak, ako vidimo poruku "Interaktivni elementi su preblizu jedan drugom." Prikazano na google.com/webmasters/tools/mobile-friendly.
Samo što u stilovima željene klase propisuje više uvlaka za veze i gumbe. Zahtijeva marginu ili padding od 5px.Ponekad blok Adsense može stvoriti ovaj problem. Možda trebate umetnuti veći blok ili s većim fontom.
U robots.txt napišite redak:
Dopusti: /wp-content/themes/TemplateName/style.css(Ako se datoteka sa stilovima nalazi na drugoj adresi, onda je pišemo. Ako postoji nekoliko datoteka sa stilovima, onda za svaku datoteku lijepimo retke.)
p.s. U početku očekujem da ste primarni napravili vi.
U aktualnom članku ćemo govoriti o tome kako se provjerava mobilna verzija stranice, njezinoj praktičnosti, čitljivosti i ispravnom prikazu.
Provjera praktičnosti prikaza na mobilnim uređajima može se provjeriti pomoću raznih web usluga. Posebno, ovu uslugu od Google-a vam omogućuje da adekvatno procijenite pismenost vašeg mobilnog izgleda.
Nedavno je Google najavio da će stranice koje ne udovoljavaju zahtjevima mobilnog izgleda biti pesimizirane u pretraživanjima putem mobilnih uređaja. Ovaj algoritam već radi, a neke stranice koje nisu marile za prikazivanje na mobilnim platformama zapravo su izostavljene iz rezultata mobilnog pretraživanja.
Ako je vaša stranica tri puta prikladna za desktop platforme, morate provjeriti kvalitetu mobilnog izgleda, inače ćete izgubiti impresivan dio prometa (udio mobilnih platformi u pretraživanju svake godine brzo raste), što znači da ćete izgubit ćete svoje kupce. Stoga morate prilagoditi svoje stranice za mobilne uređaje i provjeriti ispravan prikaz stranica u mobilnim preglednicima.
Provjera kvalitete mobilnog izgleda pomoću Google Chromea
Za programere, Google ima izvrstan alat za mobilnu simulaciju. Ovaj je alat ugrađen u preglednik Google Chrome. Za pristup, pritisnite F12 u pregledniku (prebacite se na način rada za programere) i kliknite na ikonu pametnog telefona:
Stranica se pretvara u način prebacivanja uređaja, gdje možete odabrati jedan od popularnih mobilnih uređaja, vrstu mreže (GPRS, 2G, 3G, 4G itd.), odrediti stroge postavke prikaza. To vam omogućuje simulaciju rada stranice na određenim mobilnim uređajima. Dostupni uređaji uključuju različite verzije iPada, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy i neke druge popularne uređaje.
Odabirom određenog uređaja možete provjeriti stranicu na mobilnom uređaju. Na primjer, prikaz glavne stranice web-mjesta "Nubex" na iPad 3:
I na Samsung Galaxy S4:
Ovdje ne samo da možete vidjeti prikaz stranice na određenom uređaju, već i u potpunosti raditi s web-mjestom, kao da imate pravi gadget ispred sebe. Bez sumnje, ovaj alat je jednostavno nezamjenjiv pri razvoju mobilne verzije stranice, ali kako će vaša stranica biti prikazana na stvarnim uređajima potrebno je provjeriti na stvarnim uređajima. Ovo je posebno važno ako trebate provjeriti prikaz stranice u "nativnim" preglednicima (Safari - za iPad / iPhone, IE - za Windows Phone itd.).
