
4
Co by měla obsahovat HTML hlavička?
Hledal jsem na internetu, jak by správně měla vypadat hlavička HTML dokumentu a překvapivě jsem nenašel zdroj, který by vše dokázal jednoduše shrnout. Pokusím se o tedy v tomto článku.
Typ dokumentu (doctype)
Tímto „příkazem“ definujeme typ dokumentu, v tomto příkladu použiji XHTML 1.0 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Meta tagy
Meta tagy obsahují důležité informace jako například kódování stránky, klíčová slova či jméno autora, v hlavičce HTML stránky by tedy neměly chybět.
<meta http-equiv="Content-Language" content="cs" /> <!-- jazyk stránky --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- kódování stránky --> <meta name="description" content="Stručný popis webu" /> <meta name="keywords" content="Klíčová slova pro vyhledávače" /> <meta name="author" content="Milan Seitler" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- "trik" pro IE, aby se stránka zobrazovala co "nejlépe", vysvětlím příště -->
Titulek stránky
Zde není příliš co popisovat, titulek stránky má několik funkcí, jednak je použit pro vyhledávače a také se díky němu lépe orientuje při více otevřených záložkách v prohlížeči.
<title>Titulek stránky</title>
CSS soubory
Snad každý web vyžaduje použití CSS a protože není vhodné používat inline stylování a ani definice stylopisu přímo uvnitř HTML hlavičky, použijeme připojení externího CSS souboru.
<link href="styl.css" rel="stylesheet" type="text/css" />
A co javascript?
Je zvykem v hlavičce uvádět, resp. připojovat také javascriptové soubory, setkal jsem se však také s doporučením uvádět tyto deklarace až na konci HTML kódu a to z důvodu rychlejšího načtení stránky. Zda má tato praktika opodstatnění i v dobách rychlého internetu, to je zřejmě na diskuzi, budu rád, když vyjádříte svůj názor. :) Nicméně skript připojíme takto:
<script type="text/javascript" src="skript.js"></script>
Všechno pohromadě
Jak tedy bude vypadat výsledná hlavička? Například takto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Language" content="cs" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Toto je web o zmrzlině" /> <meta name="keywords" content="zmrzlina, ice cream, vanilková zmrzlina" /> <meta name="author" content="Milan Seitler" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Zmrzlinový web</title> <link href="./css/styl.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/zmrzka.js"></script> </head> |
Pokud podle vás v přehledu něco chybí nebo naopak přebývá, neváhejte mi dát vědět!

