Optimalizace obrázků nejen pro vyhledávače

Nedávno jsem na jednom diskuzním fóru uviděl dotaz ohledně optimalizace obrázků. Odpovědí bylo title a alt a ještě zmínka, že to je jednoduché. V ten okamžik jediné co mě napadlo bylo  *facepalm*. Optimalizace obrázků, je totiž jeden z nejtěžších a časově i nejnáročnějších úkonů, který se ve většině případů neobejde bez asistence tvůrce stránek. Takže pokud někdo na otázku odpoví title a alt. Měl by dostat následující odpověď.

Obrázky jsou velice důležitou součástí obsahu a podílí se poměrně významnou měrou na propagaci. V podstatě jsou call to action prvkem. Pokud o nich budeme uvažovat jen jako doplňku stránky, tak se připravíme o možnost efektivně propagovat obsah nejen ve vyhledávačích, ale například i sociálních sítích.

Zkusím teď shrnout základy optimalizace obrázků do jednoho článku.

Optimalizace obrázků pro vyhledávače

V ČR máme dva dominantní vyhledávače Google a Seznam. Některé prvky mají společné, ale pokud jde o “hlavní obrázek”, který tvoří dominantu obsahu přistupují k nim trochu odlišně. Začněme těmi společnými.

Název

Když nahrajeme na server obrázek, většina CMS nám nabídne možnost jej pojmenovat.Využijte toho.

• Na Google images to je nejvýraznější prvek po najetí na obrázek samotný.
• U Google images záleží na formátu obrázku. U širokých obrázků se vleze více písmen. Velikostí by jste se měli dostat do 30 znaků.
• Google images rozlišuje velká a malá písmena, čehož můžete využít.
• Google images zvládá v názvu diakritiku.
• Google doporučuje u více slov použít na oddělování pomlčky.
• Pokud chcete prodávat zboží musí už z názvu být patrné co prodáváte a že to máte.

Alt text

Alt by měl posloužit jako rychlý popisek obrázku pro roboty, kteří jej nevidí. Jednoduše se jedná o vyplnění prázdného prostoru, který na stránce vznikne, pokud si vypnete zobrazování obrázků.

• K popisu použije jednu či dvě věty. Pár slov je málo a přehnané slohové cvičené může být považováno za keyword stuffing.
• Ačkoliv dnes už se zřejmě nesetkáme s prohlížením stránek bez zapnutých obrázků, stále je Alt pro roboty velice důležitý a měl by se vyskytovat u důležitých obrázků v textu. Je dokonce důležitější než Title.

Title

Na rozdíl od Alt je Title určený pro lidi. Po najetí myši má posloužit jako informace, co má člověk na obrázku vlastně vidět.

Okolní text

Každý obrázek by měl být obklopen nějakým textem. Používají se různé metody jak k dopomoct vyhledávači aby k obrázku přiřadil text. Obecně by vše mělo začínat u rozdělení větších celků na menší. Například s využitím odstavců. Jde o to, aby vyhledávač v jednotlivém odstavci dokázal obrázek najít.

Pokud je však obrázek jen jeden, budou na něj pohlížet vyhledávače jako na ilustrační/doplňující obrázek k celému textu. A tady je opět nutné brát v úvahu ono oddělení obsahu článku od statické části webu. Zbytečně to crawlerům nestěžujte nápady, jako například umístění ilustračního obrázku nad nadpis článku.

Takže když si to shrneme. Měli by jste dodržovat základní pravidla jako je používání odstavců. Jeden velký kus textu je jednak špatně čitelný, ale také se v něm špatně hledá. Obrázky přiřazujte k odstavcům. Prostě obecné pravidlo děláme stránku pro uživatele platí i pro obrázky.

