Finding more mobile-friendly search results - din 21 aprilie 2015

Citat:

---

Webmaster level: all

When it comes to search on mobile devices, users should get the most relevant and timely results, no matter if the information lives on mobile-friendly web pages or apps. As more people use mobile devices to access the internet, our algorithms have to adapt to these usage patterns. In the past, we’ve made updates to ensure a site is configured properly and viewable on modern devices. We’ve made it easier for users to find mobile-friendly web pages and we’ve introduced App Indexing to surface useful content from apps. Today, we’re announcing two important changes to help users discover more mobile-friendly content:

---

Official Google Webmaster Central Blog: Finding more mobile-friendly search results

Asta este o veste interesanta. In acest fel Google ne da un impuls pentru a ne apuca de modificarea site-urilor pentru ca acestea sa fie usor de utilizat si de pe dispozitivele mobile (smartphones si tablete). Lumea utilizeaza din ce in ce mai mult aceste dispozitive pentru a accesa website-uri. Analizand statisticile se poate constata ca procentul celor 'mobili' este intre 10 si 40% in functie de site. Aceste procente vor creste in urma exploziei vanzarilor la tablete, dar si datorita pachetelor de date din ce in ce mai accesibile (ieftine) ale furnizorilor de servicii mobile.

Pentru a 'mobiliza' un site probabil ca cea mai la indemana metoda este inlocuirea temei sau template-ului existent cu una/unul de tip 'responsive', care sa se auto-afiseze in mod corect la diferite rezolutii pe care le-ar putea avea dispozitivele cu care se acceseaza site-ul. Metoda asta merge usor la cei cu bloguri, sau cu site-uri bazate pe CMS-uri pentru care exista template-uri actualizate dupa ultimele tendinte ;)

Pentru cei care au facut totul de la zero, exista posibilitatea de a merge pe una din urmatoarele 3 variante, dupa cum rezulta si din documentatia pusa la dispozitie de Google:

1) Separate URLs - varianta separata de site mobil de tipul m.site.ro:
- necesita declarare 'alternate' in pagina desktop a linkului corespunzator paginii de pe site-ul mobil;
- necesita declarare 'canonical' in pagina mobila a linkului corespunzator paginii de pe site-ul desktop.

2) Dynamic serving - varianta livrarii unei pagini construita special pentru dispozitivele mobile de la aceeasi adresa web ca si cea de la care s-ar livra una in cazul accesarii de pe un desktop (deci nu exista un site separat mobil ca la punctul 1):
- necesita declararea http-headerului 'Vary', care semnaleaza faptul ca pagina livrata poate varia in functie de user-agentul apelator, exemplu in PHP: header('Vary: User-Agent');
- in baza semnaturii user-agentului apelator se prezuma o anumita rezolutie a dispozitivului pe care se face incarcarea paginii, si in functie de aceasta se livreaza o pagina 'normala' (desktop) sau una 'mobila'.

3) Responsive Design - varianta livrarii unei singure pagini, aceeasi indiferent de dispozitivul de pe care se face accesarea (desktop, tableta, smartphone), urmand ca pagina respectiva sa se auto-afiseze in mod corect in functie de rezolutia dispozitivului:
- necesita declararea <meta name="viewport" content="width=device-width, initial-scale=1">
- necesita utilizarea tehnicilor de 'media queries' pentru a schimba modul de afisare al paginii in functie de rezolutia ferestrei browserului.
exemple aici: Media Queries

Variantele (1) si (2) au avantajul ca pagina mobila poate fi restransa la o cantitate relativ mica de KB (cod html, imagini), ceea ce ar asigura un timp de incarcare bun al paginii. Insa in ambele variante (1) si (2) decizia de a face redirectare catre pagina de mobil (1), respectiv de a livra o pagina de mobil (2) se ia in functie de detectarea pe baza semnaturii user-agentului, ceea ce inseamna ca identificarea nu este 100% corecta - in multe cazuri un smartphone este detectat ca tableta, sau invers. Astfel, e posibil sa livram de exemplu o pagina destinata unui mobil pe o tableta care ar fi avut o rezolutie suficienta pentru a incarca site-ul la o rezolutie mai buna (in versiunea pentru tableta, sau in versiunea desktop daca nu exista o versiune creata special pentru tableta). Varianta (1) mai prezinta dezavantajul ca trebuie asigurata existenta unei corespondente a paginilor desktop->mobil si invers. Tot varianta (1) poate duce la indexarea prioritara a versiunii mobile in detrimentul celei 'desktop' daca nu se utilizeaza cu mare atentie rel='canonical' si rel='alternate'. Varianta (2) prezinta dezavantajul ca utilizarea acelui http-header 'Vary' poate impacta functionarea site-ului pe servicii de tip CDN. Unii provideri de servicii CDN refuza sa tina astfel de site-uri deoarece ar trebui sa memoreze nu doar un exemplar de pagina per url, ci cate n exemplare adica cate unul pentru fiecare user agent care a apelat pagina. Ambele variante (1) si (2) au dezavantajul ca presupun ca eventualele modificari la site sa se faca in 2 locuri: atat pe pagina desktop cat si pe cea de mobil.

Varianta (3) este si cea recomandata de Google. Practic ea nu are niciun dezavantaj ale variantelor (1) si (2): 'media queries' va 'recunoaste' in mod corect toate rezolutiile, nu exista mentenanta separata pentru 2 versiuni de pagina, nu exista probleme cu CDN, nu exista riscuri cu privire la caderea in rezultate a site-ului desktop in urma lansarii celui mobil. Singurul posibil dezavantaj este acela ca pe un dispozitiv mobil se va incarca o pagina cu tot atatia kilobytes ca si pe un site desktop, insa si in aceasta privinta exista vesti bune: dispozitivele mobile au devenit din ce in ce mai performante (procesor, memorie), traficul de date nu mai este atat de restrictiv (scump), si exista tehnici care fac ca la apelarea de pe dispozitivele mobile sa nu se mai incarce de exemplu continutul unui 'div' care nu va fi afisat, sau sa se incarce fotografii la o rezolutie mai mica decat in cazul site-ului desktop. In concluzie, varianta (3) este cea de urmat.

Resurse:
https://www.google.com/webmasters/to...bile-friendly/ - testare site daca e mobile-friendly
Mobile SEO - The tool and optimization guide - emuleaza incarcarea unui site pe un dispozitiv mobil + cateva verificari
Responsive 2200+ High Quality HTML, CSS & Web Templates | ThemeForest - template-uri responsive
https://developers.google.com/web/fu...s-with-picture - tehnici cu imagini
Inside AdSense: The responsive web + AdSense - AdSense pe site-uri responsive
How to Use Responsive Web Design to Support Old Browsers - exemplu de design responsive care chiar functioneaza fara probleme pe 5 browsere testate
Responsive Web Design Patterns | This Is Responsive - elemente de design responsive
mydevice.io common smartphones and tablets devices values - dimensiuni standard ale unora din cele mai cunoscute dispozitive mobile

Spor!

Se pare ca siteurile adaptate pentru mobil vor primi un plus suplimentar in SERP, incepand cu luna mai:

Google will start ranking &#039;mobile-friendly&#039; sites even higher in May | VentureBeat | Mobile | by Emil Protalinski