Služba Google na kontrolu mobilnej verzie. Ak Google hovorí „Táto stránka nie je optimalizovaná pre mobilné zariadenia. Emulátory mobilných zariadení: Android Studio a Apple Xcode

Dobré popoludnie priatelia. Dnes trochu odbočím od reklamných nástrojov a založím novú rubriku na blogu. Hovorí sa mu „Webmastering“ a bude obsahovať užitočné materiály o zlepšovaní výkonu a kvality stránok, vstupných stránok. Začnem prehľadom skvelého nástroja na kontrolu mobility webových stránok.

Kontrola rýchlosti webu pomocou služby Google

Google na to ponúka 2 nástroje.

# 1 Prehľad rýchlosti stránky

Myslím, že ho dobre poznáš. Vložte odkaz na svoj web, kliknite na tlačidlo „Analyzovať“ a získajte výsledok vo forme dvoch záložiek.

Karta „Pre mobil“ obsahuje prehľad o rýchlosti načítania stránky pre mobilné zariadenia a - dôležité! - hodnotenie pohodlia stránka pre smartfóny. Na karte „Pre počítače“ je rovnaká analýza pre pracovnú plochu.

Najlepšie na tom je, že služba vám umožňuje sťahovať optimalizované obrázky, CSS a skripty, ktoré chcete použiť na svojom webe. Tu je taký bezplatná pomoc z google.

Ako vidíte na obrázku, mám vážne problémy s mobilnou verziou. Ako sa máš?

# 2 Testmysite.Withgoogle

V skutočnosti je to ten istý nástroj, len má krásny obal. Na druhý deň som objavil túto službu a bol som podplatený nahlasovacím formulárom.

Keď vložíte odkaz na stránku a kliknete na „Skontrolovať“, služba ponúkne výsledok v podobe plnohodnotnej dynamickej vstupnej stránky, na ktorej vám výstižne a presvedčivo povie, ako je to so stránkou, a ponúkne stiahnuť celú správu.

Samozrejme, požiadal som o úplnú správu a do pár minút som ju dostal poštou. Vyzerá to rozumne, niekoľko obrazoviek užitočných pokynov s odkazmi na konkrétne materiály:

Je pozoruhodné, že ak analyzujete ten istý web, údaje o týchto nástrojoch sa budú mierne líšiť. Pracujú však na rovnakej technológii.

Takto môžete v priebehu niekoľkých sekúnd nielen skontrolovať mobilitu webu a skontrolovať rýchlosť načítania - ale tiež si stiahnuť plnohodnotný prehľad s optimalizovaným obsahom. Je zadarmo. Z google

Ako ste na tom s mobilitou?

Verzie stránok nie sú len možným rozmarom vývojárov, dodatočnou položkou výdavkov (alebo výnosov, ak hovoríme o dodávateľoch) a prejavom záujmu návštevníkov tohto zdroja. Podľa najnovších vyhlásení zástupcov spoločnosti Google budú weby, ktoré nespĺňajú požiadavky responzívneho dizajnu, pri vyhľadávaní z mobilných zariadení pesimizované. Domáci vyhľadávač Yandex vydal aj odporúčania „Ako dôležité je byť mobilný“ a ubezpečil, že z dôvodu pohodlia používateľov mobilných zariadení označí vo výsledkoch vyhľadávania mobilné verzie a dá prednosť adaptívnym stránkam.

Vývojári preto musia nevyhnutne prispôsobiť stránky pre smartfóny a skontrolovať prevádzkyschopnosť displeja zdrojov. V opačnom prípade môžete v blízkej budúcnosti očakávať stratu významnej časti návštevnosti, a teda potenciálnych zákazníkov, pretože nové pracovné algoritmy od spoločností Google a Yandex sú už účinné. Môžete skontrolovať mobilnú verziu stránky rôzne cesty: zmenou prehliadača pri prepnutí do režimu vývojára, pomocou emulátorov mobilných zariadení alebo webových služieb.

Vľúdnosť webových stránok pre mobilné zariadenia

Prispôsobivosť mobilným zariadeniam sa posudzuje podľa rôznych parametrov. Mobilnú verziu stránky je dôležité skontrolovať nielen z hľadiska správneho zobrazenia, ale stojí za to zvážiť aj ďalšie faktory:

nedostatok animácie, „ťažký“ dizajn a obrázky;
rýchlosť načítania zdrojov (mala by byť minimálna);
nie je potrebné horizontálne posúvanie;
nedostatok doplnkov Silverlight a apletov Java;
jednoduchá navigácia na stránkach;
kód obsahuje metaznačku výrezu.

Ak sú splnené vyššie uvedené podmienky, algoritmy najbežnejších vyhľadávacích nástrojov rozpoznajú webovú stránku ako vhodnú pre mobilné zariadenia a zvyšujú pozíciu stránky vo výsledkoch vyhľadávania vo vzťahu k zdrojom, ktoré nie sú prispôsobené.

Skutočné testovanie na mobilných zariadeniach

Najpohodlnejším spôsobom je otestovať mobilnú verziu stránky na skutočných smartfónoch. Táto metóda umožní testovanie v reálnych podmienkach. V ideálnom prípade je lepšie skontrolovať webový zdroj na niekoľkých zariadeniach, ale ak rozpočet projektu nezahŕňa náklady na nákup niekoľkých smartfónov najobľúbenejších modelov, postačí zariadenie so systémom Android alebo Apple.

Zmena veľkosti okna prehliadača

Najjednoduchšie, ale nie optimálne z hľadiska overovania, je zmeniť veľkosť okna prehliadača. Ak je stránka vytvorená pomocou technológie, môžete týmto spôsobom skontrolovať mobilnú verziu stránky. Ale v prípadoch, keď sa používa samostatný dizajn, zdroj potrebuje jasný údaj, že používateľ pochádza zo smartfónu, tabletu alebo iného mobilného zariadenia. Takže, tadiaľto umožňuje skontrolovať dostupnosť mobilnej verzie stránky. Správnosť zobrazenia (z technického hľadiska) je však nepravdepodobné.

Prepnutie do režimu vývojára v prehliadači

Najlepším spôsobom, ako skontrolovať mobilnú verziu webu (Google alebo Yandex, ako aj ďalšie vyhľadávacie nástroje zdôrazňujú prispôsobivosť v zozname najdôležitejších faktorov ovplyvňujúcich poradie), je prepnúť sa v prehliadači do režimu vývojára. Metóda funguje podobným spôsobom vo viacerých prehliadačoch:

Mozilla: Do vývojárskeho režimu sa môžete prepnúť zvolením možnosti „Responzívny dizajn“ v ponuke „Rozvinúť“; lisovanie kombinácia Ctrl+ Shift + M; kliknutím na tlačidlo „Režim responzívneho dizajnu“ na paneli s nástrojmi webového vývojára;
Chrome: prepnite do mobilného režimu stlačením klávesu F12 a potom vyberte ikonu mobilnej verzie (smartphone v ľavom hornom rohu zobrazeného okna).

V Opere sa môžete prepnúť do režimu vývojára a skontrolovať mobilnú verziu stlačením klávesov Ctrl + Shift + i, ale existuje aj iný spôsob. Špeciálna verzia prehliadača - Opera Mobile Classic Emulator - vám umožňuje hodnotiť mobilný dizajn mnohými spôsobmi. Verzie programu existujú pre hlavné operačné systémy.

Emulátory mobilných zariadení: Android Studio a Apple Xcode

Mobilnú verziu webu (Yandex a Google) môžete skontrolovať pomocou emulátorov mobilných zariadení, ktorými sú pre Android a Apple Android Studio alebo Apple Xcode.

Také nástroje celkom presne reprodukujú web, ako bude vyzerať na mobilných zariadeniach: v programoch sú predinštalované najbežnejšie verzie prehliadačov pre mobilné zariadenia. Emulátory však neberú do úvahy rýchlosť sťahovania a niektoré ďalšie nuansy, ktoré je možné pozorovať v reálnych podmienkach.

Ak to chcete skontrolovať, stačí nainštalovať jeden z vyššie uvedených programov do počítača a otvoriť stránku z emulátora.

Webové služby na overenie mobilného dizajnu

Je ich viac jednoduché spôsoby skontrolujte mobilnú verziu stránky. Online služba Responsinator vám napríklad umožňuje vyhodnotiť správnosť zobrazenia zdroja na mobilných zariadeniach a jednoduché používanie webu používateľom. Zdroj zobrazuje stránku tak, ako by sa zobrazovala v šiestich rôzne zariadenia založené na systéme Android alebo Apple a vo viacerých smeroch.