Sám vyhledávač tak v ideálním případě přiřazuje obrázky k samotným odstavcům, kde se nachází. Tyto informace jsou už ale trochu starší. O prázdninách jsem dělal několik vlastních experimentů a zjistil jsem, že Google obrázky identifikuje podle (asi) své databáze a ví k čemu je přiřadit. Jednalo se o obrázky z wiki commons, které jsem využil jako vhodné doplnění článků a překvapilo mě jak dokázal krásně vyřezat z článku kusy textu, a přidat je jako popisek v Google images. Je s tím tedy nutné počítat, že při neunikátních obrázcích se optimalizace nemusí podařit podle vašich představ.

Technické parametry obrázku

Pokud máte na webu jeden obrázek v různých velikostech, tak přednost bude mít ten ve vyšší kvalitě. Schválně si to zkuste. Dejte do Google images váš web přes site:domena.tld a zjistíte, že nejdříve jsou ty ve vysokém rozlišení a na konci pidiikonky. Díky tomuto lze převálcovat konkurenci v Google images ;)

Na stránkách Google rad pro webmástry najdete více odkazů, či spíše doporučení ať používáte kvalitní fotografie. Což ovšem tak trochu koliduje s rychlostí načítání stránek jako celku. Ilustrační obrázky formátu tapety na plochu bez výrazně znehodnocující komprese jdou do stovek kilobajtů.

Google radí ať se nebojíte používat náhledové obrázky v různých rozměrech (thumbnail), které odkazují na zvětšeninu. Tohle doporučení si vezměte k srdci. Nemusíte hned otvírat samostatný obrázek, stačí speciální stránka, kde bude obrázek v plné velikosti a pod ním odkazy na články kde byl použit, detailní popis co je na něm, autor, licence, kontakt v případě zájmu o využití, anebo rovnou html kód pro vložení na vlastní stránky. Ten bude obsahovat nejen URL a autora, ale zároveň i zpětný odkaz a to v tvaru jaký si určíte a kam si určíte pro konkrétní obrázek. A věřte mi není nic příjemnějšího než používat obrázky se svolením autora. A to nemluvím jen za sebe.

Dalším důvodem proč používat zmenšené náhledy je odvedené práce za vyhledávače. Jak jistě sami uznáte, ne vždy se zmenšení obrázků povede vyhledávačům podle vašich představ.

Tak a teď ještě surový výčet ať to SEO máme kompletní

• Každý obrázek musí mít atributy height a width, protože usnadňují renderování stránky prohlížečem, když ještě nejsou samotné obrázky nahrané. Zároveň ulehčujete vyhledávačům práci, když se snaží zjistit co je pod a co nad ohybem.
• Čím výše je obrázek umístěn na stránce tím má větší váhu
• Nesnažte se mít jeden obrázek nahraný pod více názvy, to je hodnoceno jako duplicita (negativně). Snažte se odkazovat na jeden fyzický soubor. Ideálně přes speciální stránku (viz. výše). Google přímo vyzývá, aby se dělali speciální stránky pro jednotlivé obrázky, podobně jako to má wikipedie, díky ním může lépe chápat co je na obrázku.
• Více rozměrů  jednoho obrázku není bráno jako duplicita.
• Google preferuje rozdělení obrázků do adresářů a to ať už podle rozměrů, data anebo podle zaměření (města, Česká Republika, cestování atd.)
• Google doporučuje hambaté obrázky dávat do speciálního odděleného adresáře.
• Google vyzývá tvůrce obsahu ať optimalizují obrázky. Patří sem například ořezávání prázdných bílých ploch, které pak jde nahradit odsazením, využíváním 8-bitových PNG anebo GIF pro ilustrace, naopak u barevných a kvalitních fotografií to s redukcí velikosti na úkor kvality nepřehánět. Dále používat Progressive mode u JPG či Interlaced u 24-bitových PNG.
• Pokud nemůžete sami hostovat soubor na svém serveru, vyberte si službu, která nehostuje warez a hamabeté obrázky. Dále musí být známá a fungovat delší dobu. Soubory na pochybných službách Google nemá rád. Například Flickr spolupracoval dříve s Yahoo!
• Google i Seznam se snaží stránku identifikovat. Velké množství obrázků jí může přiřadit označení “galerie”, což třeba u step by step návodu nemusí být ideální. Snažte se pečlivě vyplňovat alt tagy. Obdobně to funguje u stránek s wallpapery atd.

Speciální použití

Pro Seznam je náhledový obrázek velice důležitý, jak jistě sami uznáte. Při vhodně zvoleném obrázku se šance na proklik dramaticky zvedá. Pokud máte na stránce umístěný ilustrační obrázek a rádi by jste jej použili i jako náhled lze toho docílit následovně.

• Obrázek musí být ve formátu .jpg, .png, .gif
• Obrázek musí mít minimální rozměry 100 x 75 pixlů
• Poměr stran je pevně stanoven na 4:3
• O přeformátování (zmenšení) se postará algoritmus seznamu
• Do stránky musíte vložit krom samotného obrázku i tag <link rel=”previewimage” href=”IMAGEURL” />. Tag se přidává do hlavičky stránky.

Optimalizace obrázků pro sociální sítě

Pod tímto článkem se nachází lišta s možností podělit se o jeho obsah s přáteli na sociálních sítích. Když kliknete například na Google plus, zjistíte, že v náhledu je naprosto irelevantní obrázek. Ten rozhodně o moc nezvýší šance na přilákání nových návštěvníků. Součástí optimalizace by tedy mělo být něco s tím konečně udělat.

Google plus

Existuje v podstatě dvě možnosti jak docílit přiřazení obrázku k článku, anebo celému webu. Nejjednodušeji  je asi využití Schema.org microdata.

Obohaťte tag <body> o následující parametry:

• <body itemscope itemtype=”http://schema.org/Product”
• Umístěte někam na stránku obrázek s parametrem: <img itemprop=”image” src=”adresaobrazku”></img>

Výsledek si můžete prohlédnout například zde. Mimochodem testuju tam zároveň i nový sharovací plugin Flare, který je na rozdíl od ShareThis neuvěřitelně rychlý. Ale o tom někdy jinde.

Jak sami uznáte mé použití je tak trochu improvizační. Hodí se pokud chcete prosazovat značku. Ale přiznám se, že z další z nabízených je asi nejlehčí na aplikování, protože to šablony zasáhnete jen jednou a pak už si jen při psaní příspěvku označíte ilustrační obrázek. Jen nesmíte zapomenout vždy ilustrační obrázek označit atributem itemprop.

Aby jsem to tu měl kompletní. Celý Schema.org microdata vypadá následovně:

• <body itemscope itemtype=”http://schema.org/Product”>
•   <h1 itemprop=”name”>Nadpis článku</h1>
•   <img itemprop=”image” src=”adresaobrazku”></img>
•   <p itemprop=”description”>Super lákavý popis článku</p>
• </body>

Další možnosti jak určit ilustrační obrázek:

Open Graph protocol

• <meta property=”og:title” content=”…”/>
• <meta property=”og:image” content=”…”/>
• <meta property=”og:description” content=”…”/>

Co jsem zkoušel, tak by neměl dělat problém žádný běžně používaný formát ani různé rozměry. Ovšem doporučuji si předem připravit, něco menšího, aby při případné změně velikosti nedošlo k nechtěným deformacím. Maximální šířka a výška je 150px. I když nutno dodat, že Google plus zvládá vytvářet velice kvalitní náhledy.

Facebook

Oproti Google plus je Facebook ve vytváření náhledových obrázků na tom poměrně špatně. Zvláště velké obrázky jsou v náhledech často dosti nekvalitní. Je dobré se na to připravit.

Ideální rozměry pro Facebook jsou 90 x 90 pixelů.

Pokud potřebujete jen jeden obrázek pro celý web ideální metoda je vložit do hlavičky webu následující tag:

• <link rel=”image_src” href=”http://domena.tld/obrazek.jpg” />