Čti dál:
17 komentářů k “Co by měla obsahovat HTML hlavička?”
Odpověď na 3CK
O mně
kategorie
SSME FI MUNI
FIT VUT
Odkazy
Kupte si odkaz! PR 3, SR 2
Kupte si odkaz! PR 3, SR 2
Kupte si odkaz! PR 3, SR 2
TAGS
Nejčtenější články
- První semestr na FIT VUT - 198 492 views
- Třetí semestr na FIT VUT - 177 782 views
- 7 tipů Jak spát méně a efektivněji - 168 581 views
- Jak v PHP nahradit zastaralé funkce ereg a eregi - 84 170 views
- Pátý semestr na FIT VUT - 64 946 views
- 7 tipů jak si usnadnit a urychlit práci s HTML a CSS - 57 750 views
- TEST: Kolik spánku je denně potřeba? - 53 387 views
- 9 nečekaně jednoduchých technik, které z vás udělají mistra komunikace - 45 086 views
- Čtvrtý semestr na FIT VUT - 40 352 views
- Druhý semestr na FIT VUT - 37 976 views
Nejnovější komentáře
- 5 nových tipů pro lepší spánek « Milan Seitler u 7 tipů Jak spát méně a efektivněji
- 5 nových tipů pro lepší spánek « Milan Seitler u TEST: Je možné spát 6 hodin denně? Tak určitě!
- David u 9 nečekaně jednoduchých technik, které z vás udělají mistra komunikace
- Petr u Bakalářské studium na FIT VUT
- Martin u Jak v PHP nahradit zastaralé funkce ereg a eregi
archiv
- Prosinec 2018
- Listopad 2015
- Září 2015
- Březen 2015
- Květen 2014
- Duben 2014
- Prosinec 2013
- Listopad 2013
- Červenec 2013
- Červen 2013
- Duben 2013
- Březen 2013
- Únor 2013
- Leden 2013
- Prosinec 2012
- Listopad 2012
- Říjen 2012
- Září 2012
- Srpen 2012
- Červenec 2012
- Červen 2012
- Květen 2012
- Březen 2012
- Únor 2012
- Leden 2012
- Listopad 2011
- Říjen 2011
- Srpen 2011
- Červen 2011
- Duben 2011
- Únor 2011
- Leden 2011
chybi ti tam …..a pak myslim ze na http://www.jakpsatweb.cz/html/hlavicka.html je to shrnute taky :)
zmizlo to znacky mrcha ….. <base> …proste tag base kdyby to neslo :-D
Já to chtěl shrnout nějak jednoduše :) Co se týče base, tak to je spíš pomůcka pro líné programátory než nezbytná součást hlavičky :)
V dnešní době už meta tag „keywords“ má pramalý nebo spíš vůbec žádný význam. Řekl bych, že je to už jenom taková setrvačnost ho tam dávat.
Stejně tak „description“ má význam pouze jako text, který se zobrazí ve výsledcích vyhledávání některých vyhledávačů. Jeho obsah už nemá pro SEO žádný význam.
Co se týče tagu „X-UA-Compatible“: Nutnost jeho použití kodérovi říká, že něco dělá špatně :)
Jinak bych doporučil do ukázkové hlavičky přidat rozlišení mezi tiskovým stylem a stylem pro zobrazení v prohlížeči.
A ještě poslední poznámka: Co se týká vkládání skriptů až na konec stránky, v dnešní době to má hlavní důvod ten, že na konci stránky je načtený celý DOM, takže v podstatě odpadá nutnost použití window.onload.
Jinak tohle hlavně neber jako kritiku:) Článek pěkný. A že v ITW se o description a keywords učilo něco jiného? Věř čemu chceš :)
Díky za komentář, každého takového konstruktivního komentáře je třeba si vážit :) Podotýkám, že ITW jsem neměl ;)
K X-UA…: já to neberu jako nutnost, ale spíše jako usnadnění. primárně to tedy nepoužívám, ale pokud mám problém s nějakoz drobností, kterou ne a ne v IE rozjet a lze to vyřešit takto, proč ne?
S těmi styly pro tisk a zobrazení máš pravdu, ne vždy je to však dneska standardem..Já sám to docela opomínám, ale pokusím se tomu někdy pořádně podívat na zub. Až budu mít trochu sil, článek doplním. :)
Dovolím si Tě mírně opravit. Meta keywords už vyhledávače nějaký ten čas ignorují – viz oficiální nápovědy Seznamu a Google. Naopak meta description je pro SEO velmi důležitý! Občas si ho vyhledávač vytáhne jako popisek pro zobrazení v SERPu. A podle čeho si myslíš, že uživatelé klikají na výsledky? No podle toho, jaký text tam vidí! Takže description určitě vyplňovat, je to po title druhý nejdůležitější on-page faktor.
Jinak: http://www.w3schools.com/html/default.asp
Ad keywords – ano to se shodneme, ostatně tak jsem to psal.
Ad description – dřív to Seznam skutečně používal do SERPu, v současném vyhledávacím enginu tomu tak již není. Google si text v SERPu tvoří již řadu let sám. Ostatní vyhledávače budiž, nicméně jediný, který by ještě dejme tomu stál za zmínku, je Bing, a pro toho platí to stejné jako pro Google a Seznam.
A že je description druhý nejdůležitější onpage faktor po title? To jsi se předpokládám upsal :)
Jinak souhlasím. Description (i keywords) vyplňovat, ale očekávat od toho zázraky, to ne.
Pokud vezmu v úvahu hodnotný obsah stránky tak společně s title a description jde o nejdůležitější on-page faktory.
Keywords je zbytečné vyplňovat, vyhledávače se na něj VŮBEC nedívají. Naopak vyplnit description je DŮLEŽITÉ. Neví kde jsi přišel na to, že ho Seznam ani Google nepoužívají?
„Kvalitní obsah“ je dost vágní pojem, ale budiž.
Kde jsem přišel na to, že description není pro vyhledávače nijak zvlášť důležitý? Stejně tak se můžu zeptat, kde jsi ty přišel na opak. Z nějakého školení? A oni na to přišli jak? Vyzkoušel jsi více školení? Moje zkušenost je taková, že každá agentura má zkrátka a dobře trochu jiné zkušenosti. Nikdo se neshodne ve všem na 100 %.
Diskuzí na toto a podobná témata už proběhly tisíce – jedni tvrdí jedno a druzí zase ono (ostatně tak, jak jsme se setkali teď mi). Nemám zájem tady rozpoutávat další takovou debatu, neboť stejně ani jeden z nás nepřinese žádný nezlomný argument.
Tím bych to chtěl ukončit – kdo se nemůže rozhodnout jak naložit s description, ať ho správně vyplní. Chybu tím rozhodně neudělá. Jinak ať si udělá třeba vlastní testy.
Ano, „kvalita“ se těžko definuje, ale myslel jsem obsah, který návštěvníkovi něco přinese, a nemusí to být nutně „jen text“.
Jak jsem přišel, že se description zobrazuje někdy s SERPu? Jednoduše se to tak děje, stačí si zadat pár dotazů do vyhledávačů a potom si zobrazit zdroják stránky. Snippet se tvoří buď z textu stránek nebo právě z description. Důkaz je tedy velmi jednoduchý. Kdyby jsi měl ty dokázat, že se description nezobrazuje nikdy, tak to zřejmě nedokážeš… Jsi snad první od koho slyším, že description se do snippetů nikdy „nepropisuje“ :-) Odkud jsi to tedy zjistil? Školení? Jaká agentura, kniha, ….
Jo, to abych na tom důkazu začal pracovat :-D Ale to dřív asi pojede čert na bruslích do práce.
Netvrdím, že se description nemůže nikdy objevit v SERPu. U nově indexovaných stránek to tak může být. Stejně tak u stránek, které obsahují neindexovatelné technologie a nenabízí žádný náhradní obsah a podobně. A dá se říci, že stránky, u kterých se zobrazuje description, zřejmě nemají onen kvalitní obsah.
Zkus si najít libovolnou stránku, která má rozdílný text v description a v obsahu stránky. Zkopíruj přesně obsah description do vyhledávače a zjistíš, že zpátky svou stránku nedostaneš.
Jde vidět, že tomu asi moc nerozumíš. Tady vůbec nejde o to, že vyhledávače berou ohled na description v tom smyslu, že zohledňují klíčová slova, která v něm jsou apod. Description slouží právě a pouze pro výpisy do snippetů. A to jestli je stránka zaindexovaná nově nebo už déle nehraje roli. Jednoduše, když vyhledávači přijde description relevantní k položenému dotazu, tak ho vytáhne do snippetu.
Ano. Takže se shodneme, že při vyhledávání dotazu se vyhledávač na description nedívá. To jsem rád.
Vyhledávač tedy prohledává obsah stránky. Pokud ji zobrazí ve výsledcích pravděpodobně našel nějaké relevantní informace na dané stránce. Proč tedy nezobrazí tyto informace? Proč by měl místo těchto relevantních informací zobrazovat (byť) relevantní description, když uživatel na dané stránce description vůbec nenajde? (Pokud si samozřejmě neotevře zdroják)
Co se týče nově indexovaných stránek. Tady jsi bohužel střelil mimo. Zkus si to otestovat na několika stránkách. Google čas od času prvních pár dní skutečně zobrazuje pouze description a vlastní snippet si nechává „na později“.
Description může zobrazovat např. proto, že je prostě „vhodnější“ než text na stránce. Vem si třeba, že ti na web vede spousta odkazů s nějakým anchor textem, ale přesně takhle fráze se nenachází ve „viditelném“ textu stránky, ale v meta description. Mimochodem nikde výše jsem netvrdil, že vyhledávače berou description jako jeden z faktorů při indexaci, chce to lépe číst ;-) Tady jde ale o úplně jinou věc – udělat web v SERPu „atraktivní“ pro uživatele, aby na něj klikl.
Rozdíl v nově zaindexovaných stránkách a „starších“ jsem nezaznamenal, ale netvrdím, že to tak může být. Máš konkrétní příklad?
Myslím, že máš na mysli „link bomb“. Tato mezní situace, kterou jsi uvedl (tedy že se pomocí této metody podaří umístit ve vyhledávači i přesto, že daný text není na stránce obsažen + podmínka, že daný text je pouze a jen v description), se opravdu nevidí často.
Mimochodem, ja jsem ani nikde výše nepsal, že něco takového tvrdíš. Dokonce jsem napsal, že se na tom shodneme. Takže ta tvá rada (u které jsem zcela nepochopil tvůj útočný tón) na mou adresu se hodí spíše pro tebe.
Ad nově zaindexované stránky: Konkrétní příklad takhle z rukávu nevytáhnu – ostatně není jak – zda to tak skutečně je, může ukázat jen čas.
Ne, Google bomby nemyslím, ty už stejně dlouho nefungují. Google už zřejmě víc zohledňuje samotný text stránek vhledem k anchor textu. U seznamu bomby nikdy nefungovaly.
Description se prostě do snippetu občas použije. Konec. http://napoveda.seznam.cz/cz/hledani-fulltext-pujdou-moje-stranky-zaindexovat-pridat-do-vyhledavani.html
http://www.google.com/support/webmasters/bin/answer.py?answer=35264
Končím diskuzi, protože se na tom asi neshodneme ;-)
ke scriptum, spis nez na konec jsem zvykly davat je do zvlastniho souboru a jelikoz snad vsude bezi jquery, tak $(document).ready(function() je bezproblemu :)