Naposledy sme článkom Na čo nesmiete zabudnúť pri tvorbe webu, aby sa neskončila fiaskom začali náš mini seriál. Venovali sme sa prvým dvom oblastiam vytvárania webstránky. Teraz sa pozrieme na ďalšie a uzavrieme zoznam, ktorý sa vám určite zíde.

Tento zoznam sme pripravili aj vo forme tzv. check listu. Stiahnuť si ho môžete tu.

Najdôležitejšia časť pri tvorbe webstránky

Je to koncepcia webu, ktorú až 85% firiem podceňuje  a z veľkej časti (alebo úplne) ju vynecháva z procesu tvorby. Súčasťou tvorby koncepcie sú analýzy kľúčových slov, zákazníka a konkurencie, ale aj tvorba predajnej štruktúry a vytváranie textov.

Bližšie o tom píšeme v prechádzajúcom článku: Na čo nesmiete zabudnúť pri tvorbe webu

Dnes sa pozrieme na zostávajúce 3 oblasti, ktorými sú dizajn, programovanie a analytické nástroje.

3. Dizajn

Kým koncepcia je duša webstránky, dizajn jej dáva určitý štýl. Dizajn musí rešpektovať pravidlá UX a UI a samozrejme musí byť použiteľný aj na mobilných zariadeniach.

Webstránky sú väčšinou vyskladané z písma a obrázkov. Aby sa ľudia s chuťou pustili do čítania a prezerania webu, musia byť obrázky a texty nielen obsahovo zaujímavé, ale aj vhodne vizuálne upravené.

Viac informácií o obrázkoch a o písme na webe:

• Ako upravovať texty na webovej stránke 
• Vyberte si správny formát obrázkov 

Pri dizajnovaní webstránky netreba zabudnúť aj na:

Favicon  – malá ikonka, ktorú nájdete v prostredí internetu na mnohým miestach. V okne prehliadača, v záložkách, vo vyhľadávaní, v histórii prehliadača aj inde. Jej názov vznikol spojením anglických slov favorites (obľúbené) a icon (ikona). Favicon sa totiž zobrazuje taktiež v obľúbených záložkách webových adries a podobne.

5 oblastí, ktorým musíte venovať pozornosť pri tvorbe webu

Obrázky pre FB – ak by ste chceli svoj nový web zdielať na FB, je potrebné pre jeho pekné zobrazovanie pamätať aj na FB atribúty a práve obrázok je jedným z nich.

Error hlášky pri formulároch a 404-ka – Ako sa bude správať dizajn webstránky, keď zákazník nevyplní pole formulára? Ak niektorá zo stránok neexistuje, nezabudnite pre túto situáciu pripraviť peknú hlášku 404 –ky. Áno i na takéto maličkosti potrebujete myslieť pri dizajnovaní webstránky.

4. Programovanie

Dostávame sa do ďalšej nemenej dôležitej oblasti, a tým je programovanie. Rozoznávame frontend (to čo vidí bežný návštevník) a backend (všetko, čo beží v pozadí – redakčný systém) programovanie.

Kód webstránky je dôležitý, pretože môže napríklad ovplyvňovať rýchlosť načítavania webstránky a tá zase ovplyvňuje pozície vo výsledkoch vyhľadávania.

Pri určitých službách, akými sú „vyklikajte si web sami“, sa táto časť v procese tvorby webstránky vynecháva, pretože systém to urobí za vás (ktorý mimochodom tiež musel niekto naprogramovať). Tu je dôležité odkontrolovať, či takéto systémy ponúkajú naozaj čo najviac čistý kód.

Validáciu kódu si môžete skontrolovať aj prostredníctvom týchto nástrojov, ale ak sa tomu nerozumiete, bude vám táto kontrola nanič. Minimálne môžete vidieť, či je všetko v poriadku.

https://validator.w3.org/

https://www.freeformatter.com/html-validator.html

Ďalej pri tvorbe vašej webstránky je dôležité myslieť aj na tieto veci:

SSL certifikát (alebo URL adresa začínajúca písmenami https)

SSL certifikát predstavuje dôveryhodné a bezpečné stránky. Vďaka nemu zabezpečíte a ochránite dátovú komunikáciu medzi vašim webom a návštevníkmi. Zabránite tak “odchytu” osobných údajov, hesiel alebo zmene informácií. A navyše Google zobrazuje stránky s SSL certifikátom vyššie a posilňuje ich návštevnosť z vyhľadávania.

Spárovanie URL adries

Máte starý web, ktorý idete prerobiť na nový a s inou štruktúrou oproti pôvodnému? Tak spárovanie URL adries (starých a nových) je dôležitou súčasťou takéhoto „updatu“. O čo ide?
Google indexuje váš starý web istý čas aj po tom, čo ste vypustili nový web do online sveta.  Aby ste s novou webstránkou nestratili získané pozície ešte pôvodným webom, spárovaním URL-ečiek tento problém minimalizujete. Ak sa vaša stará URL nezhoduje s novou URL, týmto spárovaním sa dá prikázať, aby vás Google posielal na novú URL.

