Návrh webových stránek

Úvod do HTML

HTML je značkovací jazyk, pomocí kterého definujete strukturu webových stránek.

Jak to funguje

Internetová stránka je HTML soubor (soubor s příponou html; někdy mívá i příponu htm *). Jedná se v podstatě o textový soubor, který obsahuje text + tagy (speciální značky). Tomuto obsahu se říká zdrojový kód.

Takový soubor (vy)tvoříme v nějakém HTML editoru (programu pro tvorbu HTML souborů). Pokud ho otevřeme ve webovém prohlížeči (Opera, Internet Explorer, Firefox, Safari, …), ukáže se nám výsledná podoba stránky tak, jak ji uvidí uživatelé Internetu, pokud svůj výtvor nahrajeme na server.

Obsah webu je pak tvořen jedním či více html soubory, které jsou navzájem propojeny, pomocí „klikacích“ odkazů. My prohlížeči nabídneme HTML soubor, on ho vykreslí. V editoru tedy vytváříme HTML soubor (stránku) – píšeme zdrojový kód, a v prohlížeči jej pak zobrazujeme.

Pokud pak provedeme nějakou změnu v HTML souboru a chceme ji zkontrolovat v prohlížeči, je nutno danou stránku v prohlížeči aktualizovat (refreshovat).

webdesign html
webdesign html

Forma x obsah

Dnešním trendem tvorby webů je striktní oddělení formy od obsahu. Zjednodušeně řečeno o obsah se stará HTML a o vzhled (formu) CSS soubor.

Soubor s příponou css tedy zajišťuje vzhled. Je s HTML souborem/soubory propojen (někdy je CSS psáno přímo do HTML souboru) a oba jsou pak nabídnuty prohlížeči, aby se s nimi nějak vyrovnal a vykreslil je.

CSS soubor také vytváříme ve stejném editoru jako HTML soubor, avšak sám o sobě nemá význam, musí být spojen právě s ním. Aneb HTML soubor může sám o sobě existovat a být plně funkční, CSS soubor však ne.

Jak začít

Než začneme s vytvářením vašich nových stránek, je potřeba si ujasnit co od nich očekáváte a co vše na nich budete chtít prezentovat a jakým způsobem.

realizace

Logická struktura webu

Nejprve se soustřeďte na to, aby váš web dobře fungoval a teprve pak na to, aby dobře vypadal. Stránky by měly být uspořádány tak, aby uživatel jejich rozvržení ihned pochopil. Jednotlivé oblasti webu by měly odpovídat jeho potřebám a příbuzné informace by se měly nacházet pohromadě. Tomu by měla odpovídat i adresářová struktura, kterou pro soubory vytvoříte.

Grafický návrh

Grafický návrh je významnou součástí v podstatě jakéhokoliv webu, všude totiž plní několik hlavních úkolů:

  • Vytváří první dojem – ovlivňuje ochotu uživatele dále web zkoumat poté, co přišel např. z vyhledávače.
  • Zvyšuje hodnověrnost prezentace, tedy ochotu uživatelů věřit uváděným informacím nebo si dokonce rovnou něco objednat.
  • Zvedá zapamatovatelnost a tím i pravděpodobnost další návštěvy (je třeba si uvědomit, že jen malé množství obchodů je uzavřeno při první návštěvě).
  • Podporuje image firmy – ať už svou atraktivitou, celkovým vyzněním, čistotou či moderností, grafický návrh významně ovlivňuje způsob, jakým návštěvníci vaši společnost vnímají.

Kódovaní šablon

Dobrý kód je nedílnou součástí úspěšného webu. Téměř nikdo ho sice nevidí, ale na pozadí stránky zajištuje, aby se správně zobrazovala ve všech webových prohlížečích.

Dodržujeme webové standardy

Na stránkách, které vytváříme dodržujeme v maximální možné míře doporučení a standardy konsorcia W3C, ale respektujeme také poměrně velké množství chyb a rozdílů u webových prohlížečů.

Dobrá webová šablona zaručuje:

  • Korektní zobrazení bez ohledu na vybavení a prohlížeč uživatele (IE, Firefox, Opera, ap.)
  • Přístupnost pro uživatele a vyhledávače
  • Rychlost načítání stránky
  • Sémantika, kterou ocení uživatelé i vyhledávače
  • Validní kód odpovídající webovým standardům konsorcia W3C
  • Ošetření tiskové verze stránek (pomocí souboru CSS), která uživateli umožní vytisknout stránky bez nepotřebných prvků (navigace, zápatí, apod.)

Formátování šablon

Každý text má obsah a formu. Když mluvím o formátu (formě) webových stránek, myslím tím třeba barvu a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. To je formátování. Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text.

Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text.

  1. Starší způsob používá přímo HTML tagy. Například kurzíva se dělá pomocí tagů <i> a </i>: kurzíva). Pomocí tagů se některé věci nedají udělat.
  2. Novější způsob — CSS styly — používá tag <style> a obecný atribut „style“, kterému se přiřazuje nějaká definice. Je to složitější, ale užitečnější a všeobecné.

Co je CSS?

Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky „kaskádové styly“. Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední.

Domény a webhosting

Ve chvíli, kdy se tvorba WWW stránek chýlí ke konci, je potřeba je umístit na internet, na tzv. ostrý server. Řeší se tedy, kdo zajistí webhosting. Existuje několik možností:

  • Free webhosting (freehosting) – webhosting zdarma. Jako většina bezplatných služeb to však má háček, servery pro neplacený webhosting bývají často přetížené a pomalé (projeví se to třeba při snaze optimalizovat pro vyhledávače). Také technická podpora nepatří k nejrychlejším. Proto se tento webhosting hodí spíše pro studenty, nikdy ne pro firemní prezentace.
  • Komerční webhosting – využití firmy specializované přímo na poskytování služeb v oblasti webhostingu. Zde je již nabídka stálá a spolehlivá, nevýhodou však zůstává malá dostupnost pokročilých vývojářských nástrojů na většině běžných komerčních serverů.

Registrace do katalogů / vyhledávačů

Jakmile spustíte nový web, je třeba na něj přivést návštěvníky. Prvním krokem obvykle bývá registrace do katalogů a vyhledávačů – je to rychlý a levný způsob propagace. Registrace do katalogů se však vyplatí i staršímu webu, byla-li jeho propagace zanedbána. Jde zkrátka o základ webové viditelnosti.

Domény a webhosting

Co je to doména?

Doménové jméno neboli doména je jedinečný identifikátor webových stránek, který při prohlížení internetu zadáváte do lišty prohlížeče. Doména nahrazuje IP adresy serverů, na nichž jsou weby umístěné a usnadňuje tak nejen vyhledávání nových stránek, ale i používání internetu jako takového – textové označení stránek se snáze zapamatuje než kombinace čísel.

Doména je součástí URL (adresy) webových stránek a pomáhá návštěvníkovi rozeznat zaměření webu. Příkladem může být naše digitální studio, které najdete na adrese www.umimeweby.cz. Již z názvu domény (druhé úrovně viz níže) vyplývá, že se zabýváme tvorbou webových stránek.

Kromě webových stránek se s doménou můžete setkat také u e-mailových adres, konkrétně v prostoru za zavináčem. Doménové jméno se v tomto případě shoduje s doménou webu – v případě našeho digitálního studia například info@umimeweby.cz.

Správu domén má na starosti organizace CZ.NIC, na jejíž stránkách najdete všechny podstatné informace o pořízení domény i registr stávajících domén.

DOMÉNA PRVNÍHO, DRUHÉHO A TŘETÍHO ŘÁDU

Internetová doména se skládá ze tří částí:

  • doména prvního řádu (první úrovně) – například cz,
  • doména druhého řádu (druhé úrovně) – například umimeweby,
  • doména třetího řádu (třetí úrovně) – například www.

Každá část je oddělena tečkou a všechny jsou součástí URL webu. Povinnou součástí URL jsou první dvě úrovně. Třetí se používá pouze pro upřesnění obsahu webu.

