Versiunile de site nu sunt doar un posibil capriciu al dezvoltatorilor, un element suplimentar de cheltuială (sau câștiguri, dacă vorbim despre contractori) și o manifestare de îngrijorare pentru vizitatorii resursei. Conform anunţurilor recente de la Google, site-urile care nu îndeplinesc cerinţele de responsive design vor avea de suferit în căutările mobile. Motorul de căutare local Yandex a lansat și recomandări „Importanța de a fi mobil” și a asigurat că, acționând pentru confortul utilizatorilor de dispozitive mobile, va marca versiunile mobile în rezultatele căutării și va acorda preferință paginilor adaptabile.

Astfel, dezvoltatorii trebuie să adapteze site-urile pentru smartphone-uri și să verifice dacă resursa este afișată corect. În caz contrar, vă puteți aștepta în curând la pierderea unei părți semnificative a traficului și, prin urmare, a potențialilor clienți, deoarece noi algoritmi de la Google și Yandex sunt deja în vigoare. Puteți verifica versiunea mobilă a site-ului în diferite moduri: prin schimbarea browserului la trecerea în modul dezvoltator, folosind emulatori de dispozitive mobile sau servicii web.

Ușurință pe site pentru dispozitive mobile

Capacitatea de răspuns a dispozitivelor mobile este evaluată pe baza diferiților parametri. Este important să verificați versiunea mobilă a site-ului nu numai în ceea ce privește afișarea corectă, merită să luați în considerare și alți factori:

• lipsa de animație, design „greu” și imagini;
• viteza de încărcare a resurselor (trebuie să fie minimă);
• nu este nevoie de defilare orizontală;
• lipsa pluginurilor Silverlight și a applet-urilor Java;
• navigare ușoară pe site;
• Metaeticheta viewportului este inclusă în cod.

Dacă sunt îndeplinite condițiile de mai sus, algoritmii celor mai comune motoare de căutare recunosc pagina web ca fiind potrivită pentru dispozitive mobile și măresc poziția site-ului în rezultatele căutării în raport cu resursele care nu sunt adaptate.

Testare reală pe dispozitive mobile

Cea mai convenabilă modalitate este de a testa versiunea mobilă a site-ului pe smartphone-uri reale. Această metodă va permite testarea în condiții reale. În mod ideal, este mai bine să verificați o resursă web pe mai multe dispozitive, dar dacă bugetul proiectului nu include costul achiziției mai multor smartphone-uri din cele mai populare modele, va fi suficient un dispozitiv bazat pe Android sau Apple.

Redimensionarea ferestrei browserului

Cel mai simplu, dar nu optim în ceea ce privește verificarea, este redimensionarea ferestrei browserului. Dacă pagina este realizată folosind tehnologie, puteți verifica versiunea mobilă a site-ului în acest fel. Dar în cazurile în care se folosește un design separat, resursa are nevoie de o indicație clară că utilizatorul provine de pe un smartphone, tabletă sau alt dispozitiv mobil. Deci, această metodă vă permite să verificați disponibilitatea unei versiuni mobile a site-ului. Dar corectitudinea afișajului (în termeni tehnici) este puțin probabil să fie evaluată.

Trecerea la modul dezvoltator în browser

O modalitate mai optimă de a verifica versiunea mobilă a unui site (Google sau Yandex, precum și alte motoare de căutare, evidențiază adaptabilitatea în lista celor mai importanți factori care influențează clasarea) este trecerea la modul dezvoltator în browser. Metoda funcționează în mod similar cu mai multe browsere:

• Mozilla: Puteți trece la modul dezvoltator selectând opțiunea „Responsive Design” din meniul „Development”; prin apăsarea combinației Ctrl + Shift + M; făcând clic pe butonul „Responsive Design Mode” din bara de instrumente pentru dezvoltatori web;
• Chrome: comutați la modul mobil apăsând F12, apoi selectați pictograma versiunii mobile (smartphone în colțul din stânga sus al ferestrei care apare).

În Opera, trecerea în modul dezvoltator pentru a verifica versiunea mobilă se face prin apăsarea combinației Ctrl+Shift+i, dar există o altă modalitate. O versiune specială a browserului - Opera Mobile Classic Emulator - vă permite să diversificați designul mobil. Există versiuni ale programului pentru sistemele de operare majore.

