Pentru proiectele dvs., probabil că ați observat cu mult timp în urmă că numărul de utilizatori de telefonie mobilă este în continuă creștere. Pentru unii, tendința este mai puțin vizibilă, iar pentru unele proiecte această cifră se dublează sau mai mult în fiecare an. Conform datelor LiveInternet, peste 50% din traficul de pe Runet este reprezentat de dispozitivele mobile. Apropo, mulți cititori ai acestui blog se plâng de multă vreme că nu există o versiune mobilă aici, care, desigur, va fi remediată în viitorul apropiat.
Nici acest fapt de mobilizare nu poate fi ignorat 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 o marcă în fragmente pe care le-ar afișa corect pe telefoanele mobile.
Google a creat, de asemenea, un instrument pentru a ajuta webmasterii să verifice corectitudinea afișării site-ului web pe dispozitive mobile:
https://www.google.com/webmasters/tools/mobile-friendly/
Pe 21 aprilie, Google a lansat un nou algoritm numit Mobilegeddon în Occident. Trecerea acum la testul Mobile Friendly este unul dintre factorii SEO luați în considerare de Google. Până în prezent, nu au existat modificări majore în SERP, dar vă puteți pregăti acum.
Cum vă faceți site-ul să răspundă pentru Google? Secretul este simplu - trebuie să setați o sarcină pentru programatorii / proiectanții de layout. Ei bine, dacă nu mai 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ă folosiți-o numai pe propriul risc și risc. Aici se pot face cel puțin o serie de teste.
Cum să ocoliți Google Test cu MobileCheat
Există doar două lucruri de făcut:
1. Adăugați metaeticheta viewport în cod.
2. Închideți accesul robotului la fișierele CSS sau folderul în care acestea se află prin robots.txt
De exemplu, acesta este modul în care blogul meu trece testul implicit:
Când CSS este închis, imaginea se schimbă:
Se pare că nimic nu s-a schimbat pe site, dar rezultatele testelor sunt complet diferite. Apropo, pe unele site-uri îmi place să dezactivez CSS, astfel încât să fie mai convenabil să le vizualizăm și să le folosim 🙂, prin urmare, este o schemă complet justificată. Dar este prezentat doar în scop informativ.
Ce părere ai despre această? Google va socoti acest lucru ca o contracarare cu un cavaler sau a gândit totul în avans și va verifica imediat și mat un site? 🙂
Motoarele de căutare se străduiesc să îmbunătățească rezultatele căutării pentru utilizatorii de dispozitive mobile (smartphone-uri, tablete), astfel încât site-urile optimizate pentru diferite dimensiuni de ecran vor fi afișate mai sus decât site-urile fără o astfel de optimizare. Aceasta include și versiunile mobile ale site-urilor.
Semne ale unui site prietenos pentru mobil:
- Conținut ușor de citit (citit fără mărire), câmpuri de formă mari și butoane.
- Lipsa de imagini „grele”, elemente Flash și animație excesivă.
- Lipsa applet-urilor Java și a pluginurilor Silverlight.
- Lipsa barei de derulare orizontale.
- Viteza minimă de încărcare a site-ului web.
- Cea mai simplă navigație.
- Metaeticheta vizualizării este înregistrată.
Servicii de verificare a site-ului pentru "mobilitate"
Pentru a demonstra activitatea serviciilor, să luăm site-ul bunilor mei parteneri - agenția de traducere CONTEXT.
1. Google Mobile Friendly
Puteți verifica orice site prin simpla introducere a adresei în linie.
Afișează pe ecran aspectul site-ului pe un smartphone și oferă o evaluare generală a optimizării acestuia pentru dispozitivele mobile.
Spre deosebire de alte servicii, aici puteți verifica nu fiecare site, ci doar propriul dvs. site. Adică, după ce site-ul este adăugat la interfața webmasterului cu confirmarea drepturilor asupra acestuia.
Serviciul afișează scorul general, verifică 6 puncte de conformitate și arată cum arată site-ul pe un smartphone.
3. Bing Checker
Optimizarea generală este verificată plus respectarea a 4 puncte.
De asemenea, afișează aspectul site-ului pe ecranul unui smartphone (desigur, pe Windows OS, în timp ce serviciile anterioare afișau un smartphone Android \u003d)).
4. Mobile Checker de pe W3C
Cel mai "lung" dintre toate serviciile. Atât de „mult” încât nu am așteptat sfârșitul verificării \u003d)
Am așteptat 5 minute, în timp ce restul serviciilor s-au finalizat în 5-20 de secunde.
5. Responsabil
Spre deosebire de celelalte, nu acordă nicio evaluare, dar afișează aspectul site-ului dvs. pe 6 dispozitive diferite în două orientări pentru IOS și Android, ceea ce este foarte interesant.
UPD1: 20.07.2017:
6. Adaptivator
Serviciul sugerat în comentariile acestui articol. Eu personal nu l-am folosit, dar pare să fie destul de bun. Posibilitățile sunt similare cu cele ale răspunsului, dar există și o evaluare a rezultatului adaptabilității.
UPD2: 3.11.2017:
7. iloveadaptive.com
Un alt serviciu nou sugerat în comentarii. În ceea ce mă privește, puțin supraponderal și puțin practic, dar acest lucru este mai mult decât plătitor cu oportunități excelente. Există chiar sortare după sistem de operare.
Ieșire
Fără îndoială, adaptarea site-ului pentru dispozitive mobile nu este doar un tribut adus modei și timpului, ci un atribut necesar al unui site modern care ajută nu numai utilizatorul final.
Prin urmare, pentru toți cei care doresc să fie mai aproape de client și să aibă mai multe vizite / clienți potențiali, vă recomand să vă adaptați site-urile cât mai curând posibil. Pune-mi o intrebare -
Eh, din nou Google ne „face plăcere” cu regulile și algoritmii săi, venind cu noi „migrene” pentru webmasteri. De această dată ni se oferă să încercăm un nou algoritm pentru dispozitive mobile, care va aduce site-uri adaptate în căutarea mobilă și va reduce resursele „non-mobile”.
Cum va funcționa toate acestea?
Este foarte simplu: toate site-urile care nu sunt adaptate pentru dispozitivele mobile (potrivit Google) vor fi pur și simplu ignorate de motorul de căutare și vor apărea în ultimele locuri în căutarea mobilă, iar resursele mobile vor crește mai mult. De exemplu, dacă există mai multe site-uri cu o temă similară, atunci pe 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 tabletă sau smartphone, atunci vreau să văd în SERP 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 ne face să ne gândim la oportunitatea unui astfel de „know-how”. Desigur, mi-am verificat site-urile pentru recomandări și am găsit un comportament ciudat, cel puțin pentru Google, față de analiza resurselor.
Merită să spunem că, la crearea site-urilor, am verificat întotdeauna aspectul pe diferite dispozitive manual și prin servicii, așa că am fost calm în legătură cu „mobilitatea”, dar s-a dovedit a nu fi atât de simplu. Așadar, Google recomandă testarea resurselor dvs. printr-un test pentru dispozitive mobile:
Trebuie doar să introduceți adresa site-ului sau a paginii și să faceți clic pe „Analizați”. În timp ce verificam pagina principală a site-ului prietenului meu din Crimeea krimeo.ru prin test, am văzut că pagina a fost optimizată pentru dispozitive mobile.
Nu este surprinzător, șablonul este receptiv, iar site-ul arată minunat 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, de asemenea, receptiv, am accesat atât de pe o tabletă, cât și de pe un smartphone de mai multe ori ... 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 cel puțin: pe site-ul meu, miniaturile pentru articole au fost afișate într-un dreptunghi de 720x350px, iar acest lucru (potrivit Google) nu încurajează site-ul să fie considerat mobil. În mod surprinzător, cu cât imaginea (butoanele) este mai mare, cu atât este mai ușor ca utilizatorii de pe dispozitive mobile să lovească cu degetul ... dar Google crede altfel.
De asemenea, este surprinzător faptul că, atunci când răsfoiți site-ul pe un smartphone, toate imaginile sunt perfect adaptate la dimensiunea ecranului și nu se observă „jamburi”. Ei bine, am decis să conduc un experiment și am adaptat dimensiunea imaginilor, adică cu cât dimensiunea ecranului dispozitivului este mai mică, cu atât imaginea de pe site este mai mică. Încercați să apucaț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 miniaturi mari, atunci situația cu ilustrații pentru articole va fi aceeași și acest lucru este mult mai important decât pagina principală. Pentru a face acest lucru, trebuie să faceți imaginile receptive pentru întregul site, folosind mijloacele de lansare a unui script js, dar asta nu este tot, folderul cache și regula pentru salvarea imaginilor trebuie să fie duplicate în .htaccess
Într-adevăr, articolele care conțin imagini de dimensiuni mari nu trec testul Google, iar cele cu ilustrații mai mici sunt considerate complet optimizate pentru mobil. Nu voi da capturi de ecran - luați doar adresa URL a unei publicații separate și verificați dacă există „mobilitate”.
De ce altceva vede Googlebot că blogul nu este optimizat pentru mobil
Deoarece robots.txt are o mulțime de restricții inutile.
Există o singură restricție în fișierul virtual robots.txt WordPress generat automat:
Nu permiteți: / wp-admin
Iată ce scrie Google despre motivul pentru care creatorii WordPress au făcut ca robots.txt să fie implicit:
Pentru a vă asigura că paginile sunt indexate și afișate corect, trebuie să oferiți Googlebot acces la JavaScript, CSS și grafică pe site-ul dvs. Googlebot ar trebui să vadă site-ul dvs. ca pe un utilizator obișnuit. Dacă fișierul robots.txt nu permite accesul la aceste resurse, atunci Google nu va putea analiza și indexa corect conținutul. Acest lucru poate degrada clasamentul site-ului dvs. de căutare.
User-agent: * Disallow: / wp-admin Disallow: / wp-include Disallow: / wp-content / plugins Gazdă: 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 /
Sper că Google își va îmbunătăți algoritmul de verificare și va da rezultate reale, deoarece în viața reală de pe tablete și smartphone-uri, multe site-uri arată grozav.
Putem vedea o astfel de surpriză sub forma unui algoritm compatibil cu dispozitivele mobile începând cu 21 aprilie 2015. Google ne „strică”)). Traieste in pace? Iată un Panda pentru tine! Puțini? Iată și un pinguin! Trimiți? Obțineți un dispozitiv adaptat pentru mobil!
Ieșire
Decideți ce să faceți cu aceste informații, dacă treceți sau nu la modele receptive este o problemă personală pentru fiecare webmaster, dar aceste noi reguli au intrat deja în vigoare.
Apropo, „optimizat pentru dispozitive mobile” nu este doar un design de site receptiv, o versiune mobilă separată și un plugin pentru WordPress sunt potrivite și aici, principalul lucru este că site-ul arată corect pe orice dispozitiv. Luați în considerare acest lucru.
Astăzi nu mai este nevoie să convingi pe nimeni de necesitatea unei versiuni mobile a site-ului. La urma urmei, în fiecare zi sunt din ce în ce mai mulți vizitatori de pe smartphone-uri și tablete. La momentul scrierii acestui articol, aproximativ 20% dintre vizitatorii blogului meu folosesc dispozitive mobile pentru navigare. Adică unul din cinci îmi vizitează site-ul web de pe telefon sau tabletă.
Cu câțiva ani în urmă, nici măcar nu mă gândeam la astfel de vizitatori, dar când numărul lor depășea 10% din numărul total, am început să folosesc un aspect receptiv. Acest lucru a făcut posibilă afișarea corectă a conținutului pe dispozitivele mobile și creșterea loialității atât a vizitatorilor, cât și a motoarelor de căutare față de site.
Versiunea mobilă a site-ului și designul receptiv nu sunt același lucru. Acest articol se va concentra pe testarea aspectului receptiv atunci când designul site-ului se modifică în funcție de rezoluția ecranului dispozitivului vizitatorului.
Pentru a vă asigura că site-ul dvs. este afișat corect pe dispozitivele mobile, trebuie să verificați și pentru aceasta există mai multe servicii și instrumente utile.
Verificare rapidă a aspectului receptiv
Popular browser Internet (browser) Mozilla Firefox echipat cu instrumente încorporate pentru verificarea designului site-ului web pentru a fi adecvat pentru afișarea pe dispozitive mobile. Pentru a-l utiliza, accesați „Meniu” - „Dezvoltare” - „Design receptiv”. Sau pur și simplu apăsați trei taste de pe tastatură în același timp ++ [M]
Ar trebui să vedeți ceva de genul:
Modificând rezoluția și orientarea ecranului, puteți verifica modul în care site-ul dvs. va fi afișat vizitatorilor de pe mobil.
Browser Google Crom are, de asemenea, suport încorporat pentru verificarea sensibilității proiectării site-ului. Pentru a face acest lucru, accesați meniul, selectați elementul „Instrumente suplimentare” și apoi „Instrumente pentru dezvoltatori” (sau apăsați tasta ).
După aceea, faceți clic pe pictograma de design receptiv (sau simultan faceți clic pe tastatură ++ [M]):
În mijlocul ecranului, veți vedea cum va fi afișat site-ul dvs. pe ecranele dispozitivelor mobile:
Testarea SEO a designului mobil
După cum știți, cei doi lideri de căutare mondială Google și Yandex au propria lor opinie nemiloasă despre cum ar trebui să arate site-ul pe ecranele dispozitivelor mobile. Și dacă site-ul este recunoscut ca incomod pentru vizitatorii de pe mobil, atunci acesta intră în rezultatele căutării. Deci, din punct de vedere SEO, dacă nu doriți să pierdeți vizitatorii de pe mobil, atunci nu trebuie doar să aveți un design receptiv, ci și motoarele de căutare trebuie să o considere așa, adică potrivite pentru dispozitivele mobile.
Pentru a verifica adaptabilitatea utilizând serviciul Google, accesați următoarea adresă și introduceți numele site-ului dvs.: https://www.google.com/webmasters/tools/mobile-friendly/.
Așa arată rezultatul verificării blogului meu:
Cu Yandex este puțin mai complicat, pentru verificare este necesar să vă înregistrați în serviciul Yandex.Webmaster și să utilizați versiunea beta a interfeței:
Servicii online pentru testarea adaptabilității
Sarcina principală a acestor servicii este de a prezenta (arăta) cum va arăta site-ul dvs. pe un dispozitiv mobil. Există o mulțime de site-uri cu astfel de funcționalități. Voi da doar câteva dintre ele. În majoritatea cazurilor, duplică funcționalitatea încorporată a Firefox și Chrome.
Redimensionare Google
Voi începe din nou cu Google, care are propriul serviciu demonstrativ receptiv: http://design.google.com/resizer/#
Quirktools screenfly
Al doilea serviciu drăguț este http://quirktools.com/screenfly/. Vă va arăta cum ar putea arăta site-ul dvs. chiar și la televizor!
Symby.ru adaptest
Ei bine, pentru a nu jigni „producătorul intern” voi da un exemplu de alt site: http://symby.ru/adaptest/. Pe o pagină, veți vedea mai multe vizualizări simultan cu rezoluții diferite ale ecranului.
Viteza versiunii mobile a site-ului
După ce v-ați asigurat că site-ul dvs. este receptiv și se afișează corect pe ecranele majorității dispozitivelor, ar trebui să verificați viteza acestuia. Din nou, aplicat vizitatorilor mobili.
PageSpeed \u200b\u200bInsights
Google, ca întotdeauna, este înaintea restului: https://developers.google.com/speed/pagespeed/insights/. Acest serviciu vă va arăta cum arată site-ul pe ecranul telefonului și vă va oferi recomandări despre cum să optimizați codul pentru a crește viteza de încărcare pe dispozitivele mobile.
WebPageTest
Și, în concluzie, voi oferi un exemplu de serviciu care nu numai că va arăta aspectul site-ului pe un dispozitiv mobil, ci și va arăta viteza activității sale: http://www.webpagetest.org/
concluzii
În opinia mea, în munca de zi cu zi, atunci când faceți modificări la designul site-ului, este mai ușor să utilizați capacitățile încorporate ale browserelor FireFox și Chrome. După aceea, desigur, trebuie să verificați loialitatea motoarelor de căutare față de designul dvs. Și numai atunci, pentru a liniști sufletul sau pentru a vă arăta, puteți folosi serviciile online.
În multe țări, smartphone-urile sunt mai frecvent utilizate pentru a naviga pe Internet decât computerele. Prin urmare, este foarte important să adaptați site-ul pentru dispozitivele mobile. Aflați dacă paginile dvs. sunt convenabile pentru utilizatorii de smartphone-uri cu un instrument special în Search Console.
Folosind
Este ușor să verificați dacă o pagină este convenabilă pentru vizualizare pe un smartphone: trebuie doar să specificați adresa URL completă. Verificarea durează de obicei mai puțin de un minut. Dacă există redirecționări pe pagină, acestea vor fi procesate și ele.
Pe baza rezultatelor verificării, 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 tipărite mici (greu de citit pe un ecran mic) și elemente Flash (nu sunt acceptate pe majoritatea dispozitivelor mobile).
Valoarea metaetichetei Viewport nu este setată
Codul paginii nu specifică proprietatea ferestrei, care îi spune browserului cum să redimensioneze corect elementele paginii pentru a se potrivi cu dimensiunea ecranului dispozitivului. Pentru ca site-ul dvs. să se afișeze corect pe diferite dimensiuni de ecran, reglați fereastra utilizând metaeticheta ferestrei. Pentru detalii despre acest lucru, consultați secțiunea Noțiuni de bază despre designul web receptiv din ghidul nostru.
Metaeticheta vizualizării trebuie să aibă o valoare a lățimii dispozitivului
Nu este posibil să se adapteze pagina pentru ecrane de diferite dimensiuni, deoarece proprietatea ferestrei cu o lățime fixă \u200b\u200beste specificată în codul său. În acest caz, trebuie să aplicați un design receptiv, ajustând scalarea paginii pentru a se potrivi 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 din 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ățimea și valorile de poziționare ale elementelor CSS sunt relative și că imaginile sunt scalate. Pentru detalii despre acest lucru, consultați secțiunea Dimensiuni conținut pentru zona de vizualizare a tutorialului nostru.
Font prea mic
Acest raport listează pagini cu caractere mici, pe care utilizatorii trebuie să le utilizeze gesturi de zoom pentru a le citi. După configurarea ferestrei, trebuie să definiți dimensiunile fonturilor, astfel încât acestea să fie afișate corect în ea.
Elementele interactive sunt prea apropiate
Acest raport listează paginile în care elementele de navigare sunt atât de apropiate încât este dificil pentru un utilizator să atingă unul fără să atingă altele. Aveți grijă de dimensiunile optime ale butoanelor, linkurilor etc. și spațiul dintre ele, astfel încât utilizatorii de telefonie mobilă să poată interacționa cu ei.
Ce urmeaza?
- Cum să aflăm ce probleme cu vizualizarea site-ului dvs. pe dispozitive mobile am găsit folosind un raport special (pentru aceasta trebuie să verificați proprietatea site-ului în contul dvs. Search Console)
- Cum să vă optimizați site-ul pentru dispozitive mobile (pentru paginile din WordPress, Joomla! Și alte sisteme de gestionare a conținutului)
