Alt opis obrázku

Alt opis obrázku, oficiálne známy ako alt atribút alebo alternatívny text, je textový popis pridaný k obrázkom na webových stránkach. Slúži na vysvetlenie obsahu obrázka pre používateľov, ktorí ho nemôžu vidieť – či už z dôvodu zrakového postihnutia, pomalého internetového pripojenia alebo technických problémov s načítaním. Pre Google a ostatné vyhľadávače predstavuje alt text kľúčový zdroj informácií o vizuálnom obsahu. Správne napísaný alt atribút zlepšuje prístupnosť webu, zvyšuje pozície vo vyhľadávaní a pomáha indexovať obrázky v Google Images. Podľa analýzy WebAIM až 31% obrázkov na webe nemá žiadny alt popis, čo predstavuje obrovskú stratenú príležitosť pre SEO aj prístupnosť.

Alt text obrázkov

Alt text je HTML atribút, ktorý sa pridáva priamo do značky obrázka pomocou syntaxe <img src=“obrazok.jpg“ alt=“popis obrázka“>. Tento text sa zobrazí namiesto obrázka v prípade, že sa obrázok nenačíta. Ešte dôležitejšiu úlohu zohráva pre čítačky obrazovky, ktoré používajú ľudia so zrakovým postihnutím – tieto nástroje nahlas prečítajú alt text a umožnia tak používateľom pochopiť, čo je na obrázku zobrazené. Z pohľadu vyhľadávačov ide o jediný spôsob, ako Google dokáže „vidieť“ obsah obrázka.

Kvalitný alt text musí byť presný, výstižný a relevantný. Nemal by obsahovať frázy ako „obrázok“, „fotografia“ alebo „ikona“, pretože čítačka obrazovky už sama oznámi, že ide o grafický prvok. Optimálna dĺžka je 125 znakov, čo zodpovedá limitom väčšiny čítačiek obrazovky. Podľa štúdie Moz.com môže správne použitý alt text zvýšiť organickú návštevnosť z Google Images až o 47% v priebehu šiestich mesiacov.

Existujú tri hlavné typy alt textov. Informatívny alt text popisuje obsah obrázka napríklad „biela kuchynská linka s mramorovým obkladom“. Dekoratívny alt text sa používa pre čisto vizuálne prvky a zvyčajne zostáva prázdny (alt=““). Funkčný alt text vysvetľuje účel interaktívnych prvkov ako tlačidiel či ikon.

Pri písaní alt textu vždy začnite s najdôležitejšou informáciou. Ak predávate modrú sedačku, napíšte „modrá rohová sedačka IKEA Ektorp“ namiesto „obrázok sedačky, ktorá je modrá a nachádza sa v obývačke“. Prvá verzia je jasnejšia, kratšia a obsahuje názov modelu, čo pomáha pri vyhľadávaní konkrétnych produktov.

Alternatívny popis obrázka

Alternatívny popis obrázka ide nad rámec základného alt textu a zahŕňa kontextové informácie potrebné na plné pochopenie vizuálneho obsahu. Na rozdiel od krátkeho alt atribútu môže alternatívny popis obsahovať viac detailov, emócií alebo súvislostí. Používa sa najmä v dokumentoch, e-bookoch alebo špecializovaných webových aplikáciách pre osoby so zrakovým postihnutím. Zatiaľ čo alt text by mal byť stručný, alternatívny popis môže obsahovať aj niekoľko viet vysvetľujúcich komplex

Napríklad pri komplexnej infografike nestačí napísať alt=“infografika o SEO“. Správny alternatívny popis by zahŕňal kľúčové dáta: „Infografika zobrazuje štyri hlavné SEO faktory. On-page optimalizácia tvorí 35%, backlinky 30%, technické SEO 20% a obsahová kvalita 15%. Graf ukazuje vzostupný trend organickej návštevnosti o 67% v období 2023-2024.“ Tento prístup zabezpečuje, že používateľ získa všetky kritické informácie aj bez vizuálneho vnemu.

• Kontext je kľúčový: Alternatívny popis musí reflektovať účel obrázka v rámci celej stránky. Ten istý obrázok môže potrebovať iný popis na produktovej stránke než v blogovom článku.
• Popisujte akciu: Ak obrázok zachytáva pohyb či činnosť, popíšte ju. Namiesto „muž s počítačom“ napíšte „muž píše kód na notebooku v kancelárii“.
• Neinterpretujte zbytočne: Držte sa faktov. Nepíšte „šťastný muž“, pokiaľ emócia nie je pre obsah kritická. Objektívny popis funguje lepšie.

Viacvrstvový prístup k popisu znamená kombinovať krátky alt text s dlhšou caption alebo figcaption HTML značkou. To poskytuje flexibilitu – čítačky obrazovky prečítajú alt text, zatiaľ čo vizuálni používatelia uvidia podrobnú caption pod obrázkom. Tento dvojitý systém optimalizuje prístupnosť aj používateľskú skúsenosť.

SEO optimalizácia obrázkov

SEO optimalizácia obrázkov zahŕňa oveľa viac než len alt atribút. Začína už pri výbere správneho formátu súboru – WebP poskytuje až o 30% menšiu veľkosť než JPEG pri zachovaní kvality podľa údajov Google Developers. PNG sa hodí pre grafiku s priehľadnosťou, JPEG pre fotografie a SVG pre vektorové ikony. Názov súboru by mal byť popisný – namiesto „IMG_1234.jpg“ použite „cervene-damske-tenisky-nike.jpg“. Google indexuje aj názvy súborov, čo zvyšuje šance na zobrazenie v Google Images.

Kompresia obrázkov kriticky ovplyvňuje rýchlosť načítania stránky. Nástroje ako TinyPNG alebo ImageOptim dokážu zmenšiť súbory o 50-70% bez viditeľnej straty kvality. Každá sekunda navyše v load time znižuje konverzie priemerne o 7% podľa analýzy Portent. Pre e-shopy s tisíckami produktových fotografií môže správna kompresia znamenať rozdiel medzi prvou a piatou pozíciou vo vyhľadávaní.

Responsive images pomocou srcset atribútu zabezpečujú, že mobilné zariadenia nesťahujú zbytočne veľké súbory určené pre desktopy. Syntax vyzerá takto: <img srcset=“obrazok-small.jpg 480w, obrazok-large.jpg 1200w“ sizes=“(max-width: 600px) 480px, 1200px“>. Tento prístup môže ušetriť až 60% dát na mobiloch, čo zlepšuje Core Web Vitals metriky kritické pre Google ranking.

Obrázková sitemap je často prehliadaný nástroj. Vytvorte samostatný XML súbor so zoznamom všetkých dôležitých obrázkov na webe a odošlite ho cez Google Search Console. To urýchli indexáciu najmä pre nové e-shopy alebo galérie. Formát je jednoduchý a WordPress pluginy ako Yoast SEO ho generujú automaticky.

Prístupnosť alt atribút

Prístupnosť webového obsahu nie je len morálna povinnosť – je to aj právny požiadavka v mnohých krajinách vrátane EÚ smernice o prístupnosti webov. Alt atribút predstavuje základ webovej accessibility pre milióny ľudí so zrakovým postihnutím. Podľa World Health Organization žije na svete viac ako 2.2 miliardy ľudí s poruchami zraku. Pre týchto používateľov je web bez alt textov prakticky nepoužiteľný.

Čítačky obrazovky ako NVDA, JAWS alebo VoiceOver premieňajú vizuálny obsah na zvukovú podobu. Keď natrafia na obrázok bez alt atribútu, buď ho preskočia alebo prečítajú názov súboru – často nezmyselný reťazec typu „IMG_20240105_143022.jpg“. Toto frustruje používateľov a núti ich opustiť stránku. Naopak, kvalitný alt text vytvára plnohodnotnú skúsenosť porovnateľnú s vizuálnym prezeraním.

• Testujte s čítačkami obrazovky: Nainštalujte si bezplatný NVDA na Windows alebo použite integrovaný VoiceOver na Mac. Prejdite si vlastný web s vypnutým monitorom – zistíte, kde chýbajú alt texty.
• Prázdny alt nie je chyba: Dekoratívne obrázky by mali mať alt=““ (prázdny atribút). To signalizuje čítačke, že obrázok nemá informačnú hodnotu a môže ho preskočiť.
• Nekončite bodkou: Alt text by nemal končiť bodkou, pretože čítačka robí pauzu po každom obrázku automaticky. Bodka by vytvorila neprirodzene dlhú prestávku.
• Opakujte kontext: Ak je obrázok odkaz, alt text by mal popisovať cieľ odkazu, nie len obsah obrázka. Napríklad „prejsť na stránku produktov“ namiesto len „šípka doprava“.