Emulatori de dispozitive mobile: Android Studio și Apple Xcode

Puteți verifica versiunea mobilă a site-ului (Yandex și Google) folosind emulatori de dispozitive mobile, care pentru Android și Apple sunt Android Studio sau Apple Xcode, respectiv.

Astfel de instrumente reproduc destul de exact site-ul așa cum va arăta pe dispozitivele mobile: programele vin preinstalate cu cele mai comune versiuni de browsere pentru dispozitive mobile. Cu toate acestea, emulatorii nu țin cont de viteza de încărcare și de alte nuanțe care pot fi observate în condiții reale.

Pentru a verifica, trebuie doar să instalați unul dintre programele de mai sus pe computer și să deschideți site-ul dintr-un emulator.

Servicii web de verificare a designului mobil

Există modalități mai simple de a verifica versiunea mobilă a unui site. De exemplu, serviciul online Responsinator vă permite să evaluați afișarea corectă a unei resurse pe dispozitivele mobile și ușurința de utilizare a site-ului de către utilizator. Resursa afișează site-ul așa cum ar arăta pe șase dispozitive Android sau Apple diferite și în mai multe orientări.

Verificarea optimizării paginilor web pentru dispozitive mobile

Alte resurse care vă permit să verificați versiunea mobilă a site-ului evaluează suplimentar adaptabilitatea și nu arată doar cum ar arăta site-ul pe diferite dispozitive. Cele mai autorizate servicii: Google Mobile Friendly și Yandex WebMaster (verificarea paginilor web). Optimizarea unui site pentru dispozitive mobile este evaluată și de checker-ul Bing sau, de exemplu, Mobile Checker de la W3C.

Tot ceea ce este necesar de la webmaster atunci când evaluează versiunea site-ului pentru dispozitivele mobile care utilizează servicii online este să introducă adresa resursei și să aștepte finalizarea analizei. Majoritatea serviciilor de mai sus verifică optimizarea în raport cu parametrii de compatibilitate cu dispozitivele mobile enumerați mai sus.

Deci, puteți evalua adaptabilitatea unei resurse web în mai multe moduri: de la testarea pe smartphone-uri reale, tablete sau alte dispozitive mobile sau redimensionarea ferestrei browserului web, testare în emulatori sau în modul dezvoltator de browser web, până la utilizarea serviciilor de la Yandex și " Google”. Este foarte ușor să verificați cuprinzător versiunea mobilă a site-ului, iar acest lucru vă va permite să faceți modificările necesare și să îmbunătățiți poziția site-ului în rezultatele căutării.

În multe țări, smartphone-urile sunt mai des folosite pentru a naviga pe internet decât computerele. Prin urmare, este foarte important să adaptați site-ul pentru dispozitive mobile. Un instrument special din Search Console vă va ajuta să aflați dacă paginile dvs. sunt ușor de utilizat pentru utilizatorii de smartphone-uri.

Utilizare

Este ușor să verificați dacă o pagină este potrivită pentru vizualizare pe un smartphone: trebuie doar să introduceți adresa URL completă. Verificarea durează de obicei mai puțin de un minut. Dacă există redirecționări pe pagină, acestea vor fi și ele procesate.

Pe baza rezultatelor testului, veți vedea cum arată pagina pe un smartphone și veți afla ce probleme pot apărea la vizualizarea acesteia. Cel mai adesea acestea sunt fonturi mici (greu de citit pe un ecran mic) și elemente Flash (nu sunt acceptate pe majoritatea dispozitivelor mobile).

Valoarea metaetichetei de vizualizare nu este setată

Codul paginii nu include proprietatea viewport, care spune browserului cum să redimensioneze corect elementele paginii pentru a se potrivi cu dimensiunea ecranului dispozitivului. Pentru a vă asigura că site-ul dvs. se afișează corect pe diferite dimensiuni de ecran, personalizați-vă fereastra folosind metaeticheta viewport. Aflați mai multe despre acest lucru în secțiunea Noțiuni de bază pentru designul web adaptabil din ghidul nostru.

Metaeticheta de vizualizare trebuie să conțină lățimea dispozitivului

Adaptarea paginii pentru diferite dimensiuni de ecran nu este posibilă, deoarece codul său specifică proprietatea ferestrei de vizualizare cu o lățime fixă. În acest caz, trebuie să aplicați un design receptiv ajustând scalarea paginii pentru a se potrivi cu dimensiunea ecranului.

Conținut mai larg decât ecranul

Acest raport identifică paginile care necesită derulare orizontală pentru a vizualiza text și imagini. Această problemă apare atunci când dimensiunile în stilurile CSS sunt setate la valori absolute sau când sunt utilizate imagini care sunt proiectate pentru o lățime specifică a ferestrei browserului. Asigurați-vă că lățimile elementelor CSS și valorile de poziționare sunt relative și că imaginile sunt scalate. Pentru mai multe informații despre acest lucru, consultați secțiunea Dimensiuni de conținut viewport din ghidul nostru.

Fontul este prea mic

Acest raport afișează pagini cu caractere mici, care solicită utilizatorilor să facă gesturi de ciupire pentru a mări pentru a le citi. După configurarea ferestrei de vizualizare, trebuie să determinați dimensiunile fonturilor, astfel încât acestea să se afișeze corect în el.

Elementele interactive sunt prea apropiate

Acest raport enumeră paginile în care elementele de navigare sunt plasate atât de aproape între ele încât utilizatorului îi este dificil să atingă unele fără să le atingă pe altele. Aveți grijă de dimensiunile optime ale butoanelor, link-urilor etc. și de distanța dintre ele, astfel încât utilizatorii de dispozitive mobile să poată interacționa cu ușurință cu ele.

Ce urmează?

• Cum să aflați ce probleme am găsit la vizualizarea site-ului dvs. pe dispozitive mobile folosind un raport special (pentru a face acest lucru, trebuie să confirmați calitatea de proprietar al site-ului în contul Search Console)
• Cum să vă optimizați site-ul web pentru dispozitive mobile (pentru pagini din WordPress, Joomla! și alte sisteme de gestionare a conținutului)

Pentru proiectele tale, probabil că ai observat de mult că numărul utilizatorilor de telefonie mobilă este în continuă creștere. Pentru unii, tendința este mai puțin vizibilă, iar în unele proiecte această cifră crește de 2 ori sau mai mult în fiecare an. Potrivit LiveInternet, peste 50% din traficul de pe RuNet vine acum de pe dispozitive mobile. Apropo, mulți cititori ai acestui blog se plâng de mult timp că nu există o versiune pentru mobil aici :) care, desigur, va fi remediată în viitorul apropiat.

Acest fapt de mobilizare nu poate fi ignorat nici de platformele de căutare. Treptat, ele oferă avantaje în căutarea mobilă acelor site-uri care sunt adaptate dispozitivelor utilizatorilor.

La început, Google a dat site-urilor un semn în fragmente că acestea vor fi afișate corect pe telefoanele mobile.

Google a creat, de asemenea, un instrument pentru a ajuta webmasterii să verifice afișarea corectă a unui site pe dispozitivele mobile:
https://www.google.com/webmasters/tools/mobile-friendly/

Pe 21 aprilie, Google a lansat un nou algoritm, în Occident se numea Mobilegeddon. Acum, trecerea cu succes a testului Mobile Friendly este unul dintre factorii SEO luați în considerare de Google. Până acum, nu au existat modificări semnificative în emisiune, dar vă puteți pregăti acum.

Cum să faci un site web receptiv din punctul de vedere al Google? Secretul este simplu - trebuie să atribuiți o sarcină programatorilor/designerilor de aspect. Ei bine, dacă nu ai timp să aștepți, atunci... poți folosi MobileCheat :)

De fapt, aceasta este o tehnologie netestată, nu se știe la ce va duce în viitor, așa că utilizați-o doar pe propriul risc și risc. Aici pot fi efectuate cel puțin o serie de teste.

Cum să ocoliți testul Google folosind MobileCheat

Sunt doar două lucruri pe care trebuie să le faci:

1. Adăugați metaeticheta viewport la cod.

2. Interziceți robotului accesul la fișierele CSS sau la folderul în care acestea se află prin robots.txt

De exemplu, astfel blogul meu trece testul implicit:

La închiderea CSS-ului, imaginea se schimbă:

