Nie je webstránka ako webstránka. Určite ste si už všimli, že sa na niektorých weboch cítite pohodlne, nerušene a harmonicky, zatiaľ čo na iných máte pocit frustrácie a mierneho zúfalstva. 

Pokiaľ máte plán vytvoriť webstránku, ktorá sa má priblížiť skôr k harmonickej verzii poskytujúcej pozitívny používateľský zážitok, mali by ste dobre zvážiť viacero kľúčových aspektov skôr než sa pustítie do samotného programovania a tvorby webu.

Pôvodnú verziu tohto článku napísal Matej Hornik, ja som článok rozšíril a upravil.

1. Analýza konkurencie

Predpokladáme, že už viete, na akú tému by mal byť zameraný váš nový web. Napríklad, viete, že chcete mať web a e-shop s kabelkami. Čo teraz? Takých e-shopov už niekoľko (v tomto prípade doslova desiatky) určite je. 

Chcete im napriek tomu konkurovať, tak prečo nezistiť ich silné a slabé stránky?

Získate tak komplexný prehľad o tom, koľko konkurentov máte a čo všetko obsahujú ich stránky. Poznačte si, čo sa vám na nich páči a čo nie. Okrem toho zistíte, akým chybám sa vyhnúť pri tvorbe vlastného webu a inšpirujete sa, čo iným dobre funguje v tomto segmente.

Ako na to?

Existuje mnoho spôsobov, ako analyzovať konkurenciu na trhu. Najskôr si prejdeme tú najjednoduchšiu cestu. Keďže ide o webové stránky, to najjednoduchšie, čo môžete urobiť, je nájsť svoju konkurenciu pomocou vyhľadávača.

Ako bolo spomenuté v príklade, idete robiť e-shop s kabelkami.

Zadajte do vyhľadávača „kabelky“ a následne aj iné kľúčové slová, ktoré rozširujú výraz „kabelky“, ako napríklad „najkrajšie kabelky“, „lacné kabelky“, „elegantné kabelky“ a pod. Následne si pootvárajte všetky stránky (e-shopy s kabelkami), ktoré vám vyhľadávač nájde. 

Tie si zaznačte do zoznamu konkurencie a prezrite si ich. Na stránkach si všimnite nasledovné veci:

  • aký majú názov domény,
  • aké produkty ponúkajú, akej sú kvality a ceny,
  • aké majú podmienky dopravy,
  • ako majú spravenú štruktúru webovej stránky,
  • ako majú napísané texty, nadpisy a popisy produktov a jednotlivých stránok,
  • aký typ obsahu publikujú na webe,
  • ak stránku vytvárate s ohľadom na SEO (mali by ste! 🙂 ), aké používajú kľúčové slová, ako majú zostavené meta popisky a titulky na stránkach.

Tieto informácie môžete využiť na to, aby ste sa pri tvorbe stránky vyhli vytváraniu duplicít konkurenčných stránok, inšpirovali sa dobrými príkladmi a zároveň sa vyhli najčastejším problémom a chybám. 

Týmto spôsobom nakoniec vytvoríte originálnu a optimalizovanú web stránku, ktorá bude v čo najviac smeroch lepšia ako tie ostatné.

Extra tip:

Odporúčame vypracovať skôr komplexnú analýzu konkurencie z pohľadu SEO, ktorej sme sa detailne venovali v prelinkovanom článku. Takto získate prehľad nielen o obsahu konkurenčných webov, ale aj o ich sile z pohľadu Google a organickej návštevnosti.

2. Analýza kľúčových slov

Hneď, ako zistíte, akú konkurenciu máte a akým smerom by ste sa chceli uberať, odporúčame pokračovať s analýzou kľúčových slov. Prečo?

Najpoužívanejší spôsob, ako niečo nájsť na internete, je cez vyhľadávač. Ak chcete, aby vašu stránku našlo v budúcnosti čo najviac ľudí, je dôležité umiestniť sa na dobrých pozíciách pri vybraných kľúčových slovách.

V rámci vyhľadávacích dopytov zvyčajne identifikujeme 2 druhy kľúčových slov:

  • short-tail – majú vysokú mieru vyhľadávania a obsahujú iba 1 – 2 slová, napríklad „kabelky”,
  • long-tail – majú zvyčajne výrazne nižšiu mieru vyhľadávania než short-tail a obsahujú 3 a viac slov, napríklad „lacné kabelky Bratislava kamenná predajňa”.

Niekedy aj nás, skúsených SEO konzultantov pri tvorení analýzy kľúčových slov, prekvapí, aké slová a slovné spojenia sú ľudia schopní použiť, aby našli to, čo chcú. Preto je dôležité urobiť ju poriadne a odhaliť aj menej očakávané a nepravdepodobné vzory vyhľadávania.

Čo takouto analýzou získate?

Zoznam kľúčových slov, ktoré ľudia používajú na nájdenie stránok o daných témach, priemernú mesačnú vyhľadávanosť týchto slov, konkurenciu na dané kľúčové slová. Ak chcete zistiť, ako spraviť kvalitnú analýzu kľúčových slov, prečítajte si článok o tvorbe analýzy kľúčových slov od kolegu Mareka Šulíka alebo vám s analýzou kľúčových slov pomôžeme my.

Nazbierané dáta viete následne využiť na optimalizáciu vašej stránky z pohľadu vyhľadávačov, napríklad na:

  • vhodný výber názvu domény (dobrá zapamätateľnosť a výstižnosť),
  • vytváranie štruktúry stránky (jednotlivých kategórií) – tak, aby vstupné stránky boli v súlade s vyhľadávacími dopytmi,
  • napísanie dobrých meta popiskov,
  • napísanie dobrých titulkov,
  • napísanie dobrých textov na stránke,
  • vytváranie nového obsahu na vašom webe, najmä v podobe článkov na blogu.

Čo to znamená v ľudskej reči?

Keďže je vytváranie originálneho obsahu na stránke veľmi dôležité (áno, aj na e-shopoch s kabelkami), vezmime si príklad písania článku na váš blog.

Keď budete najbližšie tvoriť nový článok alebo aj novú podstránku na vašom webe, prejdite si najskôr výsledky analýzy kľúčových slov a pozrite sa, či sa v nej nenachádza vhodná fráza. Následne si jedno kľúčové slovo alebo frázu vyberte a v danom príspevku sa naň zamerajte. 

Samozrejme, vyhnite sa používaniu tohto slova alebo frázy v každej vete. Úplne stačí, keď bude dané slovo spomenuté v nadpise článku a potom 2 – 3 krát v texte. Ak je text dlhší, napríklad má 5 strán, použite ho pokojne aj viackrát.

Najdôležitejšie je, aby po prečítaní takto pripraveného textu všetko zapadalo do kontextu a žiadne frázy nepôsobili silene vložené do webu.

Viac o tom, ako pripraviť web na blogovanie, sa dočítate v prelinkovanom článku od nášho kolegu Jozefa Juríka.

3. Príprava štruktúry webu

Čo si predstaviť pod štruktúrou webu? V podstate ide o vizuálny návrh (náčrt), ktorý obsahuje všetky stránky a podstránky webu.

Existuje mnoho spôsobov, ako si pripraviť štruktúru webu. Veľa ľudí si ju iba načrtne na papier. Ide však najmä o prehľadnosť. Preto je dobré použiť napríklad nástroje na mind-mapping, kde si viete pekne vizualizovať štruktúru aj s prepojeniami medzi jednotlivými stránkami (viď. príklad nižšie, ktorý vznikol vďaka programu XMind ZEN).

V prípade, že ide o väčší web, sa môžete pokojne vo svojej mindmape dostať aj k podobnej pavučine.

Taktiež by ste mali mať excelovú tabuľku, kde tabuľka bude ako samotný web, do ktorého postupne pridávate všetky stránky spolu s popisom obsahu.

Pre inšpiráciu sa pozrite na obrázok nižšie, na ktorom je vytvorená štruktúra webu pre imaginárnu spoločnosť, ktorá vyrába a predáva malé a veľké kabelky. Je to jednoduchá verzia a skutočná by mala byť oveľa podrobnejšia.

Štruktúra by mala obsahovať minimálne nasledovné prvky:

  • štruktúru URL adries (pozrite si tiež článok od kolegu Jara Urama o optimálnej štruktúre URL adries),
  • štruktúru položiek v hlavnom a vedľajšom menu,
  • štruktúru a zostavu položiek v sekcii footer,
  • názvy (H1 tagy) jednotlivých stránok a podstránok, ich title tagy a meta popisy,
  • ideálne aj poznámky k samotnému obsahu jednotlivých stránok na webe.

Čím detailnejšie štruktúru vypracujete, tým jednoduchšie vytvoríte samotný web, a tým viac problémom predídete ešte pred tým, ako web začnete programovať a tvoriť. Taktiež bude web prehľadnejší a zrozumiteľnejší pre vašich budúcich návštevníkov.

Takto pripravenou štruktúrou získate prvýkrát pohľad na váš web z „vtáčej perspektívy”. Vďaka  poznámkam k obsahu získate aj detailný prehľad o tom, čo a kde bude sa nachádzať a ako budú na seba jednotlivé stránky nadväzovať.

Aj keď to je pracné, práve vďaka tejto predlohe predídete zbytočným obsahovým duplicitám. Taktiež vám pri jej tvorbe napadnú teoretické komplikácie, ktoré si viete vopred premyslieť a vyriešiť, čo sa zároveň odzrkadlí na výrazne jednoduchšej tvorbe vášho webu. 

