SEO pro obrázky: 9 klíčových prvků

1. Obecné úvahy k SEO pro obrázky

Často veškeré úsilí věnujeme tomu, aby se naše SEO hodnotné URL umisťovaly v SERPech. Jak jsme však už zmínili, optimalizace obrázků je důležitá pro lepší umístění ve výsledcích vyhledávání Google Obrázky a pro zvýšení šancí přitáhnout přes ně organickou návštěvnost.

Boti Googlu obrázky „číst" neumí. Jsou určeni ke čtení kódu webu, ne konkrétní animace nebo obrázku. Proto jim tyto informace musíme dodat tak, že se budeme řídit jednoduchým souborem SEO pravidel. To rozhodne, zda boti dokáží interpretovat informace, které se snažíme ukázat, vyhodnotit obrázky a umístit je výš v sekci Google Obrázky.

2. Velikost a váha obrázku

Dva z hlavních faktorů při optimalizaci obrázků jsou jejich váha a velikost.

Váha:

Použití těžkých obrázků na webu může zvýšit dobu načítání URL, kde jsou implementované, a tím i celého webu. Doba načítání je jeden z faktorů, který ovlivňuje organické umístění na desktopu i mobilu, takže optimalizace obrázků je nezbytná.

Nástroje na snížení váhy obrázku:

Existuje mnoho nástrojů, které lze použít ke snížení váhy obrázku. I když nemáme profesionální editor jako Photoshop nebo Illustrator, můžeme použít online platformy:

• ›

  ImageOptim nebo TinyJPG, které snižují váhu obrázku, aniž by ovlivnily kvalitu.

• ›

  Website Speed Test Image Analysis Tool umožňuje snadné stažení nových formátů obrázků.

Velikost:

Navíc je důležité implementovat několik velikostí obrázku pro každý web, aby se zobrazovala ta nejvhodnější podle zařízení. I když existují pluginy, které velikost obrázku přizpůsobují, tato volba nemusí být v praxi nejlepší. Důvod je ten, že například obrázek 1000 px se může přeškálovat na 400 px, čímž se sníží jeho vizuální velikost, ale obrázek bude stále tak těžký jako 1000px verze, což ovlivní výkon a rychlost vašeho webu.

Nástroje:

Nejdůležitější faktor při výběru obrázků je znalost platformy, na které pracujete. Pokud pracujeme na WordPressu, můžeme použít SmushIt, plugin, který umožňuje definovat maximální šířku a výšku obrázků před jejich přeškálováním, kompresí a nahráním na server.

Pokud naopak pracujeme s platformou s vlastním kódem, musíme vytvořit manuální nebo automatický proces, který umožní obrázky optimalizovat před nahráním na server.

3. SEO friendly formát obrázku

V současnosti je nejoptimálnější způsob, jak ukládat webové obrázky, použít jeden z následujících čtyř formátů:

• ›

  WebP: Dokáže snížit původní váhu obrázku o 25–35 %. Jde momentálně o jeden z nejdoporučovanějších formátů; i když ho některé verze prohlížečů ještě neumí číst, je jedním z formátů, které umožňují větší kompresi bez ovlivnění kvality obrázku.

• ›

  PNG: Nejlepší volba pro obrázky s několika barvami a průhledným pozadím. Hojně se používá u log.

• ›

  JPG: Formát, který by se měl používat pro fotky a obrázky obecně. Při kompresi se trochu ztrácí kvalita, ale barvy a tóny zůstávají stejné.

• ›

  GIF: Používá se u animací a pohyblivých obrázků.

Doporučení:

• ›

  Vždy používejte nejvhodnější formát z hlediska váhy a kompatibility.

• ›

  Vždy obrázky komprimujte, ručně nebo přes nástroj automatického zpracování.

• ›

  Pokud web obsahuje několik ikon, sloučte je do jednoho obrázku přes CSS Sprites, abyste snížili počet požadavků na server a zlepšili výkon webu.

4. SEO pole obrázku

Každý obrázek má sadu přidružených polí, která vyhledávacím robotům (a samozřejmě uživatelům) poskytují lepší přístupnost.

Název obrázku

Název obrázku odkazuje na jméno souboru. Je to titulek obrázku, který používá pomlčky a podtržítka mezi slovy. Doporučuje se zahrnout klíčové slovo, na které chceme obrázek umisťovat, a vyhnout se neobvyklým znakům (jako „ñ", „?" nebo písmenům s háčky a čárkami, „á" atd.).

Také se doporučuje vynechat předložky a jiné nepodstatné znaky, aby se URL zkrátila a byla co nejvíc SEO friendly.

Title

To je text, který se objeví, když na obrázek najedete kurzorem. Doporučujeme ho vyplnit, abyste obrázku přidali sémantický titulek včetně klíčového slova, na které chcete umisťovat.

Může být stejný jako alt text, i když přepsání tohoto atributu s drobnými úpravami nezabere mnoho času.

Atribut „alt"

To je nejdůležitější prvek, protože to je ten, který Google čte. Musí obsahovat hlavní klíčové slovo, na které chceme URL umisťovat výš, a měl by obsahovat krátký popis.

Jeho syntax je:

<img src="ODKAZ NA OBRÁZEK" alt="POPIS ALT OBRÁZKU" />

Příklad optimalizovaného obrázku:

Podívejme se, jak by každé pole mohlo být optimalizováno pro tento obrázek na základě cílového klíčového slova „ciberseguridad pymes", jehož měsíční průměr vyhledávání je 90 (ve Španělsku):

Název souboru:

• ›

  Špatně: 04745892595295.jpg

• ›

  Správně: ciberseguridad-pymes.jpg

Title: Consejos de ciberseguridad para empresarios y pymes. (Rady ke kyberbezpečnosti pro podnikatele a malé a střední firmy.)

Alt text: Ciberseguridad para pymes y empresarios: consejos. (Kyberbezpečnost pro malé a střední firmy a podnikatele: tipy.)

Tímto způsobem optimalizujeme všechna pole a získáme obrázek, který je připraven bojovat o přední pozice. Optimalizace obrázků samozřejmě nezaručuje, že se objeví na prvním místě, ale je to první krok k tomu :)

