SEO – Aj obrázky na webe je potrebné optimalizovať pre vyhľadávače

Č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ácií, kedy sa budete sami seba pýtať, či váš článok potrebuje obrázky. Odpoveď 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, priniesli návštevnosť a takisto predstaví pár bodov o tom, 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 ale rozhodne to platí ak potrebujete oživiť dlhý článok, vysvetliť tabuľky, diagramy či analýzy alebo len oživiť vaše sociálne siete.

Jednoduchá rada: 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 stáva čoraz dôležitejšou – ako môžeme vidieť aj vo vízií budúcnosti prehľadávania od Google – a môže vám vylepšiť návštevnosť. Ak používate vizuálne prvky mali by ste SEO obrázkov 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.

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. Stránka vášho tímu potrebuje fotky ľudí, s ktorými naozaj spolupracujete a nie fotky náhodných modelov.

Č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, v rámci témy samozrejme. 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. Viac 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. Napríklad Flickr.com je zaujímavým zdrojom obrázkov, pretože 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 Unsplash.com. Skúste sa vyhýbať databankovým fotkám a používajte tie, ktoré vyzerajú aspoň trochu normálne. Nezáleží však na tom, aký druh fotiek použijete, pretože tie, na ktorých sú ľudia takmer vždy vyzerajú ako z databanky. Okrem tých, ktoré vytvoríte sami. A to je, koniec koncov, vždy najlepšia voľba.

Vhodnými alternatívami obrázkov sú ilustrácie alebo grafy. Za zmienku stojí aj GIF formát, ktorý je v poslednej dobe neuveriteľne populárny.

Aj keď sú GIF-y veľmi populárne, nepreháňajte to s nimi. Pohyblivé obrázky môžu vašich čitateľov rozptýliť od textu a ich načítanie 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 vecí, na ktoré musíte pred jeho použitím brať ohľad: 

Správne pomenovanie súboru

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

Správna veľkosť pre SEO

Čas načítania web stránky je veľmi dôležitý keď príde na UX a SEO. Čím rýchlejšie sa stránka načíta, tým jednoduchšie je ju navštíviť a zaradiť. Obrázky majú na načítanie stránky veľký vplyv. Hlavne keď nahráte veľký obrázok, no zobrazíte ho ako malý. Pretože ak nahráte obrázok s veľkosťou 2500×1500 pixlov, no zobrazí sa vo veľkosti 250×150 pixlov, stále sa musí načítať celý jeho objem. Ak chcete znížiť čas načítania, musíte zmenšiť obrázok na rozmery, v akých ho chcete zobraziť. Napr. 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. Naneštastie to neznamená, že tiež zmení veľkosť obrázku. Zmení len jeho rozmery v akých sa neskôr zobrazí.

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

Toto je pre SEO tiež veľmi dôležitý aspekt. Ak používate WordPress tak si s tým nemusíte lámať hlavu, pretože 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.

Zmenšite veľkosť súboru

Ďalším bodom v SEO obrázkov je veľkosť súboru. Vždy by ste mali pridávať súbory s čo najmenšou veľkosťou vzhľadom na potrebnú kvalitu.

Samozrejme, môžete súbory použiť aj v ich originálnej veľkosti a potom len experimentovať s percentami kvality no odporúčam vám použiť 100% kvalitu obrázkov. To platí hlavne pre tých, ktorý vytvárajú weby pre cieľovú skupinu, ktorá 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 odtránenie odporúčame programy ako ImageOptin, JPEGmini, jpeg.io alebo Kraken.io. 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.

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 lne 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, nachádzajúci sa väčšinou pod obrázkom, ktorý obrázok opisuje. Prečo sú 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? Nie, pretože niekedy obrázky slúžia na iné účely. Rozhodnite sa, ktoré obrázky chcete použiť pre SEO optimalizáciu, a ktoré nie. Chceme sa totiž vyvarovať prílišnej optimalizácií. Popisky pod obrázky pridávajte len tam, kam sa to hodí. Nepridávajte popisky 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ácií, 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ť nejaký 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 pripojiť 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. No je tu toho 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ť 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/ ak sa chcete dozvedieť, ako pridať štruktúrované dáta do vašich obrázkov a ako ich správne používať.

OpenGraph a Twitter

Pred chvíľou sme spomínali používanie obrázkov na oživenie sociálnych sietí. 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 poste, 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 verzií 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.

Ak použijete obrázok tej istej veľkosti ako blok textu ešte viac mu to pomôže zapadnúť medzi text.  Toto nemá absolútne nič spoločné so SEO optimalizáciou no škodí to zákazníkom. Preto váš prosím, nerobte to!

XML image sitemap

Sitemapa – súbor, ktorý pomáha vyhľadávačom nájsť všetky podstránky a lepšie porozumieť celej štruktúre, 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.

Tu je pár bodov, na ktoré by ste mali pamätať pri pridávaní obrázkov do článkov:

• Používajte relevantné obrázky, ktoré sa hodia ku textu
• Vyberte dobrý názov súboru
• Ujistite sa že rozmery obrázka sú rovnaké ako tie, v akých sa zobrazuje
• Použite srcset ak je to možné
• Zmenšite veľkosť súborov pre rýchlejšie načítavanie
• Pridajte popisok pre rýchlejšie „skenovanie“ stránky
• Použite alternatívny text obrázku, titulový text je tiež vhodný
• Do obrázku pridajte štruktúrované dáta
• Použite OpenGraph a Twitter Cards tagy pre obrázky
• Neporušujte ľavý okraj textu. Zarovnávajte obrázky doprava alebo do stredu
• Použite obrázky aj XML sitemape
• Poskytnite všetok kontext, ktorý máte

Okrem lepšieho SEO a skúseností používateľov môžu obrázky hrať veľkú úlohu aj pri konverzií.