Î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)
Bună ziua tuturor, prietenilor și oaspeților blogului meu. Astăzi articolul meu va fi destul de scurt, dar nu își pierde relevanța astăzi. Și anume, vreau să vă povestesc despre așa ceva ca Google să verifice versiunea mobilă a site-ului. Și poate nici nu aș fi scris un articol atât de evident dacă acest cec nu m-ar fi nedumerit recent.
Verificând cu google
În trecut, oamenii nu se deranjau cu un design receptiv sau mobil. Dar apoi, când au apărut informații că motoarele de căutare ar reduce rezultatele motorului de căutare pentru site-urile care nu aveau o versiune mobilă, oamenii s-au tensionat (ca în cazul HTTPS). Oamenii au început imediat să comande versiuni mobile de la freelanceri, unele instalând pluginuri speciale care ar putea funcționa strâmb.
Astfel, atunci când cineva a achiziționat un aspect adaptiv sau o versiune mobilă, l-a verificat imediat într-un serviciu Google special, care arată doar modul în care aspectul dvs. îndeplinește cerințele. Acum interfața s-a schimbat puțin, dar esența rămâne aceeași.
Pentru a verifica acest caz personal, trebuie să mergeți la acest serviciu - search.google.com/search-console/mobile-friendly... După aceea, introduceți adresa acestui site în bara URL și așteptați. După un timp scurt, vi se vor oferi toate informațiile despre dacă site-ul dvs. îndeplinește cerințele Google pentru aspectul mobil.
Nu inteleg...
Știu perfect că site-ul meu a fost adaptat, mai ales că abia recent am modificat aspectul. Dar recent, pentru distracție, am fost la acest serviciu pentru a vedea ce ar spune bătrânul Gosha și am fost foarte surprins. Faptul este că serviciul mi-a spus că blogul meu nu a fost niciodată adaptat și este slab lizibil pentru dispozitivele mobile.
Nu puteam înțelege în niciun fel care era problema, așa că am început să caut o soluție pe internet. Și am găsit-o pe un singur site. Se pare că totul se afla în fișierul robots.txt. L-am scris în alb și negru, astfel încât motoarele de căutare să nu-mi indexeze fișierele tematice, așa că el nu a văzut nicio versiune mobilă.
După ce am scos o linie din robot ( Nu permiteți: / wp-content / themes / my theme), atunci serviciul a stabilit imediat că versiunea mea pentru mobil era normală. Deci, nu vă faceți griji dacă aveți brusc același lucru. Cel mai probabil, pur și simplu nu ați permis ca Google să vă indexeze tema.
Ei bine, probabil că îmi voi termina articolul astăzi. Sper că ți s-a părut de ajutor. După cum puteți vedea google verificând versiunea mobilă a site-ului vă permite să vedeți modul în care site-ul se potrivește cerințelor sale. De fapt, este rar să găsești un site web care să nu aibă propria versiune mobilă sau capacitate de reacție. Va trece ceva mai mult timp și toate site-urile nou create vor avea automat un certificat SSL.
Mulțumesc că m-ai citit. Cu siguranță te voi aștepta din nou pe paginile blogului meu. Între timp, îți recomand să citești și alte articole. Sunt sigur că veți găsi o mulțime de lucruri interesante pentru dvs. Multă baftă. Pa! Pa!
Cu respect, Dmitry Kostin.
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.
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 -
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? 🙂
