Tento nástroj vám ušetrí čas! (z kurzu Pokročilé SEO)

Názov kurzu: SEO optimalizácia pre vyhľadávače II. (Online skupinový živý kurz)

Lektor: Tibor Peták

Ak máte vlastnú webstránku, skôr či neskôr sa určite budete zamýšľať nad tým, ako zvýšiť jej návštevnosť, či zlepšiť umiestnenie vo výsledkoch vyhľadávania. S tým vám pomôže znalosť SEO, teda znalosť optimalizácie pre vyhľadávače. Keď sa však začnete o túto tému zaujímať, postupne zistíte, ako veľmi rozsiahla naozaj je. Na čo všetko máte myslieť, koľko vecí skontrolovať, pridať, upraviť… V tomto článku z vás majstra SEO síce nespravíme, no máme pre vás tip na jeden užitočný nástroj, ktorý vám pri optimalizácii vášho webu môže ušetriť kopu času.

Tip na tento skvelý nástroj sme dostali ako účastníci kurzu Pokročilé SEO – optimalizácia pre vyhľadávače II. Kurz sa v prvej polovici venuje hlavne tomu, ako dodržiavať SEO zásady tak, aby boli vaše stránky prístupné aj pre hendikepovaných používateľov, a aby ich ľudia radi navštevovali. V druhej polovici sme sa venovali tomu, ako si svojpomocne spraviť analýzu kľúčových slov.

Okrem záplavy užitočných informácii pre prax je tento kurz popretkávaný aj tipmi na praktické nástroje a prínosné webstránky, ktoré ocenia nielen SEO začiatočníci. Jedným z takých nástrojov nich je aj Web Developer. Takmer ako darček pod vianočný stromček.

Web Developer – užitočný nástroj nielen pre vývojárov

Prečo práve tento nástroj? Vlastnú webstránku zatiaľ nemám, no venujem sa už nejakú dobu písaniu blogových článkov. Aby ich ľudia vedeli nájsť, musela som sa začať viac zaujímať o správne dodržiavanie SEO zásad. Veď načo budem písať, keď sa to k možným čitateľom nedostane… Pri písaní a nahrávaní článku na stránku si vždy vytiahnem svoj kontrolný zoznam a hľadám, čo treba pred publikovaním skontrolovať, upraviť, doplniť, na čo nezabudnúť. Samozrejme, že takmer vždy na niečo zabudnem a musím sa k tomu spätne vrátiť. Keby som však poznala tento nástroj skôr, ušetrila by som si množstvo času.

Prácu s týmto nástrojom a jeho výhody teda popisujem z hľadiska SEO začiatočníka. Verím však, že jeho funkcie ocenia aj skúsenejší.

Web Developer je rozšírenie pre internetové prehliadače (Chrome, Firefox a Opera), ktoré si jednoducho nainštalujete do svojho prehliadača, a všetky jeho funkcie máte potom dostupné kedykoľvek „na jeden klik“. Ako názov napovedá, pôvodne je určený najmä pre vývojárov webových stránok, no pri optimalizácii svojho webu určite oceníte nejednu z množstva jeho funkcií aj vy.

Po nainštalovaní a povolení tohto rozšírenia sa vpravo hore v prehliadači objaví malé ozubené koliesko. Kliknutím naň sa otvorí menu funkcií – v prvom riadku kliknite na hlavnú kategóriu a rozbalia sa vám všetky dostupné funkcie. Teraz, ak chcete skontrolovať nejakú webstránku (alebo blogový článok), jednoducho si ju otvoríte v prehliadači a môžeme začať.

Ako mi Web Developer pomôže so SEO?

1. Informácie o obrázkoch na stránke

Začnime napríklad obrázkami na webe. Príliš veľké obrázky môžu značne spomaliť načítavanie webstránky. Okrem toho by obrázky mali mať nastavený „Alt“ popis, aby si ich vedeli „pozrieť“ aj nevidiaci čitatelia vašich stránok. Oba spomínané atribúty si viete ľahko a prehľadne skontrolovať.

Na zobrazenie alt popisov obrázkov kliknite v ponuke „Images“ na „Display Alt Attributes“. Môžete si nechať zvýrazniť obrázky, ktoré nemajú vyplnený žiaden „Alt“ popis – „Outline Images With Empty Alt Attributes“.

Na zistenie zobrazovaných rozmerov obrázka kliknite na druhú možnosť „Display Image Dimensions“. Toto je však iba veľkosť zobrazenia na stránke. Skutočné rozmery obrázka zistíte kliknutím na poslednú možnosť „View Image Information“. Zobrazia sa vám všetky obrázky zo stránky, ich skutočné rozmery, aj odkaz, kde sú uložené.

2. Rozloženie stránky a podnadpisy

Druhý spôsob, kedy vám tento nástroj môže poslúžiť, je pri kontrole nadpisov. Správne členenie textu je dôležité pre dobrú čitateľnosť. Nadpisy vizuálne rozdeľujú text a čitateľ sa pomocou nich môže rýchlo orientovať v obsahu aj bez toho, aby ho musel čítať úplne celý. Nadpisy a podnadpisy sa na webe v kóde stránky označujú značkou H1, H2, H3 a podobne. Takto vie vyhľadávač identifikovať význam textu časti textu na stránke.