Kontrola optimalizácie webových stránok pre mobilné zariadenia

Ďalšie zdroje, ktoré vám umožňujú skontrolovať mobilnú verziu webu, dodatočne hodnotia adaptabilitu a nielen ukazujú, ako by stránka vyzerala na rôznych zariadeniach. Najuznávanejšími službami sú Google Mobile Friendly a Yandex WebMaster (kontrola webových stránok). Bing's Checker alebo napríklad W3C's Mobile Checker taktiež vyhodnocujú optimalizáciu stránok pre mobilné zariadenia.

Od webmastera pri hodnotení verzie stránky pre mobilné zariadenia využívajúce online služby stačí zadať adresu zdroja a čakať na dokončenie analýzy. Väčšina vyššie uvedených služieb testuje optimalizáciu parametrov vhodnosti pre mobilné zariadenia uvedených vyššie.

Prispôsobivosť webového zdroja môžete teda vyhodnotiť niekoľkými spôsobmi: od testovania na skutočných smartfónoch, tabletoch alebo iných mobilných zariadeniach alebo zmeny veľkosti okna webového prehliadača, kontroly v emulátoroch alebo v režime vývojára webového prehliadača a končiac pomocou služieb od spoločností Yandex a Google. Je veľmi jednoduché komplexne skontrolovať mobilnú verziu stránky, čo vám umožní vykonať potrebné úpravy a zlepšiť pozíciu stránky vo výsledkoch vyhľadávania.

Existuje taká vec, Google čoskoro (podľa klebiet - od 21. apríla 2015) začne veľmi zle hodnotiť weby, ktoré neprešli kontrolou v službe Google Webmasters, aby sa uľahčilo ich prezeranie na mobilných zariadeniach.

Nie je to úplne jasné, stránka bude mať problémy iba vtedy, ak sa zobrazí mobilným používateľom alebo dokonca tým, ktorí sa prihlásili z počítača, to znamená, že bude existovať samostatný problém?

V podstate sa to takmer nemení na stránkach, ktoré majú polovicu alebo značnú časť mobilnej návštevnosti. Preto je lepšie absolvovať test čo najrýchlejšie.

Poviem vám, ako to urobiť:

Predtým	Po

Prvý kus, čo pomohlo vyriešiť problém bez ďalších gest.

V súbore robots.txt pridajte riadok:
Povoliť:/wp-content/themes/Template_Name/style.css

(Ak sa súbor so štýlmi nachádza na inej adrese, napíšte ho. Ak existuje niekoľko súborov so štýlmi, vložte riadky pre každý súbor.)

Druhý moment, ak vidíme správu „ Interaktívne prvky sú príliš blízko seba. " Zobrazené na google.com/webmasters/tools/mobile-friendly.
K požadovanej triede len priradí viac zarážok pre odkazy a tlačidlá v štýloch. Zachytí okraj alebo výplň 5 pixelov alebo viac.
Blok Adsense môže niekedy spôsobiť taký problém. Možno budete musieť vložiť väčší blok alebo väčšie písmo.

P.S. Pôvodne očakávam, že primárnu úlohu ste vykonali vy.

Ech, Google nás opäť „poteší“ svojimi pravidlami a algoritmami a prichádza s novými „migrénami“ pre správcov webu. Tentokrát sa nám ponúka vyskúšať nový algoritmus vhodný pre mobilné zariadenia, ktorý v mobilnom vyhľadávaní vyvolá prispôsobené stránky a zníži zdroje „nemobilných“.

Ako to všetko bude fungovať?

Veľmi jednoduché: všetky stránky, ktoré nie sú vhodné pre mobilné zariadenia (podľa Googlu), budú jednoducho ignorované vyhľadávač a zobrazené v mobilnom vyhľadávaní na posledných miestach a mobilné zdroje stúpnu vyššie. Napríklad, ak existuje niekoľko stránok s podobnou tematikou, potom na tablete používateľ nájde tie, ktoré majú prispôsobený dizajn na prezeranie na mobilných zariadeniach.

