Vilniaus Alus

Vilniaus Alus

Apie projektą

Kuriant naująjį UAB „Vilniaus Alus“ tinklapį, „Ubaltic“ atliko techninio įgyvendinimo ir architektūros kūrimo vaidmenį.

Nuoroda į tinklapį: https://www.vilniausalus.lt/

Darbų apimtis:

  • Senojo tinklapio techninė ir SEO analizė.

  • SEO strategijos paruošimas: tendencijos, tobulinimo kryptys bei taktiniai veiksmai pozicijų „Google“ paieškoje gerinimui.

  • Naujojo tinklapio techninės architektūros projektavimas.

  • Dizaino ir funkcionalumų programavimas.

  • Turinio valdymo sistemos (TVS) integracija.

  • Vidinio SEO (angl. on-page SEO) įgyvendinimas.

Projekto valdymą, UX ir UI dizainą įgyvendino „Kibis“ komanda . Daugiau apie šią dizaino apdovanojimus pelniusią kompaniją, galite pasiskaityti jų tinklapyje.

Atlikti atnaujinimai:

  • Technologijos: Perėjimas prie modernios architektūros.

  • Struktūra: Optimizuota informacijos hierarchija.

  • Turinys ir SEO: Semantinis žymėjimas ir turinio perrašymas.

  • Padidintas našumas: Tinklapio užkrovimo ir navigacijos greitis.

Techninis įgyvendinimas

Tinklapis sukurtas naudojant „React“ pagrindu veikiančią Next.js technologiją (SSG – Static Site Generation). Turinio valdymui pasirinkta „Next.js“ ekosistemoje veikianti sistema PayloadCMS.

Struktūra

Sukurta 13 unikalių puslapių tipų, įskaitant: produktų kategorijas, individualius produktų puslapius, krautuvių puslapius su žemėlapiais nurodančiais jų lokacijas, bei statinių nuomos skaičiuoklės puslapis.

Naudojimasis žemėlapio funkcionalumu Vilniaus alus tinklapyje, krautuvės puslapyje ir informacinio krautuvės lango atidarymas.

Funkcionalumai:

  • Kalbos keitimo funkcija: Turinio atvaizdavimas keliomis kalbomis išlaikant naršymo kontekstą (pvz., esant produkto puslapyje ir pakeitus kalbą, nukreipiama į to paties produkto versiją kita kalba).

  • Interaktyvumas: Dinamiška statinių nuomos forma su kainų skaičiuokle.

  • Pritaikomumas: „Responsive“ dizainas visiems įrenginiams.

  • Navigacija puslapyje vykstanti akimirksniu: statiškai sugeneruoti puslapiai (SSG) ir „Client-side routing“ užtikrina momentinį puslapių perjungimą.

  • Lengvas lankytojų susisiekimas: el. laiškų siuntimas užpildžius tinklapio formas.

  • Patogus turinio redagavimas naudojantis pagal įmonės poreikius sukonfigūruota turinio valdymo sistema (TVS)

  • Naujienlaiškio prenumeratos: būdas rinkti lankytojų el. pašto adresus (Mailerlite integracija)

  • Analitikos įrankiai: „Google analytics“ integracija

Formos pildymas, preliminarios nuomos kainos skaičiavimas Vilniaus alus „statinių nuoma“ puslapyje.

SEO

Tvarkinga html struktūra

Semantinė HTML struktūra: užtikrinta taisyklinga antraščių (H1-H6) ir kitų elementų hierarchija.

Kodėl tai naudinga?

Tvarkinga html elementų struktūra leidžia aiškiai nurodyti informacijos hierarchiją puslapyje. Kiekviena tema ir potemė turi savo antraštę - tai palengvina internetinės svetainės lankytojams surasti ir perskaityti informaciją. Taip pat tai leidžia „Google“ robotams ir lankytojams besinaudojantiems ekrano skaityklėmis (angl. screen readers) tiksliai suprasti turinio svarbą ir kontekstą.

Struktūruotų duomenų įgyvendinimas