WCAG 2.1 štandard definuje tri úrovne prístupnosti – A, AA a AAA. Pre komerčné weby je minimálnym štandardom úroveň AA, ktorá vyžaduje, aby všetky informatívne obrázky mali alt text. Nezávisí na tom, či predávate topánky alebo poskytujete právne služby – prístupnosť je povinnosť, ktorú kontrolujú aj regulačné orgány. Pokuty za nedodržanie môžu dosiahnuť tisíce eur.

Kľúčové slová obrázky

Integrácia kľúčových slov do alt textov vyžaduje jemnú rovnováhu. Primárny účel alt textu je prístupnosť – ak obetujete zrozumiteľnosť v prospech SEO, prehrávate. Google je dosť inteligentný na odhalenie keyword stuffingu aj v alt atribútoch a môže to považovať za manipulatívnu praktiku. Správny prístup spočíva v prirodzenom zaradení relevantných kľúčových slov tam, kde to dáva zmysel.

Pre e-shop s dámskou obuvou je prirodzené napísať „čierne kožené lodičky Tamaris 2024 model 1-22447-28“ namiesto generického „topánky“. Prvá verzia obsahuje presné kľúčové slová (čierne lodičky, kožené lodičky, Tamaris lodičky), no zostáva popisná a užitočná. Druhá verzia je nepoužiteľná pre používateľov aj vyhľadávače. Podľa údajov Ahrefs.com môžu optimalizované alt texty zvýšiť návštevnosť z Google Images o 15-25%.

Long-tail keywords fungujú v alt textoch výborne. Namiesto širokého „bicykel“ použite špecifické „detský bicykel 20 palcov modrý s košíkom“. Toto cieli presnejšiu skupinu hľadajúcich s vyššou konverznou mierou. Niekto hľadajúci všeobecné „bicykel“ často len porovnáva alebo zbiera informácie. Hľadanie „detský bicykel 20 palcov modrý“ signalizuje konkrétny nákupný zámer.

Variácie kľúčových slov posilňujú sémantickú relevanciu. Ak váš e-shop predáva „dámske tenisky“, striedajte synonymá – „dámske športové topánky“, „tenisky pre ženy“, „bežecké tenisky dámske“. Google rozumie sémantickým vzťahom a odmeňuje prirodzenú rozmanitosť namiesto mechanického opakovania identického slovného spojenia.

Správne písanie alt

Technická implementácia alt atribútu je priamočiara, no časté chyby stoja webmastrov tisíce návštev mesačne. HTML syntax je <img src=“cesta/k/obrazku.jpg“ alt=“presný popis obrázka“>. Alt atribút patrí do otváracej značky img a hodnota musí byť v úvodzovkách. Žiadne iné HTML značky ani formátovanie vnútri alt textu – len čistý text. Niektoré CMS systémy pridávajú alt automaticky z názvu súboru, čo zvyčajne vytvára nepoužiteľné výsledky.

WordPress ponúka pole „Alt text“ pri nahrávaní obrázkov cez Media Library. Vždy ho vyplňte manuálne pred vložením obrázka do článku alebo stránky. Nikdy nespoliehajte na automatické generovanie. Shopify má podobné rozhranie v admin sekcii Products – každý variant produktu by mal mať vlastný alt text popisujúci špecifickú farbu alebo veľkosť.

• Dĺžka 125 znakov: Väčšina čítačiek obrazovky orezáva dlhší text. Ak potrebujete viac, použite longdesc atribút alebo caption.
• Začnite kľúčom: Najdôležitejšie slovo dajte na začiatok. „Notebook Lenovo Legion 5“ nie „Obrázok notebooku Lenovo Legion 5“.
• Bez redundancie: Nepíšte „obrázok“, „fotografia“, „ikona“ – čítačka už oznámi, že ide o grafický prvok.
• Jedinečnosť: Každý obrázok by mal mať unikátny alt text. Kopírovanie rovnakého textu je red flag pre Google.

Testovanie alt textov zahŕňa niekoľko nástrojov. WAVE (WebAIM) odhalí chýbajúce alt atribúty a obrázky s podozrivým obsahom. Google Lighthouse v Chrome DevTools hodnotí prístupnosť celej stránky vrátane obrázkov. Screaming Frog SEO Spider extrahuje všetky alt texty do tabuľky, čo umožňuje hromadné vyhodnotenie a úpravy. Investícia 30 minút týždenne do kontroly alt textov sa dlhodobo vyplatí v podobe lepšej návštevnosti aj konverzií.

FAQ o téme : Alt opis obrázku