SEO optimalizace obrázků ve zkratce

Akčoli se to možná na první pohled nezdá, SEO optimalizace obrázků může vašemu podnikání výrazně pomoci.

Pokud své obrázky chcete optimalizovat co nejlépe a dosáhnout předních pozic v organickém vyhledávání, měli byste věnovat pozornost zejména následujícím aspektům:

  • Objevitelnost a možnost crawlování a indexace vašich obrázků
  • Autorita stránek, na které se obrázky nachází
  • Tématická relevance stránek
  • Popisky obrázků
  • Vlastnosti obrázků (název souboru, formát, velikost a atributy alt a title)
  • Rychlost načítání obrázků
  • Kontext obrázků poskytnutý markupem Schema.org

Co je SEO optimalizace obrázků?

Pojem SEO optimalizace obrázků zahrnuje veškeré aktivity prováděné za účelem dosažení co nejvyšších pozic obrázků v organických výsledcích vyhledávání.

Vyhledávače se totiž snaží obrázkům porozumět úplně stejně jako stránkám. Pokud tedy chcete, aby se vaše obrázky objevovaly na předních pozicích, měli byste se snažit vyhledávačům s tímto porozuměním všemi dostupnými prostředky pomoci. A my vám v tomto článku povíme, jak na to.

Proč by vás SEO optimalizace obrázků měla zajímat?

Za zmínku stojí především dva důvody:

  1. Obrázky mohou být obrovským zdrojem kvalitní organické návštěvnosti, což platí obzvláště nyní, když Google odstranil možnost “Zobrazit obrázek”, a uživatelé se tak mnohem pravděpodobněji prokliknou až k vám na web.
  2. Pokud své obrázky optimalizujete pro SEO, znamená to, že je automaticky optimalizujete také pro čtečky obrazovky, čímž pomáháte lidem se zrakovým postižením používat váš web a porozumět jeho obsahu.

Nyní si nejspíš kladete otázku: “Může SEO optimalizace obrázků přinést vyšší návštěvnost i mně?”

Odpověď závisí na druhu vašeho podnikání. Například v našem případě představuje návštěvnost z obrázků pouze zlomek celkové návštěvnosti. Lidé, kteří hledají odpovědi na své otázky ohledně SEO, totiž zpravidla nevyhledávají obrázky, což vědí také vyhledávače, které jim proto ve výsledcích zobrazují většinou běžné stránky.

Jako obecné pravidlo však platí: Pokud se pro dotazy, na které se snažíte cílit, ve výsledcích vyhledávání často objevují obrázky, je pro vás jejich optimalizace důležitá. Pokud tedy provozujete například e-shop, stránku s bulvárními zprávami či fotobanku, je pro vás SEO optimalizace obrázků naprostou nezbytností.

Co ovlivňuje pozice obrázků ve vyhledávání?

Faktorů ovlivňujících pozice obrázků ve výsledcích vyhledávání existuje celá řada:

  • Objevitelnost a možnost crawlování a indexace
  • Autorita stránky, na které se obrázek nachází
  • Tématická relevance stránky
  • Popisek obrázku
  • Vlastnosti obrázku (název souboru, formát, velikost a atributy alt atitle)
  • Rychlost načítání obrázku
  • Kontext obrázku poskytnutý prostřednictvím markupu Schema.org

Nyní si tyto jednotlivé faktory projdeme do detailu.

Objevitelnost a možnost crawlování a indexace

Tento bod vám možná připadá jako naprostá samozřejmost, kterou bychom ani nemuseli zmiňovat, a máte pravdu. Nicméně lidé často dělají chyby i v těchto základech, a proto jsme se rozhodli je sem zařadit. Zajistěte, aby vyhledávače mohly vaše obrázky jednoduše objevit, crawlovat a zaindexovat.

Vyhledávače objevují obrázky pomocí XML sitemap

Uvedením obrázků v XML sitemapách usnadníte vyhledávačům práci s jejich objevováním a umožníte jim prioritizovat crawlování a indexaci vašich stránek.

Obrázky můžete buďto seskupit do zvláštní sitemapy pouze pro obrázky, nebo je zahrnout v již existujících sitemapách. Obě metody jsou v pořádku, nicméně pokud máte web s tisíci obrázků, doporučujeme vytvořit zvláštní sitemapu pouze pro obrázky, protože tak získáte lepší přehled o tom, které obrázky jsou zaindexované a které nikoli.