Moje dojmy z tejto inovácie sú dvojaké: na jednej strane je všetko správne, ak používam vyhľadávanie na tablete alebo smartfóne, potom chcem v SERP vidieť tie stránky, ktoré sa na obrazovke správajú správne. Na druhej strane je algoritmus na určovanie „mobility“ taký zvláštny, že núti človeka zamyslieť sa nad vhodnosťou takéhoto „know-how“. Samozrejme, že som skontroloval svoje stránky, či neobsahujú odporúčania, a pripadalo mi to prinajmenšom zvláštne, ako sa Google správa k analýze zdrojov.

Stojí za to povedať, že pri vytváraní stránok som vždy kontroloval vzhľad na rôznych zariadeniach ručne a prostredníctvom služieb, takže o „mobilite“ som bol pokojný, ale ukázalo sa, že to nie je také jednoduché. Google preto odporúča otestovať vaše zdroje prostredníctvom testu vhodného pre mobilné zariadenia:

Stačí zadať adresu stránok alebo stránok a kliknúť na „Analyzovať“. Pri kontrole hlavnej stránky webu môjho krymského priateľa krimeo.ru prostredníctvom testu som zistil, že stránka bola optimalizovaná pre mobilné zariadenia.

Nie je prekvapením, že jeho šablóna reaguje a stránka na nej vyzerá skvele rôzne zariadenia... Potom som sa rozhodol skontrolovať svoje stránky a aké bolo moje prekvapenie, keď tento zdroj neprešiel testom.

Zaujímavé ... šablóna tohto blogu je tiež pohotová, viackrát som sa k nej dostal z tabletu aj zo smartfónu ... prečo sa to potom spoločnosti Google nepáčilo?

Začal som analyzovať, čo presne na stránke môže vyvolať taký výsledok. Riešenie sa našlo tam, kde som to najmenej čakal: na mojom webe boli miniatúry článkov zobrazené v obdĺžniku s rozmermi 720 x 350 pixlov a to (podľa spoločnosti Google) neznamená, že sa web považuje za mobilný. Prekvapivo platí, že čím väčší je obrázok (tlačidlá), tým jednoduchšie je pre používateľov z mobilných zariadení zasahovať prstom ... Google však uvažuje inak.

Je tiež prekvapujúce, že pri prehliadaní stránok v smartfóne sú všetky obrázky dokonale prispôsobené veľkosti obrazovky a nie sú pozorované žiadne „rušičky“. Rozhodol som sa vykonať experiment a veľkosť obrázkov som prispôsobil, t.j. čím menšia je veľkosť obrazovky zariadenia, tým menší je obrázok na webe. Skúste chytiť roh prehliadača a zmenšiť ho.
Niektorí webmasteri môžu mať teraz iný problém: ak sa Google správal takto pomocou miniatúr veľká veľkosť, čo znamená, že s ilustráciami k článkom bude situácia rovnaká, a to je oveľa dôležitejšie ako domovská stránka... Aby ste to urobili, musíte obrázky prispôsobiť celému webu pomocou prostriedkov na spustenie skriptu js, ale to nie je všetko, priečinok s vyrovnávacou pamäťou a pravidlo na ukladanie obrázkov je potrebné v programe .htaccess duplikovať.

Články, ktoré obsahujú obrázky veľkých rozmerov, neprechádzajú testom Google a články s menšími ilustráciami sa považujú za plne optimalizované pre mobilné zariadenia. Nebudem dávať screenshoty - vezmite URL samostatnej publikácie a skontrolujte, či je „mobilná“.

Prečo inak Googlebot vidí, že blog nie je optimalizovaný pre mobilné zariadenia

Pretože v súbore robots.txt je veľa zbytočných obmedzení.

V automaticky generovanom virtuálnom súbore robots.txt WordPress je iba jedno obmedzenie:

Zakázať: / wp-admin

A tu je to, čo Google píše o tom, prečo tvorcovia WordPress v predvolenom nastavení vytvorili súbor robots.txt takto:

Aby ste zaistili správne indexovanie a vykresľovanie stránok, musíte aplikácii Googlebot poskytnúť prístup k jazykom JavaScript, CSS a grafické súbory na strane. Googlebot by mal vašu stránku vidieť ako bežného používateľa. Ak súbor robots.txt neumožňuje prístup k týmto zdrojom, spoločnosť Google nebude môcť správne analyzovať a indexovať obsah. To môže zhoršiť hodnotenie vašej stránky vo vyhľadávaní.