5. Sémantický kontext

Google považuje za nejrelevantnější ty obrázky, které jdou v souladu s obsahem, který je obklopuje. Proto se doporučuje zahrnout související text. Tím rozšíříme celkový sémantický kontext na URL.

6. Sitemap specificky pro obrázky

Aby boti Googlu naše obrázky sledovali efektivněji, je nutné vytvořit exkluzivní sitemap.xml s tímto typem souborů. Na WordPressu lze vytvořit automaticky pomocí nástrojů (pluginů) jako Yoast nebo RankMath. Pokud na WordPressu nepracujete, můžete použít alternativní nástroje nebo nástroje pro ruční programování (URL tracking).

Dále uvidíte příklad sitemap se dvěma obrázky v článku:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/sample.html&lt;/loc> <image:image> <image:loc>http://example.com/image.jpg&lt;/image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg&lt;/image:loc> </image:image> </url> </urlset>

Některé z nejpoužívanějších tagů při tvorbě image sitemap jsou:

→ Title obrázku

→ URL nebo cesta, kde je soubor uložen

→ Popisek (footnote)

→ Typ licence

→ Informace o geolokaci

• ›Dokumentace: Velké množství informací najdete na blogu Googlu o image sitemap s příklady, návody na implementaci a dalšími.

Po dokončení implementace budeme moci ověřit stav pokrytí indexace v Search Console.

7. Lazy loading obrázků (načtení na vyžádání)

Obrázky patří k nejpoužívanějším zdrojům na webech, protože „obrázek vydá za tisíc slov", jak se říká. Proto se vizuální stránka každého webu pečlivě vyvíjí pomocí těchto multimediálních prvků. Pokud je však neoptimalizujeme, může to mít negativní dopad na uživatelskou zkušenost a dobu načítání webu. Z tohoto důvodu se doporučuje lazy loading.

Díky lazy loadingu se obrázky načítají, až když se objeví na obrazovce. Pokud jsou například ve spodní části stránky, která ještě není viditelná na obrazovce zařízení, nenačtou se, dokud uživatel nesjede dolů. To značně snižuje počet HTTPS požadavků a zkracuje doby načítání, čímž se vaše stránka stává Googlu sympatičtější.

Pluginy pro implementaci Lazy loadingu na WordPressu

Pokud spravujete weby na této softwarové platformě, existuje sada pluginů, které vás zaujmou, pokud chcete optimalizovat obrázky pomocí lazy loadingu. Nezapomeňte zkontrolovat, zda nainstalované téma tuto funkci zahrnuje. Pokud ne, zde je několik zajímavých:

• ›

  BJ Lazy Load: snadný na instalaci a nastavení, jeden z nejpopulárnějších nástrojů s více než 90 000 instalacemi. Díky tomuto doplňku můžete obrázky škálovat tak, aby se přizpůsobily různým velikostem obrazovek.

• ›

  Lazy Load by WP Rocket: jednoduchý a snadný na nastavení (v podstatě proto, že nenabízí různé možnosti), výhodou tohoto pluginu je, že nepoužívá JavaScriptovou knihovnu jako jQuery.

8. Použití CDN pro obrázky

CDN (Content Delivery Network) je sada serverů rozmístěných po celém světě, které zprostředkovávají cachovaný obsah webu podle toho, kde se nachází žadatel. Díky této hostingové síti server, který je k žadateli blíže, poskytne kopii požadovaného webu.

Použití CDN tedy pomáhá rychlejšímu stahování našich URL, snižuje doby načítání webu a podporuje jeho organické umístění.

Pokud k zobrazování obrázků použijeme CDN (například Cloudflare), budou se stahovat a zobrazovat rychleji. Tento přímočarý tok přímo zlepší naše SEO.

9. Další úvahy

SEO hodnotné obrázky, tedy ty, které chceme umisťovat výš, musí být zahrnuté ve zdrojovém kódu URL. Ty, které jsou implementované jako vlastnost background v CSS, nebudou pro Google viditelné, protože tento typ stylesheetů neumí pojmout.

Navíc je tu několik nezbytných detailů, které je při optimalizaci obrázků třeba mít na paměti:

• ›

  Exif: S každým obrázkem se ukládá sada atributů, jako je datum pořízení a další data důležitá pro profesionály v oboru. Tyto informace ale nemají SEO hodnotu a jen zabírají místo. Smazání těchto informací může pomoci obrázky optimalizovat a snížit jejich váhu.

• ›

  „longdesc": Tento atribut se obvykle zapomíná, ale jeho implementace u obrázků může být zajímavá. Jde o dlouhý popis obrázku.

• ›

  Prolinkování: Linkbuilding hraje zásadní roli v organickém růstu našich stránek, ale i našich obrázků. Lze je také prolinkovat a získat tím větší uznání ve vyhledávačích.

Chybí nám nějaké nezbytné tipy? Rádi vás vyslechneme. Napište komentář níže a klidně se podělte o své znalosti!