DOMÉNA PRVNÍHO ŘÁDU

Doména první úrovně neboli top-level domain (TLD), je část URL psána úplně vpravo. Typicky se jedná o národní domény označující jazykové mutace webu. Mezi domény prvního řádu patří například: cz, sk, edu, com, org.

DOMÉNA DRUHÉHO ŘÁDU

Doména druhého řádu by již měla souviset s nabízenými službami nebo produkty. Často obsahuje název firmy, případně klíčové slovo, které popisuje druh podnikání. Právě tato část doménového jména má největší vliv na SEO i na zapamatovatelnost adresy stránek.

DOMÉNA TŘETÍHO ŘÁDU

Doména třetího řádu je ze všech uvedených nejkonkrétnější. Specifikuje konkrétní místo na webu, a proto bývá nazývaná také jako subdoména. Píše se před doménu druhého řádu, příkladem může být blog.umimeweby.cz.

PROČ CHTÍT VLASTNÍ DOMÉNU

Vlastní internetová doména je symbol profesionality. Dnes je již považována za standard a návštěvníkům vašich stránek vysílá signál, že to s podnikáním myslíte vážně. Pomůže vám tedy při budování značky (brandu) i vztahu se zákazníky.

E-mailové adresy na vlastní doméně navíc působí mnohem důvěryhodněji než adresy na doméně Gmail nebo Seznam, kterou si může založit v podstatě každý. Vyhnete se tak zbytečným pochybnostem o kvalitách vašich služeb nebo produktů.

JAK VYBRAT NÁZEV DOMÉNY

Úvodní charakteristika domény už zmínila, že název domény musí být unikátní. Je to logické, jelikož pokud by unikátní nebyl, tak by nemohl sloužit k navštívení webových stránek. Například pokud by existovaly dva weby www.umimeweby.cz, tak by DNS nevěděl, na které stránky se chcete dostat.

Jedinečnost domény si můžete ověřit na stránkách CZ.NIC, konkrétně prostřednictvím databáze WHOIS (viz níže). Ještě před tím, než si jedinečnost názvu domény ověříte, však musíte vymyslet, jak svou doménu, potažmo web, pojmenujete.

Název domény by měl popisovat váš záměr. Návštěvník by již z URL měl rozpoznat, čím se dané stránky zabývají. Stejně tak by však název domény měl být co nejkratší (optimálně jednoslovný), originální a snadno zapamatovatelný.

V doméně můžete použít všechny znaky anglické abecedy (čili písmena bez diakritiky), číslice nebo pomlčky. Celková délka nesmí přesáhnout 255 znaků a každá část musí mít maximálně 63 znaků.

TIPY, JAK VYBRAT DOMÉNOVÉ JMÉNO

  • Vyhněte se slovům, které evokují k psaní chyb v názvu.
  • Snažte se vymyslet doménové jméno, které si lidé nebudou plést s již existujícím.
  • Použijte slova, která stručně a jasně popisují váš záměr.
  • Umístěte do domény relevantní klíčové slovo.
  • Nepoužívejte číslice.
  • Pokud cílíte pouze na český trh, zvolte doménu .cz.

JAK NAJÍT VOLNÉ DOMÉNY

Ve chvíli, kdy již máte jasno v tom, jaké doménové jméno chcete zaregistrovat, přichází na řadu ověření, zda je daná doména volná. Nejbezpečnějším způsobem, jak najít volné domény, je navštívit stránky CZ.NIC a zadat kýžený název do databáze WHOIS:

  1. Přejděte na web CZ.NIC.
  2. Do lišty pro vyhledávání zadejte název domény.
  3. Klikněte na tlačítko „Hledat“.

V případě, že bude doména obsazena máte v zásadě dvě možnosti. Buď zkusíte vyhledávání znovu, s jinou doménou první úrovně (například místo .cz použijete .org), nebo si vymyslíte jiné doménové jméno. Vhodnější je druhá popsaná varianta, jinak riskujete, že si budou uživatelé stránky plést.

JAK NA POŘÍZENÍ (REGISTRACI) VLASTNÍ DOMÉNY

Po tom, co si ověříte, že je vámi zvolená doména volná, přichází na řadu pořízení, respektive registrace domény. V první řadě je důležité upozornit na to, že si doménu nekupujete, nýbrž pronajímáte. Každý rok je tedy nutné pronájem prodloužit zaplacením poplatku. Ten se pohybuje mezi 200–300 Kč za rok.

Samotnou registraci pak můžete provést dvěma způsoby:

  • prostřednictvím hostingu,
  • na vlastní pěst u registrátora.

REGISTRACE DOMÉNY PŘES HOSTING KROK ZA KROKEM

Jednodušším a využívanějším způsobem, jak registrovat doménu, je najít poskytovatele hostingu, který registraci provede za vás. Zkuste tedy na internetu vyhledat poskytovatele hostingu a porovnejte jejich nabídky. Zaměřte se zejména na jejich reference a délku působení na trhu, které vám napoví, jak dlouho se danou problematikou zabývají. Pak už stačí jen objednat službu, zaplatit poplatek a počkat, než poskytovatel hostingu zajistí všechny technické náležitosti. Cena za roční hosting se pohybuje mezi 600–1 000 Kč. Celkově by tedy základní náklady za provoz webu neměly přesáhnout 2 000 Kč.

NA CO SI DÁT POZOR

V případě, že budete doménu registrovat prostřednictvím hostingu, nezapomeňte prostřednictvím databáze WHOIS zkontrolovat jméno vlastníka domény. Vyhnete se tak zbytečným soudním sporům o vlastnictví v případě odcizení domény.

Zkontrolujte si také aktuálnost kontaktních údajů. Vyhnete se tak například promarněnému prodloužení registrace domény, kvůli tomu, že vás hosting upozornil na expiraci na e-mail, který nepoužíváte.

Na pozici majitele domény uveďte majitele nebo jednatele firmy. Řádový zaměstnanec může z firmy kdykoli odejít i s přihlašovacími údaji a s doménou pak naložit dle vlastního uvážení.

OVĚŘENÍ DOMÉNY ANEB JAK ZJISTIT, KDO JE VLASTNÍK DOMÉNY

Ke zjištění, kdo je vlastník domény můžete opět využít stránky CZ.NIC a databázi WHOIS:

  1. Přejděte na web CZ.NIC.
  2. Do lišty pro vyhledávání zadejte název domény.
  3. Klikněte na tlačítko „Hledat“.

Jestliže se ve vypisovaných údajích zobrazuje vaše jméno, případně jméno ředitele nebo jednatele firmy, je vše v pořádku a nemusíte nic řešit. Pokud by se zde objevovalo například jméno programátora, který pro vás web vytvářel, je na místě jednat a doménu přepsat na sebe.

ROZDÍL MEZI DOMÉNOU A WEBHOSTINGEM

Postup, jak na registraci vlastní domény, kromě samotného doménového jména zmiňoval také webhosting. Závěrem je tedy vhodné upřesnit, jaký je mezi oběma pojmy rozdíl.

Zajištění webhostingu a doménového jména jsou základní prvky provozování webových stránek. Registrace domény pro vás znamená, že můžete své stránky zpřístupnit pod určitou adresou. Webhosting pak přináší prostor, kam budete webové stránky a jejich obsah ukládat.

Doména je tedy v podstatě prostředek k tomu, aby vás uživatelé mohli najít, zatímco webhosting technické řešení. Oboje často zajišťuje jeden poskytovatel.

Hosting a webhosting

Na internetu se setkáte s termíny hosting a webhosting. Někdy jsou spojovány, někdy zaměňovány a někdy jsou používány za totožné. Jak to s těmito termíny tedy je:

Druhy hostingů

Termín hosting obecně je používán pro službu pronájmu určitého zázemí poskytovatele klientovi a poskytnutí s tím souvisejících služeb. Webhosting je tedy jedním z druhů hostingů.

Webhosting je dle našeho příkladu jedna „virtuální kancelář“ s jasně danými parametry a společnými sdílenými prostředky s ostatními „virtuálními kancelářemi“. Sdílení je pro tuto službu typické (tak jako v budově sdílíte na patře toalety, kuchyňku, výtahy, schodiště apod.).

Virtuální servery dle našeho příkladu by odpovídalo pronájmu např. celého patra kanceláří s tím, že Vám poskytovatel umožní uspořádat si patro jak chcete. Fyzicky si můžete virtuální servery představit jako samostatné operační systémy na jednom serveru, které fungují vedle sebe. Výhodou virtuálního serveru je snížení míry sdílení prostředků serverů – dle našeho příkladu máte celé patro pro sebe, nikdo cizí Vám nechodí po chodbách, nesdílíte s ostatními kuchyňku ani toalety atd.

Dedikované servery jsou dle našeho příkladu pronájmem celé budovy. Dedikovaný server je nejvýkonnější řešení, po kterém můžete sáhnout, pokud již máte velmi náročné www stránky nebo potřebujete vyšší stupně výkonu i zabezpečení.

Serverhosting / serverhousing je služba, kterou poskytovatel umožní klientovi umístit do jeho housingového centra vlastní server. Dle našeho příkladu by serverhousing byla služba, kdy majitel pozemku pronajme jeho část spolu s inženýrskými sítěmi svému klientovi, aby si na pozemku postavil budovu.

DNS hosting bývá součástí webhostingu a jedná se o hostování jmenných serverů domény. Tzn. služba, dle které se řídí umístění Vaší domény na různých serverech. Dle našeho příkladu je to vedení seznamu všech kanceláří a adres, kde se tyto kanceláře nachází.

Freehosting je vlastně obdobná služba jako webhosting, kde ale místo platby za službu musíte strpět většinou vložení reklamy do Vašich www stránek nebo e-mailů. Obecně bývá kvalita služeb i záruky a technická podpora freehostingů nižší než u placených služeb webhostingů. Zpravidla také na freehostingu nemůžete mít vlastní doménu.

Webhosting

Webhosting je služba s řadou volitelných parametrů, proto se jeho ceny pohybují od pár stovek do několika tisíc korun ročně. V nabídkách se uvádí cena za 1 měsíc webhostingu (k tomu je nutné připočítat roční poplatek za doménu, zpravidla 200-300 Kč). Někdy se ceny uvádějí za rok s doménou včetně. Webhosting i doménu si můžete zakoupit u jedné společnosti, je to ideální při případných změnách.

Co by měl hosting splňovat

Záleží na vašem projektu, jaké vlastnosti hostingu budete potřebovat, je dobré brát více než méně, protože web se může postupně vyvýjet a narůstat.

Hosting – velikost prostoru

Velikost prostoru je základním rozlišovacím parametrem webhostingových programů. Od 10 MB do několika 1000 MB, musíte sami zvážit kolik místa je třeba (i posléze je vždy možné nějaké ty MB přidat, nebo změnit program). Nejvíce prostoru vyžadují obrázky, fotografie, videa, hudba. Prostor pro textové informace je zpravidla zanedbatelný. Serverové skripty PHP, ASP a databáze MySQL, MS SQL Dalším důležitým prvkem je podpora programovacích jazyků, pokud je potřebujete. Podpora PHP nebo ASP není samozřejmostí, jedná se o nadstandardní službu. Podporu PHP nabízí výrazně více webhostingových společností než ASP. Rovněž databáze obvykle chybí v základní nabídce – MySQL, MS SQL atd.

E-mail

S vlastní doménou můžete mít také vlastní e-mailovou adresu, např. jmeno@domena.cz. Pokud chcete, můžete využít vlastní e-mail a s ním související služby – filtr proti spamu, antivir. Hosting obvykle limituje počet e-mailových schránek, které můžete vytvořit, to je třeba si ověřit. E-mail obvykle chybí v nabídce nejlevnějších programů.

FTP

Je vhodné, když webhosting umožňuje přidávat stránky přes FTP. S FTP se pracuje stejně jako se soubory na disku a je to výrazně jednoduší a rychlejší. FTP poskytuje každý webhosting, pokud ne, zvolte jinou společnost.

Zákaznická podpora

Je pohodlné, když můžete někoho kontaktovat 24 hodin 7 dní v týdnu při případném problému (nefunkční e-mail, zapomenuté heslo). Dobře fungující zákaznická podpora je nesmírně podstatná.

Administrační rozhraní pro hosting

Hosting by měl zahrnovat kompletní webovou administraci, kde si budete moci sami nastavit parametry vašeho webhostingu, hesla, vytvářet subdomény, e-maily, databáze atd.

Traffic

Traffic = objem dat, která si návštěvníci vyžádají za dané období. Rozhodně vyžadujte webhosting s neomezeným trafficem, to je, že přenesená data nebudou nijak omezována.

Dostupnost a konektivita webhostingu

Hosting musí být 100% dostupný (v praxi to není možné obvykle se vysoká a kvalitní dostupnost 99,9..%). Dostupnost 99% znamená, že že 1 stránka ze 100 nebude zobrazena a to není dostatečné.

To jsou základní parametry, podle kterých můžete srovnávat jednotlivé webhostingové nabídky.

Seznam Webhostingu
  • ACTIVE 24
  • AeroHosting
  • ASPone.cz
  • Bezobav.cz
  • Český hosting
  • CFMhost
  • CyberHost.cz
  • Ebola.cz
  • FORPSI
  • GIGASERVER
  • Hosting 51
  • Hosting BlueBoard.cz
  • Hosting90
  • Hukot.cz
  • IGNUM
  • Klenot.cz
  • ONEbit.cz
  • Otoman
  • Stable.cz
  • TVUJWEB.cz
  • WEB4ce
  • Web4U
  • WebDum.com
  • Webhosting C4
  • xHosting.cz

Webhosting zdarma

Webhosting zdarma je nabízen obvykle výměnou za nějakou protislužbu – například umístění reklamního banneru na stránky, umístění linku nebo reklamní lišty, registrace domény přes poskytovatele freehostingu a podobně. Zpravidla nejsou dostupné všechny technologie nebo je jejich využití různým způsobem omezené, aby stránky umístěné zdarma příliš nezatěžovaly server. Kvalita free hostingů je různá, některé služby jsou bohužel pověstné častými výpadky. Freehosting většinou negarantuje žádné služby, může kdykoliv bez náhrady ukončit činnost, stejně jako omezit své služby.

Web hosting zdarma je vhodný zejména pro nenáročné aplikace, jako například osobní stránky, stránky malé zájmové skupiny, nekomerční stránky sdružení a podobně. Free webhosting obvykle neobsahuje technickou podporu, většina freehostingů poskytuje pouze fórum uživatelů, kde si uživatelé radí navzájem.

Pokud vyžadujete spolehlivost, provoz bez větších výpadků, stabilitu, technickou podporu nebo nejste ochotni umisťovat na své stránky reklamní bannery, doporučujeme využít placený webhosting. I ty nejlevnější firmy vám nabídnou alespoň základní garance, které free web hosting, jako služba poskytovaná zdarma, nabídnout nemůže.

Logická struktura webu

Jak obsáhlé vaše budoucí stránky mají být? Budou prezentovat pouze základní informace o vás nebo budete chtít poskytnout uživatelům i podrobnější informace? Jaké položky budou součástí menu a jaké množství položek bude potřeba? Jakým způsobem budou jednotlivé stránky provázány?

  • Rozdělte web na jednotlivé logické celky. Tyto celky, „rodiče“, mají podcelky, „děti“, jež mohou mít další děti – vzniká struktura webu v podobě tzv. stromu. Většinou je lepší rozdělit obsah na více stran, než vytvořit jednu velice dlouhou stranu.
  • Logická a jasná struktura webu je pro orientaci návštěvníka klíčovým faktorem.
  • Vizuální podobou struktury webu je tzv. mapa webu (site map).

Navigace

Navigace je základním stavebním kamenem každé webové prezentace. Je-li dobrá, návštěvník se dobře a rychle orientuje a nachází hledané informace. Je-li špatná, návštěvník se ztrácí a často rovnou z webu odchází.