Se pare că nu s-a schimbat nimic pe site, dar rezultatele testelor sunt complet diferite. Apropo, pe unele site-uri îmi place să dezactivez CSS pentru a le face mai ușor de vizualizat și utilizat 🙂 prin urmare, aceasta este o schemă complet justificată. Dar este prezentat doar în scop informativ.

Ce părere ai despre asta? Va considera Google acest lucru drept o mișcare de răspuns cu un cavaler sau s-a gândit totul în avans și va șahmat imediat site-ul? 🙂

Iată chestia: Google va începe în curând (conform zvonurilor - din 21 aprilie 2015) să clasifice foarte prost site-urile care nu au fost testate de Google Webmasters pentru ușurința de vizualizare pe dispozitivele mobile.

Nu este clar dacă site-ul va avea probleme numai dacă este afișat utilizatorilor de telefonie mobilă sau chiar celor care s-au conectat de pe un computer, adică va exista o ieșire separată?

Acest lucru cu greu schimbă esența site-urilor care au jumătate, sau o parte semnificativă, din traficul mobil. Prin urmare, este mai bine să fii verificat cât mai repede posibil.

Îți voi spune cum să faci așa:

La	După

• Primul cip, care a ajutat la rezolvarea problemei fără mișcări suplimentare.

În robots.txt scrieți linia:
Permite: /wp-content/themes/Template_Name/style.css

(Dacă fișierul cu stiluri se află la o altă adresă, atunci îl înregistrăm. Dacă există mai multe fișiere cu stiluri, atunci introducem linii pentru fiecare fișier.)

• Al doilea punct, dacă vedem mesajul „Elementele interactive sunt situate prea aproape unele de altele”. Afișează la google.com/webmasters/tools/mobile-friendly.
  Doar în stilurile pentru clasa necesară, atribuie mai multe indentări pentru link-uri și butoane. O marjă sau o umplutură de 5 px este suficientă.

  Uneori, blocul Adsense poate crea această problemă. Poate că trebuie să inserați un bloc mai mare sau cu un font mai mare.

P.S. Inițial, mă aștept ca cel principal să fi fost făcut de tine.

Eh, din nou Google ne face fericiți cu regulile și algoritmii săi, inventând noi „migrene” pentru webmasteri. De data aceasta ni se oferă să încercăm un nou algoritm prietenos cu dispozitivele mobile, care va crește site-urile adaptate în căutările mobile și va reduce resursele „non-mobile”.

Cum vor funcționa toate acestea?

Este foarte simplu: toate site-urile care nu sunt adaptate pentru dispozitive mobile (conform Google) vor fi pur și simplu ignorate de motorul de căutare și vor apărea pe ultimele locuri în căutările mobile, iar resursele mobile vor crește mai mult. De exemplu, dacă există mai multe site-uri pe un subiect similar, atunci pe o tabletă utilizatorul le va găsi pe cele care au un design adaptat pentru vizualizare pe dispozitive mobile.

Impresiile mele despre această inovație sunt duble: pe de o parte, totul este corect, dacă folosesc căutarea pe o tabletă sau pe un smartphone, atunci vreau să văd în rezultate acele site-uri care se comportă corect pe ecran. Pe de altă parte, algoritmul pentru determinarea „mobilității” este atât de ciudat încât te face să te gândești la fezabilitatea unui astfel de „know-how”. Desigur, mi-am verificat site-urile față de recomandări și am găsit că comportamentul Google față de analiza resurselor este cel puțin ciudat.

Merită spus că atunci când cream site-uri web, am verificat întotdeauna aspectul pe diverse dispozitive manual și prin servicii, așa că am fost liniștit în privința „mobilității”, dar s-a dovedit că nu totul a fost atât de simplu. Prin urmare, Google recomandă să vă verificați resursele printr-un test adecvat pentru dispozitive mobile:

Doar introduceți adresa site-ului sau a paginii și faceți clic pe „Analizați”. În timp ce verificam pagina principală a site-ului prietenului meu din Crimeea krimeo.ru printr-un test, am văzut că pagina a fost optimizată pentru dispozitive mobile.

Nu este surprinzător, șablonul este receptiv și site-ul arată grozav pe diferite dispozitive. Apoi am decis să-mi verific site-ul și care a fost surpriza mea când această resursă nu a trecut testul.

