Kuu: august 2019

Kuidas muuta PWA SEO sõbraks?

Traditsiooniliselt pole brauseripõhine üheleherakendus (SPA), mida esindab ka progressiivne veebirakendus (PWA), alati saanud häid positsioone otsingutulemustes

progressiivne veebirakendus

Halb positsioon tuleneb sageli halvast nähtavusest – otsimootorid ei indekseeri pärast esimese lehe laadimist veebilehitsejas dünaamiliselt loodavat sisu.

SPA peamiseks eesmärgiks on olnud siiski sujuva kasutuskogemuse pakkumine. Kasutaja jaoks laeb SPA puhul leht hetkeliselt. Google andmed näitavad, et teie leht laeb mobiilseadmesse kauem kui 3 sekundit, väljub 53% kasutajatest kohe. Samuti reastab Google kiiresti laetavad lehed otsingutulemustes kõrgemale.

Lehe serveerimise viis mõjutab otsimootori sõbralikkust, allalaadimiskiirust ja lehe jõudlust

Serveris täielikult valmis koostatav leht on robotitele nähtav, kuid kasutajakogemus on selle tõttu aeglasem. Veebilehitsejas lehe koostamine tähendab vähem koormust nii serverile kui ka võrguühendusele. Sageli vajavad aga palju andmeid liigutavad rakendused kasutajakogemuse edasiseks tõstmiseks spetsiaalseid tööriistu nagu Service workers, mida saab kasutada ainult rakendades SPAd. Seega seisame silmitsi raskete valikutega. Kuidas teenida kõige paremini kasutajaid, unustamata otsingumootoreid?

Orgaaniline nähtavus otsingutulemustes paraneb, kui sait võtab arvesse kõiki indekseerimisega seotud probleeme ja sisu on robotite poolt loetav. Ja ehkki Googlebotil pole SPA poolt rakendatavast andmete internetilehitseja vahemällu puhverdamisest kasu, pakub see Googlele kaudselt teavet reaalsete kasutajate laadimisaegade kohta – Chrome’i kasutajakogemuse aruanne (CrUX) saadab Chrome’i kasutajate kohta statistika, mis eeldatavasti mõjutab Google’i otsingutulemuste arvutamist.

Googlebot piirangud

Googlebot rendering põhineb 2015. aastal välja antud Chrome 41 headless versioonil. Sellest ajast on tehnoloogia edasi arenenud ja loomulikult Googlebot kõiki kaasaegseid tehnoloogiaid ei toetata. Lisaks on Google erinevatel põhjustel kehtestanud muid piiranguid. Alljärgnevalt on loetletud olulisimad.

  • WebSocket protokolli ei toetata.
  • IndexedDB ja WebSQL on keelatud.
  • Chrome 41 toetab ainult ES5 süntaksi.
  • Tugi ainult HTTP/1.x ja FTP jaoks.
  • 3D- ja VR-sisu ei saa indekseerida.
  • Sessiooni andmed ja küpsised kustutatakse lehe laadimise vahel. Google soovib näha lehti sellisena, nagu need ilmuksid esimesel allalaadimisel.
  • Service workerite funktsiooni toetatakse ainult osaliselt.
  • Kõiki lehe JavaScript faile ei pruugita alla laadida.

JavaScript on brauserile koormav

JavaScripti on brauseris palju raskem käivitada, kui valmis HTMLi. Eriti piiratud võimsusega mobiilseadmetes võib JavaScripti laadmine-lugemine-käivitamine võtta kuni 36% kauem kui lauaarvutis. Kuna seadme protsessor on kauem hõivatud, tarbib lehe kuvamine ka rohkem akut. Seega lehe esmakordne laadimine mobiilseadmesse võib võtta palju aega, kui selle käivitamiseks on vaja palju JavaScripti. See mõjutab negatiivselt CrUX aruande osaks olevaid mõõtmeid “Time to First Pain” ja “First Contentful Paint“.  Negatiivsete mõjude vältimiseks peaks esmane vaade olema koostatud serveris.

Vanemaid brausereid ja robotite toetus

Kõik uuemad brauserid ei pruugi toeta kõiki PWA funktsioone. Funktsioonide tuvastamiseks on soovitatav kasutada mõnda tööriista, et pakkuda kõigile kasutajatele ühtlast sisu. Üks selline, PWA Feature Detector, on saadaval ka avatud lähtekoodina.

Brauserite puhul, mis ei toeta Service Workereid, pakutakse sisu koostamist serveris (SSR).  Ühildumaks vanemate veebilehitsejate ja otsirobotitega, saab muidu kliendi pool koostatavad lehed (CSR) eelvalmistada ka serveris kasutades selleks loodud tööriisid nagu Headless Chrome + Puppeteer ja Rendertron.

