<title> tag

Veľmi jednoduchý HTML tag, ktorý generuje ten text, ktorý vidíte v prehliadači ako nadpis danej karty. Na našom webe na hlavnej stránke vyzerá <title> tag takto:

<title>Webové aplikácie na mieru | WAME.sk</title>

Avšak napriek jednoduchosti je tento tag veľmi dôležitý, pretože generuje názvy odkazov pri vyhľadávaní. Potom môžete napríklad naraziť pri vyhľadávaní na takýto odkaz:

WAME.sk vo vyhľadávači Google

Pri vymýšľaní názvu pre každú podstránku na vašom webe je dôležité najprv stručne, výstižne a pútavo vystihnúť obsah stránku, môžete tam aj pridať (ako my) názov webu, ale vždy to dajte až ZA popis obsahu podstránky, v takom prípade bude pri výsledkom vyhľadávania zdôraznené to, o čom váš web je a akú firmu prezentuje. Môže to znieť triviálne, ale určite nie je dobrý nápad podceniť, pretože niekedy takáto menšia optimalizácia môže zvýšiť váš obrat viac, ako si myslíte.

<meta> tagy

Cez tieto tagy môžete na vášom webe konfigurovať množstvo vecí, ako kľúčové slová (tiež určené pre vyhľadávače), meno autora alebo popis stránky. Na našej hlavnej stránke nášho webu by ste našli takýto kód:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Webové aplikácie na mieru, internetové obchody
a prezentačné weby, ktoré priťahujú návštevníkov a my ich premeníme na Vašich zákazníkov.">
<meta name="keywords" content="webové stránky, e-shop, aplikácie, na mieru, webdizajn">
<meta name="robots" content="index, follow">
<meta name="author" content="wame.sk">

Poďme sa ale pozrieť na druhý riadok, t.j. popis. Toto je ďalší tag, ktorý spolu s <title> tagom musíte mať, ak to so SEO myslíte vážne. Čo ale robí tento riadok? Pozrite sa vyššie na obrázok Google vyhľadávanie a všimnite si menší text pod tým nadpisom. Tento text bol vygenerovaný práve vďaka tomúto tagu. Dva jednoduché tagy a jedna vyhľadávacia položka je kompletná! A tá položka môže viesť aj na váš web.

Nadpisy

Nadpisy su reprezentované tagmi v tvare <h*>, kde hviezdička môže byť číslo od 1 do 6. Platí, že čím menšie číslo, tým väčší nadpis, takže <h1> element reprezentuje nadpis s najväčšou veľkosťou písma, zatiaľ čo <h6> je najmenší nadpis. Na väčšine webov sa ale používajú iba prvé 4 veľkosti, takže nadpisy veľkosti h5 a h6 sú už rovnako malé alebo menšie ako štandardný text na stránke.

Ak ste na našej hlavnej stránke, uvidíte napríklad ako jednú z prvých vecí zelený nadpis, ktorý je určený HTML tagom takto:

<h1>Webové riešenia na mieru</h1>

A pýtate sa, načo to je vôbec potrebné pri SEO optimalizácii? Dôvod je jednoduchý. Nadpisy spolu s ďalšími elementmi tvoria hierachiu, ktorá robí štruktúru obsahu vášho webu pre robota jednoduchšiu a zvyšuje tak prioritu, že si neskôr vyhľadávač zvolí práve vás pri zobrazení stránok po vyhľadávaní.

Alt atribút pri <img> tagu

Img tag slúži na zobrazenie textu. Na našom webe pri zozname referencií môžete napríklad naraziť na obrázky log eshopov, na ktorých sme pracovali. Tieto obrázky sú v kóde zapísane napríklad takto:

<img alt="Najlacnejšia batéria"

src="/editor_uploads/c4ca4238a0b923820dcc509a6f75849b

/blog/20/images/najbat_logo.png">

Všimnite si, že okrem alt vlastnosti, ktorá slúži na popis obrázka, je tam aj src vlastnosť. Tu sa nachádza cesta k súboru, kde je uložený obrázok, ktorý používame. Je možné, že na vašom webe máte niekedy nejaký obrázok, ale ten môže v kóde byť zapísaný o niečo strohejšie:

<img src="/img/products/shoes/sports-shoe-01.png">

Všimnite si, že v tomto prípade nie je použitý alt atribút, ale to je chyba. Prečo by sme ale kládli taký dôraz na nejaký text, ak sa tu rozprávame o obrázkoch? Je to preto, lebo mnoho vyhľadávačov má aj možnosť vyhľadávať stránky podľa kľúčových slov, ale chcú vidieť iba obrázky. A tam vstupujú do réžie práve tieto atribúty. Po tom, čo robot navštívi vašu stránku, prezrie a uloží si aj vaše obrázky, a jedno z kritérii na základe ktorých vyhľadávač vracia obrázky, je aj na základe toho, čo bolo v popise.

To znamená, že ak obrázky na vašej stránke nepoužívajú alebo zanedbavajú alt atribúty, je to veľká chyba, pretože obsah vašej stránky môže byť skrytý pred ďalšími potenciálnymi zákazníkmi, ktorý by sa na váš web inak dostali cez hľadanie obrázkov.

Odkazy

Zjednodušene povedané odkaz je text, na ktorý sa po kliknutí presmerujete na nejakú stránku. Odkaz môžete vyzerať napríklad takto:

<a href="http://wame.sk">WAME</a>

Tento kód vytvorí odkaz s textom WAME, kde po kliknutí naň bude užívateľ presmerovaný na našu stránku. Je ale dôležité, aby text v týchto odkazoch vystihoval čo najlepšie akciu, ktorú má daný odkaz spĺnať a nemal by obsahovať príliš všeobecné slová. Vysvetlíme si to na príklade.

Povedzme, že máte web a v istej podstránke chcete dať odkaz na svoj blog. Ako by mal takýto odkaz vyzerať? Povedzme si najskôr, ako by vyzerať nemal:

Kliknutím <a href="http://example.com/blog">sem</a>

navštívite náš blog, kde píšeme o rôznych zaujímavých témach.

Napriek celkom pútavému textu je odkaz na tejto stránke vyrobený zle. Prečo? Zamyslíte sa nad slovom "sem". Čo viete povedať o tomto odkaze na základe tohoto textu? Nie veľa. V podstate, neviete o ňom povedať nič. Sem môže byť určené na čokoľvek. Blog alebo váš najnovší produkt vás môže presmerovať na nastavenia vášho profilu, ak ste prihlasený. Možností je strašne veľa a text vo vnútri vôbec tomu nepomáha.

Mohli by ste ale urobiť takto:

Môžete tiež <a href="http://example.com/blog">navštiviť náš blog</a>,

kde píšeme o rôznych zaujímavých témach.

V tomto prípade je text vo vnútri oveľa viac popisný a na základe slov "navštíviť náš blog" už vieme čo to o odkaze povedať. A dobre popísaný odkaz pomáha tiež vyhľadávačom lepšie pochopiť podstaty vašich odkazov, a tak si zabezpečiť, že potenciálni zákazníci nájdu práve vás vo vyhľadávači.

Kanonické odkazy

Takže, váš web je už celkom dobre prispôsobený pre roboty a ich návštevy, nahádzali ste im toľko ruží pod nohy koľko ste mohli, ale stále to nie je dosť. Poďme sa porozprávať o duplikátnych URL adresách. Pod duplikátnou URL adresou rozumieme, že je viac ako jeden spôsob, ako sa cez odkaz dostať na danú stránku. Pozrite sa na toto:

http://example.com
https://example.com
https://www.example.com
http://www.example.com

Pre nás, ľudí, nie je problém zistiť, že aj rozdielne URL adresy môžu viesť na to isté miesto. Žiaľ, toto neplatí pre robotov. Môžu vašu stránku navštíviť niekoľkokrát, ale vždy cez inú URL adresu a pre robota sú tieto dve cesty, ktoré vedú na to isté miesto, dva úplne rozdielne weby. To nechceme. Chceme, aby vyhľadávače vedeli o našom JEDNOM webe čo najviac, aby mohli svojim užívateľom poskytnúť práve váš web. Ako to ale zaistiť?

Riešením sú kanonické odkazy. Stačí, ak do hlavičky HTML dokumentu (v <head> tagu) vložíte nasledujúci riadok (samozrejme musíte zmeniť adresu podľa vášho webu):

<link rel="canonical" href="https://example.com">

A to je všetko! Tento tag zaistí, že zakaždým, keď robot navštívi váš web z akejkoľvek adresy a zbadá tento tag, nebude vytvárať niekoľko duplikátnych webov pre váš web, ale iba jeden jediný a ako URL adresu zakaždým zohľadní to, čo dané v href atribúte. To znamená, že robot navštívi váš web z http://www.example.com, ale bude to indexovať pod URL adresu https://example.com.

Na záver

Internet je vo väčšom rozmachu ako kedykoľvek predtým, a stále viac a viac oblastí ľudskej aktivity sa presúva práve tam. Internetový priemysel sa mení rapídne, a preto jedným z kľúčových meradiel úspechu na internete nie je iba dodržiavať naše tipy, ale pravidelne sa informovať o novinkách v internetovom priemysle, v technológiách, spôsoboch používania atď. Toto je samozrejme celkom dosť vecí, s ktorými treba zostať v kontakte a pre menej technicky zdatných ľudí, ktorí majú iné záujmy, to môže byť príťaž, ktorú nakoniec budú aj tak ignorovať.

Máme ale dobré správy. Môžete mať moderný web, ktorý bude dodržiavať neustále sa meniace trendy a nemusíte tomu venovať ani sekundu zo svojho času! U nás vo WAME vyvíjame moderné webové prezentácie a aplikácie, ktoré dodržiavajú moderné webové štandardy a náš tím sa neustále vzdeláva vo svete webových technológií, takže môžete mať istotu, že váš web bude vždy špičkový a moderný. Ak ste nie ste spokojný so svojím súčasným webom alebo by ste chceli nový, sme tu pre vás!

Upravené a adaptované na základe: https://neilpatel.com/blog/html-tags-for-seo/