SEO – Aj obrázky na webe je potrebné optimalizovať pre vyhľadávače | AMETICA | Digitálna agentúra

Či už ste blogger, predajca tovaru alebo píšete články pre online noviny či magazíny, je veľmi pravdepodobné, že sa ocitnete v situácii, kedy sa budete sami seba pýtať, či váš článok potrebuje obrázky. Odpoveďou je vždy „ÁNO!“. Obrázky privedú články k životu a takisto môžu vylepšiť SEO vášho webu. Tento článok vám vysvetlí, ako optimalizovať obrázky tak, aby boli kompatibilné pre vyhľadávače a priniesli návštevnosť na stránku. Taktiež vám predstaví pár trikov, ako použiť obrázky tak, aby ste vašim čitateľom poskytli čo najlepší používateľský zážitok.

Vždy použite obrázky

Dobre zvolené obrázky pomôžu čitateľovi lepšie pochopiť váš článok. Staré príslovie „Je lepšie raz vidieť ako stokrát počuť“ (v tomto prípade čítať), pravdepodobne neplatí pre Google, no rozhodne platí, ak potrebujete oživiť dlhý článok, vysvetliť tabuľky, diagramy či analýzy.

Jednoduchou radou je: Pridávajte obrázky do každého článku, ktorý píšete, aby ste ho spravili príťažlivejším pre čitateľov. Vizuálna stránka sa totiž stáva čoraz dôležitejšou, ako môžeme vidieť aj vo vízii budúcnosti vyhľadávania od Google práve pomocou obrázkov. V neposlednom rade vám ale využívanie obrázkov pomôže vylepšiť aj návštevnosť. Ak používate vizuálne prvky, SEO obrázkov by ste mali zaradiť vyššie na váš zoznam priorít.

Google obrázky boli nedávno obohatené o úplne nový vizuál. Nájdete tu aj nové filtre, metadáta a atribúty. Nové filtre ukazujú, že Google vie rozoznať, čo je na obrázku a ako to zapadá do väčšieho kontextu.

Vyhľadávanie obrázkov vo vyhľadávači Google

Ako nájsť ten správny obrázok?

Vždy je lepšie použiť vlastné obrázky – tie, ktoré ste sami vytvorili – ako tie z databanky.

Články potrebujú fotky relevantné k ich téme. Ak k nim pridávate obrázky len preto, aby ste získali zelené hodnotenie v SEO analýzach, tak to robíte zle. Obrázok by mal vystihovať článok alebo slúžiť na jeho ilustráciu, samozrejme v rámci témy. Snažte sa obrázky umiestniť blízko súvisiaceho textu. Ak máte hlavný obrázok, ktorý chcete použiť ako hlavičku, umiestnite ho na vrch, blízko nadpisu, ak sa tam hodí.

Obrázok umiestnený blízko textu, ku ktorému patrí, sa umiestni vyššie vo vyhľadávaní a získa vám viac návštevníkov. Ďalšie informácie na túto tému sa dozviete neskôr.

Alternatívy – ak nemáte vlastné obrázky

Ak nemáte vlastné fotografie, ktoré by ste mohli použiť, stále sú tu alternatívne stránky, na ktorých môžete získať zaujímavé fotografie. Zaujímavým zdrojom obrázkov je napríklad Flickr.com, vďaka ktorému môžete použiť fotografie s licenciou Creative Commons. Nezabudnite sa však zmieniť o zdroji a autorovi.

Ďalšia takáto stránka je napríklad Unsplash.com. Používajte však také obrázky, ktoré vyzerajú relevantne a uveriteľne.

Vhodnými alternatívami obrázkov sú tiež ilustrácie alebo grafy. Za zmienku stojí aj GIF formát, ktorý je v poslednej dobe neuveriteľne populárny. S GIF-mi to ale nepreháňajte. Pohyblivé obrázky môžu vašich čitateľov rozptýliť od textu a navyše ich načítavanie spomaľuje stránku.

