5 užitočných HTML a meta tagov pre SEO

od | jún 18, 2024

Ak sa hovorí o zmenách na webe v prospech SEO, príde na rad on-page SEO, alebo inak technické parametre samotného webu. S tým úzko súvisia HTML a Meta tagy. Aký majú vplyv na celkové aktivity optimalizácie? Je vôbec tak dôležité sa im venovať?

Niektoré majú rankingový vplyv, iné sa zas podpíšu na viditeľnosti vašej webovej stránky. Analýza a posúdenie použitia týchto tagov a elementov je predmetom SEO auditu, ako jednej z mnohých častí hodnotiacich výstup kvality spracovanej webovej stránky. Skúsme si teda prejsť jednotlivé možnosti, ako zvýšiť viditeľnosť vašej webovej stránky vo vyhľadávaní za pomoci HTML a Meta tagov.

Písaním dobrého obsahu, získavaním odkazov a prípadným úsilím pri dizajnovaní vhodného rozloženia webstránky, získate pomerne dosť. Ale toto úsilie je málo docenené vyhľadávačom bez použitia užitočných HTML tagov. Funguje to aj obrátene. HTML a Meta tagy sú zbytočné, ak samotná stránka nespĺňa obsahové kvality, kvalitný dizajn (prívetivú užívateľskú skúsenosť) a web nemá hodnotné spätné odkazy.

HTML a Meta tagy tlmočia vyhľadávaču (Google) najzrozumiteľnejším spôsobom a prezrádzajú o obsahu stránky viac, aby vyhľadávač porozumel detailnejšie štruktúre, informácii. Sú teda kľúčovou zložkou k úspechu v SEO.

Tu je 5 užitočných HTML elementov a Meta tagov, ktoré už možno používate, ale mohli by ste zvážiť ich vylepšenie na svojej stránke.

Titulka

Titulný tag (title) je významným tagom. Element title sa zvyčajne objavuje ako klikateľný nadpis na stránkach s výsledkami vyhľadávania (SERP) a tiež sa zobrazuje na sociálnych sieťach a v prehliadačoch. Ak si pozriete do HTML kódu tohto článku, uvidíte, že titulok je:

<title>5 užitočných HTML a meta tagov pre SEO</title>

Titulka tag je umiestnený v častivašej webovej stránky a má poskytovať jasnú a komplexnú predstavu o tom, o čom stránka je. Ešte doteraz sa diskutuje o faktoroch správania používateľov ako logickom dôkaze relevantnosti a tým aj ako o signáli hodnotenia.

Titulka stránky je prvým tagom, ktorú vidí hľadajúci vo výsledkoch vyhľadávania (SERP), a pomáha mu rozhodnúť sa, či stránka vhodne odpovie na jeho vyhľadávaný výraz – zámer. Dobre napísaná titulka môže zvýšiť počet kliknutí a tým pádom návštevnosť, čo má pomerne kladný vplyv na hodnotenie algoritmom.

Jednoduchý experiment môže tiež ukázať, že Google už nepotrebuje, aby váš titulný tag obsahoval presne zhodujúce sa kľúčové slovo na určenie témy, ktorou sa stránka zaoberá.

Napríklad pred pár rokmi by vyhľadávanie Google pre ”ako podať daňové priznanie” zobrazilo skoro 2 z prvých 5 výsledkov s titulkami, ktoré presne zodpovedajú vášmu vyhľadávanému výrazu.

OBRAZOK

Dnes je však situácia iná, ako vidíme na obrázku. Obrázok z vyhľadávania pre ”ako podať daňové priznanie” zobrazuje, že vo výsledkoch nie je ani jedna presná zhoda. A napriek tomu že neponúka ani jeden irelevantný výsledok, každá z uvedených stránok vysvetľuje, ako realizovať daňové priznanie a čo je k tomu potrebné.

Vyhľadávače nahliadajú na celkový obraz obsahu a majú tendenciu hodnotiť obsah stránky ako celok. Na “obale knihy“, titulke, však stále záleží – najmä pokiaľ ide o interakciu s hľadajúcimi vo výsledkoch.

Odporúčané postupy:

  • Každej stránke vášho webu dajte unikátny titulok. Mal by stručne a presne opisovať obsah stránky.
  • Držte tituly v rozmedzí 50-60 znakov (aby sa neskrátili vo výsledkoch vyhľadávania). Pamätajte, že dlhé tituly sú skrátené na približne 600-700 px v SERP.
  • Dôležité kľúčové slová umiestnite na začiatok, ale prirodzeným spôsobom. Píšete primárne pre svojich návštevníkov a teda titulok by mal byť zrozumiteľný a pochopiteľný.
  • Využite názov svojej značky v titulku. Aj keď sa nezobrazí vo výsledkoch vyhľadávania, stále to bude mať vplyv na vyhľadávač.

Meta popiska tag

Meta popiska (meta description) sa nachádza v častiwebovej stránky a bežne (hoci to nie je pravidlom) sa zobrazuje v úryvku výsledkov (SERP) spolu s titulkou a URL adresou stránky.

Napríklad, toto je meta description pre tento článok:

<meta name="description" content="Prehľad najdôležitejších HTML tagov a meta tagov pre úspešné SEO aktivity. Odporučenia kde, kedy a ako ich použiť na svojom webovom sídle."/>

Aj keď meta description nie je priamym faktorom hodnotenia, určite si vyžaduje vašu pozornosť pri optimalizácii a to hlavne z dôvodu pozornosti používateľov (a Google).

Meta description je to, čo ľudia vidia v úryvku vyhľadávania spolu s titulkou, takže je jedným z aspektov, ktoré im pomáhajú rozhodnúť sa, či je vaša stránka hodná kliknutia. Popis ovplyvňuje počet kliknutí, ktoré získate, a môže tiež zlepšiť CTR a znížiť mieru odchodov, ak obsah stránky naplní sľuby. Preto by mal byť popis pravdivý, reálny a lákavý. Jednoducho jasne reflektovať obsah stránky, na ktorú sa návštevník chystá prísť.

Ak vaša popiska obsahuje kľúčové slová, ktoré používateľ použil vo svojom vyhľadávacom dotaze, zobrazia sa na SERPe vyznačené boldom. To vám výrazne pomôže vyniknúť a informovať používateľa, čo presne na vašej stránke nájde. Ak Google považuje váš popis za nevhodný pre obsah vašej stránky, môže si vygenerovať vlastný. Preto sa uistite, že váš meta description obsahuje hlavné kľúčové slovo a je tematicky relevantný.

Nie je možné zahrnúť každé kľúčové slovo, ktoré chcete hodnotiť, do meta description, a ani to nie je potrebné. Namiesto toho napíšte pár súvislých viet opisujúcich podstatu vašej stránky s niektorými zahrnutými kľúčovými slovami. Dobrým spôsobom, ako zistiť, čo napísať do vašej meta popisky a čo najlepšie funguje pre váš konkrétny segment, je vykonať konkurenčný výskum.

Pozrite sa, ako vaša konkurencia s najvyšším hodnotením vypĺňa svoje vlastné popisy, aby ste získali predstavu o najlepších použitiach v každom konkrétnom prípade.

Buďte kreatívni a teda určite pridajte výzvu k akcii (CTA) na povzbudenie k akcii, ak je to relevantné, použite variácie kľúčových slov (t.j. nie len to kľúčové slovo, ktoré ste použili v titulke), a majte na pamäti zámer vyhľadávania.

Napríklad, ak máte informačnú stránku o keto diete, je dobré urobiť vašu meta popisku ako definíciu keto diety. Ak vaša stránka hovorí o tom, ako dodržať správne keto dietu, potom vymyslite odbornejší popis plný údajov o ideálnej dĺžke trvania diety, a gramáži jedla a množstva kalórií potrebné pre dennú porciu. Číselné hodnoty vo výsledkoch – SERPe upútajú.

Ak ste predajca detských oblečení (“bodyčiek”), opíšte, aké sú rozmery jednotlivých strihov, pre koľko mesačné bábätko sú určené a povzbuďte ľudí, aby si ich čo najskôr kúpili s nejakou výzvou k akcii, napríklad pre limitované obdobie.

Odporúčané postupy:

  • Dajte každej stránke unikátnu meta popisku, ktorá jasne reflektuje hodnotu a obsah stránky.
  • Zo samotných popisiek Google typicky indexuje okolo 150-160 znakov (vrátane medzier).
  • Do popisky zahrňte vaše najvýznamnejšie kľúčové slová, aby boli zvýraznené na výsledkoch v SERPe. Pozor si však dávajte na preplnenie kľúčovými slovami.
  • Nevytvárajte svoju popisku len z kombinácie kľúčových slov, na ktoré sa zameriavate.
  • Alternatívne použite pútavú výzvu k akcii, jedinečnú ponuku, ktorú ponúkate, alebo ďalšie náznaky, čo očakávať po kliknutí výsledku – napríklad „Zistite viac,“ „Kúpte si“ alebo “Volajte na +421 000 a pod.
  • Nepoužívajte úvodzovky, pretože Google tam úryvok preruší.

Headline tagy (H1-H6)

HTML tagy nadpisov (headline) sú používané na identifikáciu rôznych častí/sekcií obsahu stránky. Maju nahrádzať niečo ako mini-nadpisy pre rôzne časti/bloky textu.

Používanie headline tagov je aj naďalej zdrojom odbornej debaty. Kým tagy H2-H6 sa považujú za menej dôležité pre vyhľadávače, správne používanie tagov H1 bolo zdôraznené v mnohých štúdiách v SEO komunite.

Nadpis H1 prepožičiava po Google update 17. septembra 2021 svoju váhu <title> tagu a tak jeho použitie je kľúčové nielen z hľadiska umiestnenia, ale aj z pohľadu použitej slovnej frázy v ňom.

Tagy H2-H6 boli pôvodne používané na účely UX. Zavedenie indexovania pasáží ohlásené 15. Októbra 2020 im pridalo na hodnote. Takto môže Google indexovať a hodnotiť časť vašej stránky (úryvok), ak sa vyhľadávaný výraz zhoduje napríklad s nadpisom H3 a odsekom, ktorý s ním súvisí a nachádza sa ako blok textu pod ním.

Stačí si teda uvedomiť, že nadpisy sú kľúčové pre organizáciu textu a obsahu, a je teda potrebné brať ich dôležitosť pri tvorbe obsahu vážne. V konečnom dôsledku využívanie tag nadpisov určite prispieva k architektúre obsahu.

Pre vyhľadávače je ľahšie čítať a rozumieť dobre organizovanému obsahu, než prechádzať problémy v neorganizovanej štruktúre. Pre čitateľov sú nadpisy ako kotviaci element v množstve textu a navigujú ich cez stránku a uľahčujú pochopenie obsahu.

Tieto faktory zvyšujú dôležitosť starostlivej optimalizácie a kedy aj malé detaily prispievajú k žiadaným výsledkom pri dôslednom spracovaní obsahu a zapojenia headline tagov.

Odporúčané postupy:

  • Udržujte svoje nadpisy relevantné a súvisiace k časti textu, ktorú opisujú. Inými slovami click-bajtové nadpisy môžu byť príliš zavádzajúce.
  • Vždy nechajte nadpisy reflektovať sentiment textu, nad ktorým sú umiestnené. Určite je na mieste vyhnúť sa nadpisom ako “Kapitola 1” a “Kapitola 2“.
  • Nepoužívajte nadmerne žiadané kľúčové slová v nich. Udržujte ich zrozumiteľné a čitateľné pre používateľov.
  • Podľa odporúčaní Google sa je celkom vhodné nechať zhodu medzi titulkou vašej stránky a H1. Ich poradie alebo štylizáciu môžete samozrejme upraviť.

Kanonický Link Tag

Tag rel="canonical" je spôsob, ako oznámiť vyhľadávačom, ktorú verziu stránky považujete za hlavnú a chcete, aby bola indexovaná vyhľadávačmi a viditeľná v SERPe hľadajúcimi.

<link rel="canonical" href="https://gymbeam.sk/blog/8-recepty/">

Bežne sa používa v prípadoch, keď je tá istá stránka dostupná pod viacerými rôznymi URL, alebo viaceré rôzne stránky majú veľmi podobný obsah, pokrývajúci rovnakú tému. Interný duplicitný obsah nie je považovaný za tak výrazný problém ako kopírovaný obsah, pretože zvyčajne za kopírovaným obsahom je manipulatívny zámer. Napriek tomu to môže byť zdrojom neporozumenia pre vyhľadávače. Inak povedané – ak neoznačíte, ktorú URL preferujete pre výber, vyhľadávače ju môžu vybrať za vás.

Vybraná URL bude prechádzaná častejšie. Ďalšou výhodou je, že kanonizácia stránky uľahčuje sledovanie výkonových štatistík spojených s obsahom.

Podľa Google, použitie rel=canonical pre duplicitný obsah pomáha Google konsolidovať všetko vaše úsilie a prenášať signály odkazov zo všetkých verzií stránky na preferovanú. To je miesto, kde môže použitie kanonického tagu pomôcť usmerniť vaše SEO úsilie jedným, správnym smerom.

Odporúčané postupy:

  • Použite rel=”canonical” pre stránky s podobným obsahom na rovnakú tému.
  • Použite kanonický link tag pre duplicitné stránky dostupné pod viacerými URL.
  • Alebo pre verzie tej istej stránky s variáciami ID relácií alebo inými parametrami v URL, ktoré neovplyvňujú zmenu obsahu.
  • Používajte kanonické tagy pre takmer duplicitné stránky opatrne. Dôvodom je, že ak sa dve stránky prepojené kanonickým tagom príliš líšia v obsahu, vyhľadávač tento tag jednoducho ignoruje.

HTML5 Sémantické tagy

Sémantické HTML5 tagy patria k najnovšiemu štandardu HTML a sú nevyhnutné na to, aby pomohli samotnému Google, ale aj iným vyhľadávačom lepšie porozumieť obsahu stránky.

Tu je príklad ako vyzerajú HTML5 tagy v zdrojovom kóde stránky:

<article>
<h1>5 užitočných HTML elementov a Meta tagov pre SEO</h1>
<p>Ak sa hovorí o zmenách na webe v prospech SEO príde na rad on-page SEO alebo inak technické parametre samotného webu. S tým úzko súvisia HTML elementy a Meta tagy.</p>
</article>

Existuje veľa HTML5 tagov, ktoré sú dnes široko používané SEO špecialistami. Ak sa pozriete bližšie na tieto tagy, uvidíte, že ich názvy opakujú najbežnejšie prvky nachádzajúce sa na akejkoľvek stránke, ako sú videá, menu atď.

Výber HTML5 tagov
<article> Definuje veľký a významný kus obsahu (článok, príspevok na fóre atď.), ktorý funguje ako samostatná jednotka.
<audio> Zobrazuje vložený zvuk, alebo audio stream.
<details> Popisuje widget, z ktorého môže používateľ na požiadanie získať dodatočné informácie, alebo ovládacie prvky.
<embed> Vkladá kúsok multimediálneho obsahu ako videá, zvuky, alebo akékoľvek externé aplikácie.
<footer> Definuje obsah päty stránky, dokumentu, alebo sekcie.
<header> Definuje obsah hlavičky stránky, dokumentu, alebo sekcie.
<main> Definuje najdôležitejšiu a najvýznamnejšiu časť obsahu stránky, alebo <article> (<main> môže byť umiestnený vo vnútri sekcie <article>).
<nav> Definuje sekciu stránky s navigačnými odkazmi.
<picture> Definuje kontajner pre viaceré zdroje obrázkov.
<source> Zobrazuje alternatívne zdroje pre vložené mediálne prvky ako <audio> alebo <video>.
<summary> Spolu s <details> tento prvok poskytuje používateľovi viditeľné zhrnutie.
<svg> Vkladá SVG súbor do HTML dokumentu.
<time> Kóduje dátumy a časy (narodeniny, udalosti, stretnutia atď.) v strojovo čitateľnom formáte.
<video> Vkladá video obsah do HTML dokumentu bez potreby akéhokoľvek ďalšieho pluginu na prehrávanie videa.

Odporúčané postupy:

  • Pravdou je, že HTML5 tagy nahrádzajú nekonečné
    , ktoré všetci poznáme a používame.
  • Napriek tomu HTML5 tagy môžu pomôcť vášmu obsahu rýchlejšie sa indexovať a lepšie vyhodnotiť typ obsahu, pretože Google jasne vidí a rozumie, čo je <article>, čo je <video> a kde nájsť súbor navigačných odkazov <nav>.
  • Jednou z najlepších praktík súvisiacich s HTML5 tagmi je skutočnosť používať ich na vašich stránkach a správne aplikovať. Jednoducho konkrétny tag na konkrétnu časť obsahu.
  • Snaha manipulovať a označovať napríklad textový obsah tagom <video> nikam nepovedie.

Prečo používať HTML elementy a Meta tagy

HTML elementy a meta tagy sú aj naďalej aktuálnou SEO technikou optimalizácie. V článku ich bolo spomenutých len zopár, samozrejme existuje ich ďaleko viac. Dôvodom je že HTML je základom každej webovej stránky. Sú to jednoducho základy, ktoré by nikdy nemali byť zanedbávané vo vašom on-page SEO. Niekedy sú práve tieto “základy“ problémom, ktorý vám bráni dosiahnuť najvyššie priečky, pretože Google nedokáže rozpoznať váš obsah.

Ako sa samotné SEO neustále vyvíja aj HTML a meta tagy tiež. Objavujú sa nové a nie len prehliadače, ale aj samotné vyhľadávacie boty sa aktualizujú pre ich dynamické a aktívne spracovanie.

Autor: Stan
Celým menom sa volám Stanislav Kukučka. V iFOCUS sa venujem SEO a PPC. Okrem iného sa venujem technológiám crawlingu a scrapingu a dodatočnému spracovaniu dát cez Python. V obľube mám aj vývoj webov cez alternatívne SSG (Static site generators) a ich zrýchlovanie.