Několik zásad pro XML sitemapy s obrázky:

  • Každý tag<url> může obsahovat maximálně 1 000 tagů image:image. Jinými slovy, pro jednu stránku můžete definovat maximálně 1 000 obrázků.
  • Popis obrázku definujte pomocí tagu image:caption
  • Geografické umístění obrázku definujte pomocí tagu image:geo_location
  • Titulek obrázku definujte pomocí tagu image:title
  • Licenci obrázku definujte pomocí tagu image:license

Více informací:

Zajistěte, aby vyhledávače mohly obrázky crawlovat a indexovat

Co nelze crawlovat, nelze ani zaindexovat. Proto je nutné dávat pozor, aby vyhledávačům neblokoval přístup k obrázkům například špatně nastavený soubor robots.txt. Nezakazujte botům Googlebot-Image a Googlebot přístup k obrázkům v souboru robots.txt!

Dále zajistěte, aby HTTP hlavička obrázků neobsahovala X‑Robots‑Tag s direktivou noindex a kanonický odkaz na jinou stránku.

Pokud máte na stránce obsahující obrázky zavedenou direktivu robots noindex, vztahuje se také na dané obrázky, které tak rovněž nebudou zaindexovány (pokud se tedy nenachází ještě na jiné, indexovatelné stránce).

Ujistěte se také, že vaše stránky neobsahují direktivu robots noimageindex, která vyhledávačům specificky nařizuje, aby dané stránce neindexovaly obrázky.

Naše domněnky o direktivě robots noindex a jejím vlivu na obrázky potvrdil také John Mueller z Googlu:

John Mueller odpovídá na otázku ohledně účinku direktivy robots noindex na indexovatelnost obrázků, kterou mu položil Steven van Vessum

Více informací:

Autorita stránky, na které se obrázek nachází

Před chvilkou jsme zmínili, že vyhledávače budou při zobrazování obrázků brát v úvahu stránky, na kterých se nachází. Ukažme si to na příkladu. Pokud ve vyhledávání obrázků Googlu zadáte jméno Denzel Washington, zobrazí se vám toto:

Stránka s výsledky Obrázků Google při zadání jména Denzel Washington

Na třech nejvyšších pozicích jsou obrázky z následujících webů:

  1. imdb.com
  2. wikipedia.org
  3. variety.com

Co mají společného? Všechny disponují velkou autoritou. Obrázky zde do velké míry těží z autority stránky, na které se nachází. Při jejich optimalizaci to proto mějte na paměti a promyslete, na které stránky je umístíte.

Tip: Po lidech, kteří vaše obrázky využívají, požadujte, aby vás u nich řádně uváděli jako zdroj a umísťovali odkaz na příslušné stránky vašeho webu na svůj web. Jedná se skvělou taktiku pro linkbuilding, obzvláště v “nudných” oborech, kde se zpětné odkazy získávají těžce. Více o této linkbuildingové taktice si můžete přečíst zde.

A pro případ, že vás někdo jako zdroj neuvede, své obrázky opatřete také vodoznakem, který alespoň zajistí, že vaše značka bude na očích.

Tematická relevance stránky

Téma stránky, na které se obrázky nachází, zásadně ovlivňuje jejich pozice ve výsledcích vyhledávání. Wikipedii, jejíž obrázek se pro náš dotaz “Denzel Washington” umístil jako druhý, například velmi pomáhá, že o něm má stránku s 4 000 slovy, která obrázkům na této stránce umísťujícím se pro daný dotaz značně přidává na relevanci.

Tematická relevance textu ovlivňuje relevanci obrázků na dané stránce

A malá poznámka k WordPressu: Pro každý nahraný obrázek vytváří zvláštní stránku ve formě “obrázkové přílohy”. Tyto stránky však z hlediska SEO nemají žádnou přidanou hodnotu, a navíc plýtvají crawl budgetem a vytváří téměř duplicitní obsah, a proto je doporučujeme deaktivovat.

Popisek obrázku

Text nacházející se v těsné blízkosti obrázků jim z pohledu vyhledávačů přidává na relevanci a uživatelům zase umožňuje jim lépe porozumět.