Struktūruoti duomenys (Schema.org) „Google“ robotams padeda klasifikuoti puslapio turinį. Implementavus kai kurias schemas, atsiranda galimybė, kad nuorodos į tinklapio turinį paieškos rezultatuose turės papildomos informacijos. Nuoroda su daugiau informacijos, ne tik išsiskiria iš kitų, bet ir gali padidinti tikimybę būti paspausta - taip potencialų klientą atvedant į jūsų svetainę.

Įgyvendintos schemos:

Product

"Product" schemoje nurodoma informacija apie produktą. Vieni svarbiausių informacijos vienetų šioje schemoje yra kaina ir naudotojų reitingas. Šie duomenys gali atsirasti paieškos rezultatuose, taip galimai padidinami tikimybę, kad nuoroda bus paspausta.

„Google“ paieškos rezultatuose nurodomas „rich results“ elementas, kuriame matomi paslaugos įkainių rėžiai.
„Google“ paieškos rezultatuose nurodomas „rich results“ elementas, kuriame matomi paslaugos įkainių rėžiai.
Brewery

Su „Brewery“ schema, nurodomi įmonės pavadinimas, veikla, pvm mokėtojo kodas, adresas ir kiti. Šie duomenys turi galimybę atsirasti „Google Knowledge panel“ informacinėje lentelėje, kurioje yra nurodoma santrauka apie subjektą. Mūsų tikslas pateikti tikslią informaciją apie įmonę UAB „Vilniaus Alus“.

Aprašyta schema gali padėti paieškos sistemų akyse iš „puslapio apie alų“ tapti „įmonės, žinomos kaip „Vilniaus Alus“, gaminančios alų, puslapis“ – kur kas konkrečiau ir vertingiau.

BreadcrumbList

Ši schema taikoma kiekviename puslapyje, nurodo puslapio vietą svetainės hierarchijoje paieškos rezultatuose (pvz., vilniausalus.lt > gėrimai > alus), vietoje paprasto URL.

Breadcrumbs schemos igyvendinimo rezultatas Google paieškos rezultatų puslapyje. Matoma aiški turinio hierarchija vilniausalus.lt > gėrimai > alus > vilniaus-ta...
Breadcrumbs schemos igyvendinimo rezultatas Google paieškos rezultatų puslapyje. Matoma aiški turinio hierarchija vilniausalus.lt > gėrimai > alus > vilniaus-ta...
Job Posting

Paieškos sistemai „Google“ šios schemos įgyvendinimas, padeda atvaizduoti interaktyvius darbo pasiūlymų rezultatus, kuriuose gali būti nurodomas kompanijos logotipas, apžvalgos, reitingai ir bendra darbo skelbimo informacija. Tai gali paskatinti didesnį ir labiau motyvuotų aplikantų skaičių, nes šiai schemai padedant, žmonės ieškantys darbo gali filtruoti darbo pasiūlymus pagal įvairius kriterijus – tokius, kaip lokaciją, darbo poziciją, atlyginimą.

NewsArticle

Vietoje to, kad paieškos rezultatuose naujienos puslapis atrodytų kaip paprasta nuoroda su pavadinimu ir aprašymu – šią schemą įgyvendinus atsiranda galimybė „Google“ pateikti naujienas „Google“ naujienų karuselėje.

Struktūriniai internetinės svetainės pokyčiai

Analizuojant senąją tinklapio versiją, pastebėjome, kad tinklapyje yra pasiekiami krautuvių duomenys, bet pačios krautuvės neturėjo atskirų puslapių, meta žymių (ang. meta tags) bei struktūrinių duomenų (ang. schema), todėl negalėjo būti indeksuojamos kaip atskiri vienetai. Naujoje versijoje kiekviena krautuvė turi unikalų puslapį su specifiniais meta duomenimis (Title, Description) ir „Store“ schema. Tai leidžia kiekvienai lokacijai konkuruoti paieškos rezultatuose pagal vietinius raktinius žodžius pagal kuriuos specifinė krautuvė galėtų būti lengviau atrandama.

Nors turinys senojoje tinklapio versijoje egzistavo, bet nebuvo išnaudojamas pilnas jo potencialas. Mūsų sprendimas buvo sukurti kiekvienai krautuvei atskirus puslapius ir taip išnaudoti šio jau sukurto turinio SEO potencialą: padaryti kiekvieną krautuvę lengviau atrandamą „Google“ paieškos rezultatų puslapyje.