Jak to bude vypadat si můžete zkusit na cn130.com, kde nejsou mimo reklamy prakticky žádné obrázky. Výjimkou jsou velice staré články a pár meme komiksů k aktuálním problémům na Webtrhu.

Další možností je využít Open Graph Protocol jako u Google plus.

Na rozdíl od Google plus, zřejmě nejde označit ilustrační obrázek přímo v textu.

Optimalizace obrázků pro ty ostatní

Tak máme za sebou základy optimalizace obrázků pro vyhledávače a rychle jsme si shrnuly i dvě nejdůležitější sociální sítě. Teď se ještě podíváme na ten zbytek.

Sitemap pro obrázky

Ne každý vyhledávač umí zázraky jako Google. V blízké době se navíc možná dočkáme rozmachu specializovaných vyhledávačů zvláště z komerční sféry. To je také jeden z důvodů proč by jste do budoucna měli o obrázkových sitemapách uvažovat. Zvláště majitelé eshopů, kteří si dělají vlastní obrázky. Pokud máte mezistránky pro obrázky, o kterých jsem psal výše, tak by sitemapy pro vás neměli být problémem. Mimochodem Google už je podporuje. Stačí je nahrát do GWT.

Ukázková sitemapa

<?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://memeobrazky.com/index.php</loc>
<image:image>

<image:loc>http://memeobrazky.com/wp-content/uploads/2012/09/trollface.jpg</image:loc>

<image:title>Trollface</image:title>

<image:caption>Meme obrázek Trollface ss nápisem Problém?</image:caption>

<image:geo_location>Planeta Země</image:geo_location>

<image:license>http://freedomdefined.org/Licenses/CC-0</image:license>

</image:image>
</url>
</urlset>

Více detailů najdete ve zdrojích. Toto téma navazuje na přiřazování obrázků k mapám atd. To už by bylo na samostatný článek.

Optimalizujeme pro lidi

• Ženy lépe rozeznávají ve tvářích emoce než muži
• Muži se nejdříve podívají na tvář, než začnou zkoumat křivky
• Ženy si oblíbily fotky, kde je více osob
• Vyčištěné obrázky tváří navozují větší a silnější oční kontakt
• Relevantní obrázky navozují větší důvěryhodnost článku než ilustrační
• Články s fotkami vypadají aktuálnější než ty bez

A spousta a spousta dalších věcí, které rozhodují o tom zdali bude článek sdílen na sociálních sítích anebo ne. Ačkoliv se většina lidí radši shodne že tohle do SEO už nepatří, tak dobře odvedená práce optimalizace webu je i o tomhle. Správně zvolená a umístěná tlačítka na sdílení u článku, call to action obrázky u affilate anebo důvěrně známé ikonky PDF či PayPal jsou důležitou součástí fungujícího webu.

Závěr

Nad článek jsem strávil celé odpoledne a většiny témat jsem se přitom dotkl jen okrajově. Alespoň vám sem přidám všechny zdroje, které odkazují na další zdroje ať můžete kdyžtak pokračovat :)

Jo a na závěr si neodpustím, pokud uvidíte někoho odpovídat na otázku optimalizace obrázků na webu jen title a alt. Pustněte mu prosím výše zmíněný obrázek Dr. Zoidberga. Děkuju.

Zdroje

• http://support.google.com/webmasters/bin/answer.py?hl=en&answer=114016
• http://support.google.com/webmasters/bin/answer.py?hl=en&answer=178636 (Image Sitemaps)
• https://developers.google.com/speed/articles/optimizing-images
• http://stackoverflow.com/questions/689295/how-to-show-particular-image-as-thumbnail-while-implementing-share-on-facebook
• http://stackoverflow.com/questions/7081261/how-do-i-get-the-google-1-button-to-give-a-preview-of-the-article-rather-than-t
• http://diythemes.com/thesis/wordpress-seo-image-optimization/
• http://www.seosmarty.com/image-seo/
• Image Optimization: Are you still concerned about your image file sizes?

 

 

---