Ak Google napíše „Stránka nie je optimalizovaná pre mobilné zariadenia. Kontrola optimalizácie pre mobilné zariadenia Kontrola pohodlia pri prezeraní mobilných zariadení Yandex

Dnes už netreba nikoho presviedčať o potrebe mobilnej verzie stránky. Veď každým dňom pribúda návštevníkov zo smartfónov a tabletov. V čase písania tohto článku asi 20 % návštevníkov môjho blogu používa na prehliadanie mobilné zariadenia. To znamená, že každý piaty navštívi moju stránku z telefónu alebo tabletu.

Pred niekoľkými rokmi som o takýchto návštevníkoch ani neuvažoval, ale keď ich počet presiahol 10% z celkového počtu, začal som používať adaptívne usporiadanie. To umožnilo správne zobrazovať obsah na mobilných zariadeniach a zvýšiť lojalitu návštevníkov aj vyhľadávačov k stránke.

Mobilná verzia stránky a adaptívny dizajn nie sú to isté. Tento článok sa zameria na testovanie adaptívneho rozloženia, kedy sa dizajn stránky mení v závislosti od rozlíšenia obrazovky zariadenia návštevníka.

Aby ste sa uistili, že sa vaša stránka zobrazuje správne na mobilných zariadeniach, musíte skontrolovať, a na to existuje niekoľko užitočných služieb a nástrojov.

Rýchla kontrola adaptívneho rozloženia

Populárny internetový prehliadač (prehliadač) Mozilla Firefox je vybavená vstavaným nástrojom na kontrolu dizajnu stránky z hľadiska vhodnosti pre zobrazenie na mobilných zariadeniach. Ak ho chcete použiť, prejdite na "Menu" - "Vývoj" - "Adaptívny dizajn". Alebo jednoducho stlačte tri klávesy na klávesnici súčasne ++[M]

Mali by ste vidieť niečo takéto:

Zmenou rozlíšenia a orientácie obrazovky môžete skontrolovať, ako sa bude vaša stránka zobrazovať návštevníkom z mobilných zariadení.

Prehliadač Google Chrome má tiež vstavanú podporu na kontrolu prispôsobivosti dizajnu lokality. 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 stlačte ikonu responzívneho dizajnu (alebo súčasne stlačte klávesnicu ++[M]):

V strede obrazovky uvidíte, ako sa bude vaša stránka 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á ako nevhodná pre mobilných návštevníkov, potom klesá vo výsledkoch vyhľadávania. Takže z hľadiska SEO, ak nechcete prísť o mobilných návštevníkov, tak by ste mali mať nielen responzívny dizajn, ale aj vyhľadávače by ho mali považovať za responzívny, teda mobilný.

Ak chcete skontrolovať prispôsobivosť pomocou služby Google, prejdite na nasledujúcu adresu a zadajte názov svojej lokality: https://www.google.com/webmasters/tools/mobile-friendly/.

Takto vyzerá výsledok kontroly môjho blogu:

S Yandexom je to trochu komplikovanejšie, na kontrolu sa musíte zaregistrovať v službe Yandex.Webmaster a použiť beta verziu rozhrania:

Online služby na kontrolu adaptability

Hlavnou úlohou týchto služieb je prezentovať (ukázať), ako bude vaša stránka vyzerať na mobilnom zariadení. Existuje veľa stránok s takouto funkcionalitou. Uvediem len niektoré z nich. Vo väčšine prípadov duplikujú vstavané funkcie FireFox a Chrome.

Google resizer

Začnem znova s ​​Google, ktorý má vlastnú službu demonštrácie prispôsobivosti: http://design.google.com/resizer/#

Prehľadávač Quirktools

Druhá pekná služba je http://quirktools.com/screenfly/ . Ukáže, ako môže vaša stránka vyzerať aj v televízii!

Prispôsobený Symby.ru

Aby som neurazil „domáceho výrobcu“, uvediem príklad inej stránky: http://symby.ru/adaptest/. Na jednej stránke uvidíte naraz niekoľko zobrazení 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äť vo vzťahu k mobilným návštevníkom.

PageSpeed ​​Insights