Interesant... șablonul acestui blog este și el responsive, l-am vizitat de mai multe ori atât de pe tabletă, cât și de pe smartphone... de ce atunci nu i-a plăcut Google?

Am început să analizez ce anume pe site ar putea provoca un astfel de rezultat. Soluția a fost găsită acolo unde mă așteptam mai puțin: pe site-ul meu erau afișate miniaturi pentru articole într-un dreptunghi de 720x350px și tocmai asta (după Google) nu permite ca site-ul să fie considerat mobil. În mod surprinzător, cu cât imaginea (butonul) este mai mare, cu atât este mai ușor pentru utilizatorii de pe dispozitivele mobile să ajungă cu degetul... dar Google gândește altfel.

De asemenea, este surprinzător că atunci când vizualizați site-ul pe un smartphone, toate imaginile se adaptează perfect la dimensiunea ecranului și nu sunt observate „jambs”. Ei bine, am decis să fac un experiment și am adaptat dimensiunea imaginilor, adică. Cu cât dimensiunea ecranului dispozitivului este mai mică, cu atât imaginile de pe site sunt mai mici. Încercați să luați colțul browserului cu mouse-ul și să-l micșorați...
Acum, unii webmasteri pot avea o altă problemă: dacă Google s-a comportat astfel cu miniaturile mari, atunci situația cu ilustrațiile pentru articole va fi aceeași, iar acest lucru este mult mai important decât pagina principală. Pentru a face acest lucru, trebuie să faceți imaginile adaptabile pentru întregul site rulând un script js, dar asta nu este tot, folderul cache și regula pentru salvarea imaginilor trebuie să fie duplicate în .htaccess

Așa este - acele articole care conțin imagini mari nu trec testul Google, iar acele materiale care nu au ilustrații foarte mari sunt considerate complet „optimizate pentru dispozitive mobile”. Nu voi oferi capturi de ecran - luați adresa URL a unei publicații separate și verificați „mobilitate”.

De ce altfel vede Googlebot că un blog nu este optimizat pentru dispozitive mobile?

Pentru că există multe interdicții inutile în robots.txt.

Există o singură interdicție în fișierul robots.txt virtual generat automat de WordPress:

Nu permiteți: /wp-admin

Și iată ce scrie Google despre motivul pentru care creatorii WordPress au creat robots.txt astfel în mod implicit:

Pentru a vă asigura că paginile sunt indexate și afișate corect, trebuie să acordați acces Googlebot la fișierele JavaScript, CSS și grafice de pe site-ul dvs. Googlebot ar trebui să vă vadă site-ul ca un utilizator obișnuit. Dacă fișierul robots.txt blochează accesul la aceste resurse, atunci Google nu va putea analiza și indexa corect conținutul. Acest lucru poate înrăutăți clasarea site-ului dvs. în Căutare.

User-agent: * Disallow: /wp-admin Disallow: /wp-includes Disallow: /wp-content/plugins Gazdă: Your_site Sitemap: http://your_site/sitemap_index.xml (sitemap from WordPress SEO by Yoast) User -agent : Googlebot-Image Allow: /wp-content/uploads/ Agent de utilizator: YandexImages Allow: /wp-content/uploads/

Sper că Google își va îmbunătăți algoritmul de verificare și va produce rezultate reale, pentru că „în viața reală” pe tablete și smartphone-uri multe site-uri arată grozav.

Putem vedea o astfel de surpriză sub forma unui algoritm prietenos cu dispozitivele mobile din 21 aprilie 2015. Google ne rasfata)). Traiesti linistit? Iată pentru tine Pandu! Puțini? Iată și un Pinguin! Te-ai mutat? Deveniți compatibil cu dispozitivele mobile!

Concluzie

Decideți singur ce să faceți cu aceste informații dacă să treceți la modele adaptive sau nu este o chestiune personală pentru fiecare webmaster, dar aceste reguli noi au intrat deja în vigoare.

Apropo, „optimizat pentru dispozitive mobile” include nu numai designul site-ului web receptiv, ci și o versiune mobilă separată și un plugin pentru WordPress, principalul lucru este că site-ul arată corect pe orice dispozitiv. Luați în considerare acest lucru.