Dobrý deň všetkým, priatelia a hostia môjho blogu. Dnes bude môj článok dosť krátky, ale dnes nestráca na aktuálnosti. Menovite vám chcem povedať o niečom takom, ako je kontrola Google mobilná verzia stránky. A možno by som ani nenapísal taký očividný článok, keby ma táto kontrola nedávno neraz zmiatla.
Kontrola pomocou google
Predtým sa ľudia neobťažovali responzívny dizajn alebo mobilnú verziu. Ale potom, keď sa objavili informácie, že vyhľadávače Ak stránky, ktoré nemajú mobilnú verziu, prejdu vo výsledkoch vyhľadávania na nižšiu úroveň, ľudia sa namáhajú (ako v prípade HTTPS). Ľudia si okamžite začali objednávať mobilné verzie od nezávislých pracovníkov, niektorí nainštalovali špeciálne doplnky, ktoré mohli fungovať krivo.
A tak, keď niekto získal adaptívne rozloženie alebo mobilnú verziu, okamžite ho skontroloval v špeciálnej službe Google, ktorá sa zameriava iba na to, ako vaše rozloženie spĺňa požiadavky. Teraz sa rozhranie trochu zmenilo, ale podstata zostáva rovnaká.
Ak sa chcete o tomto prípade presvedčiť sami, musíte ísť na túto službu — search.google.com/search-console/mobile-friendly... Potom do panela s adresou URL zadajte adresu tohto webu a počkajte. Po krátkom čase dostanete všetky informácie o tom, či váš web spĺňa požiadavky spoločnosti Google na mobilné rozloženie.
Nerozumiem...
Veľmi dobre viem, že moja stránka bola upravená, najmä preto, že som len nedávno vyladil rozloženie. Ale nedávno som zo zábavy išiel do tejto služby, aby som zistil, čo hovorí starý Gosha, a bol som veľmi prekvapený. Faktom je, že služba mi povedala, že môj blog nebol nikdy upravený a je zle čitateľný pre mobilné zariadenia.
Nechápal som, o čo ide, a tak som začal hľadať riešenie na internete. A na jednom webe som to našiel. Ukázalo sa, že celá vec bola v súbore robots.txt. Mal som to napísané čiernobielo, aby vyhľadávacie nástroje neindexovali moje súbory s témami, takže nevidel žiadnu mobilnú verziu.
Potom, čo som z robota odstránil jeden riadok ( Zakázať: / wp-content / themes / moja téma), potom služba okamžite zistila, že moja mobilná verzia je normálna. Nebojte sa preto, ak zrazu máte to isté. S najväčšou pravdepodobnosťou ste jednoducho nedovolili spoločnosti Google indexovať vašu tému.
No a v tomto pravdepodobne svoj dnešný článok dokončím. Dúfam, že vám to pomohlo. Ako môžeš vidieť služba Google, ktorá kontroluje mobilnú verziu stránky, vám umožňuje zistiť, ako stránka vyhovuje jej požiadavkám. Ale v skutočnosti je už zriedkavé nájsť web, ktorý nemá vlastnú mobilnú verziu ani odozvu. Uplynie trochu viac času a všetky novovytvorené stránky budú mať automaticky certifikát SSL.
Ďakujem, že ma čítate. Určite vás budem opäť čakať na stránkach môjho blogu. Zatiaľ vám odporúčam prečítať si ďalšie články. Som si istý, že pre seba nájdete veľa zaujímavých vecí. Veľa šťastia. Zbohom!
S pozdravom Dmitrij Kostin.
Dnes už nie je potrebné nikoho presviedčať o potrebe mobilnej verzie stránky. Koniec koncov, každý deň je stále viac návštevníkov zo smartfónov a tabletov. V čase tohto písania používa asi 20% mojich návštevníkov blogu mobilné zariadenia zobraziť. To znamená, že jeden z piatich navštívi môj web z telefónu alebo tabletu.
Pred niekoľkými rokmi som na takýchto návštevníkov ani nepomyslel, ale keď ich počet presiahol 10% z celkového počtu, začal som používať responzívne rozloženie. Vďaka tomu bolo možné správne zobrazovať obsah na mobilných zariadeniach a zvýšiť lojalitu návštevníkov a vyhľadávacích nástrojov k tejto stránke.
Mobilná verzia stránky a responzívny dizajn nie sú to isté. Tento článok sa zameria na testovanie responzívneho rozloženia, keď sa dizajn stránky zmení v závislosti od rozlíšenia obrazovky zariadenia návštevníka.
Aby ste sa uistili, že sa váš web zobrazuje správne na mobilných zariadeniach, musíte skontrolovať, a je ich niekoľko užitočné služby a nástroje.
Rýchla kontrola responzívneho rozloženia
Populárny internetový prehliadač (prehliadač) Mozilla Firefox vybavené vstavanými nástrojmi na kontrolu vhodnosti zobrazenia dizajnu webových stránok na mobilných zariadeniach. Ak ho chcete použiť, prejdite na „Menu“ - „Vývoj“ - „Responzívny dizajn“. Alebo jednoducho stlačte tri klávesy na klávesnici súčasne ++ [M]
Mali by ste vidieť niečo podobné nasledujúcemu:
Zmenou rozlíšenia a orientácie obrazovky môžete skontrolovať, ako sa váš web zobrazí mobilným návštevníkom.
Prehliadač Google Chrome má tiež vstavanú podporu na kontrolu odozvy na dizajn stránok. Ak to chcete urobiť, prejdite do ponuky, vyberte položku „Ďalšie nástroje“ a potom „Nástroje pre vývojárov“ (alebo stlačte kláves ).
Potom kliknite na ikonu responzívneho dizajnu (alebo súčasne kliknite na klávesnicu ++ [M]):
V strede obrazovky uvidíte, ako sa bude váš web zobrazovať na obrazovkách mobilných zariadení:
SEO testovanie mobilného dizajnu
Ako viete, dvaja svetoví lídri vo vyhľadávaní, Google a Yandex, majú svoj vlastný neskromný názor na to, ako by mala stránka vyzerať na obrazovkách mobilných zariadení. A ak je stránka uznaná za nevhodnú pre mobilných návštevníkov, vo výsledkoch vyhľadávania klesne. Ak teda z hľadiska SEO nechcete prísť o mobilných návštevníkov, musíte mať nielen responzívny dizajn, ale musia to považovať aj vyhľadávače za vhodné, teda vhodné pre mobilné zariadenia.
Ak chcete skontrolovať prispôsobivosť pomocou služby Google, prejdite na nasledujúcu adresu a zadajte názov svojho webu: https://www.google.com/webmasters/tools/mobile-friendly/.
Takto vyzerá výsledok kontroly môjho blogu:
S Yandexom je to trochu komplikovanejšie, na overenie je potrebné zaregistrovať sa v službe Yandex.Webmaster a použiť beta verziu rozhrania:
Online služby na testovanie adaptability
Hlavnou úlohou týchto služieb je predstaviť (ukázať), ako bude váš web vyzerať na mobilnom zariadení. Existuje veľké množstvo stránok s takouto funkciou. Uvediem len niekoľko z nich. Vo väčšine prípadov duplikujú vstavanú funkciu FireFox a Chrome.
Google resizer
Začnem znova od spoločnosti Google, ktorá má vlastnú responzívnu demonštračnú službu: http://design.google.com/resizer/#
Screenfly Quirktools
Druhá pekná služba je http://quirktools.com/screenfly/. Ukáže vám, ako môže váš web vyzerať dokonca aj v televízii!
Prispôsobiteľ Symby.ru
Aby som neurazil „domáceho výrobcu“, uvediem príklad na inom webe: http://symby.ru/adaptest/. Na jednej stránke uvidíte niekoľko zobrazení naraz s rôznym rozlíšením obrazovky.
Rýchlosť mobilnej verzie stránky
Keď sa ubezpečíte, že váš web reaguje a správne sa zobrazuje na obrazovkách väčšiny zariadení, mali by ste skontrolovať rýchlosť jeho práce. Opäť platí pre mobilných návštevníkov.
Prehľady rýchlosti stránky
Google ako vždy predbieha ostatné: https://developers.google.com/speed/pagespeed/insights/. Táto služba vám ukáže, ako stránka vyzerá na obrazovke telefónu, a poskytne odporúčania na optimalizáciu kódu na zvýšenie rýchlosti načítania na mobilných zariadeniach.
WebPageTest
A na záver uvediem príklad služby, ktorá nielenže ukáže, ako stránka vyzerá na mobilnom zariadení, ale ukáže aj rýchlosť jej práce: http://www.webpagetest.org/
závery
Podľa môjho názoru je v každodennej práci pri vykonávaní zmien v dizajne stránky jednoduchšie používať vstavané funkcie. Prehliadače FireFox a Chrome. Potom musíte samozrejme skontrolovať lojalitu vyhľadávacích nástrojov voči svojmu návrhu. A až potom, na upokojenie duše alebo predvádzanie sa, môžete využiť online služby.
Webové stránky väčšinou nie sú vyvinuté na telefónoch alebo dokonca tabletoch, ale na počítačoch alebo prenosných počítačoch. Používatelia stránok si ho však môžu pozrieť z akéhokoľvek zariadenia. Aby ste pochopili, že obsah stránok sa na väčšine zariadení zobrazuje rovnako dobre, môžete mať po ruke veľa mobilných telefónov s rôznym rozlíšením obrazovky a pracujúcich s rôznym rozlíšením. operačné systémy, ale môžete použiť hotové služby, ktoré skontrolujú, do akej miery je stránka prispôsobená na prezeranie na mobilných zariadeniach. V tomto článku sa pozrieme na jeden z týchto nástrojov, ktoré Google ponúka na kontrolu, či je vaša stránka optimalizovaná pre mobilné zariadenia.
Ako otvoriť kontrolu mobilnej optimalizácie Google Search Console
Ak chcete otvoriť kontrolu optimalizácie pre mobilné zariadenia Zariadenia Google Je potrebné zadať Search Console adresný riadok adresa prehliadača:
Https://search.google.com/test/mobile-friendly
alebo jednoducho choďte na → tento odkaz (otvorí sa v novom okne).
Keď je otvorená stránka kontroly optimalizácie pre mobilné zariadenia Google Search Console, musíte zadať adresu stránok alebo stránok, ktorých optimalizáciu chcete skontrolovať, a kliknúť na „ Overiť"Ako je znázornené na obrázku nižšie:
Potom Google Search Console chvíľu trvá, kým sa načíta a analyzuje zadaná stránka:
Ak Google Search Console na základe výsledkov kontroly rozhodne, že stránka je optimalizovaná pre mobilné zariadenia, zobrazí sa správa podobná tej na obrázku nižšie:
Ak sa v dôsledku kontroly odhalia chyby, potom stránka na odoslanie správy bude vyzerať takto:
s uvedením zjavných problémových oblastí na stránke.
Zhrnutie:
Môžete tak rýchlo a efektívne vyhodnotiť, do akej miery je stránka optimalizovaná, aby bolo vhodné ju používať nielen na počítači, ale aj na mobilné telefóny... Google Search Console navyše poskytuje množstvo odporúčaní, ktoré môžu byť užitočné pre optimalizáciu. správna práca web na akomkoľvek zariadení vrátane mobilného.
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ú stránky, ktoré nespĺňajú požiadavky responzívneho dizajnu, pri mobilných vyhľadávaniach 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 teda 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, zariadenie na Základňa 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úť“; stlačením kombinácie Ctrl + Shift + M; kliknutím na tlačidlo „Režim responzívneho dizajnu“ na paneli s nástrojmi webového vývojára;
- Chrome: prejdite na mobilný režim stlačením klávesu F12 by ste potom mali vybrať 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 komplexne vyhodnotiť mobilný dizajn... 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). Optimalizáciu mobilného webu posudzuje aj nástroj Bing Checker alebo napríklad Kontrola mobilu z W3C.
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 kontroluje optimalizácie 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 používaním služby 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.
Tento článok sa zameria na to, ako skontrolovať mobilnú verziu webu, jeho pohodlie, čitateľnosť a správne zobrazenie.
Kontrolu použiteľnosti svojho webu pre mobilné zariadenia môžete skontrolovať pomocou rôznych webových služieb. Najmä túto službu od spoločnosti Google vám umožňuje adekvátne posúdiť gramotnosť vášho mobilného rozloženia.
Nedávno Google oznámila, že weby, ktoré nespĺňajú požiadavky na rozloženie pre mobilné zariadenia, budú pri vyhľadávaní vykonanom pomocou mobilných zariadení pesimizované. Tento algoritmus už funguje a niektoré stránky, ktoré sa neobťažovali zobrazovať na mobilných platformách, boli vo výsledkoch vyhľadávania pre mobilné zariadenia skutočne vynechané.
Ak je váš web trikrát vhodný pre platformy pre stolné počítače, musíte skontrolovať kvalitu rozloženia pre mobilné zariadenia, inak prídete o pôsobivú časť návštevnosti (podiel mobilných platforiem na vyhľadávaní každým rokom rýchlo rastie), čo znamená, že budete prísť o svojich zákazníkov. Preto musíte svoje stránky prispôsobiť pre mobilné zariadenia a skontrolovať správnosť zobrazovania stránok v mobilných prehliadačoch.
Kontrola kvality rozloženia pre mobilné zariadenia pomocou prehliadača Google Chrome
Pre vývojárov má Google skvelý nástroj na simuláciu mobilných zariadení. Tento nástroj je zabudovaný do prehliadača Google chrome... Na prístup k nemu je potrebné kliknúť F12 v prehliadači (prejdite do režimu vývojára) a kliknite na ikonu smartfónu:
Stránka sa prevedie do režimu prepínania zariadení, kde si môžete vybrať jedno z obľúbených mobilných zariadení, typ siete (GPRS, 2G, 3G, 4G atď.), Zadať prísne parametre zobrazenia. To vám umožní simulovať prevádzku stránok na konkrétnych mobilných zariadeniach. Medzi dostupné zariadenia patria rôzne verzie iPadu, ipad mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy a niektoré ďalšie obľúbené zariadenia.
Výberom konkrétneho zariadenia môžete stránku skontrolovať na mobilnom zariadení. Napríklad zobrazovanie domovská stránka stránka „Nubex“ na iPade 3:
A na Samsung Galaxy S4:
Tu môžete nielen vidieť zobrazenie stránok na konkrétnom zariadení, ale tiež s nimi plne pracovať, ako keby ste pred sebou mali potrebný modul gadget. Tento nástroj je nepochybne nepostrádateľný pri vývoji mobilnej verzie webu, ale ako sa bude váš web zobrazovať na skutočných zariadeniach - musíte skontrolovať na skutočných zariadeniach. Toto je obzvlášť dôležité, ak potrebujete skontrolovať zobrazenie stránok v „natívnych“ prehliadačoch (Safari - pre iPad / iPhone, IE - pre Windows telefón atď.).