Napríklad:

Stará URL: https://magnetica.sk/aktuality/

Nová URL: https://magnetica.sk/blog/

*V tomto prípade sme zmenili názov časti webu, kde sa nachádzali články z aktualít na blog.

Spárovanie sa týka iba prípadu, ak sa štruktúra novej webstránky zmenila. Ak sa zmenil iba obsah a dizajn a štruktúra ostala pôvodná, takéto spárovanie nie je potrebné.

SEO prvky

V dnešnej dobe asi jednou z najdôležitejších oblastí programovania webstránok sú tzv. SEO prvky, ktoré pomáhajú dosahovať lepšie pozície vo vyhľadávaní. Sem hlavne zaraďujeme:

Mikroformáty
Predstavujú HTML značky, ktoré Google zobrazuje vo výsledkoch vyhľadávania. Implementáciou týchto značiek pridávate do výsledkov vyhľadávania informácie ako cenu, stav skladu, recenzie a iné. Webom, ktoré majú tieto značky, stúpa preklik z vyhľadávania v priemere o 30%, a to dvíha ich relevanciu na dopyty, teda aj pozície. Zároveň je pravdepodobné, že weby poskytujúce takýto štruktúrovaný obsah budú určitým spôsobom zvýhodnené.

Open Graph Markup
Algoritmu vyhľadávača Google momentálne kraľujú sociálne siete. Je to logické, predsa ak je váš produkt najzdieľanejší či najlajkovanejší, je asi najlepší a vyhľadávač ho aj najlepšie ohodnotí. V slovenských podmienkach kráľuje sociálna sieť Facebook a Instagram. Open Graph Markup pomáha zlepšiť prepojenie so sociálnymi sieťami.

Metadáta
SEO tagy určujú, ako vidí vašu stránku vyhľadávač a predstavujú značky v zdrojovom kóde webu. Najdôležitejšie sú Title a Description, ktoré priamo vidíte vo výsledkoch vyhľadávania. Ale taktiež aj Alt Tagy – popisy obrázkov, ktoré vidí Google.

5. Analytické nástroje

Bez analytických nástrojov nebudete vedieť, ako sa vášmu webu darí. Nebudete si vedieť zmerať, či zvolená stratégia je správna. Preto potrebujete minimálne tieto dva analytické nástroje od Google:

Google Analytics

Tento skvelý analytický nástroj od spoločnosti Google vám umožňuje vyhodnocovať návštevnosť a ich pohyb po webe, zdroje návštevnosti, z akých kľúčových slov sa dostali na váš eshop, koľko ľudí odišlo, hodilo produkt do košíka, ale už neurobilo objednávku a podobne.

Google Search Console

Je analytický nástroj na správu a analýzu webu vo vyhľadávaní. Pomáha odhaliť aj rôzne chyby alebo nedostatky webu v momente, keď sa objavia. Rieši väčšinu základných problémov s webom – od indexácie stránok vyhľadávačom, cez ich nefunkčnosť, zobrazovanie popisov vo vyhľadávači až po problémy so spamom na webe.

Cookies a GDPR

V súvislosti s nasadením analytických nástrojov je veľmi dôležité upozorniť, že na webstránke nesmie chýbať informácia o cookies. Analytické nástroje vo veľkom využívajú tieto cookies na zber dát.

Avšak podľa GDPR nestačí len informovať o používaní cookies. Po novom si návštevník webstránky môže sám povoliť alebo zakázať používanie cookies. A vy mu to ako majitelia webstránky musíte umožniť.

Nie všetky cookies môže návštevník zakázať. Ide o cookies, ktoré sú nutné k zabezpečeniu funkčnosti webstránky a taktiež cookies, vďaka ktorým sa zbierajú analytické a štatistické údaje, ako napríklad web stránky, ktoré ľudia navštevujú a koľko času na nich trávia. Tieto cookies sú automatický povolené, pretože používajú anonymné údaje a prostredníctvom nich sa nezbierajú žiadne osobné alebo citlivé údaje.

Návštevník webstránky však môže zakázať cookies tzv. tretích strán (resp. ich povoliť, pretože tieto cookies nesmú byť aktívne, až kým návštevník sám nedá súhlas na ich používanie). Tieto cookies sa využívajú na marketing a nimi sú napríklad remarketingové značky, akým je Facebook pixel.

Týmto 5 oblastiam, ktoré rozoberáme v našom mini seriáli, sme dali podobu tzv. check listu. Ak vás čaká tvorba webstránky, tento zoznam vám bude pripomínať, na čo netreba zabudnúť pri jej realizácii.

Nezabúdajte, že nie je web ako web. Nie každý dodávateľ vám vyrieši všetkých 5 oblastí. Preto si dobre zvážte, koho oslovíte na tvorbu webstránky. Pri tomto rozhodovaní vám môže pomôcť aj tento náš článok: Nerobte chyby začiatočníkov: Vyberte správneho dodávateľa webu