Navigace musí být stálá a pružná.

  • Je stále na svém místě
  • Aktuální pozice je v menu vyznačena (přizpůsobení aktuálnímu stavu)

Vývoj navigace

Při návrhu navigace vstupují do hry otázky použitelnosti a snadné údržby. Pokud není navigace správně navržena, webdesigner riskuje ztrátu uživatele. Při návrhu navigace je vhodné dodržovat zažité konvence.

  • Navigační systémy. Lidé mají ve zvyku hledat navigaci na webové stránce nahoře nebo vlevo a přijali další specifické systémy, jako jsou záložky nebo odkazy drobečkového menu.
  • Ikony a jiné vizuální prvky. Podobně jako konvenčně zažité symboly v běžném životě, tak i na internetu jsou zažité ikony. Takovou ikonou může být například ikona košíku pro vložení zboží určeného k nákupu v internetovém obchodě.
  • Umístění na stránce. U lidí se ustálily jisté představy o tom, kde se mají určité prvky na stránce objevit. Logo by mělo být například v levém horním rohu a ikona košíku v pravém horním, podobně jako rychlé vyhledávání.

Typy navigace

  • Základní
  • Doplňková, např. drobečková (Nacházíte se zde: Úvod → O knihovně → Historie)
  • Mapa webu
  • Vyhledávání
  • Odkazy v textu

Další navigační prvky

  • Logo jako odkaz na úvodní stránku
  • Čitelná URL adresa (vypovídá o struktuře webu, např. www.knihovna-abc.cz/o-knihovne/historie)
  • Stránka nenalezena – chyba 404 (Obsahuje jen to nejnutnější – nejlépe odkazy na nejdůležitější části webu, kontakt na administrátora a vyhledávací formulář)

Časté chyby v navigaci

  • Nevhodné členění webu (struktura)
  • Nekonzistence
  • Stránka odkazuje sama na sebe
  • Menu nevytvářejte pomocí JavaScriptu, roletkového menu či image map (tyto prvky nejsou přístupné uživatelům se speciálním vybavením)

Adresářová struktura

Logické struktuře webu jak ji vidí uživatel, by měla odpovídat i adresářová struktura, kterou pro soubory vytvoříte.

Soubory webu si můžete ukládat do adresářů, jak jste zvyklí u normálních souborů. Všechny soubory byste měli mít na serveru v jednom adresáři a v jeho podadresářích. Je pak vlastně jedno, kolik si uděláte vnořených podadresářů a jak to budete dělat. Jde o to, abyste v tom měli přehled.

Jména souborů

Svoje HTML soubory byste měli pojmenovat podle následujících zásad:

  • Nepoužívejte češtinu ve jménech souborů a adresářů. Jestli to někde funguje, neznamená to, že to bude fungovat všude.
  • Nepoužívejte mezery.Všude, kde chcete ve jménu souboru naznačit mezeru, dejte mínusko, např. hezke-odkazy.html.
  • V názvu souboru se nesmí používat znaky / \ * : ? # < >.
  • Doporučuji zadávat všechna jména souborů malými písmeny. Adresa k souboru je totiž case-senzitivní, což znamená, že záleží na velikosti písmen (podle standardu, v praxi na linuxovských serverech, kterých je většina), takže se můžete zadáním špatné velikosti písmenka snadno splést.
  • Používejte taková jména, u nichž poznáte, co soubor obsahuje.

Jako přípona užívaných souborů se používá html nebo htm. Doporučuju používat příponu html, přípona htm je již používána minimálně. Nicméně, pokud budete mít při brouzdání špatnou adresu, můžete zkusit změnit html na htm nebo naopak.

Adresáře (neboli složky)

Několik doporučení:

  1. Pro jména adresářů platí totéž, co pro jména souborů: bez mezer, háčků atd., nejlépe malými písmeny. Obzvlášť zdůrazňuji srozumitelnost — jméno adresáře je nyní vlastně součást adresy.
  2. Nedělejte příliš složitě zanořené struktury.
  3. Není chybou nechat všechny soubory ve stejném adresáři. Problém pak občas nastává pouze při použití FTP — adresáře s mnoha položkami se pomalu načítají. A hlavně jde o to, abyste se v tom po čase vyznali.
  4. Je zvykem dávat obrázky do speciálního adresáře, může být nazvaný např. img nebo images.
  5. Soubory, které už nebudete měnit, si dejte do samostatného adresáře. Usnadní vám to aktualizaci, správu a nahrávání webu na server.
logicka struktura

Přesouvání a přejmenování souborů

Když soubor přesunete nebo přejmenujete, měníte mu URL, tedy adresu. Proto byste tedy měli zároveň změnit adresu všech odkazů, které na přesunutý soubor odkazují.

U starších zavedených stránek to může být problém. Jak to řešit:

  • Nepřesouvejte a nepřejmenovávejte soubory zbytečně.
  • Na starém místě raději nechejte nějaký čas kopii, ať to nehlásí chybu 404 nenalezeno.
  • Prevence: neodkazujte stránky příliš hustě, nedělejte pavučinu, ale strom. Potom to stačí změnit na dvou třech stránkách, ne na sedmi.
  • Kdo používá FrontPage, Dreamweaver, HomeSite nebo jiné moderní editory, má usnadněnou správu vlastních souborů, protože tyto programy umí (v rámci aktuálního webu) při přejmenovávání souborů změnit všechny odkazy mířící na přesouvaný soubor.
  • Další způsob jak změnit všechny vlastní odkazy na změněný soubor, je pomocí programu, který umí prohledávat adresář a měnit v něm jeden řetězec na druhý. Pokud vím, umí to UltraEdit, HomeSite, či PSPad, nebo si můžete napsat jednoduchý skript v Perlu, Sedu nebo Vimu.
  • To je řešení odkazů z vlastních stránek. Jestliže ale na přesouvanou stránku odkazuje někdo cizí, musí se mu napsat a požádat, aby změnil odkaz.

Je potřeba si uvědomit, že i po opravě všech odkazů nemusí čtenář stránku nalézt. Je to tím, že stránka, ve které kliknul na odkaz, se může načíst z klientovy cache paměti, takže neopravená.

Další problém pro přesunuté stránky představují vyhledávače. Některé z nich nekontrolují příliš často, kam se která stránka poděla, takže to potom čtenářům bude hlásit 404 nenalezeno.

Startovní soubor

Každý server má nastavené jméno startovního souboru. Na většině serverů se to dá nastavit (dokonce i pro ten který adresář), ale málokdy se to mění. To znamená, že si od správce vašeho serveru musíte zjistit, jak se ten startovní soubor má jmenovat. Nejčastěji se používá název index.html. Takto pojmenujte soubor se svou hlavní stránkou.

Teoreticky si tak lze představit asi tucet různých jmen. (Pokud si nejste jisti, jak se startovní soubor má jmenovat, tak zkuste index.html, skoro jistě bude fungovat.) Další možností může být název default.html

Když vede odkaz ne na soubor, ale na adresář (adresa končí lomítkem), podívá se server, jestli v tom adresáři je startovní soubor.

Návrh layoutu

Této problematice se věnuje celá kapitola, více na: Historie webdesignu | (becvarova.com)

Editory, prohlížeče

Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML.

Jeden soubor lze otevřít ve dvou různých typech programů:

  • v prohlížeči — to je zobrazování
  • v editoru — to je úprava

V praxi vypadá práce se stránkami právě tak, že si otevřu jeden soubor ve dvou programech — v prohlížeči a v editoru. Přepisováním zdroje se mění stránka. To je způsob, kterým se stránky vytvářejí a mění.

Práce ve dvou programech

S HTML se pracuje tak, že se jeden a tentýž soubor otevře ve dvou různých programech.

  • Najděte si HTML soubor na disku. Otevřete ho v prohlížeči, nejčastěji prostě dvojklikem (prohlížeč je výchozí otevírací program)
  • Jděte znovu na disk a tutéž stránku otevřte v Poznámkovém bloku nebo jiném editoru.

Nyní by měl být stav ten, že v jednom programu je soubor otevřený v prohlížeči (např. Internet Explorer, Firefox), ve druhém programu je soubor otevřený v editoru (např. tedy Poznámkový blok). Nyní:

  • Změňte obsah v editoru.
  • Uložte.
  • Přepněte se do prohlížeče.
  • Obnovte stránku (např. klávesou F5). Měla by být vidět změna.

HTML editory

Editory HTML jsou programy, ve kterých tvoříme www stránky – píšeme zdrojový kód. Umožňují ukládat soubory s příponou html (internetová stránka).

  • Textový editor
    Webové stránky lze vytvářet v libovolném textovém editoru jako je například Poznámkový blok. Základní podmínkou je, aby ukládal soubory v čistém textu, tedy editory jako Word jsou nevhodné.Pokročilé editory nabízejí třeba barevné zvýraznění jednotlivých částí kódu či automatické doplňování tagů. Pokud chcete takový editor používat od začátku, zkuste třeba PSPad, Notepad++ či Matrix Y2K 2005.
  • WYSIWYG editory
    Dále se můžete setkat také s tzv. WYSIWYG editory („What you see is what you get“, tedy co vidíš, to dostaneš). V případě těchto editorů se můžete zcela vyhnout psaní HTML kódu, protože fungují podobně jako Word. Nicméně vězte, že WYSIWYG editor nikdy neudělá stránku tak přesně, jako když si ji píšete sami. Na druhou stranu, pokud už máte základy tvorby webových stránek, mohou vám tyto editory dosti urychlit práci tím, že vygenerují základní kód, který vy pak zpětně doladíte.

Webové prohlížeče

Webové prohlížeče jsou programy umožňující zobrazování internetových stránek (html souborů) a jejich vykreslení do finální podoby.

Prohlížečů je hodně druhů. Můžeme je však rozdělit do skupin podle vykreslovacího jádra – podle způsobu, jakým vykreslují www stránky. Avšak i prohlížeče se stejným vykreslovacím jádrem mohou vykreslovat stránky rozdílně, dokonce i různé verze stejného prohlížeče vykazují často odlišnosti, co se vykreslení webu týká.

Tato skutečnost pak webdesignerům přidělává vrásky. Uživatelé totiž používají různé prohlížeče, a pokud chceme vytvářet kvalitní stránky, je potřeba zajistit, aby se zobrazovaly v nejpoužívanějších prohlížečích přibližně stejně.

Svoje stránky byste vždy měli vyzkoušet alespoň na těchto prohlížečích:

  • Internet Explorer 7 nebo 8
  • Firefox
  • Opera
  • Google Chrome

Znamená to, že si Firefox, Chrome a Operu musíte nainstalovat. Explorer je na každých Windows už od začátku. Ostatní prohlížeče mít nemusíte, protože se chovají velmi podobně jako výše zmíněné.

Proč se prohlížeče liší

Internet se zpočátku vyvíjel neuvěřitelně rychle. Podobně dynamicky se přetvářel jazyk HTML, tak aby umožňoval zařazovat do stránek nové a nové věci.

Starší prohlížeče neumožňovaly stejné zobrazení stránek jako prohlížeče moderní, protože v době vzniku starších prohlížečů se prostě nevědělo, jak se budou stránky psát za pár let. Něco samozřejmě zůstalo stejné, ale staré prohlížeče neumějí zobrazovat nové styly, skripty a jiné vychytávky.

Kromě oficiální verze jazyka HTML existovaly různé hybridní formy HTML a rozšíření HTML. Výrobci prohlížečů (zejména Microsoft) se snažili do svých prohlížečů zabudovat podporu nestandardních věcí, které byly teprve v návrhu nebo které si sami vymysleli. Čili interpretace jazyka HTML je závislá na prohlížeči, který používá čtenář (klient).

V poslední době se to trochu uklidnilo. Microsoft do Internet Exploreru 8 zapracoval podporu některých důležitých standardů. Konkurenční prohlížeče Mozilla (Firefox), Webkit (Chrome) a Opera jsou na tom ohledně standardů ještě lépe.Když si chcete prohlédnout zdrojový kód již existující html stránky, která se vám zobrazuje v prohlížeči, zadejte z menu prohlížeče příkaz Zobrazit -> Zdrojový kód (případně View -> Source, může se to jmenovat i jinak, někdy je to na pravém tlačítku). Otevře se nějaký program a v něm bude zdrojový kód. Ten program je nejčastěji Poznámkový blok (Notepad), ale může to být i jiný program.

Použitelnost

… pokud uživatel intuitivně nenajde to, co hledá, okamžitě odchází ke konkurenci. Aby uživatelé na webu netápali musíme dbát na dobrou použitelnost. Pokud se uživatel ztratí hned na titulní stránce, nebo naopak na ní nedostane dostatek informací jak má pokračovat, jednoduše odejde.

Co je použitelnost webových stránek?

Použitelnost webové stránky (angl. Web Usability) je dána mírou schopnosti jak návštěvníka zcela přirozeně navést na hledané informace, pro které na Vaše stránky přichází. Použitelnost webu se zabývá tím jak zcela intuitivně a snadno se uživateli web používá, jak je přehledný a srozumitelný. Použitelnost se zabývá následujícími otázkami:

  • Jak snadno a rychle se uživatel naučí ovládat web?
  • Pokud se uživatel web naučil ovládat, jak s ním efektivně dokáže pracovat?
  • Dokáže uživatel splnit svůj cíl a kolik chyb k dosažení cíle udělá?
  • Je používání webu pro uživatele příjemným zážitkem?

Na základě výzkumů a testování vznikla celá řada pravidel použitelnosti . Tyto pravidla říkají na co jsou uživatelé zvyklí a co jim při používání webu pomůže. Zde jsou uvedeny některé z nich:

  • V rámci celého webu by mělo být vždy přístupný odkaz na úvodní stránku webu a hlavní stránku sekce, ve které se uživatel nachází.
  • Základní prvky webu (logo, vyhledávání, navigace) by se měli nacházet vždy na stejném místě, aby je uživatel nemusel hledat, když už je našel.
  • Struktura stránek by měla být vizuálně rozdělena do logických bloků. Měli by být rozlišeny důležité a méně důležité prvky webu.
  • Úvodní stránka by měla obsahovat základní informace o webu, co na něm uživatel nalezne a jakému účelu slouží.
  • Na každé stránce by mělo být zřejmé, kde se uživatel v rámci webu nachází.

Tato zdánlivě samozřejmá pravidla použitelnosti jsou údajně více jak dvěma třetinami webů porušována. Tento aspekt vede k tomu, že zhruba 40% uživatelů se na stránky již nevrátí pokud je jejich prvotní zkušenost negativní. Přibližně 50% obchodů je ztraceno, pokud návštěvníci dostatečně rychle nenaleznou požadované informace.

Jaké jsou výhody použitelného webu?

  • Získání nových zákazníků. Uživatelé na Vašich stránkách naleznou přímou cestu k tomu co hledají. Nebudou se potýkat s problémy, například že nemohou dokončit objednávku. Tím jim nebude nic bránit v uzavření obchodu s Vámi a nikoliv s konkurencí.
  • Udržení zákazníků stávajících. Uživatelé se budou rádi vracet, protože již ví, že na ně nečeká žádné nepříjemné překvapení a používání Vašich stránek je v pohodě.
  • Uživatelům se bude u Vás líbit.

Jak se použitelnost webu zjišťuje?

