Optimizarea site-ului pentru mobil și update-ul Google din 21 aprilie

-- Scris de

UPDATE #2 (21 aprilie): Update-ul va afecta simultan toate rezultatele, indiferent de limbă/locație (sursă).

UPDATE #1 (27 martie): Implementarea update-ului va avea loc pe o perioadă de câteva zile – o săptămână, astfel încât pot exista fluctuații până lansarea este finalizată (sursă). De asemenea, rezultatele din Google News nu vor fi afectate de acest update (sursă).

Google a anunțat că, începând cu 21 aprilie 2015, algoritmul lor se va folosi într-un grad mai mare de factorul „Mobile-Friendly” pentru căutările efectuate de pe dispozitive mobile. În trecut, anumite update-uri Google au ținut cont dacă un site este configurat și vizibil în mod corect de pe telefon, și au permis utilizatorilor să găsească mai ușor astfel de site-uri, însă într-o măsură mai mică.

Noul anunț implică faptul că, pentru cei care vor face căutări pe Google de pe un dispozitiv mobil, paginile optimizate „pentru mobil” vor fi afișate înaintea celor neoptimizate. Google avertizează că „această schimbare va afecta căutările de pe mobil în toate limbile din lume și va avea un impact semnificativ în rezultatele noastre”.

Înainte să ne plângem ca e unori imposibil să ținem pasul cu toate update-urile Google, să fim realiști: update-urile au fost realizate întotdeauna pentru utilizatorul final. Din moment ce tot mai multe persoane își folosesc telefoanele să acceseze pagini pe internet, acest update era inevitabil.

Raportul Global Web Index (GWI) arată că, în trimestrul 3 al anului 2014, 80% din persoanele adulte dețineau un smartphone (75% îl foloseau pentru a intra pe internet) și aproape 50% dețineau o tabletă (37% pentru accesul internet).

Index GWI Q3 2014 Dispozitive

Toți cei care au un business online ar trebui deja să înțeleagă că au nevoie de un website optimizat pentru mobil pentru a oferi utilizatorilor o experiență cât mai bună. Acest anunț de la Google crește și mai mult interesul de a rezolva problemele care previn afișarea corectă a website-ului pentru dispozitivele mobile.

SEO și rezultatele Google pentru mobil

Nu e nici un secret faptul că Google a încercat în ultimii ani să folosească cât mai mult experiența utilizatorului ca un factor în algoritmul lor. Nu mai este îndeajuns doar să afișăm informații relevante pentru utilizatorii noștri. Informațiile trebuie să fie și ușor de consumat.

Datorită creșterii foarte mari a gradului de utilizare a dispozitivelor mobile, cei de la Google și-au adaptat crawler-ii și algoritmul pentru a verifica cum este afișat un site pentru acest tip de utilizatori. De aceea, rezultatele pot diferi semnificativ pentru o căutare făcută de pe un PC față de aceeași căutare de pe un smartphone.

Când vine vorba de utilizatorii care navighează de pe tabletele sau telefoanele lor, viteza și gradul de accesibilitate sunt factori decizivi, iar răbdarea lor este mult mai limitată comparată cu cea în timpul navigării de pe desktop sau laptop. Dacă ne ia 2 secunde să găsim și să dăm click pe un link de categorie de pe PC, ne poate lua mai mult timp să dăm scroll și zoom pentru a face aceeași operație de pe telefon. Desigur, asta în cazul în care nu atingem link-ul imediat următor, ceea ce poate duce la o experiență foarte frustrantă.

Pentru a ajuta webmaster-ii să identifice dacă site-urile lor oferă o experiență bună pentru mobil, în mai 2014 Google a adăugat recomandări „User Experience”/„Experiența Utilizatorului” în tool-ul PageSpeed Insights, o mică aplicație web care permite celor care au un website să verifice performanța acestuia.

Cu jumătate de an mai târziu, la sfârșitul lui octombrie, Google a anunțat un update pentru Webmaster Tools care oferă webmaster-ilor să verifice paginile care prezintă erori de „Mobile Usability” / „Utilizare mobilă”. Prin utilizare mobilă, Google face referire la 5 recomandări:

  • O zonă definită de vizualizare (sau „viewport”) care se adaptează la mărimea ecranului
  • Conținut care este fluid în viewport, astfel încât să nu fie nevoie ca utilizatorii să facă scroll orizontal sau zoom pentru a vedea toată pagina
  • Font-uri scalabile pentru ca textul să fie lizibil pe ecrane mici
  • Elemente ușor de atins (cum sunt butoanele) care au o distanță corespunzătoare față de celelalte elemente
  • Funcționalitate și design vizual prin tehnologii pentru mobil

Câteva săptămâni mai târziu, Google a lansat tool-ul „Mobile-Friendly Test, o aplicație web publică, similară cu PageSpeed Insights, care poate verifica orice pagină (indiferent daca aparține unui site propriu sau nu) dacă îndeplinește recomandările menționate mai sus.