Ako ste si mohli všimnúť, príprava štruktúry webu veľmi úzko súvisí s prípravou obsahu stránky. Poďme sa teda pozrieť na to, čo všetko treba zohľadniť po obsahovej stránke.

4. Príprava obsahu stránky

Základom každého dobrého webu je kvalitný obsah. Pod obsahom na stránke nemyslíme iba texty, ale všetko, čo je na nej umiestnené. To zahŕňa:

  • texty a nadpisy,
  • obrázky a videá,
  • aplikácie (kurzová kalkulačka, hra a podobne),
  • ostatné položky (CTA prvky a iné)

Prečo je dobré pripraviť si ho vopred? Návštevník prichádza na stránku s cieľom nájsť informácie, vzdelať sa, nakúpiť produkt a pod. Neprichádza na stránku preto, aby sa na ňu iba pozrel.

A keďže chcete, aby na vašej stránke návštevník ostal čo najdlhšie a vykonal čo najviac úkonov, obsah, ktorý uvidí, musí byť čo najkvalitnejší, aby ho zaujal.

Keď máte obsah oddelený od iných častí webu, nič vás pri jeho tvorbe nerozptyľuje a viete sa lepšie zamerať na jeho kvalitu a unikátnosť. 

Z predošlých analýz by ste už mali mať prehľad, aký obsah má konkurencia a tak isto, na aké kľúčové slová sa zameriava (ak sa na nejaké zameriava). Viete preto obsah písať s pridanou hodnotou, ktorú nájdu návštevníci iba u vás a viete sa v ňom zamerať na kľúčové slová, na ktoré sa konkurencia nezameriava.

Máte pripravený obsah, teraz sa zamerajte na vizualizáciu samotnej stránky a rozmiestnenie obsahu. Je dobré premyslieť si nielen štruktúru webovej stránky, ale aj štruktúru konkrétnych typov vstupných stránok na vašom webe (ako bude vyzerať článok na blogu/produktová stránka/kategória produktov/domovská stránka a pod).

V tomto prípade nám pomôžu tzv. wireframes.

5. Wireframes a nastavenie vizuálu webu

Keď už máte nielen predstavu, ale aj reálne pripravený obsah, ktorý chcete prezentovať na jednotlivých stránkach vášho webu, zostáva posledný krok, a tým je návrh web dizajnu. Môžete mať pripravený ten najlepší obsah, ak ho však nebudete komunikovať vhodne zvolenou vizuálnou formou v línii s najlepšími UX praktikami, želaný výsledok sa nemusí vôbec dostaviť.

Práve preto je veľmi dôležité mať aspoň základné vedomosti o UX a následne ich pretaviť do samotného vizuálu. V tomto prípade však odporúčame radšej spolupracovať s profesionálnym grafikom/web dizajnérom.

Ak sa však rozhodnete pripraviť si návrh rozloženia jednotlivých prvkov na konkrétnom type stránky svojpomocne, nezabudnite použiť wireframy. Je mnoho online nástrojov, ktoré vám pomôžu pri ich tvorbe, avšak tie sú pre laikov často zložité.

Jedným z tých jednoduchších a veľmi obľúbených je napríklad https://wireframe.cc. Taktiež odporúčame vybrať si z niekoľko vzorov, tzv. template-ov dostupných napríklad na doméne Moqups.com.

Pri tvorbe vizuálnej identity vášho webu odporúčame dodržiavať vizuálnu konzistentnosť tak, aby bol váš brand ľahšie rozpoznateľný a zapamätateľný. Zvoľte si primárnu a sekundárnu farbu, ktorá bude reflektovať vašu značku a používajte ich konzistentne naprieč webom.

Držať sa vyššie zmienených odporúčaní vám pomôže práve dizajn manuál.

6. Samotné programovanie

Tvorba webovej stránky už nemusí byť taká komplikovaná ako v minulosti. Ak nechcete mať veľkú stránku so stovkami podstránok, web sa dá vytvoriť pomerne jednoducho svojpomocne.

Existuje množstvo nástrojov alebo softvérov, ktoré viac-menej „nakódia“ stránku za vás, ako napríklad WordPress. Ku všetkým týmto nástrojom nájdete stovky manuálov, ktoré vás naučia, ako ich používať.

V našom magazíne nájdete kategóriu venovanú práve webom, ich tvorbe a tipom na ich zlepšenie. Samozrejme, ak chcete komplikovanejší web s množstvom funkcionalít, zrejme sa nevyhnete programovaniu na mieru profesionálnym programátorom.

Aj v tomto prípade vám vieme pomôcť a zabezpečiť pre vás komplexnú tvorbu web stránky.