Při samotné tvorbě internetových prezentací a aplikací by se již mělo vycházet ze základních pravidel použitelnosti webu. Samozřejmě, že některé weby s tímto předpokladem nepracují proto je nutné provádět preventivní testování přístupnosti. K testování se používá několik způsobů:

  • Heuristická analýza – Též se hovoří o krátkém či laciném testování. Web je hodnocen podle metodiky přístupnosti webu. Nejprve pracovník projde web a soustředí se na jednotlivé body použitelnosti a zda jsou splněny.
  • Uživatelské testování – Jedná se o náročnější testování použitelnosti webu. Testování probíhá na běžných uživatelech, kteří plní předepsané úlohy. Tyto úlohy jsou zaměřeny na použitelnost webu. Zjišťují se problémy, které uživatelé mají s plněním těchto úkolů. Tímto testováním se odhalí problémy, které žádná analýza neobjeví jednoduše proto, že každý web je jedinečný a nelze definovat všeobecně platná pravidla podle, kterých by bylo možné se řídit.
  • Analýza statistik návštěvnosti – Tyto statistiky skrývají velké množství informací o tom jak uživatelé web používají, a lze je tak využít k optimalizaci použitelnosti webu.

Přístupnost

Přístupný web mohou používat všichni uživatelé a neklade svým návštěvníkům překážky. Podobně jako přístupnou budovu mohou používat např. vozíčkáři tak přístupný web zase např. slabozrací. Přístupnost je tedy bezbariérovost.

Co znamená přístupnost webových stránek.

Pojem přístupnosti webových stránek je oproti obecnému pojmu zúžen na funkčnost webových stránek. Přístupné stránky tedy nestaví svým uživatelům žádné překážky, které by jim znemožnily daný web efektivně používat. Všichni uživatelé nemají stejné nastavení internetového prohlížeče nebo operačního systému.

Možná budete překvapeni, ale průzkumy ukazují, že přibližně 30 % uživatelů internetu má specifické potřeby, které jim neumožňují nepřístupný web dostatečně používat. Např. každý dvanáctý muž trpí některou formou barvosleposti, zhruba 20 % populace je starších 60 let (a obtížně proto čtou malé písmo). Mezi uživatele s odlišnými požadavky například patří:

  • uživatelé zastaralých nebo jinak odlišných počítačů a internetových prohlížečů
  • uživatelé jiných zobrazovacích zařízeních jako jsou PDA, mobilní telefony atd.
  • uživatelé, kteří mají při surfování vypnuté obrázky nebo javascript
  • nevidomí uživatelé používající čtečku obrazovky nebo uživatelé se zhoršeným zrakem
  • dyslektici či lidé s poruchou soustředění – možná je pro Vás překvapením, že se jedná o každého pátého mladého člověka
  • vyhledávací roboti (programy, které registrují stránky do databáze vyhledávačů)

Tyto uživatelé vyžadují odlišné vlastnosti internetových stránek. Například nezobrazené obrázky jsou nahrazeny alternativním textem, který je k obrázku přiřazen. Tento text se zobrazí pokud je zobrazování obrázků vypnuté nebo v případě, že web si prohlíží nevidomý. Toto je pouze malá ukázka z celkových požadavků na přístupný web, který jsou uvedeny ve formě pravidel přístupnosti.

Vytvořit nepřístupné stránky není o nic levnější než vytvořit stránky přístupné. Naopak nepřístupnost stojí hodně peněz navíc. Pravidla přístupnosti by měla být dodržována již v samotném návrhu webu.

Jaké jsou normy přístupnosti?

Pravidla přístupnosti jsou definovány prostřednictvím norem, které vychází z dlouhodobých testů a výzkumů.

  • Výchozí pravidla přístupnosti, ze kterých vychází ostatní metodologie je WCAG.
  • Pravidla uvedená v SECTION 508 jsou představovány zákonem USA o přístupnosti stránek zdravotně postiženým.
  • Metodika Blind Friendly předepisuje pravidla pro zpřístupnění webových stránek uživatelům s těžkým zrakovým postižením – tedy těm, kteří nevidí vůbec, nebo jen velmi málo.
  • Výše uvedené normy obsahují společné prvky, které byly použity pro pravidla tvorby přístupného webu pro účely novely Zákona č. 365/2000 Sb., o informačních systémech veřejné správy.

SEO optimalizace

Na web chodí lidi různě, někdo napíše přímo adresu, jiný klikne na odkaz třeba v katalogu, nejvíc lidí se však na web dostává z vyhledávačů. Aby jste získali nové návštěvníky z vyhledávačů je třeba stránky trochu upravit, hlavně nesmíte dělat stránky tak, aby byly pro vyhledávače nečitelné. Před optimalizací si musíte nejprve ujasnit o jaké návštěvníky máte zájem a těmto návštěvníkům musíte něco nabídnout, ideálně to co zrovna hledají.

Z čeho se SEO skládá

Hodně zjednodušeně by se seo optimalizace dala rozdělit do třech kroků.

  1. Analýza klíčových slov.
  2. Vhodné rozmístění slov na stránce.
  3. Tvorba zpětných odkazů.

Obsah především

SEO je hlavně o kvalitním obsahu, nemůžete přeci jen vyšperkovat stránku několika klíčovými slovy a čekat zázraky. Častý problém začátečníků je, že si chtějí udělat nějaký web, jenže zapomenou na obsah, nebo neví o čem psát. Takový web je k ničemu návštěvník totiž vždy přichází pro nějaký obsah např. článek, obrázek, program… S webem raději nezačínejte, pokud nebude vědět o čem.

Jak zjistit klíčová slova

Cíl je už jasný dostat se na přední příčky ve vyhledávačích. Ale na jaká hledaná slova? Prostě se musí zjistit co návštěvníci hledají. Zjistit klíčová slova lze:

  • Z hlavy, prostě musíte příjít na to jak uživatelé hledají.
  • Pomoci nástrojů pro návrh klíčových slov.
  • Od konkurence, stačí se podívat na co optimalizuje vaše konkurence.

Z hlavy

Například pro tento web mě z hlavy napadají fráze:

  • tvorba webu,
  • tvorba www stránek,
  • jak si udělat stránku.

Rozhodně tohle nejsou všechny, musíte přijít na spoustu dalších frází

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

Google nabízí zdarma nástroj pro návrh klíčových slov pro svůj reklamní systém AdWords, tento nástroj můžete použít i pro SEO. Seznam nabízí podobný nástroj pro svůj reklamní systém Sklik, tento nástroj je také zdarma, stačí se přihlásit přes svůj účet u Seznamu. V těchto nástrojích stačí zadat nějaké klíčové slovo a nástroj vám nabídne další relevantní klíčová slova. Další způsob jak zjistit co se hledá je našeptávač Seznamu. Stačí jen psát a našeptávač vám hned nabízí to co se nejvíc hledá, dříve našeptávač ukazoval i průměrný počet hledání. Počet hledaní na Seznamu lze zjistit ve statistice hledanosti.

Od konkurence

Nejlépe se to sleduje pokud má konkurence nějaké free počítadlo jako je Toplist.cz apod. samozřejmě musíte mít přístup do statistik bez hesla což už většina webů nemá. Taky se dá web procházet většinou je hned dobře vidět na co konkurence optimalizuje (klíčová slova v: title, meta, h1, strong).

Tvorba zpětných odkazů

Zpětné odkazy se nejčastěji získávají:

  • Zařazením stránek do katalogů.
  • Výměnou odkazů.

Zařazení stránek do katalogů

Je nejjednodušší cesta jak získat spousty odkazů. Jen odkazy z katalogu lze dosáhnou i PageRanku 4/10. Postup je u většiny katalogů stejný:

  • Nejdříve se proklikejte až do sekce kam chcete zařadit váš odkaz.
  • Najděte odkaz přidat odkaz a klikněte na něj.
  • Napište titulek, popis vašich stránek, adresu, e-mail a odsouhlaste podmínky přidání odkazu.
  • Za několik dní se administrátoři podívají na váš popis pokud bude odpovídat stránkám tak ho zařadí do katalogu. Většinou vám pošlou mail.
  • Někdy se stává, že popis přepíší, nebo stránky nezařadí do katalogu většinou kvůli tomu, že stránky se nehodí do sekce, kterou jste zvolili, nebo neodpovídal popis vašich stránek.

Podobně můžete získat odkazy napsáním PR článku.

Výměnou odkazů