User-agent: * 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 : Googlebot-Image Allow: / wp-content / uploads / User-agent: YandexImages Allow: / wp-content / uploads /

Dúfam, že Google zlepší svoj overovací algoritmus a poskytne skutočné výsledky, pretože „v reálnom živote“ na tabletoch a smartfónoch vyzerá veľa stránok skvele.

Takéto prekvapenie v podobe algoritmu vhodného pre mobilné zariadenia môžeme vidieť od 21. apríla 2015. Google nás „rozmaznáva“)). Žijete v mieri? Tu je Panda pre vás! Málo? Aj tu je tučniak! Poslať preč? Prispôsobte sa mobilom!

Výkon

Rozhodnite sa, čo s týmito informáciami urobíte, či je prechod na responzívne návrhy alebo nie je osobnou záležitosťou každého správcu webu, tieto nové pravidlá však už nadobudli účinnosť.

Mimochodom, „optimalizované pre mobilné zariadenia“ nie je len responzívny dizajn stránok, vhodná je tu aj samostatná mobilná verzia a doplnok pre WordPress, hlavnou vecou je, že stránka na každom zariadení vyzerá správne. Vezmite to do úvahy.

Pri vašich projektoch ste si už asi dávno všimli, že počet mobilných užívateľov neustále rastie. U niektorých je tento trend menej nápadný a pri niektorých projektoch sa tento údaj každý rok zdvojnásobí alebo viac. Podľa údajov LiveInternet predstavujú viac ako 50% návštevnosti Runetu mobilné zariadenia. Mimochodom, veľa čitateľov tohto blogu sa už dlhší čas sťažuje, že tu neexistuje žiadna mobilná verzia 🙂, ktorá bude, samozrejme, v blízkej budúcnosti opravená.

Túto skutočnosť mobilizácie nemôžu ignorovať ani vyhľadávacie platformy. Postupne poskytujú výhody v mobilnom vyhľadávaní tým stránkam, ktoré sú prispôsobené zariadeniam používateľov.

Google spočiatku označoval stránky v úryvkoch, ktoré by správne zobrazovali na mobilných telefónoch.

Spoločnosť Google taktiež vytvorila nástroj, ktorý má správcom webu pomôcť skontrolovať správnosť zobrazenia webových stránok na mobilných zariadeniach:
https://www.google.com/webmasters/tools/mobile-friendly/

21. apríla spustila spoločnosť Google na Západe nový algoritmus s názvom Mobilegeddon. Teraz úspešné absolvovanie testu vhodnosti pre mobilné zariadenia je jedným z faktorov SEO, ktoré spoločnosť Google berie do úvahy. V SERP zatiaľ nenastali žiadne zásadné zmeny, ale môžete sa pripraviť.

Ako zabezpečíte, aby vaše stránky reagovali na Google? Tajomstvo je jednoduché - musíte nastaviť úlohu pre svojich programátorov / návrhárov rozloženia. Ak nie je čas čakať, potom ... môžete použiť MobileCheat 🙂

V skutočnosti ide o nevyskúšanú technológiu, nie je známe, k čomu to v budúcnosti povedie, preto ju používajte iba na vlastné riziko a riziko. Tu je možné vykonať najmenej sériu testov.

Ako obísť test Google s MobileCheat

Existujú iba dve veci, ktoré treba urobiť:

1. Pridajte do kódu meta značku výrezu.

2. Zatvorte prístup robota k súborom CSS alebo k priečinku, v ktorom sa nachádzajú, prostredníctvom súboru robots.txt

Môj blog napríklad takto prejde predvoleným testom:

Po zatvorení CSS sa obrázok zmení:

Zdá sa, že sa na stránke nič nezmenilo, ale výsledky testov sú úplne odlišné. Mimochodom, na niektorých stránkach sám rád vypnem CSS, aby bolo pohodlnejšie ich prezerať a používať 🙂 preto je to úplne odôvodnená schéma. Poskytuje sa však iba na informačné účely.

Čo si o tom myslíš? Bude to Google počítať ako protiútok s rytierom alebo má všetko vopred premyslené a okamžite dá stránku na kontrolu a dá mat? 🙂