Google je vždy popredu: https://developers.google.com/speed/pagespeed/insights/ . Táto služba ukáže, ako stránka vyzerá na obrazovke telefónu a poskytne odporúčania, ako optimalizovať kód, aby sa zvýšila rýchlosť sťahovania na mobilných zariadeniach.

WebPageTest

A na záver uvediem príklad služby, ktorá nielen 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 pri každodennej práci pri vykonávaní zmien v dizajne stránky jednoduchšie využiť vstavané možnosti prehliadačov FireFox a Chrome. Potom, samozrejme, musíte skontrolovať lojalitu vyhľadávačov k vášmu dizajnu. A až potom, aby ste upokojili dušu alebo sa pochválili, môžete využiť online služby.

Pri svojich projektoch ste si určite už dávno všimli, že počet mobilných používateľov neustále rastie. U niektorých je tento trend menej viditeľný a pri niektorých projektoch sa toto číslo každý rok zvyšuje 2-krát alebo viac. Podľa LiveInternetu viac ako 50 % návštevnosti na ruskom internete teraz pochádza z mobilných zariadení. Mimochodom, mnohí čitatelia tohto blogu sa už dlhšie sťažujú, že neexistuje mobilná verzia 🙂 čo bude samozrejme v blízkej dobe opravené.

Tento fakt mobilizácie nemôžu ignorovať ani vyhľadávacie platformy. Postupne zvýhodňujú v mobilnom vyhľadávaní tie stránky, ktoré sú prispôsobené užívateľským zariadeniam.

Google najprv dával stránkam v úryvkoch označenie, že sa na mobiloch zobrazia správne.

Google tiež vytvoril nástroj, ktorý pomáha správcom webu kontrolovať správne zobrazenie stránky na mobilných zariadeniach:
https://www.google.com/webmasters/tools/mobile-friendly/

21. apríla Google spustil nový algoritmus, na Západe sa nazýval Mobilegeddon. Úspešné absolvovanie testu Mobile Friendly je teraz jedným zo seo faktorov, ktoré Google zohľadňuje. Zatiaľ nenastali vo vydávaní žiadne zásadné zmeny, no pripraviť sa môžete už teraz.

Ako urobiť web responzívny podľa Google? Tajomstvo je jednoduché - musíte nastaviť úlohu pre svojich programátorov / dizajnérov rozloženia. No, ak nie je čas čakať, potom ... môžete použiť MobileCheat 🙂

V skutočnosti ide o netestovanú technológiu, nie je známe, k čomu to v budúcnosti povedie, takže ju používajte len na vlastné nebezpečenstvo a riziko. Tu sa dá urobiť aspoň séria testov.

Ako obísť test Google pomocou MobileCheat

Musíte urobiť iba dve veci:

1. Pridajte do kódu metaznačku zobrazovanej oblasti.

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

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

Po zatvorení CSS sa obrázok zmení:

Zdá sa, že na stránke sa nič nezmenilo, no výsledky testov sú úplne iné. Mimochodom, rád vypínam CSS na niektorých stránkach, aby boli pohodlnejšie na prezeranie a používanie 🙂 preto je to úplne opodstatnená schéma. Ale uvádza sa len na informačné účely.

Čo si o tom myslíš? Bude to Google počítať ako recipročný rytiersky ťah, alebo si to vopred premyslí a hneď dá stránke mat? 🙂

Vyhľadávače sa snažia zlepšovať výsledky vyhľadávania pre používateľov mobilných zariadení (smartfóny, tablety), preto sa stránky optimalizované pre rôzne veľkosti obrazoviek budú zobrazovať vyššie ako stránky, ktoré takúto optimalizáciu nemajú. Patria sem aj mobilné verzie stránok.

Znaky webovej stránky vhodnej pre mobilné zariadenia:

1. Pohodlne čitateľný obsah (čítanie bez zväčšenia), veľké polia formulárov a tlačidlá.
2. Absencia "ťažkých" obrázkov, Flash - prvkov a nadmerná animácia.
3. Nedostatok Java appletov a doplnkov Silverlight.
4. Žiadny horizontálny posuvník.
5. Minimálna rýchlosť načítania stránky.
6. Najjednoduchšia navigácia.
7. Bola pridaná metaznačka zobrazovanej oblasti.