Zde je příklad popisku obrázku z našeho článku o přesměrování:

Příklad popisku pod obrázkem

Optimalizace vlastností obrázku

Zde je ukázka HTML kódu pro obrázek:

<img src="https://example.com/images/denzel-washington-graduating-high-school.jpeg" alt="Promoce Denzela Washingtona na střední škole" title="Promoce Denzela Washingtona na střední škole" />

Tag image obsahuje název souboru, formát, umístění obrázku a atributy poskytující kontext. Jedná se o další místo, které vyhledávačům napoví, pro jaké dotazy jsou vaše obrázky relevantní. Dejte si však pozor, abyste to nepřehnali. Necpěte do názvů souborů a atributů alt a title zbytečně mnoho klíčových slov.

Zde je seznam jednotlivých vlastností obrázků:

  • Název souboru
  • Formát
  • URL cesta
  • Atribut srcset u responzivních obrázků
  • Atribut alt
  • Atribut title

Název souboru: Jak vhodně pojmenovat obrázek z hlediska SEO

Název souboru by měl být deskriptivní a odpovídat relevantním vyhledávacím dotazům.

  • Dobře: denzel-washington-graduating-high-school
  • Špatně: photo

Formát

Volba správného formátu vám umožní minimalizovat dobu načítání obrázků a zároveň zachovat dobrou kvalitu.

  • Dobře: .jpeg u fotografie
  • Špatně: .gif u screenshotu, který má ukazovat detaily

Pro lepší orientaci přidáváme přehled nejpopulárnějších formátů obrázků a jejich optimálních využití.

Formát Optimální využití
JPEG (JPG) Fotografie
PNG Loga (podporuje průhledné pozadí) a obrázky, které musí zůstat ostré, jako například screenshoty.
GIF Animace
SVG Obrázky, které lze libovolně zvětšovat či zmenšovat, aniž by ztrácely na kvalitě (vektorové obrázky). Nejčastěji jde o mapy, ikony či loga.
WebP Tento formát vyvinul Google jakožto alternativu k formátům JPG a PNG, kterou lze ještě lépe komprimovat. Zatím není podporován některými prohlížeči jako Safari či Internet Explorer. My však věříme, že WebP má velký potenciál a vnímáme ho jako formát budoucnosti. Pro převod obrázků na WebP můžete použít nástroje jako Webpurr či Squoosh.

Více informací:

  • Na webu Can I Use můžete zjistit, které vyhledávače podporují které formáty obrázků (a mnohem více).

URL cesta

URL cesta obrázků by měla být krátká a logická. Vyhněte se chronologické struktuře složek, kterou využívá například WordPress. Platnost obrázků je na rozdíl od textového obsahu zpravidla časově neomezená, a nevytvářejte tak u uživatelů dojem, že vaše obrázky nejsou aktuální.

  • Dobře: /images/denzel-washington-graduating-high-school.jpeg
  • Špatně: /wp-content/uploads/2016/09/images/denzel-washington-graduating-high-school.jpeg

Atribut srcset u responzivních obrázků

Vzhledem k zaměření Googlu na mobilní zařízení, roli rychlosti stránky jakožto faktoru ovlivňujícího umístění ve vyhledávání a také skutečnosti, že Google primárně crawluje weby mobilním user-agentem, je zobrazování správných velikostí obrázků správným uživatelům naprostou nezbytností.

Naštěstí si však můžete nastavit, která verze obrázku se zobrazí v různých zařízeních a viewportech. Když si například prohlížíte webovou stránku na mobilu, nepotřebujete obrázky o šířce 1024 pixelů. Úplně bohatě vám bude stačit obrázek o šířce 400 pixelů, který vám tak ušetří velké množství dat.

Různé verze obrázku pro různé viewporty si můžete nadefinovat pomocí atributu srcset. Zde je příklad:

<img src="/images/denzel-washington-graduating-high-school.jpeg" srcset="/images/denzel-washington-graduating-high-school-400.jpg 375w, /images/denzel-washington-graduating-high-school-800.jpg 768w” alt="Denzel Washington graduating high school" title="Denzel Washington graduating high school" />

V tomto případě se na obrazovkách s viewportem 375 pixelů a méně zobrazí obrázek o šířce 400 pixelů, na obrazovkách s viewportem od 376 do 768 pixelů obrázek o šířce 800 pixelů a na obrazovkách s vyšším viewportem než 768 pixelů se zobrazí výchozí obrázek.

