Ako nadpis napovedá html jazyk a webové stránky, to sú dva nerozlučné pojmy, ktoré sú aj v dnešnej dobe stále platné. Ak pracujete s jazykom php alebo iným jazykom, tak isto by ste mali vedieť, že bez html by nebolo ani php a ostatných webových jazykov. Hneď na úvod si treba vysvetliť (aby vás to nemýlilo) čo je Html dokument a čo je celková veľkosť html kódu. Takže takto tomu treba porozumieť. Html dokument je tá časť zdrojového kódu, ktorá pokrýva sektor v tagoch head. Zvyčajne je tu meta blok, linky precconect, scripty css, niektoré dôležité javascripty, či json, alebo aj javascritový kód (bývalý analytics, lebo koncom roka končí, NEZABUDNITE december 2023) GA4 analytika googlu. Ak je to možné, volný javascriptový kód pred vložením minifikujte, existujú na to online programy.
HTML dokument
Toto je html dokument a preň platí pravidlo, aby jeho obsah neprevýšil 33kB kapacity. Ak prekročí 33 kB roboty sa bránia indexácii priveľkých dát. Navyše to trvá pridlho, kým sa načítajú dáta pre prehliadače a prehľadávače súčasne. Nasleduje html tág body a to je spoločne s html dokumentom so sekciou head celková veľkosť html kódu. Aby vás to teda nemýlilo. Tu v sektore body začína všetko, čo vo svojom webe vytvoríte, od grafiky, menu až po texty. Sem sa opäť počítajú všetky veľkosti vložených inline css a javascriptov a veľkosť obrázkov, či priamych videí. Pre celkovú veľkosť html platí pravidlo do veľkosti 100kB. To znamená spolu body a head. Otázka, prečo do sto kilobajtov? Preto, lebo robotom prehľadávačov robí problém indexovať, tak mohutnú celkovú veľkosť ktorá má nad sto kilobajtov. Čím je teda obsah na jednom indexe url adresy menší, tým má väčšie šance získať hodnotenia vyhľadávačov na lepších pozíciách.
Html jazyk v časti head
Pôjdeme postupne od vrchu dokumentu. Zápis doctype html som ešte nevidel pokazený (pretože je už prednadstavený šablonou), ale hneď za ním je, určenie jazyka, čiže jazyková deklarácia.
<html lang='sk-SK'>Vždy sa uvádza jazyk malými a za pomlčkou sa uvádza krajina jazyka a tá sa zapisuje veľkými písmenami. Ako druhé nasleduje jazyková sada.
<meta charset='UTF-8'>Často vidím túto značku napísanú takto:
<meta charset='utf-8' /> alebo takto <meta charset='utf-8'/>Tento zápis je však proti pravidlám html jazyka a roboty tento zápis nevedia identifikovať, navyše je aj nesprávnym tágom zakončený. Samozrejme až tak fatálne to nie je, ako sa na prvý pohľad môže zdať. Robot preskočí zápis, ale pri prvej nasledovnej závažnej chybe, prestane indexovať a ide inde na iný web. Pri nasledovnom indexovaní o nejaký čas (vie o tej chybe, má to vo svojom zápise) skontroluje, či došlo k náprave a ak nie ide opäť inde a web neindexuje. Pod položkou charset by mali byť umiestnené linky pre povel volaní url adries precconect. Tie sa majú prednostne spájať sieťou na materský server prv, než sa renderuje obsah celého html indexu. Tu som už videl aj 12 takých precconect spojení. Pozor optimálne je, nie viac ako 4 linky, alebo čo najmenej. Teraz by mal nasledovať meta name robots. Takto ako ho teraz vidíte je napísaný bezvýznamne:
<meta name='robots' content='follow, index'/>správny a efektívny zápis je takto:
<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />Html a meta
Samozrejme niektoré zápisy v meta časti môžu byt v inom poradí, no tieto hore vyššie by mali mať aspoň takúto postupnosť. A to či dáte meta description, alebo či skôr meta title, meta keywords, meta contact, meta generátor je úplne jedno. V časti meta zadávame aj link pre čítanie fontov a inline script pre analytiku. Či chcete alebo nie, ak sa rozhodnete použiť meta keywords optimálne množstvo slov či synoným, je do 80 znakov aj s medzerami. Netvrďte však, že keywords sú už prežitok a sú nepotrebné. To je vaše rozhodovanie, vaša zodpovednosť. Kto chce ten rieši.
Html v časti body
Prvou chybou ktorú robíte sú obrázky pomenované napríklad prent_1_obchod.jpg. Za prvé, podtržníky sa už roky nepoužívajú pre názvy obrázkov. Podruhé ani google nezistí čo je to prent a hľadať vo svojich jazykových databázach ho rozhodne nebude. Tretia chyba sú nezatextované alty. Poviete si taká prkotina, čo nás to zaujíma. Alt je však súčasťou obrázku a od vyplneného altu záleží, či sa dostane obrázok do obrázkového indexu. Bez textu v alte ho robot nevie zaradiť do vyhľadávania k danej téme. Navyše robot pri nevyplnenom alte strávi približne o 60 ms dlhšie ako pri korektonom linku ktorý má alt vyplnený.
Otvoriť obrázok v novom okne prehliadača.
Html jazyk sú aj href a H1
Jazyk HTML a webové stránky sú úzko zviazané, preto ďalším nasledujúcim problémom v časti body, sú „a href=“ hlavne tých linkov, ktoré odkazujú na cudzie weby. Každý jeden cudzí href (ale aj ten váš sa počíta, no na ten treba menej času v ms k overeniu), to sú drahocenné milisekundy pre otvorenie celého webu návštevníkovi. Kým dáta preletia sieťou a kým sa web zobrazí niekedy to môže byť od 0,50ms do 30 sekúnd, hlavne ak je link mŕtvy je problém, lebo robot či prehliadač nedostane spätnú odpoveď. Do časti body, patrí aj správne používanie tágov H1 H2 atď v poradí. Na niektorých weboch som už videl aj 4x H1 a žiadne ostatné háčka. Pritom H1 tág je označenie, ktoré má symbolizovať názov webu, obsah, alebo činnosť zamerania webu. Tu platí pre háčka „dĺžka má byť optimálne do 50 maximálne 55 znakov aj s medzerami“. Zaužívaná metóda je, označiť takto header.
<header class='entry-header' aria-label='Content'><h1 class='entry-title' itemprop='headline'>Webové stránky na zákazku s pred prípravou SEO optimalizácie</h1></header>Nevhodné praktiky html
Title sa nezakončuje bodkou prosím, to nie je alt text ani description. Keď bude title kratšia ako 20 znakov, je to len na vás a vašom vnímaní čo chcete dosiahnuť. Je lepšie a rozumnejšie využiť 50 znakov, ako mať nevýstižný a krátky text. Teda málo významný. Jazyk HTML a webové stránky sú úzko previazané, preto: Ak chcete zobraziť zdrojový kód webu ako to u vás vyzerá v html, tak do adresy v prehliadači zadajte view-source:adresa webu. To znamená, tú adresu webu ktorú používate a nie názov domény. Doména a adresa webu sú dve rozdielne definície.
Záver
Ak dáte dôraz na tieto základné html (hlavne v časti html dokumentu) elementy, dosiahnete lepšie vyhliadky k tomu, aby váš web mal „response time“ okolo 0,2 sekundy, čo je veľmi krásny čas, za ktorý vás prehľadávače a prehliadače vrelo odmenia vo vyhľadávaní. Samozrejme to ocenia aj návštevníci z mobilov, ktorí nebudú čakať večnosť kým sa im web zobrazí. Ak ste niečomu nerozumeli, alebo máte otázky, nech sa páči. Každému odpoviem ako sa najrýchlejšie bude dať. No a mne sa dá odpovedať, som doma takmer stále… Prečo, to vám vysvetľovať nebudem, je to pre cudzích nepotrebné. Radšej píšte do komentárov, alebo píšte emailom a v menu je kontakt, aj vo footri telefóny. Tak píšte čo potrebujete vedieť a s čím vám viem pomôcť.
Pavol Knut Navrátil