Jedna stránka má vždy len jeden hlavný H1 nadpis. Ak vám Web Developer ukáže, že máte všetky podnadpisy označené H1 (lebo niekto usúdil, že mať všetky podnadpisy na stránke najvýznamnejšie je cool), nem dobre. Opravte to.
Ak máte na stránke / v článkoch podnadpisy zvýraznené len väčším tučným písmom, Developer vám ukáže, že nemáte v obsahu žiadne H2, či H3, zmeňte to a s vyhľadávačmi sa váš text skamaráti.

Kliknutím na položku „Outline“ v menu sa vám zobrazí ponuka na kontrolu rozloženia stránky. „Outline Headings“ vám zvýrazní všetko, čo je v kóde stránky označené ako nadpis – teda značkou H1, H2, H3… Pridajte k tomu ešte „Show Element Tag Names“, aby sa vám ukázali aj tieto značky. Na prvý pohľad vidíte, či máte v texte správne definované podnadpisy. Užitočné napríklad vtedy, ak ste si text najprv pripravili v nejakom textovom editore, a potom ho skopírovali na web. V položke „Information“ si môžete zobraziť rozloženie všetkých podnadpisov na konkrétnej stránke – kliknite na „View Document Outline“ a zobrazia sa všetky nadpisy (aj so značkami) bez ostatného textu.

3. Kontrola odkazov

Tretia funkcia, ktorú oceníte napríklad aj pri kontrole spomínaných blogových článkov, sú informácie o odkazoch v texte.

Viete si červeným rámikom zvýrazniť všetky externé linky, ktoré smerujú mimo vašej webstránky („Outline“ – „Outline External Links“), alebo si viete zobraziť adresy všetkých odkazov priamo v texte zvýraznené červenou („Information – Display Link Details“).

4. Responzívny dizajn – ako vyzerá moja stránka na mobile?

Pri dizajnovaní webstránok treba myslieť aj na používateľov, ktorí si vaše stránky budú prehliadať napríklad na mobilnom telefóne. Keďže obrazovka mobilu i tabletu je menšia, stránka sa pochopiteľne nemôže zobraziť rovnako ako na obrazovke počítača.

Aby ste si mohli overiť, ako vaša stránka vyzerá na mobile, či na tablete, kliknite v menu na „Resize“ a potom na „View Responsive Layouts“. Uvidíte vašu stránku tak, ako sa zobrazí prispôsobená veľkosti obrazovky na mobilnom telefóne a tablete. Dokonca aj ako stránka bude vyzerať, ak je zariadenie otočené na výšku aj na šírku.

5. Ďalšie užitočné funkcie

Nájdete tu napríklad aj „Color Picker“ (v menu pod „Miscellaneous“), ktorým si môžete jednoducho pozrieť hexadecimálne číslo farby ľubovoľného pixelu na obrazovke. Pre mňa je to užitočné napríklad pri vytváraní grafiky na web, ktorá má byť ladená vo firemných farbách 🙂

Za prebádanie stojí aj funkcia „Validate Accessibility“ v menu pod „Tools“. Tento externý nástroj vám ohodnotí stránku z hľadiska prístupnosti. Napríklad, či nepoužívate písmo a pozadie s nízkym kontrastom, či sú nadpisy správne označené, tiež či majú obrázky „alt“ popis…

SEO informácie na jednom mieste

Jasné, že všetky spomínané informácie viete získať aj inak – napríklad priamo z kódu, vyhľadaním elementov v redakčnom systéme, či inými nástrojmi. Mne osobne sa veľmi páči, že tu je všetko pokope a v podstate na jeden klik. Presne ako kurz Pokročilé SEO – optimalizácia pre vyhľadávače II. Jednodňový kurz nabitý informáciami, vďaka ktorému zistíte, že dodržiavanie zásad správneho SEO vás nielen posunie vyššie vo výsledkoch vyhľadávania, ale si tým zabezpečíte webstránku prístupnú pre kohokoľvek, napríklad aj pre slabo vidiacich používateľov. V druhej polovici kurzu budete iba oči otvárať nad tým, čo všetko obsahuje analýza kľúčových slov (ktorá stojí – mimochodom – aj pár tisíc euro), a že si ju pokojne môžete spraviť pre svoj web vy sami. A na zadaní si to aj prakticky vyskúšate. Okrem toho získate od lektora pracujúceho v téme SEO už viac ako 15 rokov množstvo tipov na ďalšie nástroje, ktoré vašu prácu ešte viac zefektívnia.

+ Naučíte sa, ako sprístupniť váš web pre hendikepovaných používateľov
+ Získate návod ako si vytvoriť vlastnú analýzu kľúčových slov
+ Lepšie pochopíte, prečo treba dávať obrázkom „alt tag“, alebo prečo musia byť nadpisy označené H1, H2…
+ Skvele zvládnutá online forma výučby
– V prípade online kurzu si musíte sami zaobstarať kávu a kolegov na small-talk cez obednú prestávku 😉