Mobile Friendly Test

În aceeași perioadă, motorul de căutare a lansat oficial și eticheta „Mobile-Friendly” / „Pentru mobil” în rezultate, astfel încât utilizatorii pot identifica mai ușor care rezultate oferă o experiență bună pentru dispozitivele mobile.

Eticheta „Mobile-Friendly” / „Pentru mobil” este aplicată în funcție de rezultatul test-ului. Dacă pagina trece testul, va primi eticheta. Dacă nu, chiar dacă 99% din probleme au fost rezolvate, eticheta nu va fi anexată la rezultat.

Eticheta Mobile Friendly / Pentru Mobil

Începând cu 21 aprilie, update-ul care avantajează site-urile ce oferă o experiență bună pentru mobil va fi aplicat doar pe baza etichetei „Mobile-Friendly” / „Pentru mobil”. Dacă pagina are eticheta, va primi beneficiul întreg. Dacă nu, nu.

Majoritatea website-urilor care vor „suferi” din cauza update-ului vor fi cele care au un design optimizat doar pentru desktop. Adaptarea design-ului pentru a funcționa corect și pe telefoane și tablete poate fi fie un efort simplu, necesitând câteva modificări CSS, fie dificil, fiind nevoie de un redesign complet.

Cele trei tipuri de website-uri pentru mobil

Există diferite modalități de a crea un website pentru mobil și este important să înțelegem ce variante avem la dispoziție atât din punct de vedere al design-ului cât și din cel SEO. În ghidul lor pentru mobil, Google listează trei configurații posibile pe care un webmaster le poate alege pentru design-ul mobil al site-ului: Responsive Web Design, Dynamic Serving și Separate URLs.

Configuratii website mobil - Google

1. Responsive Web Design (Design adaptiv)

Un design „responsive” este unul în care versiunea de desktop a site-ului se adaptează în funcție de dispozitivul utilizatorului care accesează pagina – același cod HTML este servit tuturor dispozitivelor, însă browserul primește instrucțiuni asupra modului în care dimensiunile elementelor trebuie ajustate pentru ecranul dispozitivului, folosind CSS. Astfel, website-ul „răspunde” la dispozitivul de pe care este vizualizat.

Design adaptive / Responsive Design

Avantaje

  • Există un singur URL, fiind mai simplu de ținut minte și de distribuit online de către utilizatori.
  • O dată ce design-ul a fost modificat să fie adaptiv, orice schimbări viitoare asupra lui vor făcute o singură dată.
  • Programatorii web folosesc un singur cod pentru toate platformele, asigurând faptul că website-ul este vizibil pe toate dispozitivele, inclusiv cele introduse noi pe piață.
  • Website-ul poate fi adaptat pentru diverse dispozitive modificând design-ul, conținutul, navigația și modul de interacțiune, asigurând o experiență optimă indiferent de dispozitivul folosit.
  • Design-ul adaptiv nu are nevoie să detecteze „user agent” (adică browser-ul sau dispozitivul de pe care este accesat site-ul), astfel că timpul de încărcare tinde să fie mai mic.

Dezavantaje

  • Dacă versiunea deskop a website-ului este complexă, poate fi aproape imposibil de adaptat într-un design „responsive” care să se potrivească pentru ecranul unui telefon. Complexitatea poate fi dată de formulare lungi de tip pas-cu-pas, calculatoare și funcționalități detaliate de căutare.
  • În unele cazuri, poate fi necesar mai mult timp și know-how pentru a crea un design adaptiv dintr-o versiune de desktop față de celelalte opțiuni. De exemplu, modul de navigare a site-ului trebuie uneori modificat considerabil pentru a fi adecvat unui telefon cu touch-screen.
  • Utilizatorii de mobil se pot aștepta la o experiență complet diferită față de cea pe care o au de pe desktop/laptop. Cu un singur design, chiar dacă este adaptiv, utilizatorii pot fi nemulțumiți.

2. Dynamic Serving (Servire dinamică)

Servirea dinamică implică faptul că există o versiune separată a design-ului creat pentru mobil, dar URL-ul rămâne același cu cel al versiunii desktop. Folosind această opțiune, codul HTML și fișierele CSS asociate sunt servite dispozitivelor în funcție de „user-agent”-ul acestora – de exemplu, un user-agent de desktop sau unul de telefon.

Pentru ca Google să detecteze această configurație, header-ul „Vary: User-Agent” trebuie adăugat tuturor paginilor.

Servire dinamica / Dynamic Serving

Avantaje

  • Există un singur URL, fiind mai simplu de ținut minte și de distribuit online de către utilizatori (la fel ca pentru Design-ul adaptiv).
  • Din moment ce codul folosit pentru afișarea paginii este separat, design-ul poate fi creat pentru a satisface așteptările utilizatorilor de mobil.
  • Nu necesită nici o redirecționare, design-ul corect fiind servit automat către utilizator.

Dezavantaje

  • Există două seturi de fișiere de cod care trebuie menținute și actualizate.
  • Lista cu liniile de user-agent trebuie actualizată în mod constant pentru a ține pasul cu noile dispozitive lansate, pentru a asigura că este servit design-ul corect.
  • Dacă în procesul de detecție al user-agent-ului intervine o problemă, atunci utilizatorii pot vedea versiunea incorectă a site-ului, ceea ce duce la o experiență proastă.

3. Separate URLs (URL-uri separate)

În această configurație, paginile pentru desktop au un echivalent pentru utilizatorii de mobil pe un subdomeniu separat, creat special pentru acest scop (de exemplu: m.domeniu.ro). URL-ul corect este servit pentru desktop sau dispozitive mobile tot în funcție de user-agent, prin intermediul unei redirecționări.

Pentru a afișa pagina corectă și pentru a consolida semnalele de ranking, un tag „rel=alternate” trebuie adăugat și configurat pentru versiunea desktop și un tag „rel=canonical” trebuie adăugat pentru versiunea pentru mobil.

URL-uri separate / Separate URLs

Avantaje

  • Din moment ce codul folosit pentru afișarea paginii este separat, design-ul poate fi creat pentru a satisface așteptările utilizatorilor de mobil (la fel ca pentru Servire dinamică).
  • Nu necesită modificarea design-ului pentru desktop.

Dezavantaje

  • Este mai susceptibil la erori din moment ce sunt necesare tag-uri care trebuie configurate corect pentru ca Google să le înțeleagă.
  • Necesită un subdomeniu separat, ceea ce implică alte configurări.
  • Utilizatorii care accesează varianta desktop de pe mobil vor aștepta câteva secunde pentru a fi redirecționați.

Checklist SEO pentru website-urile optimizate pentru mobil

O dată ce versiunea de website pentru mobil a fost creată, trebuie să ne asigurăm că totul funcționează corect:

1. Folosește Mobile-Friendly Test tool pe câteva din paginile importante ale site-ului (pagina principală, pagina de categorie, pagina de produs, pagina de blog/articol) pentru a fi sigur că echipa de design nu a omis nimic și că paginile respective trec testul.

Mobile Friendly Test 2

2. Pentru a verifica faptul că Google „vede” paginile în mod corect, folosește tool-ul „Fetch as Google” / „Preluare ca Google” din Webmaster Tools (cu opțiunea „Fetch and Render”/„Preia și redă”) folosind versiunea „Mobile: Smartphone”, pentru a verifica că nu există elemente lipsă în design (cum ar fi imagini sau secțiuni ale paginii), comparat cu ceea ce vede un utilizator.

Instrumentele pentru webmasteri   Preluare ca Google 1

3. Dacă ai optat pentru Servire dinamică, folosește „Fetch as Google”/„Preluare ca Google” din Webmaster Tools (sau printr-un alt tool precum http://web-sniffer.net/) pentru a te asigura că header-ul HTTP „Vary” este configurat corect.

Instrumentele pentru webmasteri   Preluare ca Google  Vary User Agent

4. Dacă ai optat pentru URL-uri separate folosește „Fetch as Google” / „Preluare ca Google” din Webmaster Tools, folosind atât versiunea Desktop cât și versiunea Mobile: Smartphone (sau prin inspecția manuală sau un alt tool de crawling, precum Screaming Frog) pentru a te asigura că tag-urile „alternate” și „canonical” sunt configurate corect.

Instrumentele pentru webmasteri   Preluare ca Google   link rel alternate

5. Dacă totul e în regulă, folosește opțiunea „Submit to index”/„Trimiteți la index” pentru pagina principală și categorii (folosind opțiunea „Crawl this URL and its direct links” / „Accesează cu crawlere această adresă URL și linkurile sale directe” – sunt disponibile 10 astfel de cereri pe lună) pentru a grăbi indexarea versiunii de mobil și a schimbărilor în cod.

Instrumentele pentru webmasteri   Preluare ca Google   Trimiteti la index

6. Monitorizează secțiunea „Mobile Usability” / „Utilizare mobilă” din Webmaster Tools pentru apariția oricăror erori. Din păcate, secțiunea respectivă este actualizată o dată la câteva zile, astfel că va trebui să aștepți puțin până apar primele rezultate.

Instrumentele pentru webmasteri   Utilizare mobila

 

 

Ar trebui acum să fii pregătit pentru update-ul Google și pentru a oferit utilizatorilor tăi cea mai bună experiență posibilă.

PS: Ai implementat un design pentru mobil și vrei să afli dacă ești pregătit pentru update? Contactează-ne pentru un audit!

 

Leave a Reply