Semantiškai reikšmingas URL

URL struktūra yra reikšmingas informacijos šaltinis naudotojui. Ji gali nurodyti kokia kalba yra pateikiamas turinys, į kurią rinką yra taikomasi, kurioje tinklapio turinio hierarchijos dalyje yra naudotojas, koks turinys bus pasiekiamas.

Prasta URL struktūra gali ne tik klaidinti naudotojus, bet ir atbaidyti potencialų naudotoją nuo nuorodos paspaudimo sukeliant neužtikrintumą turiniu, kuris bus pasiekiamas.

Lankytojui reikšminga informacija

URL senoje tinklapio versijoje turi vartotojui semantiškai nereikšmingos informacijos: id-xx

Pvz.: https://vilniausalus.lt/lt/katalogas/alus/tushi-quantum-nealkoholinis/id-53

Naujojoje svetainės versijoje buvo pašalinta perteklinė informacija URL struktūroje

Pvz.: https://vilniausalus.lt/gerimai/nealkoholinis-alus/tushi-quantum-nealkoholinis/

Kalbos vientisumas URL adresuose

Ištaisyta mišrių kalbų problema URL struktūroje. Senoje svetainės versijoje URL kai kuriais atvejais buvo sudarytas iš kelių kalbų. Tai semantiškai netvarkinga – naudotojui vertės nėra iš informacijos jam nesuprantama kalba.

Pvz.: https://www.vilniausalus.lt/pl/katalogas/beer/id-1 – lenkiškoje versijoje naudojama lietuviškas ‘katalogas’ ir angliškas ‘beer’ – šie žodžiai suprantančiam tik lenkiškai neturi prasmės.

Naujoje svetainės versijoje padarytas semantiškai vertingas URL:

https://www.vilniausalus.lt/pl/napoje/piwo/ - nurodoma lenkų kalba, tada seka kategorija ‘napoje’ (liet. gėrimai), galiausiai gėrimo tipas ‘piwo’ (liet. Alus). Naudotojui tampa aišku, kurioje svetainės dalyje jis yra t. y. gėrimų sekcijoje, alaus kategorijoje.

Migracija

Senąją interneto svetainės versiją keičiant nauja, labai svarbu išsaugoti esamą organinį srautą ir nuorodų autoritetą (angl. link equity) paieškos sistemų, kaip „Google“ rezultatuose.

Problema

Jei turinio vieta t.y. URL (liet. universalus išteklių ieškiklis) pvz.: https://vilniausalus.lt/gerimai/alus/alus-basteja/ naujojoje svetainėje neatitinka senosios, naudotojai spaudžiantys ant senosios nuorodos bus nukreipti į neegzistuojantį, dažniausiai bendrą, klaidoms skirtą „Neegzistuojantis resursas 404“ puslapį. „Google“ pastebėję, kad nuoroda nebeveda į turinį, kurio ieško žmogus, tiesiog jos neberodys.

Sprendimas

Tam, kad užtikrinti vientisą senųjų URL nuorodų veikimą, svarbu sukurti nukreipimus (ang. redirects) iš senosios svetainės nuorodų į turinį atitinkančias nuorodas naujojoje svetainės versijoje.

Pavyzdžiui iš https://vilniausalus.lt/lt/katalogas/alus/basteja/id-21 turi būti sukuriama nukreipimas į naująją turinio vietą svetainėje https://vilniausalus.lt/gerimai/alus/alus-basteja/ taip išsaugojant turinio nuorodų vientisą veikimą ir kartu reitingą „Google“ paieškos rezultatuose.

Migruojant iš senosios į naująją internetinės svetainės versiją, tam, kad būtų išsaugoma kuo daugiau pozicijų paieškos rezultatuose - padaryta beveik 300 nukreipimų iš senųjų nuorodų į naujas to paties ar susijusio turinio nuorodas.

Galutinis produktas

Tinklapis ne tik įgavo modernų įvaizdį, su intuityvesne ir patogesne naudotojo sąsaja (UX), įgyvendinta optimizacija paieškos sistemoms (SEO), bet tapo ir moderniai spartus.