Jak vidí vyhledávač webovou stránku
V minulém článku jsme si přiblížili, jak fungují vyhledávače. Dnes se zaměříme na to, co vyhledávač vidí a jak s tím můžeme pracovat. Optimalizace pro vyhledávače totiž vyžaduje širší znalosti problematiky webů i tvorby obsahu.
Když se chceme podívat na webovou stránku očima vyhledávače, můžeme použít nějaký nástroj. Pro rychlou prohlídku stránky používám nejčastěji tento SEO browser, který funguje v prohlížeči, takže jej můžu použít i na mobilu nebo tabletu, kupříkladu na cestách. Tento nástroj není určen k žádné hlubší analýze, mě však pomáhá rychle se zorientovat. Rovnou vidím titulek, popisek, strukturu obsahu i samotný obsah přesně tak, jak jej vidí robot. Mnoho problémů klientů skutečně odhalím pouhým pohledem na "strojový" obsah stránky.
Jaké prvky má web z pohledu vyhledávače
Webová stránka vzniká zápisem kódu v jazyce HTML (Hypertext Markup Language), který prohlížeči řekne, jak má stránku zobrazit a co na ní bude. Pro tvorbu webů se používá mnoho jazyků i metod, ale HTML je základ. V kódu tedy můžeme zapsat celý obsah stránky, který se následně v prohlížeči zobrazí tak, jak je definovaný.
Pro optimalizaci webu ve vyhledávání se však zaměřujeme na jednoduché prvky, které dovede odhalit každý. Níže naleznete zdrojový kód jednoduché stránky.
Jak vypadá zápis webu v HTML
V jazyce HTML používáme značky, neboli tagy. Tagy jsou buď párové nebo nepárové. Nepárové tagy mají jednorázový účinek, například konec řádku.. Párové tagy se používají pro funkce, které platí v určitém rozsahu stránky. Tag začne před obsahem, který chceme upravit. Skončí pak na konci této sekce obsahu.
Zdrojový kód stránky:
<html> (párová značka, která řekne prohlížeči jaký je použitý jazyk)
<head> (párová značka, která označuje hlavičku dokumentu, která není vidět)
<title>Toto je titulek stránky</title>
<meta name="description" content="Toto je popisek stránky."> (nepárová značka, zápis meta popisku stránky)
</head> (konec hlavičky dokumentu)
<body> (začátek "těla", čili obsahu dokumentu)
<h1>Toto je nadpis 1. úrovně na stránce</h1> (nadpis označený párovou značkou h1)
<p>Zde se nachází první odstavec zajímavého textu.</p> (označení odstavce)
<h2>Toto je nadpis 2. úrovně na stránce</h2>
<p>Zde se nachází další odstavec zajímavého textu.</p>
<p>Zde si můžete přečíst ještě jeden odstavec zajímavého textu.</p>
</body> (ukončení "těla", čili obsahu dokumentu)
</html> (ukončení jazyka HTML)
Modrá barva značí tagy, zelená barva značí obsah stránky. Fialově jsou označené meta tagy title a description, které značí titulek a popisek stránky. Titulek vidíte v liště prohlížeče a jako hlavní nadpis v SERP. Popisek uživatel vidí pouze na vyhledávači, hned pod titulkem.
Zápis obrázků a odkazů
Vyhledávač vnímá obrázky, ale protože robot nemá oči, vidí pouze zápis obrázku v kódu.
<img src="obrazek.jpg"> představuje zápis obrázku, na kterém vyhledávač nic nevidí.
<img src="obrazek.jpg" alt="Úžasný obrázek"> představuje zápis, který vyhledávači řekne, že právě vidí "Úžasný obrázek".
<img src="obrazek.jpg" title="Klikněte pro vyšší rozlišení"> představuje zápis, který člověku řekne, že může kliknout pro zobrazení vyšší kvality obrázku.
Kromě textů vyhledávač vidí i odkazy, které může (nemusí) následovat, popiskem pak uživateli i vyhledávači řekneme, co pod odkazem najde.
<a href="https://vojtahorak.cz">Text odkazu</a> je prostý zápis odkazu.
<a href="https://vojtahorak.cz" alt="Odkaz na webové stránky Vojty Horáka">Text odkazu</a> je zápis odkazu s popiskem.
<a href="https://vojtahorak.cz" title="Odkaz na webové stránky Vojty Horáka">Text odkazu</a> je zápis odkazu s titulkem.
Při zápisu odkazů a obrázků můžeme použít jak titulek, tak alternativní popis. Popis (alt) je alternativou k obrázku nebo odkazu. Zobrazí se v případě, že obrázek je rozbitý (například když chybí) a vidí jej i vyhledávač. Titulek se zobrazí v případě, kdy přejedeme myší přes daný prvek. Může obsahovat doplňující informaci o tom, co se stane, když na prvek třeba kliknete.
Teď, když vidíme způsob zapisování nejčastěji používaných prvků stránky, můžeme pokračovat dále. Vyhledávač kód vidí, ale čte jeho výslednou podobu bez grafiky. To znamená, že web nevidí barevně, ani s obrázkovým pozadím, ani s fotografiemi. Vidí v podstatě černobílý obsah, u kterého rozumí obsahu obrázku (je-li vyplněn), cíli odkazu (je-li vyplněn) a například tučnému nebo barevnému písmu. Vyhledávači je jedno, jestli je to zelená nebo červená, ale všímá si, jestli má zbarvené písmo nějaký smysl v celém kontextu stránky.
Od robota zpět k člověku
Nyní je jasné, že je důležité doplňovat alternativní obsah, neboli popisky a titulky obrázků a odkazů. Kromě vyhledávače je však čtou i lidé, respektive jejich pomocné nástroje. Zrakově postižení lidé jsou totiž na těchto popiscích (alt) závislí. Bez nich netuší, co se na webu děje. Je hezké popisovat předmět na obrázku, ale když nevíme, co na obrázku doopravdy je, může se celý obsah jevit jako holý nesmysl.
Titulky jsou dobré zejména pro user-experience, čili uživatelskou přívětivost. Můžou člověku říci, co se stane nebo kam je kliknutí dovede. Pokud jsou titulky a popisy správně užívány, čili obsazeny relevantním obsahem, kladně je hodnotí i vyhledávače.
Se kterými prvky pracujeme při optimalizaci
Nejdůležitější je obsah. Tedy výsledná koláž textů, obrázků, odkazů a videí. Obsah, který nejlépe odpovídá uživateli na konkrétní dotaz bude dříve nebo později na vyšších místech v SERP.
Titulek stránky je důležitý pro uživatele i vyhledávače. Popis stránky meta description pak může rozhodnout, jestli člověk přijde na vaší nebo konkurenční stránku, ale na samotné hodnocení stránky vyhledávačem nemá přímý vliv.
Čtěte také:
Jak psát obsah pro weby, lidi i vyhledávače
K čemu je analýza klíčových slov a jak na to
Jak optimalizovat web pro vyhledávače