Služby na kontrolu „mobility“ stránky

Na ukážku práce služieb si zoberme stránku mojich dobrých partnerov – prekladateľskej agentúry CONTEXT.

1. Google Mobile Friendly

Ľubovoľnú stránku môžete skontrolovať jednoduchým zadaním adresy do riadku.

Zobrazuje na obrazovke, ako stránka vyzerá na smartfóne, a poskytuje celkové hodnotenie jej optimalizácie pre mobilné zariadenia.

Na rozdiel od iných služieb tu môžete skontrolovať nie každú stránku, ale iba tú svoju. Teda po pridaní stránky do rozhrania správcu webu s potvrdením práv k nej.

Služba zobrazí celkové hodnotenie, skontroluje 6 bodov zhody a ukáže, ako stránka vyzerá na smartfóne.

3. Kontrola Bingu

Kontroluje sa všeobecná optimalizácia plus súlad so 4 bodmi.

Zobrazuje tiež, ako stránka vyzerá na obrazovke smartfónu (samozrejme na oknách OS, zatiaľ čo predchádzajúce služby zobrazovali smartfón s Androidom =)).

4. Mobile Checker od W3C

„Najdlhšia“ zo všetkých služieb. Tak "dlho", že som nečakal na koniec testu =)

Čakal som 5 minút, zatiaľ čo zvyšok služieb sa vyrovnal za 5-20 sekúnd.

5. Zodpovedný

Na rozdiel od ostatných nedáva žiadne hodnotenia, ale zobrazuje, ako vaša stránka vyzerá na 6 rôznych zariadeniach v dvoch orientáciách na IOS a Android, čo je veľmi cool.

UPD1: 20.07.2017:

6. Adaptér

Služba navrhnutá v komentároch k tomuto článku. Osobne som to nepoužil, ale zdá sa, že je celkom dobrý. Možnosti sú podobné ako pri responizéri, no nechýba ani posúdenie výsledku adaptability.

UPD2: 3.11.2017:

7. iloveadaptive.com

Ďalšia nová služba navrhnutá v komentároch. Pokiaľ ide o mňa, trochu ťažké a nepraktické, ale viac ako sa oplatí s veľkými príležitosťami. Nechýba ani triedenie podľa OS.

Záver

Prispôsobenie stránky pre mobilné zariadenia nie je nepochybne len poctou móde a dobe, ale nevyhnutným atribútom modernej stránky, ktorá pomáha nielen koncovému používateľovi.

Preto každému, kto chce byť bližšie ku klientovi a mať viac návštev/leadov, odporúčam čo najskôr prispôsobiť svoje stránky. Spýtaj sa ma otázku -

Pekný deň všetkým, moji priatelia a hostia môjho blogu. Dnes bude môj článok pomerne krátky, no dnes nestráca na aktuálnosti. Totiž, chcem vám povedať o takej veci, akou je kontrola mobilnej verzie stránky Googlom. A možno by som ani nenapísal taký samozrejmý článok, keby ma táto kontrola nedávno nezmiatla.

Kontrola cez google

Predtým si ľudia nelámali hlavu s responzívnym dizajnom či mobilnou verziou. Keď sa však potom objavila informácia, že vyhľadávače budú downgradovať stránky, ktoré nemajú mobilnú verziu, ľudia sa napnuli (ako v prípade HTTPS). Ľudia si okamžite začali objednávať mobilné verzie od freelancerov, niektorí si nainštalovali špeciálne pluginy, ktoré mohli fungovať krivo.

A tak, keď si niekto zaobstaral adaptívne rozloženie alebo mobilnú verziu, okamžite si to overil v špeciálnej službe Google, ktorá sa len pozerá na to, ako vaše rozloženie spĺňa požiadavky. Teraz sa rozhranie trochu zmenilo, ale podstata zostáva rovnaká.

Ak chcete tento prípad skontrolovať sami, musíte prejsť na túto službu - search.google.com/search-console/mobile-friendly. Potom do panela s adresou zadajte adresu tohto webu a počkajte. Po krátkom čase dostanete všetky informácie o tom, či vaša stránka spĺňa požiadavky Google pre mobilné rozloženie.

Nerozumiem...

Veľmi dobre viem, že moja stránka je prispôsobená, najmä preto, že som len nedávno upravil rozloženie. Nedávno som sa však zo srandy vybral do tejto služby, aby som sa pozrel, čo na to povie 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.

Nevedel som pochopiť, o čo ide, a tak som začal hľadať riešenie na internete. A našiel som to na tejto stránke. Ukázalo sa, že celá vec bola v súbore robots.txt. Bolo to pre mňa napísané čierne na bielom, aby vyhľadávače neindexovali moje súbory tém, a preto nevidel žiadnu mobilnú verziu.

Potom, čo som odstránil jeden riadok z robotov ( Disallow: /wp-content/themes/my theme), potom služba okamžite zistila, že moja mobilná verzia je normálna. Takže sa nebojte, ak sa vám stane to isté. S najväčšou pravdepodobnosťou ste spoločnosti Google jednoducho nedovolili indexovať vašu tému.

No a tým asi svoj dnešný článok ukončím. Dúfam, že to bolo pre vás užitočné. Ako môžeš vidieť Nástroj na kontrolu mobilných stránok Google vám umožňuje zistiť, či stránka spĺňa požiadavky stránky. V skutočnosti je však zriedkavé nájsť stránku, ktorá nemá vlastnú mobilnú verziu alebo prispôsobivosť. Uplynie trochu viac času a všetky novovytvorené stránky budú mať automaticky SSL certifikát.

Ďakujem, že ma čítate. Určite ťa budem opäť čakať na stránkach môjho blogu. Medzitým 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. Čau Čau!

S pozdravom Dmitrij Kostin.

Kontrola chýb v mobilnej verzii stránky je jednoduchá úloha. Zodpovednosť za optimalizátor pre vyhľadávače. Optimalizovaná verzia lokality je faktorom hodnotenia dokumentov lokality.

Nástroje pre mobilné stránky

Ako skontrolovať mobilnú verziu stránky.

Na stránke môžete skontrolovať mobilné zariadenia pomocou služieb:

• Google Mobile Friendly
• Google PageSpeed ​​​​Insights;
• test webovej stránky;
• lietanie na obrazovke;
• test webovej stránky;
• BrowserStack.

Vhodné pre mobilné zariadenia

Služba s názvom Mobile-Friendly ukáže, ako je stránka optimalizovaná pre mobilné zariadenia a aké sú chyby z hľadiska optimalizácie:

PageSpeed ​​Insights

Môžete tiež skontrolovať mobilnú verziu stránky pod Google pomocou nástroja z vyhľadávača Google, ktorý zobrazuje.

Táto služba sa jednoducho nazýva PageSpeed ​​​​Insights.

test webovej stránky

Správne by bolo skontrolovať načítanie stránky pre rôzne zariadenia a z rôznych regiónov. Môžete to skontrolovať pomocou testu webovej stránky.

Služba je úplne zadarmo.

ScreenFly

Pomocou špeciálneho nástroja pre mobilný vývoj môžete skontrolovať, ako sa stránka zobrazuje. Služba je určená na zobrazenie stránky vo forme, v akej sa stránka zobrazí na mobilných zariadeniach, no na vyriešenie problému stačí použiť prehliadač.

Nástroj je bezplatný.

Adobe Edge Inspect

Ak existuje flotila zariadení na kontrolu lokality, môžete použiť zariadenia. Úloha načítania stránky na všetkých zariadeniach nejaký čas trvá, ale úloha je vyriešená.

Ak používate aplikáciu špeciálne vytvorenú na otvorenie stránky na rôznych zariadeniach s názvom Adobe Edge Inspect, úloha sa zjednoduší.

Nástroj je bezplatný.

Aplikácia je multiplatformová.

BrowserStack

BrowserStack je známa služba medzi vývojármi webových stránok. Služba ukazuje kompatibilitu stránky na reálnych zariadeniach.

Nástroj je platený.

Bing Mobile Test

Overiť je zadarmo stránka na splnenie požiadaviek mobilných zariadení je možná prostredníctvom nástroja Mobile Test z vyhľadávacieho nástroja Bing.
Odkaz na službu -