Lühidalt: kuidas muuta PWA SEO sõbralikuks?

  • Parandage kõik JavaScripti vead. Mõnikord takistavad nad Google robotitel sisu indekseerimist.
  • Muutke ECMAScript 5+ kood Googlebot poolt toetatavaks ECMAScript 5 koodiks vastava tööriistaga (nt Babel). 
  • Kasutage viideteks alati tavalisi HTMLi.
  • Vältige JavaScriptiga ümbersuunamisi. Tehke need serveris.
  • URLi muutmiseks lehitsejas kasutage JavaScript pushState meetodit, mida Google robotid toetavad.
  • Muutke lehed URLide kaudu kättesaadavaks, et Google robotid saaks sisule juurde pääseda.
  • Veenduge, et pildid oleksid optimeeritud ja indekseeritavad.
  • Vältige kaua laadivaid staatilisi ressursse ja kunstlike viivituste (setTimeout) kasutamist. Nende olemasolu pikendab lehe lõpplaadimise aega ja tekitab kasutajale aeglase lehe tunde.
  • Veenduge, et lehte ja sisu ühtemoodi kõikidele .
  • Veenduge, et lehe päises olevad metaandmed oleksid ühtsed nii serveris kui ka brauseris lehe koostamisel.
  • Ärge takistage robots.txt-s otsingumootorit nägemast sisuga seotud JavaScript faile .
  • Esimese lehe laadimiseks kasutage serveri lehe koostamiseks (SSR). 
  • Divante ja Elephati avaldatud uurimustest saate PWA SEO kohta veelgi täpsemalt lugeda.

E-pood progressiivse veebirakendusena (PWA)

Mis on progressiivne veebirakendus?

Progressiivsed veebirakendused (Progressive Web App, PWA) on üks uusimaid veebitehnoloogiaid e-poe lahenduste loomiseks. Google kirjeldab PWA tehnoloogiat, kui töökindlat kiiret ja kaasavat viisi veebirakenduse loomiseks.

progressiivne veebirakendus

Töökindlus

Progressive veebirakendusena loodud lahendus suudab silmapilkselt lehe avada olenemata võrguühenduse kvaliteedist. JavaScriptis kirjutatud taustaskript võimaldab lehe laadimiseks kasutada klientseadme vahemälu. Andmete vahemällu salvestamine vähendab võrguühenduse vajadust ning tagab töökindla lehekülgede laadimise.

Kiirus

PWA tagab e-poe kasutajale kiire ja sujuva lehe laadimise, ka katkendliku võrguühenduse korral.  Google andmetel lahkub 53% kasutajatest saidilt, kui lehe laadimine võtab aega üle 3 sekundi.

Kaasatavus

Kliendil on võimalik e-poe otselink brauserist otse oma mobiiltelefoni ekraanile salvestada. Edaspidi toimib e-pood kliendi jaoks naitiv rakenduse sarnaselt. Kuvades talle veebilehte tänu veebirakenduse manifestile täisekraanil ja teavitades teda push notificationite toel kampaaniates, uudiskirjadest jms.

Kes kasutavad PWAd?

Tuntumatest progressiivse veebirakenduse tehnoloogia kasutajatest võib välja tuua AliExpress, Uber, Instagram, Pinterest, Tinder, Twiter Lite, Telegram ja Google Maps.

AliExpress tõi Google casestudy raames välja, et nad suutsid PWA lahendusega uute klientide konversioonimäär üle kõigi brauserite 104% kasvatada. Seal hulgas tõusis iOS konversioonimäär 82% ja kasutajad veetsid AliExpressi lehel 74% rohkem aega.

progressiivne veebirakendus

Pinterest tegi oma rakenduse täiesti uuesti ja otsustas progressiivse veebirakenduse kasuks. See otsus tõi neile 60% kasvu kasutajate kaasamises ja 40% rohkem reklaamitulu kasutaja kohta.

Uber’i mobiilile mõldud veebileht on oma mahult 50kb ja laeb 2G võrguühenduse puhul alla 3 sekundi.

Ambientia loob PWA e-poode

Ambientia on alates 2018 aasta algusest tõsiselt PWA tehnoloogiasse investeerinud, koolitades arendajaid ja sõlmides partnerluskokkuleppeid. Samas ei ole me Magento platvormi unustanud, sest see sobib e-poe administreerimiseks ja nii öelda backend rolli tarkvarast täitma. Funktsionaalsuse ja äriloogiga osas nõudlikema e-kaubanduslahenduste loomise osas kasutame paindlikumat Symfony raamistikule loodud modulaarset ja kergesti automaattestitavat lahendust.

Tänasel hetkel võime öelda, et oleme Vue Storefronti näol leidnud tugeva partneri ja hea PWA open source lahenduse. Meie arendajad on läbinud Vue Storefronti vanemarendaja poolt läbi viidud koolitus programmi, mis sisaldas füüsilisi ja virtuaalseid töötubasid. Ambientia on Vue Storefronti ametlik partner ja töötame hetkel Core partner staatuse poole ja tegeleme esimeste PWA e-poodide loomisega.

VUE.js meeldib arendajatele

progressiivne veebirakendus

Avastasime progressiivse veebirakenduse kasutusele võtuga, et lisaks heale tarkvara lõpplahendusele on arendajad tööd tehes oluliselt motiveeritumad ning nad naudivad uue ja sujuvama tehnoloogiaga töötamist. VUE.js eesmärgiks on organiseeritult lihtsustada veebiarendust ja ta on seda kindlasti saavutamas.

Soovid ka kiiremat tänapäevast e-poodi?

Aitame heameelega Magento 1 põhineva e-poe tänapäeva tuua või Magento 2 ebaõnnestunud tarkvara ringi teha või hoopis uuele raamistikule luua. Töötame ka projektidega, mis esmapilgul ei paistagi e-poed, vaid on pigem pigem broneerimis või piletimüügi keskkonnad.

Allikad: