Informácie o webstránke pre vyhľadávače - SEO

V tejto kapitole si ukážeme užitočné nastavenia webstránky, ktoré by v modernej dobe nemali chýbať. Možno ste si všimli, že všetky texty, ktoré sme doteraz umiestňovali na stránkach, či už priamo ako hodnota tagov v HTML alebo cez echo z PHP, neboli s diakritikou. V spisovnej slovenčine máme niektoré znaky (znak – character) s diakritikou ako š, č, ď, á a podobne, v angličtine (kľúčový jazyk pre počítače) sa však nevyskytujú. Väčšina svetových jazykov má však svoje vlastné špeciálne znaky, ktoré iné jazyky nepoznajú. V počítačoch je každý znak zadaný z klávesnice reprezentovaný nejakým kódom. Webstránky v čase ich vzniku mali obmedzené kódovania, ktoré nezahŕňali množstvo znakov, ale iba tie základné ako americká abeceda, čísla a zopár znakov. Teórie okolo tejto témy je viac, budeme sa tomu venovať podrobne neskôr... Nateraz nám stačí vedieť, že kódovaním sa rozumie akokeby skupina/zoznam znakov, ktoré sú v danom kódovaní zahrnuté, resp. pre ktoré existuje v danom kódovaní kód, ktoré dané kódovanie rozpozná (rozkóduje).

Aby prehliadač zobrazil správne nami zadané znaky, je dobré zadefinovať typ kódovania použitý na našej stránke. Ak by sme to nespravili a používali rôzne znaky, napríklad naše písmená s diakritikou, je možné, že by ich nezobrazil správne. Nevedel by ich rozkódovať a zobrazoval by čudné znaky. V súčasnej dobe už webstránky podporujú univerzálne kódovanie s označením utf-8, ktoré zahŕňa takmer všetky potrebné znaky. Práve toto kódovanie budeme používať aj my. Kódovanie na stránke sa definuje samozrejme v hlavičke a to pomocou tagu meta (metadata). Tento nepárový tag má viacero typov, ktoré sú určené názvom jeho atribútu. Názov atribútu pre určenie kódovania webstránky má názov charset (character set – znaková sada). Zadefinovanie kódovania našej webstránky v hlavičke bude vyzerať <meta charset=“UTF-8“>.

Označenie metadata znamená dáta o dátach, sú to informácie, ktoré sa nezobrazujú na webstránke, nachádzajú sa ale v kóde. Na čo je to dobré? Slúži to práve pre rôzne vyhľadávače (narp. Google) a katalógy webstránok. Tieto stránky/systémy/roboty vyhľadávajú stránky a načítavajú a ukladajú si o nich rôzne dáta. Najprv vyčítajú dáta o stránke z jej obsahu a domény (url adresa) a následne čítajú práve tieto dáta zadané v hlavičke. Pomocou nej získajú informácie o stránke, čo popisuje, do akej kategórie asi patrí a aké kľúčové slová (keyword) by k nej mohli patriť. Ďalšia vec, ktorú je dobré zadať na webstránke je atribút lang (language – jazyk) tagu html. Zrejme ste pochopili, že tento atribút bude slúžiť na zadefinovanie jazyka použitého na webstránke. Americká angličtina má kód en-US, čeština má kód CS a my budeme používať slovenčinu, ktorá má kód sk.

Najdôležitejšie pre vyhľadávače sú však tri informácie. Prvú z nich už poznáte a je to tag title, ktorý slúži na titulok webstránky. Tento tag by mal predstavovať hlavný nadpis pre konkrétnu webstránku (nie ako pre celok/projekt, ale pre konkrétnu jednu podstránku), titulok by ju mal definovať, aby bolo jasné, čo je hlavným obsahom danej stránky. Tento titulok sa zobrazuje v hlavičke karty v prehliadači, zobrazuje sa tiež, ak ste si urobili na konkrétnu webstránku záložku (bookmark) a pri vyhľadávaní na googli je to prvý riadok výsledku, ktorý je zobrazený modrou farbou, väčším fontom a na ktorý sa kliká, keď si ho chceme otvoriť.

Druhá dôležitá informácia je tzv. popis webstránky, ktorá sa zadáva v tagu meta pod meno (name) description (popis). Mala by to byť jedna stručná veta (povedzme do 150 znakov), ktorá širšie popisuje danú webstránku. Tento popis sa zadáva do atribútu content (obsah) a je to presne to, čo sa vo výsledku vyhľadávania na googli zobrazuje ako tretie, pod URL adresou výsledku. Tretím dôležitým údajom pre webstránku sú kľúčové slová, ktoré je vystihujú a ktoré by sa mali zhodovať so slovami, ktoré používatelia zadávajú do vyhľadávania, ak sa chcú na našu stránku dostať. Tieto slová sa zadávajú do tagu meta pod hodnotu atribútu name keywords. Je možné ich zadať viac (do atribútu content), oddeľujú sa čiarkou, netreba to s ich počtom zase preháňať, optimum je tak 5-10. Skúsme si aplikovať všetky tieto údaje do našej stránky index.php, mohlo by to vyzerať asi takto:

index.php (hlavička):

<html lang="sk">
    <head>
        <title>Vitajte na našej prvej skutočnej webstránke!</title>
        
        <meta charset=“UTF-8“>
        <meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
        <meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

        <link rel="stylesheet" type="text/css" href="global.css">
    </head>

Okrem tohto existujú ešte iné praktiky, resp. spôsoby, ako našu webstránku spraviť lepšiu pre vyhľadávanie, teda čitateľnejšiu. Celá táto téma ohľadom optimalizácie stránky pre vyhľadávače sa volá SEO (Search Engine Optimatization) a v súčasnej dobe je veľmi dôležité mať SEO na stránke na dobrej úrovni, pretože to zvyšuje atraktivitu webstránky, resp. sa na googli posúva vyššie. To znamená, že pri zadávaní kľúčových slov pre vyhľadávanie používateľom môže byť stránky s lepším SEO vyššie v zozname výsledkov. Poďme si stručne popísať niektoré dobré zvyky, ktoré je dobré sa naučiť realizovať pri tvorbe webu.

Samozrejme pre SEO je asi najdôležitejšie dobre zvoliť kľúčové slová v hlavičke. Tak, aby boli jedinečné, aby sa na jednotlivých webstránkach neopakovali a aby skutočne vystihovali obsah webstránky. Okrem vyššie spomenutých dát sa dá na SEO myslieť aj v samotnom obsahu (body) stránky. Dobrým zvykom je napríklad používať atribút title (titulok), ktorý sa zobrazí, keď sa myšou zobrazíme nad nejaký prvok (obrázok, odkaz), najmä pri odkazoch je dobré používať title, resp. pri objektoch, na ktoré sa dá kliknúť, aby sme vedeli, kam nás to presmeruje (pre info kliknite tu, zobraziť detail obrázku a pod.). Taktiež zadávanie atribútu alt, ktorý jednak slúži na zobrazenie textu v prípade, že sa obrázok nenačíta, ale taktiež by mal obrázok popisovať. Malo by byť z hodnoty tohto atribútu jasné, čo je na danom obrázku. Keď je už reč pri obrázkoch, je dobré mať správne pomenované obrázky. Ak máme napríklad na stránke logo našej stránky, niekde nižšie nejaký reklamný banner a potom napríklad mapku našej firmy, ako sa k nám dostať, je viac ciesť, ako obrázky pomenovať. Môžeme ich mať nazvané napríklad image1, picture 2, foto3, ale pre vyhľadávač bude určite čitateľnejšie, ak to budem mať pomenované nazov_firmy_logo, reklamny_banner_akcia_leto a firma_mapa_centrala.

Ďalej je dobré používať nadpisy, ako sme to už skorej spomenuli. Každá webstránka by mala mať jeden hlavný nadpis (h1) a ak sa na nej vyskytuje nejaký podnadpisy, ktoré rozvíjajú tento hlavný nadpis a charakterizujú časti stránky, mali by byť v tagu pre nadpis (h2, h3...). Obsah týchto nadpisov by mal zahŕňať aj kľúčové slová definované v hlavičke. Okrem toho je pre dobré SEO dôležitý aj samotný obsah webstránky, čiže obsah textu. Či je jeho obsah unikátny – iný od ostatných textov alebo od textov na iných stránkach. Prečo by mal práve náš text byť zobrazený pred textami iných stránok. Taktiež by nemal obsahovať nahusto kľúčové slová. To znamená, že v texte by sme nemali dookla obmielať kľúčové slová a veriť, že to pomôže. Naopak, kľúčové slová by sa v texte mali vyskytovať s mierou.

Aj dobrá štruktúra (layout) stránky, ktorá je dobre čitateľná pre používeľa, je dobre čitateľná aj pre vyhľadávač. Toto však pochopíme kus neskôr, rovnako ako ako mať správne nastavené Url adresy jedotlivých podstránok.