Pokud chcete, aby vaše obrázky vypadaly obzvláště ostře na retina displejích, můžete nahrát obrázky s dvojitou hustotou pixelů. Pokud má běžný obrázek rozměry 600 x 300 a je nazvaný denzel-washington-graduating-high-school.jpeg, jeho verze pro retina displeje by měla mít rozměry 1200 x 600 a být nazvaná [email protected].

Atribut alt

Atribut alt, který je (chybně) označován také jako alt tag či alternative tag, poskytuje vyhledávačům kontext. Z hlediska SEO, ale také z uživatelského hlediska se jedná o důležitý atribut, který je nutné definovat. Když obrázek nelze načíst, zobrazí se místo něj právě text atributu alt, díky kterému si uživatelé o obsahu obrázku budou moci alespoň udělat představu. Tento text pak k popisu obsahu obrázku využívají také čtečky obrazovky.

Máte u svých obrázků definovaný atribut alt?

S naší rychlou kontrolou v sekundě zjistíte, zda máte tento atribut definován u všech obrázků a zda obsahuje správný popisný text.

Vložte platnou doménu, prosím (www.priklad.cz).

Atribut title

Atribut title poskytuje kontext o obrázku jednak vyhledávačům, a jednak také uživatelům, kterým se zobrazí při najetí myší na daný obrázek. Zakomponování výzvy k akci do textu tohoto atributu vám může pomoci k vyššímu konverznímu poměru. John Mueller uvedl, že z pohledu SEO atribut title není tak důležitý jako atribut alt, přesto však může hrát roli v případě, že obsahuje relevantní obsah. Johnovo doslovné vyjádření:

John Mueller říká, že i atribut title hraje roli v SEO

Rychlé načítání obrázků

Jak už jsme zmínili, rychlost stránky je jedním z faktorů ovlivňujících umístění ve výsledcích vyhledávání. Z toho důvodu a také proto, že obrázky využívají stejný crawl budget jako stránky a další druhy obsahu, je důležité, aby se také načítaly rychle.

Zásady pro rychlé načítání obrázků:

  • Zvolte správný formát (viz kapitola Formát)
  • Zajistěte, aby se načítaly obrázky se správnou velikostí (viz kapitola Atribut srcset)
  • Komprimujte obrázky

Komprese obrázků

Velikost obrázků můžete snížit pomocí komprese, kterou lze provést několika způsoby:

  • Ztrátová komprese (lossy compression): velikost souboru se výrazně zmenší, avšak za cenu zhoršení kvality obrázku. Tato možnost dává smysl u stránek, které se musí načítat co nejrychleji.
  • Bezeztrátová komprese (lossless compression): velikost souboru se zmenší pouze mírně, kvalita obrázku však zůstane zachována. Pokud jde o rychlost načítání, tato možnost vám zas tak moc nepomůže.
  • Glossy compression: zlatý střed mezi ztrátovou a bezeztrátovou kompresí, který vyvažuje zmenšení velikosti se ztrátou kvality.

Nástroje pro kompresi
Zde jsou příklady nástrojů, které pro kompresi obrázků můžete využít:

Online aplikace:

Nástroje, které lze propojit s WordPressem:

Nástroj, který lze propojit se službou Magento: TinyPNG

Desktopová aplikace: ImageOptim

Více informací:

Osvědčené postupy pro optimalizaci rychlosti stránky, které platí také pro obrázky

V této části se zaměříme na osvědčené postupy pro optimalizaci rychlosti stránky, které se sice nevztahují pouze na obrázky jako takové, ale vzhledem k jejich hodnotě z hlediska SEO i uživatele zcela jistě stojí za zmínku.

Načítejte obrázky přes CDN

Doručování obsahu (včetně obrázků) přes tzv. síť pro doručování obsahu (CDN), jako je například Cloudflare, má mnoho výhod. CDN uživatelům umožňuje požadovat váš obsah ze serveru, který je jim v dané chvíli nejblíže, což výrazně snižuje dobu načítání.

Využívejte mezipaměť prohlížeče

Zajistěte, aby do mezipaměti prohlížeče byly uloženy obrázky, které se nachází na více stránkách. Jedná se například o obrázky vyskytující se napříč celým webem jako loga v hlavičce, postranním panelu a patičce.

Využívejte lazy loading

Lazy loading načítání obrázků sice nezrychlí, ale přesto je pro optimalizaci rychlosti stránky velmi důležitý.

Pomocí lazy loadingu totiž můžete odložit načítání obrázků až do momentu, kdy jsou skutečně potřeba a všechny ostatní prvky, které jsou nezbytné pro správné vykreslení stránky, již byly načteny. Pro uživatele je důležité, aby stránka byla co nejdříve použitelná, ne aby vypadala dokonale. Proč by se obrázky nacházející se až někde ve spodní části stránky měly načítat ihned, když si uživatel teprve začíná číst horní část?

Usnadněte vyhledávačům porozumění kontextu obrázku pomocí Schema.org

Jakýkoli obrázek, který ilustruje či demonstruje váš obsah, opatřete markupem Schema.org. Jednak tím pomůžete vyhledávačům porozumět kontextu daného obrázku, a jednak zvýšíte jeho šanci na zařazení do featured snippetu. Přítomnost obrázku ve featured snippetu upoutá více pozornosti, což vám přinese také více kliknutí.

Zde je ukázkový úryvek kódu definujícího obrázek:

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://google.com/article" }, "headline": "Image SEO: the Ultimate Guide", "image":{"@type":"ImageObject", "@id": "https://www.contentkingapp.com/academy/image-seo/#primaryimage", "url":"https://www.contentkingapp.com/wp-content/uploads/2019/05/[email protected]", "width":1200, "height":600, "caption":"Image SEO guide"}, "datePublished": "2019-05-17T08:00:00+08:00", "dateModified": "2019-05-17T09:20:00+08:00", "author": { "@type": "Person", "name": "Steven van Vessum" }, "publisher": { "@type": "Organization", "name": "ContentKing", "logo": { "@type": "ImageObject", "url": "https://www.contentkingapp.com/wp-content/uploads/2019/05/[email protected]" } }, "description": "A useful guide on increasing your images' rankings" } </script>

Několik poznámek:

  • Zajistěte, aby obrázky uvedené v markupu Schema.org bylo možné crawlovat a indexovat (viz kapitola Objevitelnost a možnost crawlování a indexace)
  • Obrázky musí být relevantní pro danou stránku.
  • Formát obrázků musí být .jpg, .png nebo .gif.
  • Nahrávejte pouze obrázky s vysokým rozlišením s následujícími poměry stran: 16x9, 4x3 a 1x1.

Více informací:

BONUS: Obrázky definujte také v Open Graph a Twitter Cards

Pokud se zaměřujete na návštěvnost ze sociálních sítí, mělo by pro vás definování obrázků v Open Graph a Twitter Cards být naprostou samozřejmostí. Návštěvnost ze sociálních sítí je sama o sobě dostatečným důvodem k tomu, abyste to dělali vždy.

Definováním obrázků v Open Graph a Twitter Cards své pozice ve vyhledávání sice přímo neovlivníte, nicméně my máme za to, že tak ke svým stránkám a obrázkům přidáte dodatečný kontext, který se vyhledávačům bude hodit.

Více informací:

Nástroje pro odhalení prostoru pro optimalizaci

Existuje řada nástrojů, které vám umožní analyzovat optimalizační potenciál vašich obrázků. Tyto nástroje analyzují obrázky, které využíváte na svém webu, a odhalí případný prostor pro zlepšení. Ve většině případů budete schopni výrazně snížit dobu načítání (až o několik sekund).

Seznam nástrojů:

Mějte však na paměti, že se jedná o automatizované nástroje, a jejich výstupy je proto dobré brát s mírnou rezervou. Nepovažujte je automaticky za nejdůležitější problémy, které musíte v dané chvíli řešit. Stejně jako u všech záležitostí týkajících se SEO i zde platí, že je vždy nutné si zachovat kritický přístup a vnímat věci v souvislostech a z různých úhlů pohledu.

Získejte zkušební verzi na 14 dní zdarma

Začněte během 20 vteřin

Vložte platnou doménu, prosím (www.priklad.cz).
  • Platební karta není potřeba
  • Není třeba žádná instalace
  • Bez závazků