Príprava obrázkov pre text

Ak ste konečne našli vhodný obrázok, musíte ho optimalizovať priamo pre váš článok. Tu je niekoľko aspektov, na ktoré musíte pred jeho použitím brať ohľad:

1. Správne pomenovanie súboru

SEO obrázkov začína s ich pomenovaním. Zjednodušene povedané: Cieľom je dosiahnuť, aby Google vedel, čo je na obrázku, bez toho, aby sa naň vôbec niekto pozrel. Snažte sa preto sústrediť na názov obrázku. Je to jednoduché: Ak je na vašom obrázku východ slnka v Paríži nad katedrálou Notre Dame, váš obrázok by ste mali nazvať vychod-slnka-notre-dame-pariz.jpg a nie napríklad img256.jpg. Hlavnou témou obrázku je východ slnka a preto je na začiatku názvu.

2. Správna veľkosť pre SEO

Keď berieme do úvahy UX a SEO, čas načítania web stránky je veľmi dôležitý. Obrázky majú na načítanie stránky veľký vplyv a to aj v prípade, ak nahráte veľký obrázok, no zobrazíte ho ako malý. Pokiaľ nahráte na stránku obrázok s veľkosťou 2500×1500 pixelov, ale zobrazí sa vo veľkosti 250×150 pixlov, aj tak sa musí načítať celý jeho objem. Pre zníženie času načítania preto musíte mimo webovej stránky zmenšiť obrázok na veľkosť a rozmery, v akých ho chcete zobraziť. WordPress vám s tým dokáže pomôcť tak, že po načítaní vám obrázky ponúkne v niekoľkých rozmeroch. Neznamená to však, že tiež zmení veľkosť obrázku. Zmení len jeho rozmery, v akých sa neskôr zobrazí.

3. Zmenšite veľkosť súboru

Ako sme už spomenuli v bode 2, vždy by ste mali pridávať súbory s čo najmenšou veľkosťou vzhľadom na potrebnú kvalitu. Ako to teda urobiť?

Samozrejme, môžete súbory použiť aj v ich originálnej veľkosti a potom len experimentovať s percentami kvality. Odporúčame vám však použiť 100% kvalitu obrázkov. Platí to hlavne v prípade, že vaša cieľová skupina používa displeje typu Retina a im podobné. Veľkosť súborov sa dá zmenšiť aj odstránením EXIF dát. Na ich odstránenie môžete použiť programy ako ImageOptin, JPEGmini, jpeg.io alebo Kraken.io.

Nástroj na optimalizáciu veľkosti obrázkov

Ak ste obrázky už upravili, skúste ich otestovať nástrojmi ako napr. Google PageSpeed Insights, Lighthouse, WebPageTest.org, alebo Pingdom. S úpravou veľkosti obrázkov máme najlepšie skúsenosti s plateným nástrojom Shortpixel.

4. Používajte obrázky, ktoré reagujú na zariadenie

Ďalším veľmi dôležitým aspektom pre SEO je využívať obrázky, ktoré reagujú na zariadenie. Ak používate WordPress, tak si s tým nemusíte lámať hlavu. Od aktualizácie 4.4 sa do obrázkov automaticky pridáva atribút srcset, ktorý obrázkom umožňuje meniť sa podľa veľkosti obrazovky zariadenia, na ktorom zobrazujete web stránku. Táto funkcia je veľmi užitočná napríklad pri mobilných zariadeniach.

5. Pridávanie obrázkov do článku

Aj keď Google zlepšuje svoje funkcie rozpoznávania toho, čo je na obrázku, ešte by ste sa na to nemali plne spoliehať. Všetko totiž záleží na tom, koľko informácií o kontexte im poskytnete. Preto sa snažte toho vyplniť čo najviac.

