SEO optimalizace obrázků s WordPress

10 min.
WordPress image SEO optimization

Nejpozději od Google Core Web Vitals a faktoru rychlosti načítání byste měli brát téma vyhledávání podle obrázků vážně. Existuje několik způsobů, jak optimalizovat obrázky ve WordPress. Zde je náš přehled nejdůležitějších tipů a nástrojů.

Obrázky, fotky, infografiky a další ilustrace se staly nedílnou součástí psaní vysoce kvalitních článků. Nejenže rozvolňují text, ale objasňují i některé procesy lépe, než by to dokázala slova. Správným přístupem můžete své webové stránky jak zrychlit, tak je lépe najít ve vyhledávačích.

WordPress SEO texty

Jak obecně připravíte své blogové příspěvky a vstupní stránky pro vyhledávače, vám ukážu ve svém tutoriálu Optimalizace textů pro vyhledávače. Spolu s tímto příspěvkem tím máte nejdůležitější tipy pro WordPress SEO.

Kromě toho nabízí sám Google i konkurenti menších vyhledávačů vyhledávání podle obrázků. Vyhledávače se přes něj mohou dostat na vaše webové stránky. Tak proč si nechat ujít skvělou příležitost vyhledávání podle obrázků s WordPress?

Jak ovlivňuje vyhledávání pomocí obrázků vaší viditelnost?

Nejprve se podíváme na SEO vyhledávání podle obrázků nezávisle na WordPress. Pokud do příspěvku zahrnete vysoce kvalitní obrázky, můžete přilákat pozornost mnoha návštěvníků a návštěvnic. Roli zde však nehrají pouze vyhledávače. Pokud své obrázky odpovídajícím způsobem připravíte, může to ovlivnit různé aspekty.

Jednak výrazně zvýšíte svou viditelnost, protože ve vyhledávačích lze přirozeně nalézt i samotné obrázky – nejen text. Někdo by se mohl dostat na vaše webové stránky. Chcete malý příklad?

Vyhledávání obrázků na Googlu

Použiji vyhledávání na Googlu a zadám termín "těstoviny recept". Ale protože nechci mít jen recept v textové podobě, přejdu na vyhledávání obrázků. Tam jsou nyní krásné obrázky na recept s těstovinami:

Images Search Google
Vyhledání receptu pomocí vyhledávání obrázků na Googlu

Moc se mi líbí třetí obrázek zleva. Pokrm vypadá opravdu dobře. Z tohoto důvodu kliknu na obrázek a pak skončím na odpovídající stránce, která si dala záležet s vyhledáváním podle obrázků.

Pokud tedy správně použijete optimalizaci obrázků pro vyhledávače, můžete oslovit mnoho dalších lidí. Ale to je pouze jeden z mnoha příkladů.

Sociální sítě

Obrázky totiž ovlivňují nejen vyhledávače, ale i lidi. A kde jsou lidé denně aktivní? Na sociálních sítích, jako je Facebook, Twitter, Instagram, Pinterest, LinkedIn atd.

Pokračujme dál u našeho výše uvedeného příkladu. Řekněme, že provozujete food blog. Jak skvělé by bylo, kdyby návštěvníci, kteří našli váš recept, sdíleli příslušný příspěvek na sociálních sítích? Kliknou tedy například na tlačítko pro sdílení na Facebooku. A pokud není k dispozici žádný pořádný obrázek příspěvku nebo není správně integrován, pak vidí velmi smutný obrázek, a to žádný.

Takto příspěvek nevyzývá ke kliknutí nebo sdílení. Právě naopak, příspěvek se v rozlehlosti sociální sítě ztratí – a nebude brán v úvahu. Pouze pokud je vedle textu zobrazen vhodný obrázek, pak to výrazně zvyšuje atraktivitu:

Share on Facebook Image
Příklad vložených obrázků pro sdílení na Facebooku

Například na food blogu byste neměli používat obrázky, které se skládají převážně z textového obsahu. Zde se očekává hotový recept. Stále si však čas od času vybírám textové obrázky. V následující části vysvětlím proč.

Odkud získat kvalitní obrázky?

U vysoce kvalitních obrázků často existuje malý problém. Problém právní povahy. Jistě víte, že už nesmíte jednoduše kopírovat obrázky, které najdete na Googlu. Jsou totiž chráněny autorskými právy. Nyní máte k dispozici následující možnosti:

  • Používání placených platforem
  • Použití obrázků bez licence
  • Vytvořit nebo vyfotografovat obrázky sami

Ne každý web má k dispozici rozpočet na nákup drahých obrázků. Například z Fotolia nebo Shutterstock. U obrázků bez licenčních poplatků (např. na Unsplash nebo Pexels) existuje nebezpečí, že nebyly vždy nahrány autory. Existují dokonce zprávy o rafinovaných podvodech, které pak mohou vyjít draho.

Platformy, jako je Pixabay, uvádějí možná použití. Došlo však již k soudním sporům, které skončily v neprospěch majitelů webových stránek. Proto můj tip: Při stahování si udělejte screenshot s licenčními informacemi. Z výše uvedených důvodů jsem se rozhodl používat obrázky, které jsem vytvořil sám, u kterých hodně pracuji s textovým obsahem. Mohu je s klidným svědomím a bez právních důsledků zveřejnit. Pokud máte webové stránky, které obsahují mnoho obrázků, pak byste měli zvolit jinou cestou.

Efektivní používání SEO obrázků

Jak můžete optimalizovat obrázky pro SEO vyhledávání? Nejdříve bych vám rád poskytl několik běžných postupů, aby vaše obrázky nebo webové stránky dosáhly větší viditelnost. V další části vám ukážu, jak lze tyto procesy implementovat pro vyhledávání podle obrázků s WordPress. Protože ne vždy je řešením problému instalace WordPress pluginů.

Neoptimalizované obrázky zhoršují vaše hodnocení

Většina lidí, kteří mají webové stránky, si myslí, že optimalizace obrázků pro vyhledávače je o dosažení lepších výsledků ve vyhledávání nebo v náhledech na sociálních sítích. Ale není tomu tak. Obrázky je také třeba vylepšit kvůli výše uvedeným Google Core Web Vitals. Zde se jedná o usability vašeho webu, viz tento článek o novém faktoru hodnocení. Kromě toho vaše cílová skupina stále více surfuje po internetu pomocí smartphonu.

Pokud tedy webové stránky obsahují velké a neoptimalizované obrázky, načítají se pomalu a uživatel musí být trpělivý. Ale kdo by chtěl čekat na neooptimizované obrázky? Výsledkem bude od května 2021 horší hodnocení na Googlu.

Velikost obrázku

Proto byste se měli snažit již při vytváření o co nejmenší velikost obrázku, aniž byste ztratili jeho kvalitu. Pokud si obrázky vytváříte sami, můžete to kontrolovat prostřednictvím programu pro úpravu obrázků. V tomto ohledu se také osvědčily přizpůsobené formáty pro webové stránky (tj. šířka a výška v pixelech, pro obrázky příspěvku v závislosti na WordPress šabloně). WordPress pak nemusí obrázky zbytečně škálovat.

Pokud jste pořídili snímek profesionálním foťákem, může mít tisíce pixelů. Obsah webových stránek má většinou omezenou šířku. Proto má smysl nahrát obrázek pouze v této šířce. Zejména proto, že pak rychle dosahuje velikosti až několika MB, což již v moderním webdesignu není nutné - a negativně ohlivňuje dobu načítání.

Formát a komprese

Formát obrázků často souvisí s kompresí a některými dalšími faktory. Zatímco je například vhodnější ukládat obrázky s průhlednými prvky ve formátu PNG, je pro barevnou grafiku vhodnější formát JPG.

Kdežto JPG umožňuje vyšší kompresi, a proto může výrazně snížit velikost souboru. Tím trochu trpí kvalita obrazu. Existují již další formáty jako AVIF a WebP pro WordPress a jiné, které jsou určeny pro budoucnost. Poskytují ještě lepší výsledky.

Jak správně vyplnit metadata

Většina vyhledávačů je stále založena na takzvaných metadatech. V podstatě se jedná o informace, které web ukládá do zdrojového kódu, aby je vyhledávače mohly přiřadit.

Google je jako největší poskytovatel technicky velmi vyspělý a nepotřebuje tak podrobná metadata jako malé vyhledávače. Přesto bych je vždy vložil. Webovým stránkám to neuškodí a poskytuje šanci, že je díky dalším větám a slovům někdo najde.

Mimochodem nemají metadata nic společného s názvem souborů obrázků. Měli byste je vždy smysluplně pojmenovat již před nahráním, tj. s popisem obsahu. Vraťme se k příkladu food blogu. Těstovinový pokrm z mletého masa by se měl jmenovat například "recept-testoviny-bolonska-omacka.jpg". Metadata pro obrázky se jednoduše vkládají do zdrojového kódu jako HTML – to dělá WordPress za vás, pokud při nahrávání obrázků přidáte příslušné informace. O tom více později.

Zdrojový kód správně pojmenovaného obrázku může vypadat například takhle:

<img src=“domain.de/Nudel-Teller-mit-Hackfleischsauce-zum-Kochen.jpg“ alt=“Nudel Teller mit Hackfleischsauce“ title=“Nudel Teller mit Hackfleischsauce“ />

Značka alt je alternativní (textový) popisek, která se může objevit, pokud se obrázek nezobrazí. Například kvůli zastaralému prohlížeči, nefunkčnímu odkazu atd. Ale je to také důležité pro lidi, kteří používají čtečku obrazovky. To je další důvod, proč byste měli věnovat pozornost bezbariérovému přístupu webové stránky. Tag title obrázku (nezaměňovat s tag titlem webu!) slouží k zobrazení dalších informací o obrázku při najetí myší.

Optimalizace obrázků mimo WordPress

Pokud si obrázky vytváříte nebo upravujete sami pomocí programu na úpravu obrázků, jako je Gimp nebo Photoshop, měli byste se řešení ve WordPress vyhnout. Je jednodušší a efektivnější provádět optimalizaci přímo v programu. Zde je příklad z Photoshopu:

Photoshop image compression
Komprese obrázků ve Photoshopu

Z původního souboru příspěvku obrázku k tomuto textu se tam z původně více než 4 MB stal soubor JPEG s 340 KB, ve velikosti obrázku 2560×1440. A to se sotva viditelnými omezeními. U PNG je to - v závislosti na obrázku - částečně podobné.

Pokud nyní snižíte rozlišení obrázků, tj. na WordPress šablonu, můžete vytvořit ještě menší soubory. Například na mém blogu mají titulní obrázky velikost 720×360 pixelů. To záleží na šabloně a může se lišit.

WordPress pluginy pro kompresi obrázků

Chcete komprimovat své obrázky přímo ve WordPress namísto externí varianty nebo jako doplněk? Pak si přečtěte naše srovnání 5 populární pluginů pro kompresi obrázků. Ukáže vám také správný pracovní postup pro tuto důležitou práci.

Zjistěte velikost obrázku ve WordPress

Malá poznámka o velikostech obrázků ve WordPress. Můžete je snadno zjistit, ale nemají nic společného se specifikacemi médií v obecném nastavení WordPressu:

Media settings in WordPress
Nastavení médií na WordPress dashboardu

Zde můžete nastavit standardní velikosti používané WordPressem. Když nahrajete obrázek, vytvoří WordPress další obrázky v těchto velikostech. Tím se však nezmění velikosti, které jsou zobrazeny ve WordPress šabloně.

Některé šablony tuto možnost v nastavení nabízejí, jiné ne. Můžete jednoduše přejít na vlastní webové stránky v prohlížeči a kliknutím pravým tlačítkem myši se blíže podívat na obrázek – například obrázek příspěvku. Pak najdete dílčí položku "Zobrazit grafické informace".

Pokud je v části “rozměry” uvedeno, že byl obrázek zmenšen na jinou velikost, měli byste příslušné obrázky znovu upravit. Protože ve WordPress šabloně je určena jiná velikost, než jakou jste vyřízli.

Definice metainformací ve WordPress

Obrázky hrají při optimalizaci pro vyhledávače důležitou roli nejen proto, že vylepšují texty. Spíše proto, že vás zviditelňují. A protože můžete Googlu a dalším vyhledávačům ukázat, o čem na svých webových stránkách píšete.

Považujte proto obrázky za nezbytný doplněk obsahu. Aby vyhledávače rozpoznaly potenciál, potřebujete výše zmíněné metainformace. Jak již bylo popsáno, měli byste obrázkům již před nahráním přidělit název souboru optimalizovaný pro SEO. Obrázky pojmenujte velmi přesně. Název by měl odrážet to, co je na obrázku vidět.

WordPress nabízí možnost zadat metadata obrázků přímo při nahrávání. Doporučuji však, abyste obrázky nepřidávali přímo při psaní, ale abyste je přidávali prostřednictvím galerie médií. K tomu jednoduše klikněte v backendu WordPressu vlevo na Média -> Přidat soubor. Zde pak můžete vybrat obrázek z počítače pomocí stejnojmenného tlačítka v horní části a nahrát jej.

Po úspěšném nahrání se zobrazí tlačítko "Upravit", na které kliknete. WordPress otevře mediální soubor a zobrazí jeho nejdůležitější informace. Zde nyní můžete vyplnit červeně označená místa na obrázku:

Metadata for images in WordPress
Vložení metadat pro obrázky ve WordPress

Pokud později přidáte obrázek do Gutenberg editoru, automaticky se doplní příslušné metainformace. Nepoužívejte však přesto obrázky vícekrát. Místo toho je nahrajte znovu s novým názvem souboru a novými metadaty. To proto, že metadata jsou obvykle optimalizována pro konkrétní příspěvek.

Lazy loading obrázků ve WordPress

Abyste dosáhli co nejrychlejšího webu, který obstojí u nových Core Web Vitals od Googlu, měl by být načten pouze ten obsah, který je zrovna nezbytný. Obrázky, které se zobrazují v dolní části dlouhého článku, nemusí být zobrazeny ani načteny na začátku.

Zde je relevatní takzvaný lazy loading. Takže zpožděné načítání obrázků, které se nenacházejí v oblasti „above-the-fold“, tedy v oblasti, kterou čtenář vidí přímo. Zatímco dříve byla tato funkce možná pouze s některými WordPress pluginy, například s Autoptimize nebo WP Optimize (pouze od Premium), je nyní všem k dispozici, kteří mají nainstalovaný alespoň WordPress 5.5.

Protože tam je lazy loading nyní zohledněno již v jádru kódu. Od verze WordPress 5.7 dokonce i Lazy Load pro iFrames. Pokud máte nainstalovanou starší verzi, měli byste rozhodně provést aktualizaci.

Lazy Loading iframes in WordPress
Vysvětlení lazy loadingu pro iFrames na WordPress.org

Ukládání do mezipaměti pomocí WordPress

Pomocí ukládání do mezipaměti můžete ve WordPressu dosáhnout výrazného zvýšení výkonu. Zde lze rozlišovat mezi ukládáním do mezipaměti prohlížeče, který ukládá pouze určité soubory v koncovém zařízení, a ukládáním do mezipaměti na straně serveru. V druhém případě je dynamicky generovaný obsah WordPressu k dispozici také ve statických souborech na serveru.

V důsledku toho nemusí webová stránka při každém vyvolání přistupovat k databázím. Takové přístupy totiž na jedné straně zvyšují rychlost načítání a na druhé straně také zátež, kterou musí váš server snášet. Zejména pro velké webové stránky s velkým počtem návštěvníků to může být efektivní způsob, jak ušetřit zdroje.

Nevýhoda: Určitý obsah stránky nemůžete vytvářet dynamicky. Pokud například používáte různé reklamní bannery, museli byste je z ukládání do mezipaměti vyloučit. Nebo se smířit s tím, že se v příspěvku nezmění. Také u e-shopů s WooCommerce musíte zohlednit určité výjimky, aby platební proces fungoval správně.

Kromě velmi rozsáhlých pluginů, jako je WP Rocket, který je placený a nabízí mnoho nastavení, můžete ukládání do mezipaměti implementovat také pomocí bezplatných pluginů, jako je WP Optimaze nebo W3 Total Cache. RAIDBOXES nabízí pro tento účel vlastní ukládání do mezipaměti na straně serveru. Mezipaměť NGINX je aktivní dříve, než WordPress převezme velení. Tímto způsobem mohou být webové stránky zobrazeny, aniž by WordPress zpomalil. Další výhoda: Již nepotřebujete dodatečný plugin na ukládání do mezipaměti pro WordPress a nemusíte se starat o složitá nastavení.

Optimalizace výkonu WordPressu

Chcete vědět, co je nejdůležitější pro vaši WordPress výkonnost? Pak si přečtěte náš návod. A také náš e-book na téma Jak správně měřit Webpage Speed.

Závěr k vyhledávání podle obrázků s WordPressem

WordPress optimalizace z hlediska obrázků se může opravdu vyplatit. Nejenže zvýšíte své hodnocení, ale můžete také přilákat další návštěvníky. Na druhou stranu to vyžaduje určitou práci. Zvláště na začátku, kdy je pro vás téma ještě nové. Časem to jde však rychleji a dosáhnete skvělých výsledků.

Zejména proto, že Google věnuje stále větší pozornost době načítání, má smysl věnovat pozornost nejen metainformacím. Obrázky nahrávejte ve správném formátu, komprimované a s přesnou velikostí. Návštěvníci vám za to poděkují, protože stránka rychle poskytne požadované informace. Pokud je pak i obsah správný, nestojí vašemu úspěchu nic v cestě.

Další příspěvky na téma SEO na wp unboxed, které vám s Googlem atd. pomohou:

Vaše otázky na téma vyhledávání podle obrázků s WordPress

Jaké máte otázky k tomuto tématu? A jaký tip můžete doporučit? Použijte funkci komentáře. Chcete více příspěvků na WordPress a SEO? Pak nás sledujte na Twitteru, Facebooku, LinkedIn nebo prostřednictvím našeho newsletteru.

Ronny Schneider je profík na SEO a WordPress. Na svém blogu pravidelně píše o tom, jak lze úspěšně koncipovat blogy a online časopisy. Kromě toho poskytuje pomoc při nastavování blogů s WordPress i při jejich optimalizaci.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.