Odkaz za odkaz většinou probíhá tak: Máte zájem o odkaz na nějakém jiném webu, nejprve musíte odkázat na web, na kterém chcete odkaz pak stačí jen kontaktovat majitele webu pokud bude s výměnou souhlasit přidá i odkaz na vás.

Před výměnou odkazu je dobré zkontrolovat jaký má stránka, na které bude váš odkaz rank nejméně 3/10 jinak to nemá smysl. Kolik je na stránce odkazů čím méně tím líp, protože rank se dělí mezi všechny odkazované stránky.

Další zásada raději vyměňujte odkazy s tématicky stejným webem. Správný tvar odkazu Jako text odkazu vždy volte slovo, nebo slova, na které svoji stránku optimalizujete, protože odkazem nezískáváte jen rank, ale i přidáváte váhu na slova v odkazu. Rozhodně nepoužívejte stálé chyby typu: klikněte zde, více, zde naleznete apod.

Závěr

Doufám, že jste tedy pochopili, že cílem seo není na web dostat co nejvíce návštěvníků, ale jen ty, kterým máte co nabídnout. Zjednodušeně lze říci. SEO optimalizací získáte:

  • Více návštěvníků.
  • Pokud je web komerční získáte více peněz.
  • Jde-li o nekomerční projekt můžete vydělat třeba na reklamě.

Desatero optimalizace

Můžete využít placené formy SEO, ale co se nejdříve podívat na možnosti, které vedou k ušetření finančních prostředků?

1. Přehledná struktura webu

Již při samotném vývoji internetové prezentace by měla být známá struktura stránek. Kvalitní struktura webu je základním předpokladem kvalitní optimalizace.

  • Oddělte obsah stránek od formy. Využívejte sémantických značek a snažte se, aby nosný text stránek převažoval nad textem zdrojového kódu.
  • Obsah stránek by neměl být duplicitní.
  • Používejte jednotné odkazy. Vyhledávače berou odkazy typu www.example.cz a www.exmaple.cz/index.html za dva rozdílné.

2. Promyšlený obsah stránek

Text by měl obsahovat klíčová slova, která jsou důležitá pro vyhledávací roboty.Před samotným psaním byste měli mít připraveny obrázky, které chcete umístit na stránku. Množstvím obrázků nemusíme šetřit. Experimentálně bylo zjištěno, že ze získaného podílu smyslových receptorů na příjmu informací člověka v přirozené situaci jasně vyplývá, že nejvyšší zastoupení má zrak.

Na druhou stranu nic se nesmí přehánět a pokud není kvalitní obrazová příloha nebo obrázků je tolik, že velikost stránky narůstá do obřích rozměrů, je lepší od obrázků upustit.

3. Titulky stránek

Je známo, že titulek stránky je důležitým faktorem pro vyhledávače. Měl by obsahovat klíčová slova. Jejich počet nelze uvést přesně, protože při velkém množství např. pokud by jste vyplnili za sebou pouze jedno klíčové slovo určitě budou stránky penalizovány.Titulek stránky může být konstruován takto:

  • Název stránek – titulek vyjadřující obsah stránky
  • Titulek vyjadřující obsah stránky – název stránek

První způsob zohledňuje budování značky, ale vzhledem k tomu, že robot vyhledávače zaregistruje jen omezené množství znaků (uvádí se do 120) není asi zcela vhodný.V druhém způsobu je na přením místě uveden titulek vyjadřující obsah stránek a následně název stránek. Odsunete sice značku do pozadí, ale vytvoříte tak přístupnější stránky pro uživatele, kteří se ve většině případů podle titulku orientují.

4. Formátování textu podle důležitosti

Vhodné je formátovat text tak, jak jsou jeho jednotlivé části důležité. Internetová stránka by měla obsahovat jeden nadpis formátovaný pomocí značky H1. Většinou je to název stránky nebo článku. Nejvyšší nadpis je stejně důležitý jako titulek stránky. Ostatní odkazy mohou být již formátovány pomocí značek H2, H3, H4 atd.V textu by měli být zvýrazněná tučně nebo kurzívou některá klíčová slova.

5. Máme rádi zapamatovatelné odkazy

Hodně diskutovaným tématem je struktura odkazů a její vliv na optimalizaci. Existují dva druhy stránek: dynamické a statické, které se liší ve své formě.

  • Dynamické – www.example.com/index.php?id=neco&stranka=neco-stranka
  • Statické – www.example.com/neco/neco-stranka

Při odhlédnutí od technologického hlediska je patrné, že lze zajistit, aby obsahovaly klíčová slova. Samozřejmě podoba statických odkazů je přívětivější k uživatelům. Měly by být co nejkratší a musí být na první pohled jasné, co se pod nimi skrývá.

6. Váš web není jenom titulní stránka

Je pěkné pokud máte zoptimalizovanou titulní stranu webu. Pokud tomu tak je, snažte se stejně zoptimalizovat i ostatní stránky. Vyhledávače mohou zaindexovat všechny stránky vašeho webu. Uživatelům tím nabídnete možnost přímého přístupu přímo z vyhledávače. Nenutíte tím uživatele prohledávat celou hierarchii vašich stránek.

7. Celý web v mapě stránek

Mapa stránek je výhodným řešením, pokud máte rozsáhlý web. Nabízíte tím vyhledávačům všechny odkazy pěkně pohromadě. Pozor ale na příliš rozsáhlý strom odkazů! Nesmíme zapomínat na fakt, že vyhledávače stahují stránky do určité velikosti. Navíc uživatelé se mohou snadno leknout, pokud není struktura stránek jasná a přehledná.

8. Optimalizace je důležitá, ale zákazník důležitější

Pro vyhledávače lze připravit stránku tak, že nebude problém, aby se umisťovala na předních místech vyhledávání. Otázkou zůstává, zda bude také optimalizovaná pro uživatele. Uživatel je vždy na prvním místě. Texty by měli být čitelné, přehledné a přitažlivé.

9. Jednou je málo

Proces optimalizace je dlouhodobá záležitost. Roboti neindexují stránky každý den, takže výsledky optimalizace se mohou dostavit až na poněkolikáté. Někdy se výsledné pořadí mění tak rychle, že optimalizace pro vybraná klíčová slova je velmi náročná nebo nemožná. Důležitá je analýza před samotnou optimalizací.

10. Černý klobouk SEO

Nesnažte se oklamat vyhledávače nekorektními praktikami. Považují se za lživé a podfukářské. Navíc nemusí vždy vést k pozitivním výsledkům, jak by se mohlo zdát. Pokud vyhledávač najde takovou stránku postihne jí tvrdá penalizace což může mít nedozírné následky.

SEO nástroje pro optimalizaci stránek

Bez SEO nástroje (aplikací) se v profesionální (a snad ani amatérské DYI) optimalizaci webových stránek neobejdete. Pomáhají s webovou analytickou, sbírají, vyhodnocují a interpretují data.

Collabim

Collabim je dle informací na jeho stránkách nejpoužívanější SEO nástroj v ČR. Collabim měří pozice klíčových slov ve vyhledávačích, dokáže vyhledávat podobná klíčová slova, dokáže zjišťovat PPC reklamy na dané výrazy, zvládá jednorázové analýzy, vyhledává odkazové příležitosti (pro budování zpětných odkazů), přináší analýzu konkurenčních webů. Název Collabim je zkratkou COLLaboration On Internet Marketing.

Senuto

SENUTO je polský SEO nástroj, který vás překvapí svojí komplexností a robustností. Aplikace se skládá z 4 hlavních částí pro analýzu klíčových slov, analýzu jednotlivých domén, ranking trackeru (analýza vašeho projektu) a SERP analýzu. Navíc můžete v aplikaci využít 12 dílčích analýz. Komplexní recenzi najdete v článku SENUTO: recenze a kompletní průvodce polským SEO nástrojem.

Marketing Miner

Marketing Miner je online nástrojem, který zprostředkovává marketingovým specialistům získávání dat, důležitých pro jejich rozhodování v oblasti online marketingu. Během prvních 3 měsíců existence nové verze (která startovala od nuly) si získal přízeň mezi více než tisíci českými specialisty, kteří se stali aktivními uživateli. Aplikace měří pozice ve vyhledávačích Google a Seznam, zjišťuje hledanost klíčových slov, kontroluje indexaci stránek, hromadně získává data o URL ze služby Majestic, kontroluje hreflag, kontroluje strukturovaná data, pomáhá s kategorizací dat při klíčovce (místo ručního třídění v Excelu nebo OpenRefinu). Obsahuje i další funkcionality, viz návody Marketing Mineru.

ContentKing

Aplikace ContentKing nabízí SEO audit, monitoring, upozornění, sledování historie změn, přehledy a reportování. Funkčnost si můžete vyzkoušet ve zkušební verzi na 14 dní. Chcete-li se dozvědět něco více o SEO, můžete navštívit SEO akademi ContentKingu.

SEMOR

SEMOR je, na rozdíl od ostatních zde uvedených aplikací, vyvíjen s výrazně omezenějšími zdroji, což se odráží i na samotné aplikaci, UX, funkcích a konec konců i marketingu. Obsahuje nástroje pro trendy vyhledávačů, návrh klíčových slov, Google CTR a Seznam Webmaster.

SEMRush

SEMrush začal v roce 2008 jako malá skupina specialistů na SEO a IT. Společně měli jedno poslání – aby byla boj o zákazníka v prostoru online prostředí byla spravedlivá a průhledná, s rovnými příležitostmi pro všechny. Po deseti letech tréninkových experimentů a neustálého pokroku SEMrush vyrostl do jednoho z největších online marketingových nástrojů na světě.

Ahrefs.com

Ahrefs.com je známá sada nástrojů pro analýzu zpětných odkazů a SEO analýzu. V současné době odděluje Ahrefs od zbytku dalších podobných služeb největší základna živých odkazů, obrovský indexu a nerychlejší obnova indexu. Ahrefs má ambici nahradit několik nástrojů a stát se základním online nástrojem pro SEO.

Screaming Frog

Britská SEO agentura a tvůrce nástroje pro on-page analýzu webu. Společnosti vyvinula software Screaming Frog SEO Spider, kterému důvěřují tisíce SEO specialistů a SEO agentur po celém světě. Používá se převážně pro technické SEO audity. Stáhnout lze zdarma, za příplatek dostanete pokročilejší funkce a odstraní se limity.

Sklik

Sklik je reklamní systém typu PPC (Pay Per Click, platba za klik), který provozuje nejsilnější internetových hráč na českém trhu, společnost Seznam.cz. Platíte teprve za návštěvníka, který se proklikne na vaše stránky. Záleží jenom na vás, kolik jste ochotni za proklik zaplatit a kolik maximálně budete do reklamy denně investovat. Reklamní systém Sklik nabízí kombinovanou reklamu, rozšířené textové inzeráty, grafickou reklamu, videoreklamu, cílení, měření úspěšnosti a pokročilou práci s daty. Pro SEO lze Sklik použít na analýzu klíčových slov (objem hledání, příbuzná slova)…

Google Analytics

Google Analytics je nejrozšířenější služba na monitorování návštěvnosti webových stránek. Odhaduje se, že nasazený měřící kód od Google Analytics má až 50% všech webových stránek na světě. Díky GA můžete sledovat aktuální i historickou návštěvnost, chování uživatelů, konverze, prodeje atd. V SEO bychom měli sledovat různé výkonnostní metriky KPI, a právě v tom nám pomůže Google Analytics.

Google Ads

Google Ads (dříve se jmenovala Google AdWords) je reklamní služba typu PPC (platba za proklik). Reklamy se zobrazují jak ve vyhledávací síti, tak v obsahové. Inzeráty se zobrazují na stránce vyhledávání Googlu v horní, spodní a boční části. Google Ads je využitelný pro SEO zejména svým nástrojem na návrh klíčových slov.

Google Search Console

Nástroje a přehledy služby Google Search Console vám pomohou měřit návštěvnost a výkon vašich stránek ve Vyhledávání, opravit problémy a zajistit, aby váš web ve výsledcích Vyhledávání Google vyniknul.

Google Tag Manager

Google Tag Manager je systém pro správu měřicích kódů na webových stránkách. Jeho princip je takový, že se na web umístí pouze jeden kód a poté se již prostřednictvím webového rozhraní vkládají jednotlivé měřicí kódy. Tento postup velice usnadňuje a zrychluje práci s kódy, kdy jsou z nasazení vynecháni programátoři.

Majestic

Majestic mapuje internet a vytvořil největší komerční databázi odkazů na světě. Tuto databázi využívají SEO společnosti, specialisté na nová média, správci affiliaterů a odborníci na online marketing pro celou řadu účelů, které jsou obsaženy v online marketingu, včetně LinkBuildingu, reputačního managementu, rozvoje provozu webových stránek, analýzy konkurence a sledování zpráv.

Další menší nástroje (utilitky)

Zpětné odkazy

Mobilní zobrazení

Klíčová slova

  • Ubersuggest – Chcete více údajů o klíčových slovech? Ať už jde o SEO nebo PPC, získáte přehled o všech. Od objemu, sezónnost až po cenu za kliknutí. Nástroj Ubersuggest pro klíčové slovo vám ukáže vše zdarma. Nebojte se a použijte nástroj pro klíčová slova tolikrát, kolikrát chcete bez omezení. Více o nástroji Ubersuggest…
  • Keyword Tool – jednoduchý nástroj na hledání klíčových slov. V placené verzi vidíte i objem vyhledávání, trend, CPC a konkurenčnost výrazu.

Rychlost webových stránek

Drobné optimalizace

Duplicity a kopírování

  • Copyscape – kontrola plagiátorství textů. Jednoduchá kontrola, jestli jsou vaše texty skutečně zcela unikátní.
  • Siteliner – zatímco Copyscape zjišťuje shody vašeho obsahu s celým internetem, nástroj Siteliner zkoumá duplicitní obsah v rámci vašeho webu.

Tvorba obsahu

Architektura stránky

  • GlooMaps – Šikovný nástroj na tvorbu architektury webu, vše online a zdarma.

Strukturovaná data

Cvičení

C1 – Domény, hosting

Zákazník si přeje vytvořit eshop pro prodej ručně malovaných výrobků (ručně malované kresby, tašky, pouzdra, trička, obuv) ve stylu anime. Zatím nemá představu o názvu firmy – ten chce vybrat tak, aby korespondoval s doménou.

Vyberte vhodnou doménu s ohledem na vhodná klíčová slova a zjistěte, který hosting na českém trhu by byl pro tohoto zákazníka vhodný v případě, že si daný eshop přeje spravovat sám prostřednictvím redakčního systému.

Pokud doména, kterou uznáte za vhodnou, už není volná, zjistěte pomocí vhodných nástrojů komu patří a kdy bude vlastnictví dané domény expirovat. S ohledem na výsledek můžete zákazníkovi navrhnout buď pokus o odkup této domény nebo výběr jiné.

C2 – Logická struktura

Pro zákazníka ze cvičení C1 vytvořte logickou strukturu webu. Mezi prodávané výrobky budou patřit:

  • originální malované kresby
  • originální malované tašky
  • originální malované drobné zboží – pouzdra, boty, krabičky
  • malování na oděv, obuv
  • malování na zakázku

Zjistěte, které dokumenty musí být podle zákona dostupné na webu eshopu a zahrňte je do logické struktury webu. Navrhněte další důležité stránky, vhodné pro provoz eshopu.

C3 – Grafický layout, přístupnost, použitelnost

Pro zákazníka ze cvičení C1 navrhněte rozložení webu s ohledem na přístupnost a použitelnost. Využijte logickou strukturu vytvořenou ve cvičení C2. Barevnost není dána.

C4 – SEO optimalizace

Pro zákazníka ze cvičení C1 navrhněte SEO optimalizaci vytvářeného webu z hlediska klíčových slov, navrhněte umístění do vhodných katalogů, vytipujte partnerské stránky pro výměnu odkazů.

Zdroje: