Mendelova univerzita v Brně Provozně ekonomická fakulta

SEO optimalizace webových prezentací využívající technologie Flash Diplomová práce

Vedoucí práce: Ing. Oldřich Trenz, Ph.D.

Bc. Zbyněk Dufka

Brno 2011

Tímto bych velice rád poděkoval Ing. Oldřichu Trenzovi, Ph.D., vedoucímu mé diplomové práce, za cenné rady a podporu, kterou mi poskytl při psaní této práce.

Prohlašuji, že jsem diplomovou práci „SEO optimalizace webových prezentací využívající technologie Flashÿ vypracoval samostatně dle pokynů vedoucího práce a na základě literatury uvedené v závěru této práce.

V Brně dne 26. května 2011

....................................................

4

Abstract Dufka, Z. Search Engine Optimization web presentations utilizing the Flash technology. Diploma thesis. Brno, 2011. The scope of the Thesis is the optimization of web presentations utilizing the Flash technology. The focus is to describe the theoretical background behind the problematic. It elaborates the methodology and realization of internet presentations that are based on the Flash technology. The methodology is followed by the process of optimization of a particular Flash presentation. The resume concludes the value added and includes a proposal for further development regarding the optimization.

Abstrakt Dufka, Z. SEO optimalizace webových prezentací využívající technologie Flash. Diplomová práce. Brno 2011. Tato diplomová práce se zabývá problematikou optimalizace webových prezentací využívajících technologii Flash. Snaží se poskytnout dostatečné teoretické zázemí týkající se této problematiky. Navrhuje metodiku a ukazuje realizaci budování internetových stránek založených na technologii Flash. Na metodiku navazuje optimalizace pro vyhledávače konkrétní webové Flash prezentace. V závěru práce zhodnocuje přínos a navrhuje další rozvoj dané optimalizace. Klíčová slova:

5

OBSAH

Obsah 1 Úvod a cíl práce 1.1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Cíl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Teoretická východiska práce 2.1 Definování pojmů . . . . . . . . . . . . . . . . . . . 2.1.1 Search Engine Optimization (SEO) . . . . . 2.1.2 Vyhledávací robot . . . . . . . . . . . . . . 2.1.3 Search Engine Result Page (SERP) . . . . . 2.1.4 Optimalizace vyhledávačů pro Flash . . . . 2.1.5 Javascript v SEO . . . . . . . . . . . . . . . 2.2 Optimalizace vyhledávacích strojů . . . . . . . . . . 2.2.1 Analýza SEO strategie . . . . . . . . . . . . 2.2.2 Webdesign v SEO . . . . . . . . . . . . . . . 2.2.3 Výběr klíčových slov . . . . . . . . . . . . . 2.2.4 Optimalizace on-page faktorů . . . . . . . . 2.2.5 Optimalizace off-page faktorů . . . . . . . . 2.2.6 Měření úspěchu . . . . . . . . . . . . . . . . 2.3 Komunikace s vyhledávacími roboty . . . . . . . . . 2.3.1 Sitemap . . . . . . . . . . . . . . . . . . . . 2.3.2 Robots.txt . . . . . . . . . . . . . . . . . . . 2.3.3 Meta Tag Robots . . . . . . . . . . . . . . . 2.3.4 Nofollow atribut . . . . . . . . . . . . . . . 2.4 Stránka s výsledky vyhledávání . . . . . . . . . . . 2.4.1 Náhled stránky v SERP . . . . . . . . . . . 2.4.2 Úryvek (snippet) . . . . . . . . . . . . . . . 2.4.3 Hodnocení stránek (Rank) . . . . . . . . . . 2.4.4 Placené výsledky vyhledávání . . . . . . . . 2.5 Optimalizace vyhledávačů pro Flash . . . . . . . . . 2.5.1 Úvod do optimalizace Flash obsahu . . . . . 2.5.2 SWF metadata . . . . . . . . . . . . . . . . 2.5.3 Jaký Flash obsah lze a nelze indexovat . . . 2.5.4 Optimalizace Flash obsahu pro vyhledávače 2.5.5 Odkazy ve Flash Aplikacích . . . . . . . . . 2.5.6 „Deep linkingÿ pro Flash . . . . . . . . . . . 2.6 SWFObject . . . . . . . . . . . . . . . . . . . . . . 2.6.1 Metoda statického publikování . . . . . . . . 2.6.2 Metoda dynamického publikování . . . . . . 2.7 SWFAddress . . . . . . . . . . . . . . . . . . . . . . 2.7.1 Omezení SWFAddress . . . . . . . . . . . . 2.7.2 Datová výměna mezi Flash a JavaScriptem .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8 8 9 10 10 10 10 10 10 10 11 11 11 14 15 17 19 21 21 21 22 22 22 23 24 24 27 29 29 30 30 30 31 31 32 33 34 35 35 35

6

OBSAH

3 Metodická východiska práce

37

4 Vlastní práce 4.1 Analýza SEO strategie firmy DesignBeat . . . . . . . . . 4.2 Návrh a realizace webového designu . . . . . . . . . . . . 4.2.1 Informační architektura . . . . . . . . . . . . . . 4.2.2 Rozvržení stránek . . . . . . . . . . . . . . . . . . 4.2.3 Výběr barev . . . . . . . . . . . . . . . . . . . . . 4.2.4 Technické řešení . . . . . . . . . . . . . . . . . . . 4.3 Výběr klíčových slov a optimalizace on-page faktorů . . . 4.3.1 Nástroje pro návrh klíčových slov . . . . . . . . . 4.3.2 Tabulka klíčových slov . . . . . . . . . . . . . . . 4.3.3 Optimalizace on-page faktorů . . . . . . . . . . . 4.4 Optimalizace pro Flash prezentace . . . . . . . . . . . . 4.4.1 Publikování metadata značek pro SWF . . . . . . 4.4.2 Statické a dynamické textové pole v Adobe Flash 4.4.3 Implementace SWFObject . . . . . . . . . . . . . 4.4.4 Technika Full Browser Flash . . . . . . . . . . . . 4.4.5 Implementace SWFAddress . . . . . . . . . . . . 4.4.6 Problém URL obsahující soubor SWF . . . . . . . 4.5 Příprava komunikace s vyhledávacími roboty . . . . . . . 4.5.1 Vytvoření mapy webu . . . . . . . . . . . . . . . 4.5.2 Konfigurace přístupu vyhledávačů . . . . . . . . . 4.6 Návrh a realizace off-page faktorů . . . . . . . . . . . . .

39 39 41 41 42 43 43 46 46 48 49 52 52 53 55 56 56 59 60 60 62 62

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

5 Diskuze 66 5.1 Přínosy optimalizace . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 5.2 Návrhy na zlepšení . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 6 Závěr

71

7 Literatura

72

Přílohy

75

A Drátěný model titulní strany.

76

B Drátěný model případových studií.

77

C Drátěný model detailu případových studií.

78

D Drátěný model sekce klíčoví lidé.

79

E Drátěný model detailu sekce klíčoví lidé.

80

OBSAH

F Drátěný model support.

7 81

1

ÚVOD A CÍL PRÁCE

1 1.1

8

Úvod a cíl práce Úvod

Informační technologie a prostředí Internetu se dynamicky rozvíjí a je velmi pravděpodobné, že jejich využití bude v různých oblastech stále více nabývat na významu. Jednou z výhod Internetu je vysoká míra interaktivity uživatelů a jejich zapojení se do marketingového procesu. V dnešní době snad neexistuje odvětví, ve kterém by se firmy nebo organizace, které chtějí uspět v tvrdém konkurenčním boji, obešly bez prezentace na Internetu. Čím vyšší je prestiž firmy, tím více se marketingoví manažeři snaží o co reprezentativnější a přitažlivější firemní webovou prezentaci anebo mikrostránku propagující daný produkt nebo firmu samotnou. Ačkoliv je velmi důležité a reprezentativní mít poutavou webovou prezentaci, mnohdy to však pro získání zákazníků nestačí. Pro celkový úspěch webu je potřeba myslet také na optimalizaci pro vyhledávače, a to po celou dobu vytváření webu a v průběhu jeho životnosti. Téměř každá informace na Internetu má určitý počet zájemců, kteří právě danou informaci hledají. K čemu ale budovat a provozovat takové stránky, o kterých se nikdo nedozví nebo se o nich dozví pouze malý počet lidí, což další vývoj daného webu nepodpoří. V tento okamžik je nutné se zamyslet a navrhnout optimální SEO (Search Engine Optimization) strategii. Jelikož se Internet rychle mění a denně neustále přibývá obrovské množství nových webových stránek, vyhledávače tomuto faktu musí přizpůsobovat svůj vyhledávací algoritmus. Pro udržení webových stránek na předních místech ve výsledcích vyhledávání je potřeba SEO stále budovat a přizpůsobovat novým trendům. Když před více jak deseti lety přišla společnost Macromedia s technologií Flash, málokdo by si představil jeho dnešní využití ve webdesignu a aplikacích RIA (Rich Internet Applications). Nyní je Flash přes pět let produktem společnosti Adobe a prochází značným vývojem. Interaktivní animace tvořené v Adobe Flash velmi rychle na Internetu vytlačují klasické bannery, například ve formátu GIF. V poslední době se Flash ujal nejen jako nástroj pro tvorbu animací a her, ale i jako technologie pro vytváření lákavých interaktivních webových mikrostránek nebo rozsáhlejších webových prezentací. V začátcích technologie Flash nebylo možné stránky vyhledávacími roboty indexovat. Z tohoto důvodu nebyly stránky tvořené Flashem zahrnuty do výsledků vyhledávání. Toto však dnes už neplatí. Přední světové vyhledávače se snaží ve spolupráci se společností Adobe již několik let tento problém přizpůsobovat novým trendům ve vyhledávání a stejně tak mění své algoritmy vyhledávání. Faktem však zůstává, že optimalizace (SEO) aplikací vytvořených pomocí Adobe Flash je mnohem obtížnější než je tomu u standardních HTML stránek. Nejnovější metody optimalizace (SEO) webových prezentací založených na technologii Flash umožňují dosáhnout přívětivých výsledků ve vyhledávání také pro tuto technologii.

1.2

1.2

Cíl práce

9

Cíl práce

Cílem diplomové práce je návrh metodiky pro efektivní optimalizaci (SEO) webových stránek postavených na Flash technologii, zejména pro vyhledávač Google a její ověření na reálném projektu. K dosažení vytyčeného cíle je zapotřebí analyzovat konkrétní prostředí SEO. Dále navrhnout a vybudovat moderní a interaktivní webový design s důrazem na klíčové prvky optimalizace pro vyhledávače. Za splnění cíle této diplomové práce lze také považovat zobrazení webové prezentace na vyšších pozicích ve výsledcích vyhledávání a dosažení indexace obsahu uvedeného ve vytvořené Flash animaci, zejména u nejznámějšího vyhledávače Google.

2

TEORETICKÁ VÝCHODISKA PRÁCE

2 2.1 2.1.1

10

Teoretická východiska práce Definování pojmů Search Engine Optimization (SEO)

Pojem SEO (Search Engine Optimization) označuje rozmanitou skupinu aktivit prováděných za účelem zvýšení cíleného provozu, jenž přichází na daný web z vyhledávacích strojů. Jedná se o průběžně vyvíjející se oblast online marketingu, jejímž cílem je nárůst počtu cílových zákazníků (Grappone, 2007, s. 22). 2.1.2

Vyhledávací robot

Vyhledávací robot je software, který vyhledávače používají k procházení webu a k ukládání obsahu webových stránek do jejich databáze. Tato činnost se nazývá indexace. Robot může být také nazýván jako crawler nebo spider (Grappone, 2007, s. 56). 2.1.3

Search Engine Result Page (SERP)

Zkratka SERP je úzce spjata se SEO, vyjadřuje první písmena slov Search Engine Result Page, neboli stránka s výsledky vyhledávání zobrazená internetovým vyhledávačem na základě vyhledávacího dotazu. Úkolem SEO je získat co nejlepší pozice na SERP (Kubíček, 2010, s. 21). 2.1.4

Optimalizace vyhledávačů pro Flash

SEO pro Flash znamená neustálé hledání optimálních strategií, které vylepší pozice webových stránek obsahující Flash ve výsledcích vyhledávání internetových vyhledávačů. Klíčovým faktorem vedoucím k úspěchu je efektivní zpřístupnění HTML kódu vyhledávačům (Perkins, 2009, s. XV). 2.1.5

Javascript v SEO

JavaScript je multiplatformní objektově orientovaný skriptovací jazyk vycházející z norem ECMA (Europen Computer Manufacturers Association) standardizován jako ECMAScript jazyk. Z ECMAScriptu vychází i multiplatformní objektově orientovaný programovací jazyk ActionScript určený pro vyvíjení aplikací pomocí Adobe Flash. Využití Javascriptu pro Flash aplikace může výrazně zlepšit user experience a zároveň SEO Flash prezentací. JavaScript poskytuje dostatečnou kontrolu nad tím, co uživatelé vidí při návštěvě Flash stránky, ať už mají Adobe Flash Player ve svém prohlížeči nainstalován nebo ne. Bez podpory Adobe Flash Playeru ve webovém prohlížeči nelze samozřejmě Flash prvky na stránce zobrazit. JavaScriptové knihovny SWFObject a SWFAddress jsou základem pro zlepšení user experience a SEO Flash aplikací (Perkins, 2009, s. 83).

2.2

Optimalizace vyhledávacích strojů

2.2

11

Optimalizace vyhledávacích strojů

Optimalizace pro vyhledávače znamená proces zviditelňování webového obsahu internetovým vyhledávačům a snaha o dosažení předních pozic ve výsledcích vyhledávání. Složitost optimalizace závisí na konkurenčním prostředí a použití webových technologií. Existuje skutečně mnoho rozhodujících faktorů ovlivňujících výsledky vyhledávání, v následujícím textu je uveden přehled těch nejdůležitějších z nich. 2.2.1

Analýza SEO strategie

Plán optimalizace představuje metodu, kterou lze aplikovat na široké spektrum prací v oblasti SEO, pro konkrétní záměry a konkrétní webové prezentace je třeba tuto metodu přizpůsobit. Jinými slovy, pro žádný SEO plán neexistuje jen jedna univerzální forma. Malé firmy, velké firmy, kamenné obchody, neziskové organizace nebo autoři blogů mají vlastní potřeby, přednosti a výzvy. Úkolem SEO konzultanta je identifikovat, do jaké kategorie optimalizovaný web spadá (Grappone, 2007, s. 38). 2.2.2

Webdesign v SEO

Webdesign je rozsáhlý soubor činností, který zahrnuje plánování a tvorbu webových stránek včetně vizuálního návrhu, technického vývoje, struktury informací a optimalizace pro vyhledávače. Dobrý webdesign hraje obrovskou roli v použitelnosti stránek. Použitelnost stránek a SEO spolu úzce souvisí, jelikož oba tyto obory mají za úkol udržet návštěvníka na webu a přimět ho ke konverzi. Struktura a obsah webu jsou pro SEO důležité také, zejména dobrý obsah a rozvržení on-page faktorů, o kterých bude řečeno více v dalším textu této diplomové práce. M. Veloso (2009, s. 12) tvrdí, že web copywriting je velmi zajímavá činnost a profese, která dokáže přeměnit slova v peníze, jelikož Internet je jediným místem, kde může kdokoliv dělat obchod každý den a za malé nebo žádné peníze. Uživatelské rozhraní Autoři knihy The Smashing Book (2009, s. 11) uvádí, že každé vynikající uživatelské rozhraní sdílí následujících osm kvalit a charakteristik: 1. Jasnost – správné rozhraní nepotřebuje žádný manuál, vyhýbá se nejasnostem, zajišťuje uživatelům vyhýbání se chybám při používání 2. Stručnost – úkolem webdesignera je dělat rozhraní stručné a zároveň čisté, příliš mnoho věcí na stránce je z uživatelského hlediska složité až nudné. 3. Povědomost – prvky na stránce by měly být uživatelům dobře známé, i když uživatel používá aplikaci poprvé, měly by být prvky na stránce pro něj zavádějící.

2.2

Optimalizace vyhledávacích strojů

12

4. Reakčnost – lze si představit jako rychlost a poskytování dobré zpětné vazby, když uživatel zadá nějaký vstup. 5. Konzistence – udržování konzistence pro celou aplikaci je důležité pro rozpoznání způsobů užití. Pokud se uživatel naučí, jak pracuje jistá část rozhraní, nebude pro něj problém tuto zkušenost přenést i na ostatní místa nebo vlastnosti rozhraní. 6. Estetika – rozhraní by mělo být pro uživatele atraktivní a příjemné. 7. Účinnost – dobrý design a klávesové zkratky šetří čas uživatelů, zvyšují tak jejich produktivitu 8. Shovívavost – uživatelé aplikací dělají chyby, je jen na aplikaci, aby uživatele za jejich pochybení netrestala, ale snažila se jim poskytnout pomoc o nápravu těchto chyb, například možností vzít akci zpět, obnovit smazaná data apod. Navigace na webu Účelem navigace na webu je pomoc najít to, co uživatel hledá. Navigace poskytuje uživateli opěrné body, aby se necítil na webu ztracen. Snaží se mu říci, co všechno na webu je a jaké stránky má používat. Webová navigace je zprostředkována pomocí ukazatelů, které uživatele webem vedou. Nejčastěji uživatelé hledají seznam hlavních sekcí, neboli hlavní menu. Dalšími ukazateli jsou vedlejší menu, drobečková navigace nebo samostatné odkazy. Steve Krug (2006, s. 49) přirovnává navigaci na webu k nákupu v nákupním středisku. Uživatelé přichází na web s cílem najít informace, které potřebují. Stejně jako v nákupním středisku čelí rozhodnutí, zda se mají zeptat nebo začít sami hledat. Rozdíl je v tom, že na webu nepostává nikdo, kdo by poradil, kde hledanou věc najít. Webovým ekvivalentem je zapsání dotazu do vyhledávacího pole. Pokud uživatel nenajde, co hledá, odejde a dospěje k názoru, že požadované informace na webu nejsou nebo je už hledáním otráven. Chyby použitelnosti webu V rámci hodnocení WebTop100 jsou uvedeny na portálu Dobrý web (2010) tyto nedostatky z hlediska použitelnosti dvou stovek webů nejvýznamnějších českých firem: 1. Nepodtrhané odkazy – nejčastější chyba, které se grafici dopouští, srozumitelnost a přehlednost by měla být vždy na prvním místě, uživatel musí na první pohled poznat, na co může klikat. 2. Účel webu – uživatel by na první pohled měl vidět, kde se ocitl, komu web patří, čím se firma zabývá a měl by tyto informace vědět hned. 3. Nepoužitelná navigace – navigace je pro návštěvníka důležitým pomocníkem a záchytným bodem, pokud ji nedokáže snadno ovládat, těžko se někam dostane

2.2

Optimalizace vyhledávacích strojů

13

a odchází z webu pryč. Navigace by měla být také umístěna přesně tam, kde ji uživatel očekává a na daném místě také zůstat. 4. Orientace ve struktuře webu – v každém okamžiku si potřebuje uživatel být jistý, na jakém místě se v rámci struktury webu nachází. K tomuto slouží především viditelný název dané stránky a zvýraznění aktuální položky v navigačním menu. Velmi dobrým pomocníkem je také drobečková navigace, která výborně znázorňuje strukturu webu a umožňuje návrat o úroveň nebo několik úrovní výš. 5. Neexistující stránky – stránky, které jsou odkazovány z hlavního menu, ale přitom vůbec neexistují. 6. Nečitelný text – text by měl být dostatečně veliký a kontrastní, rozdělen do kratších odstavců, proložen nadpisy nebo bodovými seznamy a provázán odkazy se souvisejícími stránkami. 7. Vyhledávání – z uživatelského pohledu je nefunkční vyhledávání horší než žádné, web, který má jasnou a přehlednou strukturu, vyhledávání nepotřebuje, pokud však tuto možnost nabízí, mělo by nabízet relevantní výsledky. Designéři versus vývojáři Ve svém článku na serveru smashingmagazine.com C. McDaniel (2011) píše o rozdílech a neshodách mezi designéry a vývojáři. Problém ve vývoji webu nastává ve chvíli, když design i vývoj mají konkurenční zájmy a oba si jdou svou cestou. Oba tyto směry ovšem udávají svůj správný směr vývoje. Záleží jen na tom, jakou vedoucí týmu dokáže udržet pracovní morálku, aby dovedl projekt k co nejvyššímu úspěchu. Následující obrázek ukazuje, jak by měl design a vývoj směřovat ke stejnému cíli.

Obr. 1: Společný cíl designérů a grafiků (McDaniel, 2011).

2.2

Optimalizace vyhledávacích strojů

2.2.3

14

Výběr klíčových slov

Veškeré vyhledávání na webu je založeno na textu, včetně hledaných netextových věcí jako jsou obrázky, videa, soubory typu pdf, MS word nebo Flash animace. Vyhledávače velmi zajímá, kolik textu a jak kvalitní obsah na webu máte. Srdcem každé SEO kampaně je proto důkladný výběr klíčových slov. Pro SEO webových stránek je třeba mít připravený seznam nejdůležitějších klíčových slov a ty v rozumných odstupech umísťovat na strategických místech. Pokud společnost změní svou firemní strategii nebo portfolio služeb, je třeba změnit i klíčová slova. I trendy vyhledávání a konkurence se mění, proto je dobré neustále klíčová slova analyzovat. Mezi klíčovými slovy by nemělo chybět (Kubíček, 2008, s. 99): • Název organizace • Název stránek • Název produktu nebo služby • Odborné označení nebo slangový název • Slova nejlépe vystihující předmět podnikání • Řešení problému, které dané služby nabízí • Překlepy, víceslovné výrazy, varianty bez háčků a čárek Při výběru relevantních klíčových slov je třeba se nejprve ptát (Kubíček, 2008, s. 105): • Jsou vybraná slova obecně užívaná? • Jsou to slova, na které přijde opravdový zákazník? • Jaká klíčová slova používají úspěšní konkurenti? • Kolikrát jsou jaká slova vyhledávaná? Mnoho autorů SEO publikací také uvádí, že je dobré se při výběru klíčových slov zaměřit na tzv. longtail. Tento pojem vznikl spojením dvou slov long a tail, což v překladu znamená dlouhý a chvost. Longtail si lze představit jako dlouhý ocas táhnoucí se za kometou, kde kometa představuje hlavní klíčová slova a dlouhým ocasem slova, na která jsou dané stránky také vyhledatelné. Z dlouhodobých statistik vyplývá, že i když na hlavní klíčová slova bude dané stránky hledat více lidí, na méně konkurenční slova z ocasu může na stránky v absolutním počtu přijít mnohem více návštěvníků (Kubíček, 2010, s. 31).

2.2

Optimalizace vyhledávacích strojů

2.2.4

15

Optimalizace on-page faktorů

On-page faktory jsou ta kritéria webové stránky, která jsou určena obsahem stránky samotné. Grappponová a Couzinová (2007, s. 328) rozdělují kód stránek do dvou kategorií 8211; viditelný a neviditelný, přičemž obě tyto kategorie jsou pro optimalizaci velmi důležité. Viditelný text se skládá nejenom ze slov, která může z vašich stránek vidět celý svět, ale také z méně zřejmých prvků jako jsou název stránky, texty odkazů, navigační text, či popisky obrázků. Do kategorie neviditelného textu patří slova, která se sice přímo na stránce nezobrazují, ale jsou přidána do HTML kódu. Odborníci na optimalizace pro vyhledávače jako J. Sirovich a C. Darie (2008, s. 35) říkají, že vyhledávače dávají neviditelným on-page faktorům natolik malý význam, že se snad jimi nevyplatí ani zabývat. Je to dáno tím, že se velmi snadno ovlivňují, aniž by to jakkoliv ovlivnilo vzhled samotné stránky. Tyto faktory tak nemusejí být poctivé a přesné, spam se tak dá velice snadno ukrýt. Vyhledávače jim proto nedávají přílišnou důvěru a zabývají se tím, co uživatel skutečně vidí. Podle knihy 333 Tipů a triků SEO (Kubíček, 2010, s. 51) by se klíčová slova měla rozhodně objevit v: • titulku stránky • názvech odstavců • samotném textu stránky • názvech a alternativních popisech obrázků, Flash animací Titulek stránky Titulek stránky je textový řetězec definovaný obsahem elementu <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

2.6

SWFObject

2.6.2

34

Metoda dynamického publikování

Základní myšlenkou metody dynamického publikování (Wiki, 2011) je vytvoření alternativního obsahu v HTML a jeho následné nahrazení Flash obsahem pomocí JavaScriptu, jestliže webový prohlížeč má nainstalován a povolen Flash Player a samozřejmě dostatečně podporuje JavaScript. Základními vlastnostmi této metody jsou: • výborná integrace se skriptovacími aplikacemi • dovoluje používání dynamických proměnných zvaných Flashvars • odstraňuje 8222;click to activate8220; mechanismus Internet Exploreru a Opery • používá málo HTLM kódu Tato metoda nabízí dvě verze, „easy to useÿ plně automatickou verzi, která je oblíbená spíše u Flash vývojářů a holou JavaScript API verzi určenou pro JavaScriptové a AJAXové odborníky. Ukázka metody dynamického publikování (Wiki, 2011): <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js" /> <script type="text/javascript"> swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");

2.7

SWFAddress

SWFAddress je malá a výkonná knihovna umožňující deeplinking Flash a AJAXovým aplikacím. Vývojáři používají tento nástroj pro vytváření unikátních URL adres, které umí odkazovat na různé sekce webové stránky nebo stavy aplikace. Pro Flash SEO má SWFAddress obrovský význam, neboť umožňuje definovat vazby na jakýkoliv stav aplikace a vyhledávače je mohou všechny indexovat. SWFAddress je open source a volně stažitelná knihovna na adrese http://www.asual.com/ swfaddress/. Bulharská společnost Asual DZZD (Asual, 2008) na svém webu uvádí řadu důležitých funkcí, které chybí dnešním RIA aplikacím a které právě SWFAddress řeší: • vytváření záložek v prohlížeči nebo na sociální síti • posílání odkazů přes email nebo messenger • nalezení specifického obsahu hlavními vyhledávači • historie prohlížeče • využívání tlačítek zpět, vpřed a obnovit 2.7.1

Omezení SWFAddress

Ačkoliv SWFAddress může nabízet vynikající formu použitelnosti Flash aplikací, je důležité mít na paměti, že veškerý potenciál SWFAddress pro SEO končí ve chvíli, kdy vyhledávače začnou pro danou aplikaci indexovat více stránek. Například pokud je Flash na jedné HTML stránce, použitím SWFAddress může dostat více URL adres odkazujících na tuto jednu stránku, to však neznamená, že roboti budou indexovat různý obsah pro každou URL. Jinými slovy, jestliže HTML stránka v každé z SWFAddress odkazuje právě na jednostránkovou aplikaci, vyhledávače budou jistě indexovat stejný HTML obsah pro každou URL. Neznamená to však, aby se v tomto případě SWFAddress nepoužívalo, ale to, že je tato metoda užitečnější spíše pro použitelnost aplikace než pro SEO (Perkins, 2009, s. 95). 2.7.2

Datová výměna mezi Flash a JavaScriptem

Při optimalizaci flasového webu potřebujeme zajistit určitou výměnu dat, například kód HTML. SWFAddress zajišťuje výměnu dat mezi Flash a JavaScriptem pomocí

2.7

SWFAddress

36

třídy ExternalInterface. Další metodou takové výměny dat můžou být například flashvars proměnné. Třída ExternalInterface ExternalInterface class umožňuje volání JavaScript funkce z Flash a Flash funkce z JavaScriptu. Touto cestou je možné snadno vyměňovat data mezi JavaScriptem a ActionScriptem. ExternalInterface class je dostupná od verze Adobe Flash Player 8. Předchozí verze využívají pro datovou komunikaci metody Flashvars. Důvod proč používat ExternalInterface je prostý, pro Flash je téměř každá informace webového prohlížeče nedostupná, ale je snadno čitelná pro JavaScript. Pokud jde o SEO, je velmi žádoucí, abychom chtěli po Adobe Flash zobrazit text z HTML „containeruÿ tak, abychom nemuseli znovu měnit SWF soubor při aktualizaci obsahu (1, s. 101)(Perkins, 2009, s. 101).

3

3

METODICKÁ VÝCHODISKA PRÁCE

37

Metodická východiska práce

Studium teorie problematiky optimalizace webových prezentací založených na Flash technologii je výchozím bodem pro návrh metodiky vlastní práce. Pro konkrétní webovou prezentaci společnosti DesignBeat s.r.o., jejímž cílem je propagace obchodní značky, jsou navrhnuty následující kroky řešení: • Analýza SEO strategie firmy DesignBeat s.r.o. • Návrh a realizace webového designu. • Výběr klíčových slov a optimalizace on-page faktorů. • Optimalizace pro Flash prezentace. • Konfigurace přístupu vyhledávacím robotům. • Návrh a realizace off-page faktorů. • Zhodnocení přínosu optimalizace a návrh dalšího rozvoje. Analýza SEO strategie firmy DesignBeat s.r.o. Provedení analýzy strategie pro SEO zkoumané společnosti má za úkol identifikovat kategorii, do které zkoumaná společnost momentálně spadá a určit z tohoto prostředí její silné stránky, slabé stránky, příležitosti a hrozby pro optimalizaci vyhledávacích strojů. Návrh a realizace webového designu Návrh a realizace webdesignu byla obsáhlá část této práce, která se zabývala výstavbou zcela nové webové prezentace společnosti DesignBeat s.r.o. Důraz byl kladen na jasnou hierarchickou informační architekturu s předem vymezenými cíli. Rozvržení jednotlivých stránek bylo modelováno pomocí drátěných modelů, které měly za úkol poskytnout potřebné podklady k technickému řešení stránek, zejména pak ke grafickému návrhu stránek a návrhu struktury webu. S technologií pro výstavbu webu bylo použito HTML, CSS, Flash a JavaScript. Výběr klíčových slov a optimalizace on-page faktorů Návrh klíčových slov vychází hned z několika zdrojů. Klíčová slova jsou postupně doplňována do tabulky klíčových slov. Mezi nejvýznamnější zdroje klíčových slov patří profil samotné společnosti DesignBeat s.r.o., její portfolio služeb, firemní brainstorming a online nástroj pro návrh klíčových slov Google AdWords. Samotný výběr klíčových slov vychází z analýzy klíčových slov uvedených v tabulce klíčových slov, která se provádí za pomoci online nástrojů Návrhy klíčových slov Google AdWords,

3

METODICKÁ VÝCHODISKA PRÁCE

38

Statistiky vyhledávání Google a Statistiky hledanosti dotazů na Seznam.cz. Optimalizace vybraných on-page faktorů je prováděna na základě předchozí analýzy klíčových slov, která je zhodnocena a zvolena pro cílení optimalizace. Optimalizace pro Flash prezentace Optimalizace pro flash prezentace je nejpodstatnější částí této diplomové práce, která se zabývá tím, jak lze dosáhnout SEO úspěchu i ve webových prezentacích založených na Flash technologii. Názorně se zde na příkladu Flash prezentace designbeat.cz předvádí způsob, jakým se při výstavbě takového webu postupuje. Vkládání Flash animace do HTML je realizováno pomocí JavaScriptové knihovny SWFObject metodou dynamického publikování. Následuje vyřešení problému zobrazení Flash animace na 100 Konfigurace přístupu vyhledávacích robotů Předmětem komunikace s vyhledávacími roboty je správné vytvoření mapy webu, souboru robots.txt a zápisu meta značek na základě struktury souborů webového serveru. Pomocí těchto nástrojů je robotům „vydán zákaz vstupuÿ na místa, u kterých by nebylo žádoucí, aby jejich obsah indexoval. Na druhou stranu jsou pak robotům poskytnuty informace o místech, která by za normálních okolností nemusely vůbec najít. Návrh a realizace off-page faktorů Závěr kapitoly vlastní práce se věnuje získávání zpětných odkazů z různých zdrojů. Jsou zde uvedeny konkrétní způsoby linkbuildingu a jejich odhadovaný přínos pro dosažení předních pozic ve výsledcích vyhledávání. Představeny jsou některé nástroje pro měření důležitých SEO parametrů. Zhodnocení přínosu optimalizace a návrh dalšího rozvoje V rámci samostatné kapitoly diskuze je zhodnocen celkový přínos optimalizace webové prezentace designbeat.cz. Nástrojem pro měření SEO úspěchu po celou dobu optimalizace slouží online analytický nástroj Google Analytics. Provedeny jsou testy indexování Flash obsahu vyhledávačem Google pomocí operátoru site. Návrh dalšího rozvoje spočívá zejména v rozšíření Flash prezentace co do uživatelské zkušenosti a použitelnosti webu.

4

VLASTNÍ PRÁCE

4

39

Vlastní práce

Teoretická a metodická východiska této diplomové práce jsou dostatečným informačním zázemím pro samotné praktické řešení. Kapitola vlastní práce popisuje kompletní realizaci webové prezentace využívající technologie Flash. Dle návrhu metodiky začíná vlastní práce analýzou SEO strategie společnosti DesignBeat, pokračuje návrhem struktury firemní Flash prezentace, budováním webových stránek, optimalizací pro vyhledávače a testováním indexace Flash obsahu vyhledávači.

4.1

Analýza SEO strategie firmy DesignBeat

V roce 2009 se v obrovském světě Internetových služeb zrodila nová „maličkáÿ společnost Bluedata s.r.o. Pouze za necelé dva roky od svého vzniku prodělala tato společnost velké změny, co se do počtu zainteresovaných lidí týče i v organizační struktuře firmy samotné. Během své krátké působnosti na trhu firma nabírala zkušenosti a budovala své know-how od velmi drobných zakázek až po zakázky většího rozsahu. Právě větší zakázky vedly firmu k vytyčení momentálních cílů a užší specializaci na webový design. Díky těmto okolnostem v polovině roku 2010 společnost změnila svoje obchodní jméno z Bluedata s.r.o. na DesignBeat s.r.o. Nyní firma Designbeat s.r.o. vystupuje jako Internetová agentura zprostředkovávající komplexní služby v propagaci firem, organizací i jednotlivců na Internetu. Strategie firmy DesignBeat se neustále vyvíjí. V době vypracovávání této diplomové práce se společnost zaměřila na budování nového administračního systému pro správu webových prezentací svých stávajících i potencionálních klientů a propagaci své značky. Právě poslední zmíněné úzce souvisí s výstavbou nové firemní webové prezentace a její optimalizace pro zviditelnění se na webu. DesignBeat jakožto malá firma na trhu musí své SEO strategie přizpůsobit své velikosti a příliš napnutému rozpočtu. Následující obrázek znázorňuje analýzu optimalizace pro vyhledávače z pohledu malé organizace.

4.1

40

Analýza SEO strategie firmy DesignBeat

SWOT ANALYSIS Strengths vysoká kontrola provedení SEO vyhnutí se nadměrné byrokracii přátelský vztah se zákazníky dobrá zpětná vazba učení se od silnějších přirozená propagace SEO pro Flash

Weaknesses špatná organizace času není příliš fiannčních prostředků sestavení malého týmu dlouhý interval návratnosti investic špatně vedená webová analytika prozatím nevybudované know-how

Opportunities propagace značky organizace času získávání zpětných odkazů sestavování PPC kampaní správa profilů sociálních sítí zaměření klíčových slov na longtail rychlý nárust návštěvnosti

Threats špatně zvolená klíčová slova špatné vedení PPC kampaní parazitování na jméně značky neprováděna webová analytika špatné určení cílů Black Hat SEO přílišný nárust odkazů

DesignBeat s. r. o. Neumannova 1453/28

[email protected]

Praha 5, Zbraslav, PSČ 15600

www.designbeat.cz

Obr. 9: SWOT analýza společnosti DesignBeat s.r.o.

4.2

Návrh a realizace webového designu

4.2

41

Návrh a realizace webového designu

Účelem webové prezentace společnosti DesignBeat je zaujmout širokou veřejnost a poskytnout dostatečné informace o tom, čím se firma zabývá. Důraz je kladen na poutavé interaktivní zpracování a moderní design. Nejde zde o žádné hezké čtivo, ale o to udělat co nejlepší grafický vizuál. Mezi klíčové vlastnosti pro návrh webu patří osobitost, kreativita, profesionalita a důvěryhodnost. 4.2.1

Informační architektura

Informační architektura webu představuje množinu prvků, které definují, jak web ve výsledku vypadá, komu je určen a jakým způsobem funguje. Webové stránky designbeat.cz jsou přístupné komukoliv na veřejné internetové síti. Jejich obsah je statický, tvoří jej pouze jednoduchý, výstižný a stručný text. Uživatelé nemají jakoukoliv možnost změny obsahu. Prezentace slouží ke komerčním účelům a zábavné formě propagace značky. Uspořádání webu je hierarchické, kde záchytným bodem je titulní strana, jak je možné vidět na obrázku 10. Mezi další metody vyjádření informační architektury patří skica webu, neboli wireframe a obrázkový scénář storyboard. Pomocí wireframe a storyboard se dá velmi dobře definovat obsah, vlastnosti a funkce stránek a prvků stránky, což je možné vidět v dalším textu této kapitoly.

Obr. 10: Skica uspořádání webu designbeat.cz

4.2

Návrh a realizace webového designu

4.2.2

42

Rozvržení stránek

Moderní webdesign vyžaduje hodně trpělivosti, preciznosti a znalostí. Zatímco návrh prvků stránky stanovuje hierarchii stránek a vnitřní vztahy mezi jednotlivými prvky, layout stránek zastává pozici kostry webu, která zajišťuje, aby jednotlivé elementy stránky plnily své role správně. Pro tento projekt výstavby webové prezentace je zvolen layout fixní šířky, který znamená, jak již název správně napovídá layout, který má svoji šířku stanovenou na přesnou fixní hodnotu. Všechny ostatní prvky stránky jsou umístěny uvnitř wrapperu této šířky. Použití fixního layoutu je zde z jednoho prostého důvodu. Nad celým layoutem včetně jednotlivých komponent je totiž zajištěna naprostá kontrola a preciznost pozicování. Výchozí hodnota šířky layoutu se odvíjí od průměrného rozlišení obrazovek uživatelů. V této práci je nastavena na hodnotu 940px, protože stále obrovské procento uživatelů používá rozlišení obrazovky 1024px na šířku, kolem 20px se pohybuje šířka scrollovací lišty prohlížeče. Obsah webu je zarovnán na střed. Významné prvky webu: • hlavní horizontální menu • přehrávač hudby • přehrávač videa • blok s kontakty • blok pro stažení marketingových materiálů • blok s odkazem na sociální síť • blok pro důležité informace • patička stránky (pouze na homepage pro zobrazení referencí) • preloader (grafické znázornění načítání Flash) • nadpisy stránky • fotogalerie • rozcestník klíčoví lidé Následující obrázek 11 představuje wireframe čtyř významných stran webu. Drátěné modely, které definují rozmístění funkčních prvků na dané stránce, jsou uvedeny v přílohách B až G na konci této diplomové práce. Skicy webu jsou tvořeny stručně za pomocí textu a čar. Slouží pro vyjádření informační architektury, kde lze jednoznačně vidět, co se kde nachází, co vyjadřuje a s čím je spojeno.

4.2

Návrh a realizace webového designu

43

Obr. 11: Wireframe významných stran webové prezentace desihnbeat.cz

4.2.3

Výběr barev

Správný výběr barev hraje jednu z klíčových rolí ve webdesignu a použitelnosti webu. Barevné schéma je znázorněno na obrázku 12. Z obrázku plyne, že byly vybrány barvy z akcentované palety barev, tedy barvy tlumené s jedinou barvou ve vysoké sytosti. Vybrané schéma reprezentuje celkový vizuál a obor činnosti společnosti. Zapojení akcentované palety barev do textu má své podstatné využití v čitelnosti obsahu stránek a ve zdůraznění důležitých prvků na stránce. Je obecně známo, že barva postihuje člověka citově i psychicky. Modrá barva v tomto případě vyjadřuje důvěryhodnost, stabilitu, klid nebo zdvořilost. Šedá potom v kombinaci s modrou vyjadřuje serióznost a nadčasovost webu. Zda tento výběr barev má za následek dobře vypadající web dosahující značného ohlasu uživatelů, odhalí až webová analytika, o které bude více zmíněno později v dalším textu této práce. 4.2.4

Technické řešení

Grafický návrh Grafický návrh webové prezentace DesignBeat s.r.o. je tvořen ve spolupráci s grafikem a Flash programátorem. Vyplývá z informační architektury a plánovaného

4.2

Návrh a realizace webového designu

44

Obr. 12: Barevné schéma vytvořené online nástrojem Color Scheme Designer

rozvržení stránek, tedy stručně řečeno z vypracovaných drátěných modelů. Veškeré grafické podklady jsou tvořeny v prostředí Adobe, konkrétně Adobe Photoshop CS4 a Adobe Illustrator CS4. Výchozí grafický návrh titulní strany lze vidět na obrázku 13.

Obr. 13: Grafický návrh titulní strany webové prezentace designbeat.cz

Struktura webu Kostru webové prezentace firmy DesignBeat představuje pouze jediný HTML soubor index.html, obsahující prvky HTML, CSS, JavaScriptu a Flash. Přičemž poslední tři zmíněné CSS, JavaScript a Flash soubory jsou deklarovány externě ve zvláštních

4.2

Návrh a realizace webového designu

45

složkách. Typ dokumentu pro správnou interpretaci HTML a CSS prohlížečem je deklarován jako XHTML 1.0 Transitional. Struktura HTML stránky je základem celého webu a určuje jeho celkovou úspěšnost v SEO, proto je na její kvalitu kladem zvláštní důraz. Je třeba mít na mysli, že vyhledávací robot chce po webu jednu velmi důležitou věc, a tou je jeho obsah. Pro SEO je tedy velmi důležité dbát na to, aby struktura obsahu webu dodržovala správnou hierarchii a správné použití HTML značek. Alternativní obsah Alternativní obsah je taková část kódu ve stránce webové prezentace, o které lze s jistotou říci, že se dá optimalizovat pro vyhledávače. Je to právě on, který pomáhá zlepšovat pozice ve výsledcích vyhledávání. Alternativní obsah tedy není nic jiného než kus HTML kódu webové stránky, jehož obsah vidí uživatel právě tehdy, když jeho prohlížeč Internetu nepodporuje Adobe Flash nebo nemá povolen JavaScript. Když robot navštíví stránku, prochází postupně její kód a indexuje vše, co je mu umožněno indexovat. V tomto případě robot prochází veškerým HTML kódem a indexuje všechny jemu známé typy souborů na webovém serveru, ke kterým má přístup. Roboti však přehlíží JavaScript, nedílnou součást struktury webu, který implementuje JavaScriptovou knihovnu SWFObject, řešící na webu, stručně řečeno, zda má v prohlížeč uživateli zobrazit Flash animaci nebo alternativní obsah. JavaScriptová knihovna SWFObject bude podrobněji představena později. Použití alternativního obsahu má obrovské výhody jak pro SEO, tak i pro použitelnost stránek. Obvyklá věta 8222;Nainstalujte si prosím Adobe Flash Player8220; naprosto nestačí. Existuje mnoho případů, kdy není možné v prohlížeči Adobe Flash Player nainstalovat nebo neumí JavaScript. Webová prezentace designbeat.cz s tím však počítá, nikdy se totiž nedá odhadnout, odkud přijde opravdový zákazník. Tvorba alternativního obsahu vychází ze stejných požadavků na jednoduchost, čistý vizuální styl a uveřejnění pouze těch nejdůležitějších informací. Patří mezi ně lehké představení společnosti vlastnící tyto webové stránky, důležitá informace o chybějícím zásuvném modulu Adobe Flash Player a odkaz na jeho stažení pro správné zobrazení mikrostránky, kontakt, email odkaz, odkaz ke stažení marketingových materiálů, odkaz na sociální síť Facebook, vybrané reference. Grafický návrh pro alternativní obsah webu a struktura HTML a CSS je možné vidět v přílohách teéto práce. Flash animace Zdrojový soubor s názvem designBeat.swf, který je vkládán do HTML struktury webové prezentace metodou SWFObject představuje výslednou Flash aplikaci, jenž je zobrazena návštěvníkovi webového serveru designbeat.cz. Popis kompletní výstavby Flash animace je nad rámec této diplomové práce. Jsou zde proto popsány pouze jednotlivé kroky přímo související se SEO pro Flash.

4.3

Výběr klíčových slov a optimalizace on-page faktorů

4.3

46

Výběr klíčových slov a optimalizace on-page faktorů

Návrh klíčových slov pro web www.designbeat.cz vychází hned z několika zdrojů. Všechna slova se postupně zaznamenávají k dalšímu zpracování do tabulky klíčových slov, která již slouží k hodnocení, analýze a výběru klíčových slov pro jejich vhodné umístění. Klíčová slova jsou vybírána jak pro optimalizaci a cílení on-page a off-page faktorů, tak pro PPC reklamní kampaně. Seznam zdrojů pro návrh klíčových slov: • představa vyhledávání určitých frází z pohledu uživatele, • představení společnosti a nabízených služeb, • co dané produkty řeší a jak mohou pomoci, • slangové výrazy a pravopisné chyby pro daný obor, • pomoc spolupracovníků, • webové statistiky, • oslovení zákazníků, • příbuzné termíny ve vyhledávačích, • nástroje pro návrh klíčových slov, • přátelé, nečekané nápady a stránky konkurence. 4.3.1

Nástroje pro návrh klíčových slov

Na otázku, kde zjistit, jak se uživatelé ptají vyhledávačů, když hledají služby nebo stránky firmy DesignBeat, nabízí snadno a pohodlně odpověď některé známé online nebo offline nástroje pro návrh klíčových slov. V této diplomové práci je využito online nástrojů Návrhy klíčových slov produktu Google AdWords, Statistiky vyhledávání Google a Statistiky hledanosti dotazů na Seznam.cz. Obrázek 14 znázorňuje některé vybrané možnosti návrhu keywords, které služba Google AdWords nabízí. Jsou zde uvedeny návrhy klíčových slov pro zadanou oblast klíčového slova nebo fráze, jejich míra konkurence, objem vyhledávání za měsíc, trendy ve vyhledávání nebo například přibližná cena za klik pro PPC reklamu. Přestože Google ve svém oboru vyniká a jeho nástroje jsou svou dostupností, provázaností a vlastnostmi bezkonkurenční, nelze opomenout obrovskou působnost vyhledávače Seznam.cz na českém Internetu. Jsou zde zobrazeny statistiky hledanosti daného dotazu nebo dotazů, v nichž je obsažen. Graf je k dispozici, pokud počet hledaných dotazů dosáhne minimálně stovky za den.

4.3

Výběr klíčových slov a optimalizace on-page faktorů

Obr. 14: Google AdWords Návrhy klíčových slov pro oblast slova webdesign.

Obr. 15: Google Statistiky vyhledávání slova webdesign.

47

4.3

Výběr klíčových slov a optimalizace on-page faktorů

48

Obr. 16: Statistika hledanosti dotazu webdesign na Seznam.cz.

4.3.2

Tabulka klíčových slov

Tabulka klíčových slov vychází ze seznamu zdrojů pro návrh klíčových slov uvedeného na začátku této podkapitoly. Především však z vlastních nápadů inspirovaných uvedeným seznamem zdrojů, z firemního brainstormingu a ze zmíněného nástroje Google AdWords, který zejména posloužil k hodnocení a výběru klíčových slov a popřípadě návrhu obměn a alternativ k těmto slovům. První sloupec tabulky 4 zaznamenává klíčové slovo nebo frázi. Objevují se zde jednotlivé oblasti klíčových slov a slova pro long tail, vedlejší klíčová slova, která v absolutním počtu přivádějí na stránky více návštěvníků a disponují zpravidla vyšším konverzním poměrem. Ve druhém sloupci je uveden objem vyhledávání v ČR za měsíc. Hodnota vyjadřuje průměrné měsíční vyhledávání za období předcházejících dvanácti měsíců. Třetí sloupec vyjadřuje míru konkurence daného klíčového slova neboli počet inzerentů, kteří nastavili nabídku na jednotlivá klíčová slova. Stínovaný pruh představuje obecné kvantitativní vodítko, do jaké míry je umístění reklamy pro konkrétní klíčové slovo konkurenceschopné. V posledním čtvrtém sloupci je podstatný údaj pro PPC kampaně cena za klik.

4.3

49

Výběr klíčových slov a optimalizace on-page faktorů

Tab. 1: Tabulka nejdůležitějších klíčových slov

Klíčové slovo designbeat internetová agentura internetové prezentace www prezentace Webdesign Webdesign Praha Webdesign Brno Grafika webdesign webdesign reference design webu Flash Flash animace SEO Flash Internet markteting Branding Corporate identity Photoretouch Microsite DTP studio CMS eshop Jednotný vizuální styl Logotyp Firemní logo

4.3.3

Objem vyhledávání za měsíc 32 140 260 590 14800 170 260 210 73 390 246000 1600 58 1000 1900 1300 110 480 390 73 140 880 390

Konkurence Nízká Střední Střední Střední Střední Vysoká Vysoká Vysoká Vysoká Vysoká Nízká Nízká Nízká Nízká Nízká Nízká Nízká Nízká Nízká Střední Nízká Střední Střední

Přibližná CPC(v Kč) 1,72 10,04 12,65 9,19 23,47 18,41 18,35 17,07 19,73 18,58 6,53 5,16 23,21 18,14 20,10 7,01 5,22 6,15 7,01 17,43 3,65 5,53 6,81

Optimalizace on-page faktorů

Mezi on-page faktory webové stránky patří všechny prvky stránky, které uživatel může vidět na dané stránce, ve výsledku vyhledávání nebo v obou zároveň. Uživatelé hledající na Internetu určité informace vyžadují, aby tyto hledané výrazy obsahovaly stránky, které vyhledávač uživateli poskytne. Z tohoto důvodu vyhledávače dávají některým on-page faktorům velký význam. Záleží jen na zkušenostech SEO odborníka, jakou strategii pro výběr a umístění klíčových slov v on-page faktorech zvolí.

4.3

Výběr klíčových slov a optimalizace on-page faktorů

50

Návrh titulku stránky Z vlastních zkušeností a průzkumů odborníků na SEO, je titulek stránky jedním z nejdůležitějších on-page faktorů pro umístění klíčových slov. Titulek stránky musí být relevantní se stránkou, to znamená, že klíčová slova v něm uvedená musí být obsažena ve stránce samotné. Strategií zvolenou pro optimalizaci titulku je použití právě takových klíčových slov, na které jsou cíleny off-page faktory uvedené v pozdějším textu diplomové práce. Titulek stránky designbeat.cz vypadá tedy následovně: Na pořadí slov v titulku nezáleží, vyhledávače jako Google nedělají rozdíl mezi různými kombinacemi pořadí klíčových slov v titulku. Důležité je, aby titulek vypadal dobře a lákavě pro uživatele vyhledávačů. Celý titulek není zobrazen z jednoho prostého důvodu, Google totiž v SERP zobrazuje titulky o délce cca 60 znaků včetně mezer.

Obr. 17: Ukázka title designbeat.cz v SERP Google

Nadpisy stránky Dalším důležitým faktorem pro umístění klíčových slov jsou nadpisy stránky. Vyhledávače totiž dobře ví, že se uživatelé jimi na stránce orientují. Pro hlavní nadpis webu h1 slouží samotný název stránky DesignBeat. Je zde vhodně použito spojení s klíčovou frází Flash animace, které je využito taktéž pro linkbuilding. Zdrojový kód nadpisu h1 vypadá následovně.

DesignBeat Flash Animace

Vhodný výběr klíčových slov obsahují samozřejmě i ostatní nadpisy stránky. Obecně by stránka neměla obsahovat příliš mnoho 8222;kopií8220; klíčových slov, aby ji vyhledávače nepovažovaly za spam. O jaký počet se jedná, není jasně dáno. Pro tento projekt bylo rozhodnuto následujícím způsobem, přínos této optimalizace odhaluje až webová analytika.

DESIGNBEAT INTERNETOVÁ AGENTURA

webdesign...branding...media...photo&retouch...dtp...flash

Webdesign reference

Oddělení webdesignu

4.3

Výběr klíčových slov a optimalizace on-page faktorů

51

Popisek stránky a meta keywords Pro dnešní algoritmy vyhledávačů mají zanedbatelný vliv a troufám si říci, že nesprávné užití a příliš mnoho klíčových slov v těchto meta značkách naopak stránkám z pohledu optimalizace škodí. Nicméně jsou v této internetové prezentaci zlehka uvedeny, zejména popisek stránky description, který se zobrazuje ve výsledcích vyhledávání. V naprosté většině případů bývá text v prvku meta description Googlem nahrazován výstřižkem textu kolem hledaného slova. Pro web designbeat.cz to však není vhodné, jelikož je textově velmi chudý a je zaměřen spíše na vizuál. Popisky stránek v SERP vyhledávačů je proto ovlivněno tím, že je jim následujícím způsobem jednoduše sděleno, aby nepoužívaly libovolný snipet kódu, ale braly popisek stránky ze značky meta description. <meta name="robots" content="nosnippet" /> Pomocí zápisu ¡meta name=”robots” content=”noodp” /¿ pak vyhledávače jako Google, Yahoo! a MSN nebudou používat popisek z katalogu stránek DMOZ, do kterého, jak se dá dále dozvědět, je web designbeat.cz zaregistrován. Popisek v SERP Seznam.cz je možné názorně vidět na obrázku 18 a Google na předchozím obrázku 17.

Obr. 18: Popisek a náhled výsledku vyhledávání designbeat na Seznam.cz

Optimalizace obrázků Stránka s alternativním HTML obsahem ve své struktuře obsahuje hned několik obrázkových log, která by mohla přilákat nějaké návštěvníky. Pravděpodobně se sice nebude jednat o přímé zákazníky, ale cílem této prezentace je propagace značky. Čím více uživatelů web uvidí, tím více se obchodní značka DesignBeat dostane do podvědomí lidí. Obrázky tedy nelze ponechat bez vhodné SEO. Pro klíčová slova jsou v HTML značce img vhodně vymezena místa v titulku obrázku, pojmenování obrázkových souborů a alternativním popisku obrázku. Konkrétní příklad kódu takové optimalizace je uveden níže, kde je provedena optimalizace loga Provozně ekonomické fakulty Mendelovy univerzity v Brně.

4.4

Optimalizace pro Flash prezentace

52

Ostatní pro SEO důležité on-page faktory Textový obsah webu je velmi chudý, webová prezentace designbeat.cz, jak již bylo zmíněno, je zaměřen na vizuální kvality a interaktivní prvky, kde se klade důraz na jednoduchost, průhlednost a čistotu webu. Odchozí odkazy jsou zde uvedeny také v nepatrném počtu, lze tady najít odkaz na stažení prohlížeče Adobe Flash v alternativním HTML a link na fanouškovské stránky sociální sítě Facebook.com. Interní URL adresa existuje reálně jedna, pouze index.html. Ostatní URL jsou řešeny v ActionScriptu jako virtuální URL pro Flash. Více je uvedeno později v kapitole zabývající se problematikou samotné Flash optimalizace.

4.4

Optimalizace pro Flash prezentace

Doposud bylo v této části diplomové práce, věnované vlastnímu řešení, řečeno vše podstatné o optimalizaci HTML stránek. Neznamenalo to však odbočení od tématu zadání diplomové práce. Vzhledem k SEO se Flash bez HTML neobejde. Pokud má tedy zaznamenat konečný výsledek SEO webové prezentace využívající technologie Flash úspěch, je nezbytně nutné, jak již bylo dříve nastíněno, se zaměřit na optimalizaci nikoliv pouze HTML nebo jen Flash obsahu, který je do HTML implementován, ale na optimalizaci obou simultánně. Následující text popisuje jednotlivé metody SEO pro Flash. 4.4.1

Publikování metadata značek pro SWF

Podobně jako v HTML můžeme jednoduše nastavit SWF souboru s Flash animací značky meta, které jsou relevantní pro SEO. V současné době však vyhledávače tyto metadata neindexují, ale může se stát, že v budoucnu tomu bude jinak. Přidání metaznaček do SWF je velmi snadné, tak není důvod proč to neudělat. Nejjednodušší cestou je v prostředí Adobe Flash CS4 otevřít okno s informacemi o souboru a vyplnit patřičné údaje. V případě designBeat.swf je přidání XMP metadat vidět na obrázku 19.

4.4

Optimalizace pro Flash prezentace

53

Obr. 19: Vkládání metadat do Flash animace v prostředí Adobe Flash

4.4.2

Statické a dynamické textové pole v Adobe Flash

Prostředí Adobe Flash nabízí dvě možnosti pro práci s textovými poli. První možností je klasické statické textové pole, kde je text pevně vložen do Flash animace a za běhu animace s ním již nelze nic dělat. Tou druhou možností jsou dynamická textová pole, která již nabízejí větší prostor pro práci s textem a jeho úpravami. Dynamická textová pole umožňují tedy změny textu za běhu animace, mohou být tvořeny ActionScriptem a brát data z externích souborů. Jsou důležité také pro SEO, jelikož obsahují vlastnosti html a htmlText, které dovolují formátování textu pomocí HTML značek. I když statická textová pole vlastnost htmlText nemají, stejně jako u dynamických textových polí dokáže Google text v nich obsažený indexovat. Z tohoto důvodu bylo při výstavbě této prezentace myšleno i na to, aby alternativní obsah používal nepříliš podobného textu a klíčových slov a předešlo se penalizaci Googlem za duplicitní obsah.

4.4

Optimalizace pro Flash prezentace

54

Pro Flash animaci této práce je použito obojí, statických i dynamických textových polí. Toto rozhodnutí ovlivnila jedna důležitá skutečnost a tou je použití nestandardního fontu pro Flash animaci. Dynamická pole jsou sice ovládaná přes ActionScript za běhu samotné Flash animace, ale kvůli funkci volání znaků, aby se text zobrazil přesně takovým fontem, jaký se žádá, datová velikost výsledné animace se rapidně s přibývajícím textem zvětšuje. Druhou nevýhodou dynamických textových polí a použití nestandardního fontu je, že font se nezobrazuje tak hezky jako u statických dynamických polí a to ani za použití různých vyhlazovacích metod písma. Z těchto důvodů je u této Flash animace používáno statických textových polí pro obsah, který se nemění často nebo nemění vůbec a pro text, který má větší velikost písma. Dynamická textová pole se používají pak tam, kde se žádá častá změna obsahu a snadná modifikace bez zásahu do zdrojového kódu Flash animace. Ukázka kódu naplnění a naformátování obsahu sekce pro reference Case Studies, za použití HTML značek. //text bg.detailTitle._text.autoSize = "left"; bg.detailTitle._text.text = boxTitleArr[ boxMc.number ]; bg.detailNote._text.autoSize = "left"; bg.detailNote._text.text = boxNoteArr[ boxMc.number ]; if ( boxUrlArr[ boxMc.number ] != ’’){ bg.detailUrl.alpha = 1; bg.detailUrl._text.autoSize = "left"; bg.detailUrl._text.htmlText = ’’ +boxUrlArr[ boxMc.number ]+’’ ; } else { bg.detailUrl.alpha = 0; } bg.detailDesc._text.autoSize = "left"; bg.detailDesc._text.htmlText = ’<strong>’ +boxDescArr[ boxMc.number ]+’’; Z tohoto kódu lze patrně vidět i názorné řešení odkazů v dynamickém textovém poli. Obrázek 20 je výsledkem výše uvedeného kódu, kde ukazatel myši znázorňuje najetí na odchozí odkaz.

4.4

Optimalizace pro Flash prezentace

55

Obr. 20: Ukázka odkazu ve Flash animaci designbeat.cz

4.4.3

Implementace SWFObject

Teoretické základy této JavaScriptové knihovny a jejích metod vkládání SWF souborů Flash animace do HTML kódu webové stránky byly dostatečně poskytnuty. Následující text se bude zabývat metodou dynamického vkládání, které bylo v této webové prezentaci využito. Prvním krokem je vložení souboru JavaScript knihovny SWFObject do hlavičky HTML stránky. Soubor má umístění v adresáři js, kde jsou všechny ostatní JavaScript soubory. Snahou programátora by mělo být co nejvíce oddělit JavaScript a CSS soubory od HTML kódu stránky samotné. <script type="text/javascript" charset="utf-8" src="./js/swfobject.js"> SWFObject se provede, jakmile je prohlížečem přečten a plní všechny manipulace s DOM (Document Object Model) jakmile je DOM nahrán. SWFObject podporuje všechny druhy prohlížečů, které umí JavaScript. Nyní následuje vložení SWF souboru s Flash animací JavaScriptem, které vypadá následovně. <script type="text/javascript"> var attributes = {id:"designBeat"}; swfobject.embedSWF("designBeat.swf?home=true ", "super-container", "100%", "100%", "9.0.0", null, null, null, attributes); if (swfobject.hasFlashPlayerVersion("9.0.0")) { swfobject.addDomLoadEvent(createFullBrowserFlash); } Dynamická metoda publikování zvaná swfobject.embedSWF má celkem 10 parametrů, přičemž posledních 5 je volitelných.

4.4

Optimalizace pro Flash prezentace

4.4.4

56

Technika Full Browser Flash

Technika Full Browser Flash, jak již sám název napovídá, řeší problém zobrazení Flash animace na 100 stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; stage.addEventListener(Event.RESIZE, resizeHandler); function resizeHandler(event:Event):void { } Výsledný JavaScript kód techniky Full Browser Flash metody dynamického publikování SWF včetně možnosti užití vlastní scrollovací lišty vypadá následovně. function createFullBrowserFlash() { swfobject.createCSS("html", "height:100%;"); swfobject.createCSS("body", "height:100%; overflow:hidden;"); swfobject.createCSS("#super-container", "margin:0; width:100%; height:100%; "); } var attributes = {id:"designBeat"}; swfobject.embedSWF("designBeat.swf?home=true ", "super-container", "100%", "100%", "9.0.0", null, null, null, attributes); if (swfobject.hasFlashPlayerVersion("9.0.0")) { swfobject.addDomLoadEvent(createFullBrowserFlash); }

4.4.5

Implementace SWFAddress

Díky implementaci nástroje SWFAddress nabývá prezentace designbeat.cz především na použitelnosti a samozřejmě i na kvalitě SEO. Flash animace nyní může využívat virtuálních URL, titulků stránky, tlačítek prohlížeče zpět a vpřed, tlačítka pro obnovení stránky apod., obdobně jako je tomu v HTML. Pomocí virtuálních URL se dá odkazovat na libovolný stav aplikace, titulek jednoznačně určuje orientaci na webu. Postup implementace SWFAddress je následující, v první řadě musí být definován soubor s knihovnou SWFAddress v záhlaví HTML dokumentu. Musí však být definován až za SWFObject, aby fungoval dobře, jelikož využívá jeho funkce. JavaScriptový soubor s knihovnou SWFAddress je opět umístěn v externím adresáři pod názvem js.

4.4

57

Optimalizace pro Flash prezentace

<script type="text/javascript" charset="utf-8" src="./js/swfaddress.js"> Implementace SWFAddress v ActionScript začíná importem této knihovny do ActionScriptu. import com.asual.swfaddress.*; Důležité fáze definice hlavního menu Flash aplikace: a)

inicializují var var var var

b)

naplnění menu tlačítky

c)

se tlačítka - tlačítkem je míněn jednotl. movieclip buttonHome = new ButtonHome(); buttonStudies = new ButtonStudies(); buttonPeople = new ButtonPeople(); buttonBlog = new ButtonBlog();

_menu = new Array(); _menu[0] = buttonHome; _menu[1] = buttonStudies; _menu[2] = buttonPeople; _menu[3] = buttonBlog; definice titulků – první znak značí pořadí sekce _menu[0].swfAdressTitle _menu[1].swfAdressTitle _menu[2].swfAdressTitle _menu[3].swfAdressTitle

= = = =

"0Homepage"; "1Studies"; "2People"; "3Support";

Proměnná _menu zde vystupuje jako privátní proměnná, definová nad celou aplikací, aby byla stále k dispozici. Jedná se o datový typ pole, který obsahuje jednotlivé movieclipy, objekty hlavního menu. Proměnná typu string swfAdressTitle je vlastní definovaná proměnná obsahující název řetězce, který se bude zobrazovat v titulku stránky. Následující text se ve stručnosti zabývá uvedeným kódem. Funkce onLoadedComplete se spustí až se načte a inicializuje XML soubor s informacemi o jednotlivých položkách menu. Poté se inicializuje posluchač událostí na objektu SWFAddress SWFAddress.addEventListener, který reaguje na událost. Pokud se změní URL,

4.4

Optimalizace pro Flash prezentace

58

zavolá se funkce onChange, která volá funkci loadPage načítání další stránky podle předem definovného příznaku. function onLoadedComplete(e:Event):void { SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChange); function onChange(e:SWFAddressEvent):void { if ( e.value != "/" ) { SWFAddress.setTitle( "DesignBeat - " + e.value.substring(2) ); } else { SWFAddress.setTitle( "DesignBeat - Homepage" ); }

var pageNumber; if ( e.value == ’/’ || e.value ==’/designBeat.swf’ ) { pageNumber = 0; } else { pageNumber = e.value.substring(1,2); } _currPage = pageNumber; loadPage( _currPage ); } } Funkce goToPage se volá, když se spustí událost kliknutí na hlavní menu. Změní hodnotu SWFAddress.setValue a vyvolá spuštění funkce onChange. function goToPage(e:MouseEvent):void { var currObj:Object = e.currentTarget; _currPage = currObj.toPage; var titleString:String = _menu[ _currPage ].swfAdressTitle; SWFAddress.setValue( titleString ); }

4.4

Optimalizace pro Flash prezentace

59

V této chvíli jsou ve Flash aplikaci vyřešeny všechny klíčové nedostatky v použitelnosti oproti běžným HTML stránkám a je udán správný směr pro SEO. Z pohledu uživatelů, tedy použitelnosti webu, jsou výsledky tohoto snažení známé téměř ihned. V optimalizaci pro vyhledávače je třeba více času a trpělivosti. 4.4.6

Problém URL obsahující soubor SWF

SEO pro Flash je soubor různých úkonů a technik vedoucích k nalezení a indexování Flash obsahu vyhledávačem. Pokud uživatel zadá ve vyhledávači Google určitý dotaz, Google mu na něj poskytne určité výsledky. Mezi nimi může být právě URL samotné Flash aplikace namísto webového serveru, na kterém je SWF soubor uložen. Pro lepší představu zde poslouží obrázek 21.

Obr. 21: Výsledek vyhledávání v SERP Google na dotaz 8222;designbeat zbynek8220;.

Pokud si uživatel vybere právě zmíněný výsledek vyhledávání a klikne na jeho odkaz http://www.designbeat.cz/designBeat.swf, okamžitě se spustí Flash animace, která si však nebude rozumět se SWFAddress kvůli odlišnému URL, než očekává. Tento problém je vyřešen patřičnou úpravou ve vstupním parametru dynamické metody swfobject.embedSWF. swfobject.embedSWF("designBeat.swf?home=true", "super-container", "100%", "100%", "9.0.0", null, null, null, attributes); V ActionScript zdrojovém kódu pak následující úpravou: var s:String = stage.loaderInfo.parameters["home"];

if (s != ’true’){ var url:String = "http://www.designbeat.cz/"; var request:URLRequest = new URLRequest(url); try { navigateToURL(request, ’_self’); } catch (e:Error) { trace("Error occurred!"); } }

4.5

Příprava komunikace s vyhledávacími roboty

60

Zjednodušeně řečeno bude stránka http://www.designbeat.cz/designBeat.swf přesměrována na domovskou stránku http://www.designbeat.cz/.

4.5

Příprava komunikace s vyhledávacími roboty

Vyhledávací roboti prochází naskrz celým obsahem webového serveru a ukládají si do indexu vše, co indexovat umí, pokud jim to však není patřičně zakázáno. Lepší orientaci robotů na webu je vhodné zajistit pomocí mapy webu, podle níž robot pozná strukturu stránek, prioritu jednotlivých URL a jak často se na jednotlivých místech webu obsah mění. 4.5.1

Vytvoření mapy webu

V případě webu designbeat.cz je použití mapy webu obzvláště důležité. Stránky, které jsou totiž vytvářeny pomocí technologie Flash, Ajax a stránky s dynamickým obsahem, jsou pro vyhledávače jen obtížně indexovatelné nebo je nelze indexovat vůbec. Na tomto místě je tedy přinejmenším vhodné soubor sitemap.xml důkladně robotům připravit. Podstata mapy webu je vytvořit hierarchickou strukturu jednotlivých URL stránek, podle které se robot může lépe orientovat a dostat se na stránky, ke kterým by za normálních okolností měl znesnadněný přístup, nebo na ně nevedly žádné odkazy, které by ho na tyto stránky vedly. Soubor sitemap.xml obsahující mapu webu webové prezentace designbeat.cz, ukázka uvedena níže, je uložen do kořenového adresáře a dostupný na adrese http://www.designbeat.cz/sitemap.xml. Mapa webu je zde využita zejména pro virtuální URL adresy tvořené pro Flash aplikaci pomocí metody SWFAddress. Pro každou URL je nastavena přibližná hodnota frekvence návštěvy vyhledávače, priorita, se kterou budou jednotlivé stránky indexovány a hodnota poslední změny dané stránky. Hodnoty titulní strany jsou rozdílné od hodnot jednotlivých podstránek.

4.5

Příprava komunikace s vyhledávacími roboty

61

http://www.designbeat.cz/ 2011-04-07 daily <priority>1 http://www.designbeat.cz/#/1Studies/ 2011-05-23 daily <priority>0.8 http://www.designbeat.cz/#/2People/ 2011-05-23 monthly <priority>0.8 http://www.designbeat.cz/#/7Ondra/ 2011-05-23 monthly <priority>0.8 . . . O skutečnosti, že soubor sitemap.xml na serveru webu v kořenovém adresáři existuje, je dobré Googlu dát vědět prostřednictvím online služby Webmaster Tool. Seznamu a ostatním vyhledávačům pak pomocí souboru robots.txt. Allow: /sitemap.xml\$

4.6

Návrh a realizace off-page faktorů

4.5.2

62

Konfigurace přístupu vyhledávačů

Optimalizace obrázků Dle mého názoru málokterý webový server se obejde bez obsahu, který by bylo lepší vyhledávačům znepřístupnit. Na serveru designbeat.cz existuje hned řada adresářů a některé typy souborů, které jsou vyhledávačům pomocí souboru robots.txt zakázány procházet. Textový soubor robots.txt obsahující informace pro roboty je nakopírován do kořenového adresáře webu a má následující podobu. Disallow: /downloads/ Disallow: /error/ Disallow: /flashTest/ Disallow: /fonts/ Disallow: /manager/ Disallow: /music/ Disallow: /pf/ Disallow: /projekty/ Disallow: /stats/ Disallow: /taskManager/ Disallow: /*.as\$ Disallow: /*.xml\$ Allow: /sitemap.xml\$

Meta robots Webová prezentace designbeat.cz nemá před uživateli ani roboty co skrývat, právě naopak, hodnota značky meta v hlavičce HTML stránky obsahuje tedy hodnotu index,follow. <meta name="robots" content="index,follow" />

4.6

Návrh a realizace off-page faktorů

Cílem optimalizace stránek je dosáhnout na vybraná klíčová slova co nejvyšších pozic ve výsledcích vyhledávání při vyhledávání právě těchto klíčových slov nebo frází. Správně vybraná klíčová slova mohou zvýšit nejen návštěvnost, ale i jejich celkový zisk. Zaměřit cílení klíčových slov na nejfrekventovaněji vyhledávaná slova může být pro SEO nejen obtížné, ale i velmi nákladné. Celkový profit může být daleko nižší než ten, který přinese cílení na méně vyhledávaná slova či fráze, tzv.

4.6

Návrh a realizace off-page faktorů

63

longtail. Z předchozí analýzy klíčových slov byla zvolena klíčová slova webdesign Praha, webdesign Brno a Flash animace, na která je linkbuilding prováděn. Dříve v této diplomové práci je uvedeno, že o pozicích ve výsledcích vyhledávání rozhoduje převážně kvalita zpětných odkazů, nejdůležitějších off-page faktorů, která je třeba neustále vylepšovat. Tato podkapitola se zabývá zejména návrhem jednotlivých způsobů získávání zpětných odkazů a jejich následnou realizací. Celkové přínosy optimalizace off-page i on-page faktorů budou prezentovány v další kapitole této diplomové práce. Linkbuilding je dlouhodobá činnost vyžadující neustálý zájem a jejíž výsledky se projevují v delších časových intervalech. Zda je tedy použita optimální strategie pro tuto metodu optimalizace, je možné pozorovat až po uplynutí jednoho nebo více měsíců. Úspěšnost budování zpětných odkazů závisí především na kvantitě a kvalitě příchozích odkazů, na jejich relevanci a vhodného užití anchor textu. Kvalita odkazů je dána hodnocením stránky a celkovým počtem odkazů, které ze stránky vedou. Značný vliv má i tematická podobnost s optimalizovaným webem. Pro představu o ceně, za jakou se dají zpětné odkazy ze stránek s různým hodnocením koupit. Hodnota jediného odkazu o PR3 je kolem 30 Kč, PR4 60 Kč, PR5 100 Kč a PR6 až kolem 500 Kč za měsíc. Z předchozího tedy vyplývá, že rozhodujícím faktorem ovlivňující celkovou úspěšnost optimalizace off-page faktorů je zejména stanovený rozpočet. Návratnost off-page optimalizace záleží jen na vhodně použité strategii a efektivně vynaložených prostředcích na nákup zpětných odkazů. V následujícím textu jsou uvedeny konkrétní činnosti, které byly v rámci této diplomové práce pro web designbeat.cz vykonány. Bezplatná registrace do katalogů Katalogy slouží na internetu k zaregistrování stránek do různých kategorií, podle kterých si uživatelé vybírají jednotlivé stránky, které později navštíví. V České republice působí stovky katalogů, ne všechny nabízí bezplatnou možnost registrace svých stránek. Přínos bezplatné registrace v nejznámějších katalozích, do kterých byl web designbeat.cz mimochodem také zaregistrován, je však zanedbatelně malý. V dané kategorii webdesignu nebo Internetu je však zapsáno obrovské množství firem a hodnota zpětného odkazu bude mít takřka bezvýznamný vliv na podpoření hodnocení stránky. Také množství příchozích návštěvníků na stránky nebude příliš velké, jestli vůbec nějaké. Provozovatelé těchto katalogů zde opět nabízí možnost placeného zvýhodnění před ostatními nebo umístění reklamy. Této možnosti však zatím u registrací v následujících katalozích nebylo využito. FIRMY.CZ Nejznámější a největší katalog firem v ČR provozovaný společností Seznam.cz, a.s. http://www.firmy.cz/ Open Directory Project Nejznámější světový katalog. Dokáží z něj čerpat informace světové vyhledávače Google a Yahoo!

4.6

Návrh a realizace off-page faktorů

64

http://www.dmoz.org/ najisto.cz Významný český katalog firem pod správou centrum.cz a atlas.cz. http://najisto.centrum.cz/ POZRI ČESKÁ REPUBLIKA Větev slavného slovenského katalog Pozri.sk http://www.pozri.cz Databaze.cz http://www.databaze.cz/ klikni.cz http://klikni.idnes.cz/ OLX http://prahacity.olx.cz/ zdroj.cz http://www.zdroj.cz/ Zóna.cz http://www.zona.cz/ vybereme.cz http://www.vybereme.cz/ Výměna odkazů funguje u našich klientů. Výměna odkazů funguje v rámci dobrých vztahů s klienty společnosti DesignBeat s.r.o. Jelikož se firma pohybuje na trhu krátce, většinou se jedná o nově založené weby, kde hodnota odkazu má zanedbatelný vliv. DesignBeat se však snaží, aby tomu bylo v budoucnu jinak. Publikování PR článků Cílem Public relations článků je informování o novinkách, službách, úspěších apod. PR články mají za úkol udržovat vztahy s veřejností a vzbuzovat větší důvěru vydavatele. Mimo to jsou v této práci použity pro budování zpětných odkazů, konkrétním cílením je výraz Flash animace. Výrobní hodnotu článku především představuje čas strávený napsáním takového článku. Z osobních zkušeností doporučuji objednání si výroby PR článku žurnalistou, kde se cena za normostranu pohybuje od 100 do 1000 Kč. V rámci této diplomové práce byly zveřejněny PR články, které je možné vidět pod následujícími odkazy na Internetu. http://www.e-zprediny.cz/profesionalni-weby http://www.zpravicky.info/kvalitni-internetove-stranky http://www.posloucham.info/webdesignu-je-zapotrebi http://www.novasluchatka.cz/moderni-internetove-stranky http://www.krasobazar.cz/webdesign http://www.webclanky.cz/internet/873-tolik-potrebny-webdesign.html

4.6

Návrh a realizace off-page faktorů

65

Nákup zpětných odkazů Obchod s odkazy vymezují dva základní ukazatele, nabídka a poptávka. Měsíční taxu za backlink určuje hodnocení stránky, například PageRank. Pro analýzu odhadu PR a SR pro výběr webu, kde bude zpětný odkaz umístěn, bylo využito online nástroje XRank.cz, dostupném na adrese http://xrank.cz/. Další nástroj zjišťování důležitých SEO parametrů zde využitý je Seoquake, ke stažení na adrese http://www.seoquake.com/. Umístění odkazů je časově omezeno, platba probíhá obvykle předem. Záleží na obchodních schopnostech obou stran, která nakonec bude spokojenější. Prodejce zpětných odkazů se také obvykle zavazuje k plnění určitých podmínek, základní z nich je dodržování minima zpětných odkazů na stránce a neumístění odkazů konkurence na příslušná místa. Jak by měl koupený odkaz vypadat je uvedeno níže. Ideální je uzavřít dohodu s prodejcem na tři až šest měsíců, kdy se nejvíce projeví přínos placeného linkbuilding a může tak následovat jasné rozhodnutí, zda v této činnosti pokračovat. V případě budování zpětných odkazů pro designbeat.cz byla oslovena spřátelená externí společnost. Přínos této konkrétní optimalizace je popsán v následující kapitole věnované zhodnocení výsledků práce. Nákup zpětných odkazů na webech s PR4 a PR3 a cílením na klíčová slova webdesign Brno, webdesign Praha je možné vidět z odkazů: www.bmcar.cz www.shbdesign.cz www.s3z.cz www.muj-obchod.cz

5

DISKUZE

5

66

Diskuze

Na základě provedených měření byly vyhodnoceny konkrétní přínosy optimalizace vytvořené webové prezentace využívající technologie Flash. Zároveň byly navrženy možnosti dalšího rozvoje.

5.1

Přínosy optimalizace

Pomocí online analytického nástroje Google Analytics bylo provedeno monitorování úspěšnosti webu, které přispělo k následnému vyhodnocení přínosů optimalizace. Výsledky jednotlivých měření představují zpracovaná data za období od 21. 2. 2011, kdy byla webová prezentace spuštěna, až do 25. 5. 2011. Operátorem site:domena „stringÿ bylo průběžně testováno indexování Flash obsahu. Přehled návštěvnosti Graf návštěvnosti je možné vidět na obrázku 22, kde kolísání je způsobeno rozdílnou návštěvností v pracovní dny a v dny volna.

Obr. 22: Graf kolísání návštěvnosti z Google Analytics pro designbeat.cz

Nejvyšší návštěvnost byla zaznamenána den po velké marketingové kampani v Brně při příležitosti spuštění webové prezentace designbeat.cz. Poté, jak si lze všimnout, měla návštěvnost klesající tendenci, až do doby druhé, podstatně menší marketingové kampaně spuštěné opět v Brně koncem měsíce března. Aktivní linkbuilding, zejména nákup zpětných odkazů, způsobil vyšší nárůst návštěvnosti zhruba od poloviny měsíce dubna. V této době se začal web designbeat.cz objevovat mezi výsledky vyhledávání druhé strany ve vyhledávači Google na klíčová slova „webdesign Brnoÿ a „webdesign Prahaÿ. Začátkem měsíce května se na dotaz „webdesign Prahaÿ web designbeat.cz začal zobrazovat v SERP Googlu již na první straně výsledků vyhledávání (obrázek 23) a byl opět zaznamenán vyšší růst návštěvnosti. Geografické rozdělení návštěvnosti lze vidět na obrázku 24, dominantní postavení zaujímá Brno, nárůst za poslední období zaznamenává i Praha, díky dobré pozici v SERP na klíčové slovo webdesign Praha. Nezanedbatelné procento návštěvnosti zaujímá i Ostrava. Mezi zdroji návštěvnosti prozatím nepatrně vedla návštěvnost z odkazujících stránek. Velké procento však stále zaujímá přímá návštěvnost, i když její podíl

5.1

Přínosy optimalizace

67

Obr. 23: Zobrazení designbeat.cz v SERP Google na dotaz „webdesign Prahaÿ.

Obr. 24: Google Analytics - vizualizace návštěvnosti designbeat.cz na mapě.

nabral klesající trend na úkor zdrojů z vyhledávačů, mezi kterými jednoznačně vede vyhledávač Google. Na obrázku 25 je zobrazen graf zdrojů návštěvnosti. Klíčová slova neboli hledané výrazy, které vedly návštěvníky z vyhledávačů na dané stránky, zobrazuje obrázek 26, jenž vychází také ze statistik měření aplikace Google Analytics. Je z něj zřejmé, že dominantními klíčovými slovy jsou název společnosti designbeat a jeho obměna. Výrazné postavení zde již zaujímají cílená klíčová slova linkbuildingu webdesign Brno a webdesign Praha. Z měření návštěvnosti nelze prozatím jasně určit, zda měla vyšší návratnost investice do marketingových kampaní mimo síť Internet nebo investice do budování zpětných odkazů. Strategie společnosti však byla zaměřena na obojí a dále podobným způsobem pravděpodobně bude po nějakou dobu pokračovat

5.1

Přínosy optimalizace

68

Obr. 25: Google Analytics 8211; zdroje návštěvnosti webu designbeat.cz.

Obr. 26: Google analytics 8211; sestupné seřazení zdrojů návštěvnosti na nejvýznamnější klíčová slova

Testování indexace Flash obsahu Googlem Základem veškerého hledání na internetu a tedy i SEO je dobře formulovaný text, který robot dokáže vyhledat. Pro Flash aplikace to platí rovněž. Prostřednictvím dotazovacího operátoru, ve tvaru site:designbeat.cz „8220;řetězec8221;ÿ bylo zkoumáno, zda opravdu dokáže Google zadaný text ve Flash obsahu vyhledat. Níže uvedené výsledky testů jsou důkazem přínosu metod optimalizace Flash obsahu.

Obr. 27: Důkaz indexování statického textového pole Googlem

Z těchto výsledků vyplývá velmi důležitá skutečnost pro SEO ve Flash aplikacích, že Google dokáže indexovat Flash obsah i když je SWF soubor s animací vkládán JavaScriptem pomocí knihovny SWFObject.

5.2

Návrhy na zlepšení

69

Obr. 28: Důkaz indexování dynamického textového pole Googlem

5.2

Návrhy na zlepšení

Málokterá webová prezentace bez získaných patřičných uživatelských zkušeností je vytvořená bezchybně a málokterý pokus o úspěšnou optimalizaci pro vyhledávače bez nabytého know-how dopadne dle představ. Webdesign z pohledu použitelnosti webu Při interní analýze a průzkumu uživatelských zkušeností byla získána potřebná zpětná vazba od několika dotázaných nezainteresovaných návštěvníků webu. Toto přispělo ke zjištění několika nedostatků internetové prezentace designbeat.cz. Hlavní nedostatek webu byl shledán v tom, že běžný uživatel internetu z webové prezentace designbeat.cz ihned nepozná, čím se firma zabývá. Mezi další nezanedbatelné nedostatky patřila chybějící jazyková mutace pro češtinu a výraznější banner pro informaci a instalaci chybějícího zásuvného modulu Adobe Flash Player v alternativním obsahu stránky. Poslední dva zmíněné nedostatky byly v době dokončování této diplomové práce již v řešení. Pro první a nejdůležitější shledaný nedostatek byl navržen drátěný model sekce služeb, kde bude uvedeno kompletní portfolio služeb společnosti DesignBeat s.r.o. Search Engine Marketing (SEM) Návrh na zlepšení z pohledu SEM spočívá ve využití dalších možností propagace značky na Internetu. Správné vedení profilů sociálních sítí a publikování článků na Internetu pro linkbaiting znamená snadné a levné získání velkého množství zpětných odkazů. Další návrh spočívá ve využití PPC reklamních kampaní kvůli možnosti přesného cílení na určité skupiny uživatelů a cílení na jiná klíčová slova, než jsou použita v optimalizaci on-page a off-page faktorů. V neposlední řadě spatřuji posílení SEO také doplněním vhodného textu, který bude v optimálním počtu obsahovat obměny klíčových slov jak pro Flash, tak pro alternativní HTML obsah. Webová analytika Google Analytics je robustní nástroj pro SEM, který se neustále vyvíjí a jeho funkce umožňují sledovat mnohem více, než bylo v této práci uvedeno. Návrh pro zlepšení

5.2

Návrhy na zlepšení

70

Obr. 29: Wireframe nové sekce služby webu designbeat.cz

spočívá ve stanovení určitých cílů, nastavení hodnot těchto cílů a následné monitorování chování uživatelů na webu. Jedním z cílů, který by se měl ve službě Google Analytics nastavit, je nastavení stažení marketingových materiálů z titulní strany webu nebo nastavení určitého času stráveného na dané stránce webu.

6

6

ZÁVĚR

71

Závěr

Flash je oblast experimentování a designérských triků, jejímž cílem je vytvořit originální a poutavé animace. Působnost Flash technologie se v poslední době posouvá od Flash bannerů po komplexní webové prezentace a RIA aplikace. Úkolem této diplomové práce bylo navrhnout metodická východiska optimalizace pro vyhledávače webových prezentací založených na technologii Flash. Vlastní řešení bylo realizováno na konkrétní webové prezentaci společnosti designbeat.cz, kde bylo možné vidět jednotlivé technologické postupy od samotného návrhu webové prezentace, přes její vývoj, metody optimalizace pro vyhledávače a návrh dalších zlepšení. Samotná optimalizace vycházela z nulového bodu, kdy byly webové stránky téměř nevyhledatelné. Zprvu nebylo možné vyhledat ani samotný název domény, což značí ve fázi budování značky velkou potíž. Při monitorování úspěchu a přínosu optimalizace bylo vyžadováno velké množství času a značná trpělivost. Každá změna strategie v SEO znamená totiž její reálné projevení se ve vyhledávači v intervalu jednoho až tří týdnů, někdy i více. Při zahájení projektu výstavby a optimalizace firemní internetové prezentace designbeat.cz bylo cokoliv pod doménou designbeat.cz i samotný kořenový název domény designbeat ve vyhledávači nedostupné, ale již krátce po dokončení těchto prací se podařilo Googlu začít indexovat Flash obsah prezentace designbeat.cz. Zároveň bylo díky vhodně zvolené SEO strategii dosaženo umístění na první straně výsledků vyhledávání Google (co se týče klíčového slova „webdesign Prahaÿ a umístění na druhé straně co se týče klíčového slova „webdesign Brnoÿ). Dosažením těchto výsledků a splněním vytyčeného cíle, považuji tuto diplomovou práci za úspěšnou.

7

7

LITERATURA

72

Literatura

Asual Asual: SWFAddress [online]. 2008 [cit. 21. 4. 2011]. Dostupné z WWW: http://www.asual.com/swfaddress/. Ataxo Optimalizace webu pro vyhledávače – SEO [online]. 2011 [cit. 11. 4. 2011]. Dostupné z WWW: http://www.ataxo.cz/informace/seo-optimalizace. Bhangal, S. Flash Hacks: 100 Industrial-Strength Tips & Tools. First Edition. USA: O’Reilly Media, Inc., 2004. 466 s. ISBN 0-596-00645-4. Brichta, O. Flash tiptrik: flash a tlačítka prohlížeče. [online]. 23. 7. 2007 [cit. 22. 4. 2011]. Dostupné z WWW: http://www.flash.cz/portal/clanek. aspx?id=862. CATTANEO, A., et al. The Smashing Book. Germany: Smashing Media GmbH, 2009. 311 s. . Clifton, B. Google Analytics: Podrobný průvodce webovými statistikami. 1.vyd. Brno: Computer Press, a.s., 2009. 334 s. ISBN 978-80-251-2231-0. Dover, D., Dafforn, E. Search Engine Optimization Secrets. 1st ed. USA : Wiley Publishing, Inc., 2011. 456 s. ISBN 978-0-470-55418. Enge, R., et al. The Art of SEO: Mastering Search Engine Optimization. First Edition. USA: O’Reilly Media, Inc., 2009. 574 s. ISBN 978-0-596-51886-8. Fendrych, A. Dobrý web: 7 nejčastějších chyb použitelnosti. [online]. 8. 10. 2009 [cit. 13. 3. 2011]. Dostupné z WWW: http://www.dobryweb.cz/ newsletter-7-nejcastejsich-chyb-pouzitelnosti/. Fishkin, R. SEOmoz: Perfecting Keyword Targeting & On-Page Optimization: How Do I Build the Perfectly Optimized Page?. [online]. 17. 8. 2009 [cit. 25. 3. 2011]. Dostupné z WWW: http://www.seomoz.org/blog/ perfecting-keyword-targeting-on-page-optimization. Grappone, J., Couzin, G. SEO : Search Engine Optimization. 1. vyd. Brno: ZONER software, s.r.o., 2007. 328 s. ISBN 978-80-86815-85-5. Geddes, B. Advanced Google AdWords. 1st ed. USA : Wiley Publishing, Inc., 2010. 519 s. ISBN 978-0-470-50023-1. Google Google: Inzerujte svou firmu na stránkách Google [online]. 2010 [cit. 18. 4. 2011]. Dostupné z WWW: https://adwords.google.com/. Google Google: centrála pro webmastery [online]. 20. 3. 2011 [cit. 3. 4. 2011]. Dostupné z WWW: http://www.google.com/support/webmasters/bin/ answer.py?hl=cs&answer=96569.

7

LITERATURA

73

Google Google: Dynamický náhled [online]. 2011 [cit. 11. 4. 2011]. Dostupné z WWW: http://www.google.com/landing/instantpreviews/. Google Google: Informace o korporaci [online]. 2011 [cit. 17. 4. 2011]. Dostupné z WWW: http://www.google.com/corporate/tech.html. Grover, Ch. Flash CS5: The Missing Manual. First Edition. USA: O’Reilly Media, Inc., 2010. 756 s. ISBN 978-1-449-38025-0. Jerkovic, J. I. SEO Warrior: Essential Techniques for Increasing Web Visibility. First Edition. USA: O’Reilly Media, Inc., 2009. 470 s. ISBN 978-0-596-15707-4. Krug, S. Web design: Nenuťte uživatele přemýšlet!. 2. vyd. Brno: Computer Press, a.s., 2006. 167 s. ISBN 80-251-1291-8. Kubíček, M. Velký průvodce SEO : Jak dosáhnout nejlepších pozic ve vyhledávačích. 1. vyd. Brno: Computer Press, a.s., 2008. 318 s. ISBN 978-80-251-2195-5. Kubíček, M., Linhart, J. 333 tipů a triků pro SEO. 1. vyd. Brno: Computer Press, a.s., 2010. 262 s. ISBN 978-80-251-2468-0. McDaniel, C. Two Cats In A Sack : Designer-Developer Discord. Smashing Magazine. [online]. 13. 5. 2011 [cit. 15. 5. 2011]. Dostupné z WWW: http://www.smashingmagazine.com/2011/05/13/ two-cats-in-a-sack-designer-developer-discord/. Perkins, T. Search Engine Optimization for Flash : Best Practices for Using Flash on the Web. First Edition. USA: O’Reilly Media, Inc., 2009. 243 s. ISBN 9780-596-52252-0. Reinhardt, R. Video with Adobe Flash CS4 Professional Studio Techniques. First Edition. USA: Adobe Press, 2009. 369 s. ISBN 978-0-321-60623-5. SEOmoz SEOmoz: On-Site Related Topics [online]. 2010 [cit. 25. 3. 2011]. Dostupné z WWW: http://www.seomoz.org/knowledge/title-tag/. Seznam.cz Seznam.cz: Nápověda. Meta tag robots [online]. 2010 [cit. 3. 4. 2011]. Dostupné z WWW: http://napoveda.seznam.cz/cz/ fulltext-hledani-v-internetu/komunikace-s-vyhledavacim-robotem/ meta-tag-robots/. Seznam.cz Seznam.cz: Nápověda. Algoritmus [online]. 2010 [cit. 17. 4. 2011]. Dostupné z WWW: http://napoveda.seznam.cz/cz/ hledani-fulltext-algoritmus-vyhledavani-razeni-vysledku-faq-dotazy. html. Sirovich, J., Darie, C. SEO v PHP: Programujeme profesionálně. 1. vyd. Brno: Computer Press, a.s., 2008. 380 s. ISBN 978-80-251-2083-5.

7

LITERATURA

74

Sluis, B. Detecting Flash Player versions and embedding SWF files with SWFObject 2. Adobe Developer Connection: Flash Player Developer Center. [online]. 15. 8. 2008 [cit. 20. 4. 2011]. Dostupné z WWW: http://www.adobe.com/ devnet/flashplayer/articles/swfobject.html. Štědroň, B., Budiš, P., Štědroň, B. jr. Marketing a nová ekonomika. 1. vyd. Praha: C.H. Beck, 2009. 198 s. ISBN 978-80-7400-146-8. Veloso, M. WEB COPY THAT SELLS: The Revolutionary Formula for Creating Killer Copy That Grabs Their Attention and Compels Them to Buy. 2nd ed. USA: AMACOM, 2009. 314 s. ISBN 978-0-8144-1304-3. Wiki Swfobject: documentation . [online]. 2011 [cit. 21. 4. 2011]. Dostupné z WWW: http://code.google.com/p/swfobject/wiki/documentation.

Přílohy

A

A

DRÁTĚNÝ MODEL TITULNÍ STRANY.

Drátěný model titulní strany.

Obr. 30: Drátěný model titulní strany.

76

B

B

DRÁTĚNÝ MODEL PŘÍPADOVÝCH STUDIÍ.

Drátěný model případových studií.

Obr. 31: Drátěný model případových studií.

77

C

C

DRÁTĚNÝ MODEL DETAILU PŘÍPADOVÝCH STUDIÍ.

Drátěný model detailu případových studií.

Obr. 32: Drátěný model detailu případových studií.

78

D

D

DRÁTĚNÝ MODEL SEKCE KLÍČOVÍ LIDÉ.

Drátěný model sekce klíčoví lidé.

Obr. 33: Drátěný model sekce klíčoví lidé.

79

E

E

DRÁTĚNÝ MODEL DETAILU SEKCE KLÍČOVÍ LIDÉ.

Drátěný model detailu sekce klíčoví lidé.

Obr. 34: Drátěný model detailu sekce klíčoví lidé.

80

F

F

DRÁTĚNÝ MODEL SUPPORT.

Drátěný model support.

Obr. 35: Drátěný model support.

81