Tutorial Cum poti avea mobile friendly pentru orice site

AlexH

Merg pe strada catre Mine...
Membru personal
Administrative
Freelancer
SEO Expert
Am vazut multe discutii legat de mobile friendly in ultima perioada. Sper ca informatiile de mai jos sa va ajute sa aveti un site mobile friendly optimizat pentru a corespunde regulilor celor de la google.

[HIDE-THANKS]Varianta plugin.

1. jetpack - este bun, in ultima perioada consuma cam multe resurse si nu afiseaza reclame sau intreg continutul asa cum este pe desktop.
2. WPtouch Mobile Plugin - afiseaza tot si este folosit de multi. Am inteles ca uneori exista ceva probleme la afisare.
3. puteti cauta si testa alte plugin de aici https://wordpress.org/plugins/tags/mobile-theme

Varinata thema responsiva

Aceasta este cea mai recomandata varianta pentru ca tema este responsiva si functioneaza pe orice device.
O thema care o folosesc si functioneaza bine pe orice device este mythemeshop.com/themes/sociallyviral
Asa ca inainte de a incepe un site, este recomandat sa cautati o thema care este responsiva si pe cat posibil sa fie compatibila cu noile reguli sau sa primeasca update regulat.

Varianta subdomeniu pentru mobile

Aceasta varianta este pentru cei care detin un site facut custom, sau thema de desktop este prea veche, iar schimbarile ar putea aduce probleme. Asa ca putem face versiune mobila fara sa alteram site-ul principal.

1. facem un subdomeniu m.domeniu.com
2. daca ai wordpress, pur si simplu clonezi site-ul si pui aceleasi date la db. asta inseamna ca orice actualizare o faci pe domeniu.com se va face si pe m.domeniu.com
3. pe domeniu m.domeniu.com poti pune orice alta tema special pentru mobile sau cea principala dar convertita in mobil.
4. acest lucru iti permite sa afisezi usor doar reclame pentru mobile device

Cum redirectam userii pe mobile device cand acceseaza site-ul principal.

1. adaugam acest code in header.
Cod:
<script type="text/javascript">
  <!--
  if (screen.width <= [B]800[/B]) {
    window.location = "[B]http://m.domain.com[/B]";
  }
  //-->
</script>
Sau varianta htaccess
Cod:
RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]

In caz ca cineva iti acceseaza mobile site de pe desktop il poti trimite spre varianta desktop
Cod:
<script type="text/javascript">
  <!--
  if (screen.width <= [B]1000[/B]) {
    window.location = "[B]http://domain.com[/B]";
  }
  //-->
</script>

Metodele de redirectare sunt multe si puteti alege varianta care o doriti.

https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls
Daca doriti mai multe info puteti cauta pe google
redirect mobile devices to mobile site sau alte derivate.

Dupa cum vedeti nu este foarte complicat sa aveti un site mobile friendly optimizat.

Daca faceti o thema custom de mobile e bine de tinut minte:

1. codul sa fie optimizat - fara spatii goale multe, fara repetare la coduri daca nu este neaparat nevoie
2. incercati sa folositi surse externe cat mai putin in code
3. preluarea la imagini este recomandat sa exact dimensiunea care trebuie si nu resize la img pentru ca cere resurse si timp. Wordpress cand urci o imagine o salveaza automat in mai multe formate.
4. marimea la img sa nu fie mai mare de cativa kb si orice este peste 50kb poate aduce un load mai mare
5. reduceti pe cat posibil numarul de requesturi la incarcare
6. reduceti pe cat posibil interogarea/scanarea la db pentru fiecare accesare
7. puneti prioritate la incarcare a continutului la accesare. Adica continutul (text + video + img) sa se incarce primul si reclamele la final. Regula este cam asa: text primul, apoi img sau video si la final ads si alte surse.
8. cache expire la fiecare element
[/HIDE-THANKS]
 
Persoanal recomand varianta responsive din punct de vedere seo. m.site.ro este un subdomeniu și este văzut separat de către google deci costuri mai mari la promovare. În plus mare atenție la conținut duplicat.

PS: Nu zic că nu e ok și cu m. dar când faci responsive site-ul îți faci o singură campanie de link building :) Sunt câteva magazine mari care folosesc varianta responsive cu succes (ex : elefant.ro)
 
Varianta cu M nu trebuie promovata separat. Problema la continut dublicat se rezolva usor prin adaugarea in metadata rel="canonical" cu link catre mobile.

O alta metoda mai simpla este sa adaugi asta in header:
Cod:
<meta name="viewport" content="width=device-width, initial-scale=1">
Prin aceasta metoda functioneaza ridtube.net
 
Pe langa avantajele din punct de vedere SEO pe care o thema care se vede bine si pe mobil le are, as vrea sa vorbesc mai mult despre experienta vizitatorilor.
Am avut clienti carora le-a scazut bounceratul cu 20-30%, timpul petrecut pe site crescut cu cateva minute, conversii de 2-3-4 ori mai multe si multe alte imbunatatiri in statistici care s-au vazut inca de a doua zi.
Personal convertesc o theme nonresponsive in una responsive la pretul de 50-100 euro (depinde de complexitate, numar de pagini etc) si va zic sincer ca nu am avut absolut niciun client care sa nu fie multumumit de noul randament pe care il da siteul.

Varianta subdomeniului pentru mobile se foloseste in general pentru siteuri complexe.

NU recomand varianta utilizarii pluginurilor. In principiu acestea omoara identitatea siteurilor. Majoritatea arata doar titlu -> link -> content.
 
Loading...
Back
Sus