Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Katedra systémové analýzy
Téma bakalářské práce:
Srovnání web-prezentací vybraných cestovních kanceláří v ČR
Vypracoval:
Lukáš Hronec
Vedoucí bakalářské práce:
doc. Ing. Prokop Toman, CSc.
Prohlášení: Prohlašuji, že jsem předloženou bakalářskou práci zpracoval zcela samostatně a veškerou použitou literaturu a další podkladové materiály, které jsem použil, uvádím v bibliografii.
V Praze dne 10. května 2007
______________ Lukáš Hronec
-1-
Poděkování Děkuji doc. Ing. Prokopu Tomanovi, CSc. za podnětné připomínky ke zlepšení mé bakalářské práce a cestovní kanceláři Sindibád za konzultace a čas, který mi věnovala.
-2-
Obsah 1 2 3 4
Úvod..........................................................................................................................4 Definice pojmů..........................................................................................................6 Uvedení do problému................................................................................................7 Hodnotící kritéria ......................................................................................................7 4.1 Použitelnost .......................................................................................................8 4.1.1 Srozumitelná a přehledná navigace...........................................................9 4.1.2 Rychlý, jednoduchý a úplný nástroj pro vyhledávání zájezdů................10 4.1.3 Základní prvky a styl stránky..................................................................10 4.2 Přístupnost.......................................................................................................11 4.3 Informační hodnota a legislativa.....................................................................12 4.4 Shrnutí a návrhy na změny..............................................................................13 4.5 SEO analýza ....................................................................................................13 5 Srovnávací analýza..................................................................................................14 5.1 Analýza stránek CK Čedok a.s........................................................................14 5.1.1 Navigace..................................................................................................14 5.1.2 Vyhledávání zájezdů ...............................................................................14 5.1.3 Základní prvky a styl stránky..................................................................15 5.1.4 Přístupnost...............................................................................................15 5.1.5 Informační hodnota a legislativa.............................................................16 5.1.6 Shrnutí a návrhy na změny......................................................................17 5.2 Analýza stránek CK Soleada...........................................................................19 5.2.1 Navigace..................................................................................................19 5.2.2 Vyhledávání zájezdů ...............................................................................19 5.2.3 Základní prvky a styl stránky..................................................................19 5.2.4 Přístupnost...............................................................................................20 5.2.5 Informační hodnota a legislativa.............................................................20 5.2.6 Shrnutí a návrhy na změny......................................................................21 6 Interpretace výsledků ..............................................................................................23 7 SEO analýza a její základní kritéria ........................................................................24 7.1 Problémy HTML kódu....................................................................................24 7.1.1 Aplikování interních CSS stylů a JavaScriptu [4] ..................................24 7.1.2 Pořadí bloků v kódu [7] ..........................................................................24 7.1.3 Nevalidní HTML kód [5] ........................................................................24 7.1.4 Nedodržování správné sémantiky HTML značek [3] .............................24 7.1.5 Úvodní stránka [5]...................................................................................26 7.2 Nevypovídající webové adresy [8]..................................................................26 7.3 Nedostatek zpětných odkazů [9] .....................................................................26 7.4 Duplicity stránek [6] .......................................................................................27 7.5 Statický titulek [10].........................................................................................27 7.6 Atributy ALT a TITLE [10]............................................................................27 8 SEO analýza prezentace CK Čedok a.s...................................................................28 9 SEO analýza prezentace CK Soleada......................................................................32 10 Závěr .......................................................................................................................38 Prameny...........................................................................................................................39 Přílohy.............................................................................................................................41
-3-
1 Úvod Dnešní svět je charakteristický dynamickým technickým pokrokem, ve kterém se člověk snadno ztrácí. Neznalost nových možností a nástrah, které tento pokrok přináší, může přinést značné znevýhodnění. Informační kanály se rozrostly a s nimi i množství dat, které přinášejí. Lidský mozek bohužel nemá takovou kapacitu, aby mohl všechna tato data pojmout, zpracovat a zařadit. Tím nejaktuálnějším a nejvíc užívaným zdrojem je internet. Webové prezentace a internetové aplikace se neustále vyvíjejí a jejich počet narůstá rychlým tempem. Mnohé z těchto prací jsou nekvalitní až nepoužitelné a takové stránky mohou postrádat smysl své existence. Jsou nepřehledné, obsahují irelevantní a redundantní informace či dokonce ne zcela fungují, a tím minimalizují svou efektivnost vzhledem k uživatelům. Mnohdy nerespektují základní pravidla tvorby webů a stávají se tak neviditelné pro okolní svět. Jednoduše neplní svůj účel. Zpočátku byly prezentace užívány jako medium jednostranné komunikace a jejich náplní bylo poskytování informací uživatelům internetu. Bylo používáno základního HTML (Hyper Text Markup Language) a o něco později CSS (kaskádové styly), čímž se „holé textové stránky s obrázky“ začaly transformovat na „umělecké výtvory“. Z „webkoderů“ se stali „webdesigneři“ a s růstem možností tohoto odvětví vzrostl i počet laiků se základními vědomostmi, kteří mohli vytvořit zajímavě vypadající stránky. Bohužel tím také nastal zlom v psaní čistých, sémanticky správných kódů a začal se upřednostňovat vzhled před samotnou strukturou webu. Na internetu bylo možné najít nepřeberné množství webových stránek s tabulkovým „layoutem“ (rozložení stránky), které byly později nahrazeny stránkami s opravdu vysokým počtem „DIVů“ jež je možno dokonce i dnes vidět v portfoliu některých profesionálních studií. S podporou skriptovacích jazyků, databází a samozřejmě vyšší rychlostí přenosu a rozšířenou dostupností, nabyl internet a jeho funkce zcela nový význam. Jednostranná komunikace „prodejce – zákazník“ se změnila v oboustrannou. Webové prezentace už nejsou pouhými nositeli informací ve směru k zákazníkovi, ale mohou sloužit také k zajištění toku informací od zákazníka k prodejci. Celý obchodní proces od vytvoření kontaktu přes objednání, nákup a doručení může být proveden z domova zákazníka prostřednictvím „elektronických obchodů“. Internet přináší výhody také prodejcům, formou snížení nákladů na celý obchodní proces. Elektronické obchody mohou nabídnout takovou šíři sortimentu zboží a služeb, kterou by kamenné obchody nebyly schopny pojmout. Mnohé společnosti a banky začaly dokonce upřednostňovat -4-
elektronické obchodování před klasickými pobočkami. I když je elektronické obchodování poměrně novodobým trendem, již dávno se nejedná o žádný luxus a kvalitní e-shop je záležitostí několika tisíc korun. I přes stále nedokonalou právní ochranu (občas i kvůli ní) se tento typ obchodního styku stává stále více populární. To si ale někteří podnikatelé stále neuvědomují a dávají přednost „době kamenné“. Je samozřejmé, že ne v každém odvětví se takový obchod vyplatí, ale jsou odvětví, u kterých ho dnešní zákazník přímo očekává. Jedním takovým odvětvím je turismus a s ním spojené cestovní kanceláře (dále jen CK). Cílem této práce je analýza a srovnání webových prezentací dvou CK v České Republice. Měl jsem možnost delší dobu pracovat v kanceláři CK Sindibád, která je svým zaměřením mírně odlišná od klasických CK, jelikož pořádá implicitně zahraniční akce pro teenagery. Nicméně zhýčkaných a opatrných zákazníků má také mnoho. Zároveň využiji praktických znalostí nabytých při studiu na VŠE, především z předmětu Podnikání a obchodování na internetu (4IT325) vedeným Prof. Ing. Jaroslav Jandošem, CSc. Zajímá mě hlavně, jak se liší kvalita prezentací CK s podobnou nabídkou a dobou existence, které mají odlišnou popularitu. Zda jsou si jejich majitelé vědomi všech možností, které jim internet poskytuje a budoucnosti, jakou elektronické katalogy zájezdů mají. Na portálu aktuálně.cz (viz lit. [15]) analytik cestovního ruchu Jaromír Beránek uvedl, že prodej zájezdů přes Internet loni (2005) dosáhl dle odhadů 1,4 miliardy korun (meziročně se tak zvýšil o 90 procent). Na celkovém prodeji se zájezdy prodané v minulém roce (2005) přes internet podílely asi 5,5 procenta. Vybral jsem si dobře známou a využívanou CK Čedok (http://www.cedok.cz/) a již méně známou libereckou CK Soleada (http://www.soleada.cz/). V práci se budu zabývat jak použitelností a účelností prezentací, tak informacemi, které poskytují a jejich souladem se zákonem. Z pohledu CK budu zkoumat snadnost vyhledání v internetových vyhledávačích a přístupnost webových stránek pro zákazníky. Vyhodnocení bude doplněno o návrhy řešení v problematických oblastech. Analýza bude obsahovat také SEO (Search Engine Optimalization) analýzu pro každou CK zvlášť.
-5-
2 Definice pojmů HTML Zkratka z anglického HyperText Markup Language, značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci stránek na Internetu. CSS Zkratka pro anglický název Cascading Style Sheets, česky tabulky kaskádových stylů. Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Webdesign Činnost, při které jsou vytvářeny webové stránky a webové aplikace. Spočívá v návrhu struktury a vzhledu webových stránek, přičemž se používají zejména technologie HTML a CSS a statické obrázky (PNG, GIF, JPG). JavaScript Objektově orientovaný skriptovací jazyk, pomocí něhož lze stránkám dodat dynamiku, např. skripty dokáží reagovat na události vykonané uživatelem. Klíčová slova Slova či slovní spojený specifická pro dané odvětví a web. PageRank Algoritmus pro ohodnocení důležitosti webových stránek a tvořící základ vyhledávače Google. (Jméno algoritmu je přeložitelné “hodnocení stránky”) Využívá strukturu hypertextových odkazů jako vzájemné “doporučování” stránek, ne nepodobné hodnocení vědeckých prací podle počtu citací. Na rozdíl od sledování počtu citací ale dovádí tento princip ještě dál: hodnocení stránky se nepočítá z prostého počtu odkazů, které na ni vedou, ale bere se v úvahu i hodnocení odkazujících stránek. Validita Stav kódu webové stránky, která odpovídá všem standardům celosvětového konsorcia W3C. Sémantika Správné vyznačování jednotlivých úseků zdrojového kódu webové stránky pomocí adekvátních HTML značek.
-6-
3 Uvedení do problému Při tvorbě webových stránek musí být přihlédnuto k tomu, kdo bude jejich uživatelem. Tím může být jak člověk ovládající internet tak absolutní začátečník. Proto webové stránky musí být přehledné, jasné, jednoduché a intuitivní na ovládání. Grafické provedení je potom to, co musí upoutat uživatele na první pohled. Webová stránka by měla být připravena tak, aby byla snadno vyhledatelná a bezbariérová. Internet může být i zneužitelný ze strany prodejců a to vzhledem k anonymitě, kterou přináší, a k nedokonalým zákonům (viz lit. [1]). Hodnotících systémů a soutěží je již dnes opravdu velké množství, avšak ne všechny jsou směrodatné. Mezi ty kvalitní patří například sekce „kritika webu“ na http://interval.cz/magazin/kritika-webu/, kde se ale jedná o hodnocení profesionální i laickou veřejnosti formou diskuze. Pro osobu znalou, čí komentáře brát v úvahu, má tento způsob hodnocení opravdu největší přínos, i když si často musí ucelený závěr odfiltrovat a poskládat sám. Příkladem soutěže je například již třetí ročník „Nejlepší weby“ občanského sdružení AGNES (viz lit. [21]), kde se hodnotí kritéria: obsahové zpracování, šíře nabídky služeb organizace propagovaných webovými stránkami, aktuálnost, grafické zpracování (nápaditost, přehlednost, snadná navigace), přístupnost webové stránky z hlediska osob se specifickými potřebami. Tato analýza se s některými z výše uvedených bodů shoduje, ale pojednává o nich více dopodrobna. Obsahuje i důležitou část zvláště pro majitele stránek a tou je SEO analýza. Navíc v případě AGNES se jedná o srovnání prezentací pouze neziskových organizací, které mají jediný cíl a tím je přilákání co nejvíce spolupracovníků nebo dárců. Z těchto důvodů jsem se rozhodl provézt analýzu následujícím způsobem.
4 Hodnotící kritéria Srovnání jednotlivých prezentací cestovních kanceláří (dále jen CK) provedu jak z pohledu uživatele, tak z pohledu majitele stránek. •
Cílem uživatele je nalezení konkrétní dovolené při užití pouze několika daných parametrů či si určit místo daného pobytu až z nabídky CK zveřejněné na jejich stránkách.
•
Na druhou stranu cílem majitele stránek je dozajista jejich viditelnost na internetu a snadné vyhledání pomocí určitých klíčových slov. Samozřejmostí je i požadavek na přístupnost stránek. -7-
Nedílnou součástí prezentace CK jsou i jistá legislativně podchycená opatření a náležitosti. V další části již nebudu tyto dvě cílové skupiny výrazněji odlišovat a jejich kritéria sloučím do jedné analýzy. Budu tedy zkoumat použitelnost prezentace a její přístupnost, dále informační hodnotu a legislativu a v neposlední řadě provedu na každém webu kompletní SEO analýzu. Následně provedu shrnutí a celkové hodnocení jednotlivých prezentací v bodové tabulce.
4.1 Použitelnost Použitelnost webu v sobě skrývá několik nepsaných pravidel zlepšujících interakci a orientaci návštěvníka na stránkách. Zásadně zvyšuje spokojenost a pohodlí návštěvníků a v prvé řadě jim umožňuje bezproblémový přístup k sekcím, které právě hledá. Tvůrci webů chtějí být často samozřejmě originální, ale ve většině takovýchto případů vznikají nepoužitelné weby. Stránky na internetu se dají rozdělit do několika skupin jako např. e-magazíny, elektronické obchody či diskusní fóra a každá skupina má již zavedeny určité standarty (umístění navigace, nákupní košík, reklama, ...), na které jsou uživatelé zvyklí. Pokud se webdesigner chce odchýlit od konvencí, tak by tak mělo být pouze v případě, kdy se předpokládá, že nově příchozí uživatel neměl žádnou představu o tom, jak bude stránka vypadat. To se týká webů, kde jsou originalita a umění na místě (např. prezentace hudební kapely či výtvarného umělce). Výstižně popsal požadavky použitelného webu Jakob Nielsen (viz lit. [23]), podle nějž použitelnost určují následující faktory: •
Pochopitelnost: Jak náročné je pro nově příchozího uživatele dokázat používat web.
•
Účinnost: Jak snadno dokáže uživatel dosahovat svých cílů na jemu dobře známém webu.
•
Zapamatovatelnost: Jak dobře si dokáže uživatel vzpomenout na rozložení prvků a navigaci webu, který navštívil po delší době.
•
Chybovost: Jak časté a závažné chyby mohou při prohlížení webu nastat a jak si s nimi dokáže uživatel poradit.
•
Spokojenost: Jak je používání webu uživatelsky příjemné. U CK je prioritní, aby si zákazník po příchodu na prezentaci okamžitě mohl
vybrat zájezd. Další nutností jsou samozřejmě rychlé odkazy na Last Minute akce či jiné výhodné služby. Jednotlivé body analýzy by se tedy daly pro tento případ shrnout takto: -8-
4.1.1 Srozumitelná a přehledná navigace Dle online encyklopedie (wikipedia) je význam pozemní navigace následující: „Navigace je souhrnný název pro postupy, jimž lze kdekoliv na zeměkouli, moři či ve vzduchu stanovit svou polohu (nebo polohu jiného přemisťovaného objektu) a nalézt nejvhodnější či nejkratší cestu k cíli.“ Stejně tak můžeme vysvětlit i význam navigace na stránkách. Jedná se o soubor odkazů, tlačítek a dalších aktivních prvků na stránce, který uživateli umožňuje pohyb po všech úrovních prezentace a informuje ho o jeho aktuální pozici. U rozsáhlejších prezentací, jakou stránky CK dozajista jsou, by neměla chybět tzv. drobečková navigace. Žádná stránka prezentace by v žádném případě neměla odkazovat sama na sebe a na každém místě prezentace by měl být odkaz na úvodní stránku. Úlohu aktivního prvku odkazujícího na úvod by mělo plnit logo společnosti a v případě absence loga odkaz v hlavní navigaci s textem „úvod“ či „úvodní stránka“. Typologicky můžeme navigaci rozdělit do 7mi kategorií: •
Základní: Nejznámější navigace obsahující hlavní odkazy prezentace. Může mít horizontální (nejčastěji v horní části prezentace) či vertikální (nejčastěji vlevo) podobu.
•
Hierarchická: Nazývaná též stromová. Nejčastější výskyt je v katalozích ať již vyhledávačů nebo elektronických obchodů. Umožňuje zobrazení mnoha položek při zachování přehlednosti a úspory místa.
•
Kontextová: Jedná se o odkazy přizpůsobující se svým textem i cílem obsahu stránek. Jedním ze zástupců této navigace je i již výše zmíněná drobečková navigace.
•
Mapa webu: Plní úlohu poslední záchrany v případě, že se návštěvník ztratí ve změti odkazů. Jedná se o hierarchicky seřazený strom textových odkazů. Využívá se především na rozsáhlejších informačních webech a proto se prezence této navigace u stránek CK nepředpokládá.
•
Rejstřík: Plní stejnou funkci jako mapa webu, ale má podobu abecedně seřazeného seznamu nejčastěji umístěného do „combo boxu“.
•
Vyhledávač: O tomto prvku pojednám šířeji v následující kapitole.
•
Odkazy v textu: Všem dobře známé hypertextové odkazy nacházející se přímo v textu.
-9-
4.1.2 Rychlý, jednoduchý a úplný nástroj pro vyhledávání zájezdů V případě, že zákazník CK již dopředu zná parametry konkrétní dovolené, je modul vyhledávání na místě. Záleží pak již na tvůrci stránek, jak chytře celé vyhledávání vyřeší. Základními parametry zájezdu jsou typ zájezdu, destinace, termín, způsob dopravy, cena, last-minute akce a tak by mělo být koncipováno i vyhledávání. Případné rozšiřující parametry samozřejmě nejsou na škodu, avšak měly by být výrazně odděleny od základního vyhledávání, aby svou složitostí zákazníka spíše neodradily od využití této služby. Panel vyhledávání by měl být dostupný z každé stránky.
4.1.3 Základní prvky a styl stránky Elektronické obchody mají obvykle své specifické rozložení prvků, na které jsou již uživatelé zvyklí. U prezentací CK, které jsou vlastně elektronickým obchodem s turistickými službami, tomu není jinak. Základní prvky, které by měly obsahovat byly zmíněny v předešlých dvou kapitolách a nyní je důležité je vhodně a samozřejmě konvenčně rozmístit. Obecná pravidla se týkají především grafických prvků a formátu textu. Logo společnosti či navigace by měli být na každé stránce identické a texty formátované do odstavců s krátkými větami. Samozřejmostí je také dodržování hierarchie nadpisů, jejich velikosti a stylu. Čím důležitější nadpis, tím výraznější (větší) text. Používání více než dvou fontů na celou prezentaci je přímo nevkusné. Většina webdesignerů si naštěstí vystačí pouze s jedním. Doporučené je také používat standardní fonty jak ukazuje pojednání Molly E. Holzschlag o 14ti nejčastějších příčinách opuštění stránek uživatelem. Domovská stránka – Stránka s největší návštěvností celé prezentace. Má funkci prvního kontaktu a dojmu. Zákazník by měl na první pohled poznat na jakých stránkách se nachází a co mu mohou nabídnout, jelikož lze předpokládat i fakt, že na daný web se dostal pomocí odkazu ve vyhledávači nebo e-mailu. Domovská stránka CK by měla být intuitivní a jednoduchým způsobem poskytnout zákazníkovi co možná nejvíce lákavých informací či nabídek.
- 10 -
4.2 Přístupnost Přístupnost webu je jinými slovy jeho bezbariérovost. Znamená to, že informace na webu obsažené jsou dostupné nezávisle na uživatelově zobrazovacím zařízení (PDA, mobilní telefony, WebTV, ...), jeho nastavení (např. přítomnost různých pluginů), a softwarovém vybavení (stará verze prohlížeče, alternativní prohlížeč, hlasová čtečka, ...). Jednotlivé body přístupnosti prezentace můžeme shrnout takto: •
korektní zobrazení v nejpoužívanějších prohlížečích (Internet Explorer, Firefox, Opera)
•
zobrazení na jiných čtečkách než je PC, například PDA či mobilní telefon
•
možnost zvětšení písma při zachování přehledného zobrazení stránek
•
absence podtržení odkazů či výrazné navigace a nekontrastní barvy (negativní důsledek pro barvoslepé)
•
korektní zobrazení bez kaskádových stylů (dobrá přístupnost pro vyhledávací roboty)
•
možnost jednoduchého prohlížení stránek klávesnicí
•
validita kódu stránek
•
úprava stránek pro možnosti tisku Trendem poslední doby je umožňování přístupu na web uživatelům s určitým
zdravotním postižením (nevidomí, lidé s pohybovým handicapem, barvoslepí, slabozrací, ...), což dokládá i novela Zákona č. 365/2000 Sb., o informačních systémech veřejné správy z roku 2006. Tato novela nařizuje prezentacím veřejné správy dodržovat určitá pravidla přístupnosti (viz lit. [26]) a zajišťuje aby byl jakýkoliv uživatel schopen získat požadované informace z webu a to i za pomocí technologii jako např. hlasové čtečky, elektronická lupa či Braillovský výstup. U CK na takovouto přístupnost být kladen důraz nemusí jelikož opakovaná návštěva stránek CK unikátní osobou je sezónní záležitost a v takovém případě se dá spoléhat na pomoc někoho v jejich okolí. Novodobé vysokorychlostní připojení svádí mnohé webdesignery k tvorbě graficky propracovaných avšak velikostně přemrštěných webů. Dlouhá doba načítání stránek může uživatele s pomalým připojením odradit nebo ho dokonce uvézt do omylu, že daná prezentace vůbec nefunguje. Test bude proveden pomocí online nástroje W3C Link checker (viz lit. [25]). Pomalejší modemové připojení je pro objektivnější měření upraveno o běžnou ztrátu paketů a za každý objekt je přičítáno zpoždění 0.2 sekundy za - 11 -
obousměrnou odezvu. Z čehož vyplývá, že při průměrných 100 objektech na stránce CK se jedná o teoretické zpoždění 20 sekund. Ne vždy tomu tak ale je a proto je třeba brát výsledná čísla s nadhledem.
4.3 Informační hodnota a legislativa Zde bude vycházeno z pravidel daných zákonem o cestovním ruchu č. 159/1999 Sb. CK musí mít dle zákona vydané prospekty v tištěné formě obsahující alespoň: termín, cenu vč. měny, popis rekreace, všeobecné podmínky. Tyto tištěné materiály může nahradit webová stránka, pokud také obsahuje předepsané náležitosti. Každá CK by měla mít na svém webu: •
úplnou adresu kanceláře
•
úřední hodiny
•
telefonické kontakty
•
kde je pojištěna proti úpadku
•
nabídku jednotlivých rekreací
•
všeobecné podmínky o postup pro přihlášení zákazníka na akci o postup při zrušení zájezdu ze strany zákazníka i CK o reklamaci o kontakty o typy pojištění o povinnosti zákazníka o jméno pojistitele proti úpadku o úpravy ceny zájezdu (vyšší moc, stávka, válečný stav v zemích cílových či tranzitních, atd.) o velikost, počet a hmotnost zavazadel o popis případných slev Pro lepší informovanost zákazníka by se CK měly také držet následujících
pravidel, které usnadňují jednání s kanceláří. •
nabídky
Last
Minute
musí
být
vždy
vypsány
na
jednoznačně
identifikovatelný zájezd a termín. •
kontakty by měly obsahovat co nejvíce možných typů spojení s kanceláří (pevná linka, mobil, fax, email). - 12 -
•
adresa kanceláře by měla být podpořena mapkou či stručným popisem, aby zákazníci lehce kancelář našli.
•
jednotlivé typy rekreací by měly být na webu podpořeny autentickými fotografiemi z vlastního fotoarchívu CK.
•
a samozřejmostí je možnost objednání či rezervace zájezdu přímo z prezentace
4.4 Shrnutí a návrhy na změny Prezentace bude na konci své analýzy obsahovat bodové ohodnocení za každé zkoumané kritérium. Musíme ale přihlédnout k podstatnosti jednotlivých kritérií a proto jim přiřadím jakési váhy. Každé kritérium může být tedy ohodnoceno 0 až 10 body (čím vyšší, tím lepší) a následně mu bude přiřazena váha v celkové analýze od 0.1 do 1.0, kterou budu výsledek násobit. Body budou přiřazovány podle počtu a závažnosti nedostatků. Váhy jsou určeny s ohledem na zaměření prezentace a proto má informační hodnota a přehledná navigace vyšší důležitost než samotný vzhled a styl. Výsledkem by tedy měla být konečná tabulka s globálními výsledky jednotlivých prezentací. V tomto bodě budou také nevrženy změny zjištěných nedostatků.
4.5 SEO analýza Tato část je sama o sobě obsáhlou analýzou čítající více podkategorií. Zabývá se hlavně technickým zpracováním webu a pokud se v ní zjistí více základních nedostatků, je zaručeno, že po aplikaci oprav v ní uvedených několikanásobně vzroste šance vyhledání. V této části budu tedy zkoumat zejména následující body: •
problémy HTML kódu o aplikování interních CSS stylů a JavaScriptu o pořadí bloků v kódu o nevalidní HTML kód o nedodržování správné sémantiky HTML značek o úvodní stránka
•
nevypovídající webové adresy
•
nedostatek zpětných odkazů
•
duplicity stránek
•
statický titulek
•
atributy ALT a TITLE - 13 -
5 Srovnávací analýza 5.1 Analýza stránek CK Čedok a.s. 5.1.1 Navigace Prezentace obsahuje oba typy základní navigace. Horizontální menu obsahuje hlavní kategorie vertikálního menu. Jedná se spíše o grafické zkrášlení, jelikož plní zcela stejnou funkci jako položky ve stromu. Aktuální pozice je vyřešena zabarvením příslušného tlačítka. Vertikální menu je řešeno hierarchicky (stromem) s jednou vnořenou větví. Při prvním vstupu na stránky jsou automaticky rozbalené první dvě větve, které v tomto stádiu zůstávají po celou dobu prohlížení stránek. Aktuální pozice je řešena zabarvením textu příslušné kategorie. Úlohu odkazu na domovskou stránku zde plní logo společnosti. Ve spodní části webu můžeme vidět skupinu hypertextových odkazů spřátelených webů a odkazy týkající se hlavně legislativy jako např. reklamační řád či všeobecné podmínky. Rychlé odkazy v podobě
poutavých bannerů a sekundárního vertikálního menu vhodně
doplňují celkovou navigaci především pro zákazníky, kteří na stránky přicházejí již s jistým cílem. Prezentace zcela postrádá drobečkovou navigaci, která je nahrazena dynamickými nadpisy na každé stránce. Odkazy v textu a tlačítka jsou ne příliš kontrastně rozlišeny na bílém pozadí oranžovou barvou. V době testování byly některé odkazy nefunkční či nevhodně napsané, jak ukazuje i následující výsledek W3C Link Checkeru. (viz lit. [25]) Počet chybných odkazů 7 8
Chyba Cíl odkazu je napsán nepřesně. Jedná se o Javascriptový odkaz, který nemusí vždy fungovat.
Tab. 5.1 – Chybné odkazy v prezentaci www.cedok.cz
5.1.2 Vyhledávání zájezdů Prezentace disponuje třemi vyhledávacími nástroji. Všechny tři provázejí celým webem a jsou vždy dobře viditelné. v levé části se nachází rychlé vyhledávání vhodné pro uživatele s jistým cílem, ať již se jedná o zemi či přímo hotel, který si vybral. Dalším užitečným nástrojem je vyhledávač zájezdů pomocí kódů z katalogů zájezdů. Tento nástroj je vhodný pro zákazníky, kteří si konkrétní zájezd vybrali v papírovém - 14 -
katalogu a nyní jej již chtějí pouze objednat. Šetří jim to mnoho času, který by strávili prohledáváním nabídky či zadáváním správných parametrů do hlavního vyhledávání. Posledním a uživateli nejpoužívanějším nástrojem je hlavní vyhledávání, které plně odpovídá kritériím analýzy. Jediným nedostatkem je absence možnosti zadat pouze jediné kritérium vyhledávání např. typ zájezdu či destinaci. Kombinace těchto tří způsobů vyhledávání tvoří velice komplexní a užitečný nástroj zaručující nalezení relevantních zájezdů.
5.1.3 Základní prvky a styl stránky Na celém webu je použit jediný font a tím je Arial, který se řadí mezi standardní. V případě absence tohoto typu písma v uživatelově prohlížeči jsou jako alternativní fonty nastaveny Verdana, Geneva, Helvetica a sans-serif, který se se 100% určitostí nachází v každém zařízení schopném prohlížet webové stránky. Logo je umístěno klasicky v levém horním rohu, kde ho také běžný uživatel očekává a okamžitě tak vidí na jakých stránkách se nachází. Domovská stránka obsahuje nabídku nejaktuálnějších „last minute“ akcí s hlavními informacemi o každé z nich a upoutávky na výhodné akce či zvláštní tipy. Ve spodní části se nacházejí i aktuality týkající se CK jako např. nabídka pracovních míst a formulář pro objednání zasílání nabídek „last minute“ akcí přímo na e-mail. Stránka působí na první pohled poněkud chaoticky, ale po bližším prozkoumání se prvky domovské stránky a jejich rozložení jeví zcela logické a účelné. Uživatel přicházející na stránky CK hledá především zájezd a proto je hlavní vyhledávání umístěno v horní části stránek dokonce i zde. Naopak aktuality umístěné v dolní části vypovídají o jejich nedůležitosti pro zákazníka. Domovská stránka je opravdu účelná a z jednotlivých komponent systematicky poskládána, avšak na první pohled může svou složitostí méně zkušené uživatele odradit od použití online rezervace.
5.1.4 Přístupnost Stránky se korektně zobrazují ve všech třech nejpoužívanějších prohlížečích. Nefungují pouze některé dynamické efekty jako např. zabarvení tlačítka po najetí myši, ale to je způsobeno ignorací standardů tvůrců IE. Velkým nedostatkem je až vysoká integrace Javascriptu. Například rozbalování vertikálního menu je řešeno Javascriptem, což je velice nešikovné a při pokusu o jakousi náhradu a rozbalení menu s vypnutým Javascriptem pomocí horizontálního menu celá navigace zkolabuje. V případě PDA je web zcela optimalizován. Prezentace není přizpůsobena změně velikosti písma a po jeho zvětšení se některé části navigace stávají nepoužitelnými. Také použití absolutních - 15 -
jednotek pro velikost písma je pro přístupnost nevhodná. Odkazy jsou odlišeny jak jednotnou barvou tak i podtržením avšak oranžová barva na bílém pozadí je nevhodná a při vyšších kontrastech zcela zaniká. Stejně špatně je na tom i sekundární menu se světle modrým pozadím a modrým textem. Slabozrací a barvoslepí by tudíž měli veliké problémy se zobrazením těchto odkazů a textů. Velice dobrý nástroj je online kontrolor kontrastu barev (viz lit. [22]). Zobrazení bez kaskádových stylů CSS je také optimální. Prezentace jako taková nemá vlastní styly pro tisk, ale v případě tisku zájezdu je text čitelný bez zbytečných obrázků a navigace. Absence tabulátorových indexů je kompenzována dobrým pořadím prvků v kódu a proto je web jednoduše ovladatelný i pomocí klávesnice. Kód stránek je nevalidní, ale počet chyb je přiměřený rozsahu celé prezentace. Jedná se však o základní chyby, většinou zpětná lomítka u nepárových značek, na jejichž odstranění by i méně zkušený programátor nepotřeboval mnoho času. V následující tabulce je uvedena doba načítání hlavní stránky v závislosti na rychlosti připojení uživatele. Doba načítání 291.15 sekund 157.97 sekund 138.95 sekund 93.29 sekund 45.77 sekund 26.62 sekund
Rychlost připojení 14.4K 28.8K 33.6K 56K ISDN 128K T1 1.44Mbps
Tab. 5.2 – Doba načítání prezentace www.cedok.cz v závislosti na rychlosti připojení
5.1.5 Informační hodnota a legislativa Úplná adresa kanceláře doplněná přehlednou mapkou je poměrně těžko k nalezení v sekundární navigaci pod položkou „pobočky kanceláře“. Zde se také nacházejí úřední hodiny a telefonické kontakty každé pobočky. Písemný kontakt je zajištěn pomocí formuláře, který má každá pobočka vlastní. Nedostatkem je nulová kontrola odeslaného dotazu, jelikož CK nezasílá žádné potvrzení o přijetí požadavku a zákazník tak může na dotaz zcela zapomenout. Odkaz na zákonné pojištění ve spodní části webu odkazuje na kopii certifikátu společnosti UNIQUA a nabídka jednotlivých rekreací je řešena katalogově pomocí přehledné navigace. Všeobecné podmínky jsou přehledně rozděleny pomocí odkazů na příslušné kapitoly a obsahují všechny předepsané části. Informace o last minute zájezdech jsou zpracovány dostatečně dopodrobna již na domovské stránce a případný zákazník tak nemusí jednotlivé zájezdy zkoumat detailně.
- 16 -
5.1.6 Shrnutí a návrhy na změny Při podrobném zkoumání stránek jsem narazil na chyby, kterým by se měli tvůrci vyvarovat. Jako největší nedostatek je bezpochyby značné využití Javascriptu. Obecně dopadla přístupnost webu nejhůře, což je dozajista způsobeno tím, že pro mnohé webdesignery se toto téma stává aktuální až nyní. Jedním z cílů analýzy bylo zjistit nedostatky stránek, které se dotýkají jak uživatelů tak i majitelů a navrhnout jejich řešení. Následuje shrnutí nejnutnějších oprav: 1. Úplná eliminace Javascriptu či alespoň částečné odstranění z navigace. Mnohem modernější a bezproblémové je dnes menu tvořené čistě CSS stylováním, kde se využívá především „onhover“ událostí. 2. Opravení neexistujících či zavádějících odkazů, které by mohli uživatele zmást nebo dokonce odradit od dalšího prohlížení stránek. 3. Přizpůsobení grafiky webu alespoň do té míry, aby byl text i při zvětšení slabozrakým uživatelem stále čitelný. 4. Nahrazení absolutních jednotek velikosti písma „px“ relativními jednotkami „em“. 5. Změna barvy odkazů a některých nadpisů na kontrastnější barvu zapadající do celkového designu stránek. 6. Chyby v ve validitě kódu jsou jednoduše opravitelné a jedná se pouze o doplnění zpětného lomítka u nepárové značky a správný zápis entity & tímto způsobem & jelikož samotný znak & je právě znakem entit. 7. V kontaktních formulářích přidat potvrzovací e-mail o přijetí dotazu nebo do kontaktů přidat přímo e-mailovou adresu. V následující tabulce se nachází bodové ohodnocení jednotlivých kritérií. Kritérium
5.2 Analýza stránek CK Soleada 5.2.1 Navigace Horizontální menu je jediným zástupcem základní navigace na stránkách. Je velice kontrastní a přehledné. Odkaz na domovskou stránku je řešen dvojím způsobem. Jednak aktivním logem a také položkou v základní navigaci „úvod“. Zcela nahoře můžeme vidět tři odkazy, které mají pro majitele nejspíše vysokou hodnotu, jelikož svým vysokým kontrastem odtahují pozornost od základní nabídky. Ve spodní části se nachází odkaz na mapu stránek, která je v takto nepřehledné navigaci přímo nutností. Všechny odkazy jsou stejně jako u předešlé prezentace málo kontrastní. V době testování byl 1 odkaz nefunkční, jak ukazuje následující výsledek W3C Link Checkeru. (viz lit. [25]) Počet chybných odkazů 1
Chyba Jedná se o Javascriptový odkaz, který nemusí vždy fungovat.
Tab. 5.4 – Chybné odkazy v prezentaci www.soleada.cz
5.2.2 Vyhledávání zájezdů Již umístění odkazu pro vyhledávání až na posledním řádku celé prezentace vypovídá o jeho špatných kvalitách. Web využívá externích vyhledávacích strojů (Jyxo, Google) pomocí parametru „domain“, což sebou nese hned několik úskalí. 1. Uživatel je bez upozornění přesměrován přímo na stránku vyhledávače 2. Uživatel je nucen využívat logických spojek a parametrů daného vyhledávacího stroje. 3. Výsledek hledání je podmíněn zaindexováním daného výrazu vyhledávačem. 4. Po úspěšném nalezení výsledků je uživatel zahlcen desítkami dokumentů, avšak ne všechny jsou informace o zájezdech, jelikož jsou prohledávány na dané slovní spojení celé stránky.
5.2.3 Základní prvky a styl stránky Na celém webu je použit jediný font a tím je Verdana, který se řadí mezi standardní. V případě absence tohoto typu písma v uživatelově prohlížeči je jako alternativní font nastaven sans-serif, který se se 100% určitostí nachází v každém zařízení schopném prohlížet webové stránky. Logo je umístěno klasicky v levém horním rohu, kde ho také běžný uživatel očekává a okamžitě tak vidí na jakých stránkách se nachází. Velice matoucí je absence kurzoru při přejíždění nad menu. - 19 -
5.2.4 Přístupnost Stránky se korektně zobrazují ve všech třech nejpoužívanějších prohlížečích. V Opeře se však nezobrazí základní nabídka, což je z důvodů chybného Javascriptu. Opět se tedy jedná o menu podporované Javascriptem, které je v případě jeho absence nefunkční a dokonce se ani nezobrazí. I přes svou vysokou nevaliditu s 85 chybami se web na PDA zobrazí zcela správně. Stejně jako v předešlé analýze ani zde není brán zřetel na možnost změny velikosti písma uživatelem a při větších velikostech se prezentace stává neovladatelná. Odkazy jsou správně odlišeny od textu, ale je použito oranžové barvy na bílém pozadí s čímž by měli slabozrací a barvoslepí problémy při čtení textů, jak ukazuje nástroj na měření kontrastu barev (viz lit. [22]). Zobrazení bez kaskádových stylů je absolutně nepřístupné a v případě emulace textového prohlížeče je text zcela rozhozen a i při zapnutém Javascriptu je navigace nefunkční. Stránky nemají vlastní styly pro tisk informací o jednotlivých zájezdech, ale prohlížeče jsou již dnes natolik inteligentní, že výstup z tiskárny je použitelný. Prezentace postrádá podporu ovládání klávesnicí a navigace je tak zcela nefunkční. V následující tabulce je uvedena doba načítání hlavní stránky v závislosti na rychlosti připojení uživatele. Rychlost připojení 14.4K 28.8K 33.6K 56K ISDN 128K T1 1.44Mbps
Tab. 5.5 – Doba načítání prezentace www.soleada.cz v závislosti na rychlosti připojení
5.2.5 Informační hodnota a legislativa Úvodní slovo majitelů CK působí vstřícně a nově příchozí uživatel má možnost dozvědět se ihned s kým má tu čest. Neustále obnovované aktuality ve spodní části navozují uživateli pocit vyšší péče ze strany provozovatele. Ankety s vhodně volenými otázkami také působí přívětivě. Na domovské stránce samozřejmě nechybí seznam aktuálně nadcházejících zájezdů se stručnými informacemi. Adresář kanceláře nalezneme pod odkazem Kontakty v hlavní navigaci i ve spodní části stránek. Je doplněna mapkou a úředními hodinami. Tamtéž jsou umístěny i telefonické kontakty. CK navíc využívá novodobých trendů v komunikaci a přidává své UID (User Identification Number) a dokonce Skype číslo, což ocení zejména mladší - 20 -
generace zákazníků. Ihned na domovské stránce vidíme blok s pojištěním CK proti úpadku s možností stažení garančního listu a kontrolou údajů přímo na stránkách pojišťovny. Nabídka jednotlivých rekreací je rozdělena dle typu zájezdů v hlavní nabídce. Všechny zákonem nařízené všeobecné podmínky si zákazník může přečíst až při samotném objednávání zájezdu. CK vzhledem k exklusivitě některých zájezdů nedisponuje nabídkami last minute akcí. Jelikož je hlavní destinací CK Latinská Amerika, jsou vhodně publikovány informace o jednotlivých zemích spolu s fotografiemi. Pro většinu zákazníků je tento kraj zcela neznámý a uvedené informace je mohou jen kladně přesvědčit. Rozhodně nevhodná pro majitele CK je návštěvní kniha. Vždy se najde nespokojený zákazník, který si bude chtít postěžovat a případně uškodit. Návštěvní kniha je pro tento případ nejvhodnějším nástrojem.
5.2.6 Shrnutí a návrhy na změny Při podrobném zkoumání stránek jsem narazil na chyby, kterým by se měli tvůrci vyvarovat. Největším nepřítelem je opět Javascript a ním tvořená nabídka. Nejhůře opět vyšla přístupnost prezentace. Jedním z cílů analýzy bylo zjistit nedostatky stránek, které se dotýkají jak uživatelů tak i majitelů a navrhnout jejich řešení. Následuje shrnutí nejnutnějších oprav: •
Úplná eliminace Javascriptu či alespoň částečné odstranění z navigace. Mnohem modernější a bezproblémové je dnes menu tvořené čistě CSS stylováním, kde se využívá především „onhover“ událostí.
•
Opravení neexistujících či zavádějících odkazů, které by mohli uživatele zmást nebo dokonce odradit od dalšího prohlížení stránek.
•
Přizpůsobení grafiky webu alespoň do té míry, aby byl text i při zvětšení slabozrakým uživatelem stále čitelný.
•
Nahrazení absolutních jednotek velikosti písma „px“ relativními jednotkami „em“.
•
Změna barvy odkazů a některých nadpisů na kontrastnější barvu zapadající do celkového designu stránek.
•
Opravit validitu stránek. Bylo použito neexistujících parametrů a hrubě byla porušena i sémantika celého webu.
•
Vytvořit interní vyhledávání zájezdů alespoň podle základních kritérií. - 21 -
•
Odkaz na všeobecné podmínky přemístit do základní navigace či přímo na domovskou stránku.
•
Odstranit návštěvní knihu.
V následující tabulce se nachází bodové ohodnocení jednotlivých kritérií. Kritérium
6 Interpretace výsledků Obě prezentace jsou pro zkušené uživatele internetu postačující. Problém však nastává v případě, kdy mají méně zkušení a opatrní uživatelé vypnutý Javascript. V takovém případě jsou pro ně prezentace zcela nepoužitelné. V případě celkové přístupnosti nevyhovuje standardům ani jedna a to zřejmě z toho důvodu, že se většina webdesignerů stále nepřesvědčila o důležitosti tohoto kritéria nebo jsou prostě líní web zpětně optimalizovat. Nicméně úspěšněji dopadla v tomto testu prezentace CK Čedok a.s. Stručné shrnutí celé analýzy uvádí následující tabulka a graf.
7 SEO analýza a její základní kritéria Tato analýza se zaměřuje na vyhledání chyb a návrhu jejich řešení pro web z pohledu optimalizace pro vyhledávače (SEO). Nyní zde rozeberu veškeré nedostatky stránek po jednotlivých problémech. Navrhnu jejich řešení a označím prioritou na stupnici od 1 do 10 (10 je nevyšší) dle důležitosti úpravy za nadpisem problému v hranatých závorkách.
7.1 Problémy HTML kódu 7.1.1 Aplikování interních CSS stylů a JavaScriptu [4] Pod tímto možná ne příliš srozumitelným bodem se skrývá problém, který nastane, když se do samotného HTML dokumentu vkládají CSS styly a skripty JavaScriptu (+ další jiné aplikace nepodporované vyhledávacími roboty, např. Flash).
7.1.2 Pořadí bloků v kódu [7] Vyhledávač (myšlen jeho robot s algoritmy posuzující relevanci stránek) v tomto ohledu funguje podobně jako uživatel, zjednodušeně řečeno: části textu, které jsou v HTML kódu umístěny nahoře, se hodnotí jako důležitější, než-li text, který je umístěn v dolních částech kódu.
7.1.3 Nevalidní HTML kód [5] Světově uznávané konsorcium W3C (http://www.w3c.org) vydává pravidla a doporučení pro tvorbu webových stránek. Nedodržování těchto pravidel a doporučení může činit určité problémy. Znemožňuje zobrazení stránek na některých prohlížečích (především mobilních). Znesnadňuje přístup robotům vyhledávačů, a tím také snižuje množství obsahu, který roboti skutečně použijí pro indexaci stránky (jednoduše nepoužijí tolik významového textu, důležitého pro ohodnocení stránky podle slov, v textu se vyskytujících, podobný problém jako u předchozího bodu). Umístěním v neoptimalizovaném kódu jsou významové texty stránek
roboty bezdůvodně
podhodnocovány, což se projeví v nižším umístění ve výsledcích vyhledávání.
7.1.4 Nedodržování správné sémantiky HTML značek [3] Sémantikou se rozumí používání správných HTML značek pro různé úseky obsahu. Podrobné informace o psaní sémantického webu se nacházejí na stránkách „Sémantika – pravý význam HTML značek“ (viz lit. [20]).
- 24 -
V tomto bloku textu si uděláme rychlý přehled do sémantiky v HTML, kde si názorně ukážeme, jaké značky a pro co je konkrétně používat. HTML nadpisy
...
Jedná se o párové tagy označující důležitost klíčových slov. H1 má nejvyšší prioritu a vyhledávač ho tak bere jako základní klíčové slovo celé prezentace. Párový tag <strong>
Strong (z angličtiny v překladu silný, výrazný) vyznačuje úsek textu, na který klademe důraz (přirovnejme to ke zvýšenému hlasu při čtení důležitého slova v textu). V prohlížeči se zobrazuje obvykle tučným písmem. Je dobré do něj vkládat klíčová slova a fráze. Párový tag
Tagem b (z anglického slova bold = tučný) se označují části textu, které bychom rádi ztučnily. Upozorníme ovšem, že slovo tučný plně neodpovídá slovu výrazný. To je tedy hlavní rozdíl mezi a <strong>. Vytvoření ztučněného textu s využitím nemá valný význam z hlediska optimalizace pro vyhledávače. Ztučnění pomocí CSS
Další možností jak ztučnit text je použití kaskádových stylů (CSS). Je k tomu určena vlastnost font-weight a přiřazuje se k ní hodnota bold. Tedy ve výsledku tato deklarace vypadá následovně: font-weight: bold; Toto ztučnění nemá žádný význam z hlediska optimalizace pro vyhledávače. Párový tag <em>
Familiárně řečeno: Mladší bratr tagu strong. Tento prvek (od slova emphatic = výrazný) přidá textu menší váhu, než-li tag strong. V prohlížečích se vykresluje kurzívou. Používá se tedy na části textu, které je třeba zdůraznit a vypsat kurzívou. Párový tag
Stejný jako tag , s jedinou výjmkou, a sice že text formátuje do kurzívy (ze slova italic = kurzíva) Vytvoření kurzívy pomocí CSS
Vytváří se pomocí zápisu: font-style: italic; - 25 -
7.1.5 Úvodní stránka [5] Úvodní stránka je to, co vidí a čte vyhledávací robot jako první. Je pro něho něco jako úvod knihy a dozví se tak, o čem že daná prezentace pojednává. Měla by poskytovat výstižné a stručné texty obsahující hlavní klíčová slova týkající se zaměření webu.
7.2 Nevypovídající webové adresy [8] Stránky často obsahují adresy v podobě http://www.neco.cz/index.php?id=1&ozn=ospol nebo také například http://www.neco.cz/index.php?menu=produkty&id=13&ozn=prod. Jedná se o klasickou adresu doplněnou parametry pro skriptovací jazyky. Tyto parametry ovšem vyhledávače opomíjejí a indexují tak pouze základní adresu http://www.neco.cz/index.php. A navíc stejně jako uživatel, tak také vyhledávač z nich nevyluští žádnou zajímavou informaci (rozumějme klíčové slovo), která by se mohla promítnout do výsledných pozic stránek v hledání. Řešením je implementace velice moderních adres tzv. CoolUri například ve tvaru http://www.neco.cz/o-spolecnosti.html nebo http://www.neco.cz/produkty/poklopy/popis-poklopu.html Takto konstruované adresy, připomínající zanořování adresářů, jsou velice užitečné nejen pro vyhledávače, ale taktéž v nemalé míře pro uživatele, který letmým pohledem na adresu pozná, v které kategorii se nachází. Tato metoda se provádí v případě PHP pomocí Apache modulu mod_rewrite a souboru .htaccess v adresářové struktuře stránek. Dobře zpracovaný návod se nachází na portálu Interval (viz lit. [10]). V případě ASP je podrobný návod opět na stránkách Intervalu (viz lit. [19]).
7.3 Nedostatek zpětných odkazů [9] Zpětné odkazy fungují ve světě vyhledávačů jako doporučení. Zpětným odkazem se rozumí jakýkoliv HTML odkaz, který vede ze stránky A na stránku B. Ideální bývá, pokud je stránka A umístěna na jiné doméně, než-li stránka B.
- 26 -
Váha jednotlivých zpětných odkazů je různá, vyšší váha bývá u odkazů ze stránek s vysokým rankem a se souvisejícím obsahem s Vaším webem. Čím více kvalitních odkazů vede na webovou stránku, tím je její umístění lepší. Neopomínejme ani na fakt, že lidé skrze tyto zpětné odkazy chodí na cílové stránky, mezi těmito návštěvníky se tedy mohou objevit i potencionální klienti. Pro zjištění počtu zpětných odkazů je použita online aplikace společnosti ASAP Consulting s.r.o. (viz lit. [9]).Bohužel neobsahuje výsledky Seznamu a Atlasu, které také patří mezi oblíbené. Zde je provedena analýza zadáním dotazu ve tvaru „link: adresa“, která nám vrátí seznam stránek obsahujících zadaný odkaz.
7.4 Duplicity stránek [6] Ačkoliv jsou vyhledávací roboti vcelku inteligentními stroji, nedokáží rozpoznat jednu stránku, na kterou vede více podob forem odkazů.
7.5 Statický titulek [10] Titulkem se na webových stránkách rozumí text, který je v HTML kódu uzavřen mezi značkami a . Uživateli se zobrazí v záhlaví prohlížeče. Pro vyhledávače je titulek nesmírně důležitý. A to především ve dvou aspektech: •
Z pohledu klíčových slov - slova vyskytující se v titulku webu jsou roboty velice dobře ohodnoceny.
•
Z pohledu vytváření duplicit - vyhledávači jasně sdělíme, že každá stránka webu je zcela jedinečná (má tedy jiný obsah) a tím se pro něj stane i „půvabnější“.
Titulek by se měl tudíž obměňovat na každé stránce a měl by obsahovat klíčová slova vztahující se k obsahu dané stránky.
7.6 Atributy ALT a TITLE [10] Jedním z nejdůležitějších prvků SEO, spojených s obrázky (tag IMG), je jejich atribut ALT, který vlastně říká vyhledávači, co je na obrázku. Z atributů ALT a TITLE si vyhledávače berou velmi cenné informace i o stránce jako takové. Vyhledávače potom hodnotí stránku asi tak, že stránka je o tom, o čem jsou obrázky na ní vložené. Pokud stránka bude obsahovat relevantní obrázky (dle atributů ALT a TITLE), bude posunuta ve výsledcích vyhledávání výše. - 27 -
8 SEO analýza prezentace CK Čedok a.s. 8.1 Aplikování interních CSS stylů a Javascriptu 8.1.1 Popis problému Podle moderních pravidel tvorby webu je velice dobrým zvykem, že se obě technologie oddělují od samotné HTML stránky do externích souborů. Výsledek to má z pohledu pro vyhledávače zejména ten, že zdrojový kód není tak objemný, čímž se stává vhodnějším pro SEO. Obecně platí pravidlo, že čím je HTML kód delší, tím více se znehodnocuje samotný obsah webové stránky pro vyhledávače.
8.1.2 Navrhované řešení Kaskádové styly aneb také CSS se oddělují do externích stylopisů pomocí HTML zápisu: kdy místo ADRESA_SOUBORU doplníme cestu k příslušnému souboru (obsahuje většinou koncovku *.css) a tento řádek kódu umístíme mezi značky a , které se vyskytují téměř na samotném začátku zdrojového kódu dokumentu. Na současné verzi webu jsou jak externí připojené soubory tak i prvky na které jsou aplikovány tzv. přímé (inline) styly. Ty se zapisují pomocí HTML atributu style. Takto přímo zapsaný styl dokáže ušetřit práci, ovšem na druhou stranu znehodnocuje kód. Příklad inline zápisu:
Další možností připojení stylů k dokumentu je jejich zapsání mezi značky <style> a . Toto řešení však také není vyhovující. JavaScript se odděluje do externího souboru pomocí HTML zápisu: <script src="ADRESA_SOUBORU" type="text/javascript"> kdy místo ADRESA_SOUBORU doplníme cestu k příslušnému souboru (obsahuje většinou koncovku *.js) a tento řádek kódu umístíme mezi značky a (není to ovšem povinné). Zcela určitě je tedy důležité všechen stylopis a skripty JavaScriptu zapsané přímo do samotného dokumentu vyhledat a následně jej separovat. - 28 -
8.2 Pořadí bloků v kódu 8.2.1 Popis problému Stávající pořadí bloků je následující: Navigace -> Vyhledávání -> Obsah (last minute -> aktuality) -> Zápatí kde je obsah na domovské stránce tvořen nejdříve last minute akcemi a dále aktualitami.
8.2.2 Navrhované řešení Navigace se nachází správně na prvním místě, ale obsah by se měl přesunout před vyhledávání, jelikož je rozhodně důležitější. výsledné pořadí bloků bude tedy následující: Navigace -> Obsah -> Vyhledávání -> Zápatí
8.3 Nevalidní HTML kód 8.3.1 Popis problému Jak již bylo řečeno v analýze přístupnosti, jedná se o pár základních chyb ve zpětných lomítkách nepárových značek a špatném zápisu entit.
8.3.2 Navrhované řešení Doplnit zpětná lomítka následujícím způsobem: -> a přepsat správně entity takto: & -> &
8.4 Nedodržování správné sémantiky HTML tagů Prezentace se jeví jako sématnicky správně napsána a nepotřebuje v tomto bodě žádné opravy.
8.5 Úvodní stránka 8.5.1 Popis problému Stránka poskytuje vyhledávacímu stroji dostatek klíčových slov. Jediným problémem je odkaz vázaný na logo, který nemá atribut TITLE a robot tak vůbec nedostává informaci o majiteli stránek, což by mělo být jedním z hlavních klíčových slov. - 29 -
8.5.2 Navrhované řešení Je zcela jistě potřeba tento odkaz změnit. Dále by neměl obalovat HTML tag (vytváří do webové stránky obrázek), jak by se mohlo na první pohled zdát. Jednoduše z důvodu, že vyhledávače mají raději textový obsah, než-li obrázky, u kterých nelze přezkoumat, co je ve skutečnosti na obrázku. U textu je to zcela zjevně průkazné. Takový HTML odkaz na úvodní stránku webu by mohl vypadat takto: <strong>ČEDOK a.s. – cestovní kancelář<span> V CSS by se potom odkaz dal příslušně stylovat, např.: #logo { z-index: 5; } #logo span { width: SIRKA; height: VYSKA; cursor: pointer; position: absolute; background: transparent url("adresa") no-repeat; z-index: 10; } #logo strong { position: absolute; }
8.6 Nevypovídající webové adresy Tato prezentace využívá skriptovacího jazyka ASP a splňuje podmínku vypovídajících webových adres.
8.7 Nedostatek zpětných odkazů Prezentace má opravdu veliké množství zpětných odkazů a to především na Jyxo a Morfeo. Výsledek ukazuje následující tabulka. Vyhledávač Jyxo Morfeo Atlas Seznam
Počet zpětných odkazů 74590 46816 15971 1740
Tab. 8.1 – Počet nalezených zpětných odkazů prezentace www.cedok.cz
- 30 -
8.8 Duplicity stránek Prezentace neobsahuje duplicitní odkazy a proto není nutná žádná oprava.
8.9 Statický titulek Prezentace má vhodně tvořené titulky pro každou svou stránku. Obsahují vždy klíčová slova pro daný obsah. Ani v tomto bodě nejsou nutné žádné opravy.
8.10 Atributy ALT a TITLE Až na zmíněný atribut TITLE chybějící v odkazu loga obsahují všechny obrázky a odkazy potřebné parametry.
8.11 Shrnutí analýzy Tato prezentace nepotřebuje mnoho oprav a měla by být vyhledatelná na všechna svá klíčová slova. Ovšem je zřejmé, že nebude obsazovat první pozice ve výsledku hledání. Dokazuje to i pořadí ve vyhledávači Seznam na vybraná slova či slovní spojení. Slovo
Pořadí / Celkem výsledků
zájezd
25 / 226937
poznávací zájezdy
4 / 138594
cestovní kancelář
4 / 262658
Tab. 8.2 – Umístění prezentace www.cedok.cz ve vyhledávači Seznam
- 31 -
9 SEO analýza prezentace CK Soleada 9.1 Aplikování interních CSS stylů a Javascriptu 9.1.1 Popis problému Podle moderních pravidel tvorby webu je velice dobrým zvykem, že se obě technologie oddělují od samotné HTML stránky do externích souborů. Výsledek to má z pohledu pro vyhledávače zejména ten, že zdrojový kód není tak objemný, čímž se stává vhodnějším pro SEO. Obecně platí pravidlo, že čím je HTML kód delší, tím více se znehodnocuje samotný obsah webové stránky pro vyhledávače.
9.1.2 Navrhované řešení Kaskádové styly aneb také CSS se oddělují do externích stylopisů pomocí HTML zápisu: kdy místo ADRESA_SOUBORU doplníme cestu k příslušnému souboru (obsahuje většinou koncovku *.css) a tento řádek kódu umístíme mezi značky a , které se vyskytují téměř na samotném začátku zdrojového kódu dokumentu. Na současné verzi webu jsou jak externí připojené soubory tak i prvky na které jsou aplikovány tzv. přímé (inline) styly. Ty se zapisují pomocí HTML atributu style. Takto přímo zapsaný styl dokáže ušetřit práci, ovšem na druhou stranu znehodnocuje kód. Příklad inline zápisu:
Další možností připojení stylů k dokumentu je jejich zapsání mezi značky <style> a . Toto řešení však také není vyhovující. JavaScript se odděluje do externího souboru pomocí HTML zápisu: <script src="ADRESA_SOUBORU" type="text/javascript"> kdy místo ADRESA_SOUBORU doplníme cestu k příslušnému souboru (obsahuje většinou koncovku *.js) a tento řádek kódu umístíme mezi značky a (není to ovšem povinné). Zcela určitě je tedy důležité všechen stylopis a skripty JavaScriptu zapsané přímo do samotného dokumentu vyhledat a následně jej separovat. - 32 -
9.2 Pořadí bloků v kódu 9.2.1 Popis problému Stávající pořadí bloků je následující: Důležité odkazy -> Obsah (uvítání -> aktuální akce -> aktuality) -> Zápatí kde je obsah na domovské stránce tvořen nejdříve uvítáním a dále aktuálními akcemi. Jako poslední následují aktuality.
9.2.2 Navrhované řešení Robot si již dle dříve zmíněného problému s Javascriptem vůbec nepřečte položky navigace, což jsou jedny z nejdůležitějších klíčových slov. Uvítání obsahuje několik klíčových slov, ale stále mají nižší hodnotu než odkazy v nabídce. Aktuality na této prezentaci obsahují důležité informace i pro zákazníky a proto také obsahují důležitější klíčová slova nežli uvítání. Po odstranění nedostatku s Javascriptem by pořadí v kódu mělo vypadat takto: Navigace -> Obsah (aktuální akce -> aktuality -> uvítání) -> Zápatí
9.3 Nevalidní HTML kód 9.3.1 Popis problému Stránky tato doporučení zmíněného konsorcia ne plně dodržují a bylo by dobré optimalizovat kód nejméně tak, aby vyhovovaly validátoru, jenž je umístěn na stránkách: http://validator.w3.org/.
9.3.2 Navrhované řešení Optimalizovat alespoň dle standardů W3C.
9.4 Nedodržování správné sémantiky HTML tagů 9.4.1 Popis problému Stránky bohužel obsahují zcela nesémantické značky. Využívají tabulky pro rozložení některých prvků, což je již doslova prehistorická technika, po které přišla tzv. „divová“ vlna, která je sice méně nevyhovující, ale také nevhodná. Ne všechny odstavce jsou správně označeny tagem
. Používání tagů pro odrážky a jiné prvky, které očividně nejsou obrázky jako takovými, je také zcela nevhodné a stránka tím tak zbytečně zvětšuje svůj objem. Nejzávažnějším problémem je absence značek nadpisů (h1...h6), které označují ta nejklíčovější slova. - 33 -
9.4.2 Navrhované řešení Kompletně zrušit tabulkový layout a nahradit ho novým sémantickým zápisem. Vytvořit nové CSS menu použitím HTML seznamu, který se zapisuje značkami
a . Příklad takového HTML menu:
Položka 1
Položka 2
Položka 3
Pomocí kaskádových stylů (CSS) se dají seznamy velice dobře stylovat a výsledek bude na pohled stejný, ovšem sémanticky mnohem správnější a navíc nebude vyžadovat Javascript. Odstavce zapisovat do již zmíněných značek a tím se vyvarovat častému užívání značek . Odrážky, logo a jiné grafické prvky, které nejsou obrázky v pravém slova smyslu, by měli být uvedeny ve stylu daného prvku např. takto: background: url("obr/odrazka.jpg") no-repeat 0px 5px; kde poslední dva parametry určují odsazení obrázku zleva a shora.
9.5 Úvodní stránka 9.5.1 Popis problému Jediným problémem stránky je odkaz vázaný na logo, který nemá atribut TITLE a robot tak vůbec nedostává informaci o majiteli stránek, což by mělo být jedním z hlavních klíčových slov. V této souvislosti se často využívají i značky nadpisů.
9.5.2 Navrhované řešení Je zcela jistě potřeba tento odkaz změnit. Dále by neměl obalovat HTML tag (vytváří do webové stránky obrázek), jak by se mohlo na první pohled zdát. Jednoduše z důvodu, že vyhledávače mají raději textový obsah, než-li obrázky, u kterých nelze přezkoumat, co je ve skutečnosti na obrázku. U textu je to zcela zjevně průkazné. Takový HTML odkaz na úvodní stránku webu by mohl vypadat takto: <strong>Cestovní kancelář SOLEADA<span> - 34 -
V CSS by se potom odkaz dal příslušně stylovat, např.: #logo { z-index: 5; } #logo span { width: SIRKA; height: VYSKA; cursor: pointer; position: absolute; background: transparent url("adresa") no-repeat; z-index: 10; } #logo strong { position: absolute; }
9.6 Nevypovídající webové adresy I přes nerespektování některých základních pravidel SEO, mají tyto stránky tzv. CoolUri a vyhovují tak daným kritériím této analýzy.
9.7 Nedostatek zpětných odkazů 9.7.1 Popis problému Prezentace nemá příliš mnoho zpětných odkazů. Dokonce nejvíce jich má na zahraničním vyhledávači Yahoo (225). Výsledek ukazuje následující tabulka. Vyhledávač Jyxo Morfeo Atlas Seznam
Počet zpětných odkazů 100 58 43 6
Tab. 9.1 – Počet nalezených zpětných odkazů prezentace www.soleada.cz
9.7.2 Navrhované řešení Řešením je získávání nových a nových odkazů a to v řádech desítek. Prvním krokem u získání zpětných odkazů je zcela jistě registrace do katalogů. Existuje-li možnost zvolit si podobu výsledného zpětného odkazu (např. při výměně odkazů s jinými weby, při reklamě atd.) je ideální do již zmíněného textu - 35 -
odkazu (texty mezi značkami a ) umístit klíčová slova vztahující se k odkazované stránce. Vyhledávač je bere v potaz a při větším množství odkazů s určitým klíčovým slovem se to může projevit na zlepšení pozic.
