Dub
4

Co by měla obsahovat HTML hlavička?

By majlan  //  Tipy, Webová tvorba  //  Komentářů: 17

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!

17 komentářů k “Co by měla obsahovat HTML hlavička?”

  • chybi ti tam …..a pak myslim ze na http://www.jakpsatweb.cz/html/hlavicka.html je to shrnute taky :)

    VA:F [1.9.20_1166]
    +3 / -0
    • zmizlo to znacky mrcha ….. <base> …proste tag base kdyby to neslo :-D

      VA:F [1.9.20_1166]
      +1 / -0
  • 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 :)

    VN:F [1.9.20_1166]
    +2 / -0
  • 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š :)

    VA:F [1.9.20_1166]
    +0 / -0
    • 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. :)

      VN:F [1.9.20_1166]
      +0 / -0
    • 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

      VA:F [1.9.20_1166]
      +0 / -0
      • 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.

        VA:F [1.9.20_1166]
        +0 / -0
        • 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í?

          VA:F [1.9.20_1166]
          +0 / -0
          • „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.

            VA:F [1.9.20_1166]
            +0 / -0
        • 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, ….

          VA:F [1.9.20_1166]
          +0 / -0
        • 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š.

          VA:F [1.9.20_1166]
          +0 / -0
          • 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.

            VA:F [1.9.20_1166]
            +0 / -0
          • 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“.

            VA:F [1.9.20_1166]
            +0 / -0
          • 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?

            VA:F [1.9.20_1166]
            +0 / -0
          • 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.

            VA:F [1.9.20_1166]
            +0 / -0
          • 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 ;-)

            VA:F [1.9.20_1166]
            +0 / -0
  • 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 :)

    VA:F [1.9.20_1166]
    +0 / -0

Odpověď na 3CK



Zajímá vás cokoliv o mobilních aplikacích? Uvažujete o spolupráci? Kontaktujte mne na seitler@reinto.cz

O mně

Jmenuji se Milan Seitler a jsem spoluzakladatelem společnosti Reinto s.r.o., ve které se věnujeme mobilním i webovým aplikacím a marketingu.

Zabývám se celým procesem tvorby mobilních a webových aplikací. Nejvíce se věnuji návrhu aplikace a UX/UI designu. Kladu velký důraz na jednoduchost a srozumitelnost uživatelského rozhraní.

Zajímám se o online i offline podnikání, fascinují mě úspěšní lidé, kteří se nebojí tvrdé práce. Mou hlavní motivací je konkurence, která mě vždy nutí jít do všeho naplno, protože nerad prohrávám.

Mám rád hudbu, knížky, sport a cestování.

milan@seitler.cz

Odkazy

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Partner links