Ak je váš obrázok konečne hotový, neumiestnite ho do článku len tak hocikam. Ako sme už uviedli vyššie, umiestnenie obrázku k relevantnému textu veľmi pomôže. Ukáže to, že text je pre obrázok dôležitý presne tak isto, ako je obrázok dôležitý pre text.

Popisy obrázkov

Popis je malý text, ktorý obrázok opisuje. Nachádza sa väčšinou pod obrázkom. Prečo sú tieto popisy obrázkov také dôležité pre SEO?

Pretože čitateľom pomáhajú v „skenovaní“ článku. Keď čitateľ článok otvorí, má tendenciu ho najprv „oskenovať“. Pozrú sa, koľko je v ňom obrázkov, textu a užitočných informácií.

V roku 1977 Nielsen napísal: „Elementy, ktoré uľahčujú „skenovanie“ sú nadpisy, veľké písmená, hrubý a zvýraznený text, zoznamy s odrážkami, grafické prvky, titulky a popisky, nadpisy tém a rozdelenie obsahu.“

V roku 2012 zašli v KissMetrics ešte ďalej a vyhlásili: „Popisky pod obrázkami sa čítajú v priemere o 300% viac ako text v článku. Takže tým, že ich nepoužívate, alebo tým, že ich používate nesprávne, sa pripravujete o mnohých čitateľov.“

Musí mať každý obrázok popisok? Nemusí. Niekedy obrázky slúžia na iné účely. Rozhodnite sa, ktoré obrázky chcete použiť pre SEO optimalizáciu, a ktoré nie. Popisky pod obrázky pridávajte len tam, kam sa to hodí. Popisky nemusíte nutne pridávať len kvôli SEO. Vždy myslite na čitateľa. Príliš veľa popiskov, by ho mohlo odradiť.

Alternatívny text a titulka

Alternatívny text (alebo aj tag ALT) je text, ktorý sa objaví na mieste obrázka, ak sa obrázok z nejakého dôvodu nemôže zobraziť. Viac o tom hovorí Wikipédia:

„V situácii, kedy obrázok nie je dostupný, možno preto, že používateľ vypol zobrazenie obrázkov v nastaveniach prehliadača, alebo používa čítačku textu a dochádza k problémom s párovaním, sa alternatívny text postará o to, aby sa nestratila žiadna informácia.“

Uistite sa, že ku každému obrázku pridáte alternatívny text a (ak je to možné) použite v ňom kľúčové SEO slová z článku. Najdôležitejšie je, aby ste dobre opísali to, čo je na obrázku – tak, aby Google aj čitatelia vedeli, čo by tam malo byť. Čím viac informácií o obrázku poskytnete, tým viac vyhľadávačov ho bude považovať za dôležitý.

Keď prejdete myšou nad nejaký obrázok, môže sa vám zobraziť text. Pri Googli to je väčšinou popisok alebo názov obrázku, no niekedy to môže byť aj alternatívny text. Mnoho ľudí však tento text úplne vynecháva. Prečo to tak je? Odpovie nám Mozzila:

„Tag title má mnoho nedostatkov a to hlavne preto že podpora čítačky obrazovky je veľmi nepredvídateľná a väčšina prehliadačov tento text nezobrazí až pokiaľ po ňom neprejdete myšou. Táto možnosť je však neprístupná pre užívateľov, ktorí používajú výhradne klávesnicu.“

Preto je lepšie aby ste tento text zaradili do hlavného článku, ako ho pripojili k obrázku.

Pridajte štruktúrované dáta obrázkov

Pridanie štruktúrovaných dát pomôže vyhľadávacím nástrojom lepšie zhodnotiť váš obrázok a zobrazí ich vyššie vo vyhľadávaní. Aj keď Google tvrdí, že vám tieto dáta nepomôžu vo vyššom hodnotení, pomôžu vám získať lepšiu pozíciu vo vyhľadávaní obrázkov. Dôvodov je však viac. Napríklad, ak máte na vašej stránke recepty a k obrázku pridáte štruktúrované dáta, Google môže k vášmu obrázku pridať značku, ktorá znamená, že obrázok patrí k receptu. Google obrázky podporujú štruktúrované dáta pre nasledujúce:

Produkt
Video
Recept

Google má mnoho pravidiel, ktoré by ste mali zvažovať, ak chcete vaše obrázky dostať na čo najvyššie priečky. Hlavnou pointou je, že popis musí byť dosť prehľadný na to, aby sa dal obrázok zaradiť. Všetky pravidlá môžete nájsť na https://developers.google.com/search/docs/guides/sd-policies#images

Zaujímavým zdrojom je aj https://yoast.com/academy/structured-data-training/ . Dozviete sa vďaka nemu, ako pridať štruktúrované dáta do vašich obrázkov a ako ich správne používať.

OpenGraph a Yoast SEO pre obrázky na sociálnych sieťach

Ak pridáte nasledujúci kód do <head> sekcie vo vašom HTML podľa tohto vzoru:

<meta property=“og:image“ content=“http://example.com/link-to-image.jpg“ />,

tak dosiahnete, aby sa vo vašom zdieľanom poste zo stránky, napríklad na Facebooku, objavil obrázok (OpenGraph sa používa napríklad aj pre Pinterest).

Plugin Yoast SEO obsahuje funkciu, ktorá umožňuje nastavenie, a v premium verzii aj predbežné zobrazenie, vašich postov na Facebooku či Twitteri. Uistite sa, že použijete obrázky vo vysokej kvalite, ako napríklad tie, ktoré sa nachádzajú vo vašom článku. Platformy sociálnych sietí totiž častejšie používajú obrázky s vyššou kvalitou a lepším rozlíšením. Ak ste všetko spravili správne, no stále to nefunguje, skúste použiť URL Debugger. Yoast SEO obsahuje aj plugin pre Twitter.

Zarovnanie

Jedno zo základných pravidiel je, že obrázok nikdy nesmie prejsť za ľavý okraj textu. Je naozaj veľmi nepríjemné, ak text začína na pravom okraji obrázka, no potom preskočí a pokračuje na ľavom okraji iného obrázka.

Udržujte ľavú líniu textu

Ak použijete obrázok tej istej veľkosti ako blok textu, ešte viac mu to pomôže zapadnúť medzi text. So SEO optimalizáciou to nemá absolútne nič spoločné, no škodí to čitateľom.

XML image sitemap

Sitemapa je súbor, ktorý pomáha vyhľadávačom nájsť všetky podstránky a lepšie porozumieť celej štruktúre. Ide v podstate o zoznam všetkých stránok umiestnených na danom webe.

Ak ste vývojár webových stránok, môže vás zaujímať XML (eXtensible Markup Language). Google v tom má jasno:

„Dodatočne môžete využiť rozšírenie Google obrázkov pre sitemapy na to, aby ste Googlu poskytli viac informácií o obrázkoch, nachádzajúcich sa na vašom webe. Sitemapa obrázkov pomôže Googlu nájsť obrázky, ktoré by inak nenašiel. Sú to napr. obrázky ovplyvnené JavaScriptom. Tiež vám umožňuje Googlu ukázať obrázky, ktoré chcete aby označil a zaradil do vyhľadávania.“

SEO obrázkov: zhrnutie

SEO obrázkov je súbor niekoľkých elementov. Google je každým dňom lepší v rozpoznávaní týchto elementov a preto je veľmi dôležité, aby ste sa v ich vytváraní zlepšovali aj vy. Okrem lepšieho SEO a skúseností používateľov však môžu obrázky hrať veľkú úlohu aj pri konverzií.

Ná záver vám teda prinášame zhrnutie bodov, na ktoré by ste mali pamätať pri pridávaní obrázkov do článkov: