Úvod
Obrázky často tvoria najväčšiu časť webových stránok a majú vlastnú kartu vo výsledkoch vyhľadávania Google. Sú dôležitou súčasťou kompletnej stratégie SEO, preto je ich optimalizácia nevyhnutná pre lepšiu viditeľnosť.
Ako vyhľadávače indexujú a chápu obrázky
Vyhľadávače prehľadávajú webové stránky, aby našli obrázky a získali údaje, ako sú metadáta a názvy súborov. Na pochopenie kontextu a obsahu obrázkov používa spoločnosť Google faktory, ako je okolitý text, názov súboru obrázka, alt text, titulky a obsah stránky.
Čo je SEO optimalizácia obrázkov?
Optimalizácia obrázkov zahŕňa techniky na zvýšenie viditeľnosti na stránkach s výsledkami vyhľadávania (SERP) pomocou kompresie obrázkov, používania responzívnych obrázkov, implementácie lenivého načítania, pridávania relevantného textu alt, používania popisných názvov súborov a implementácie štruktúrovaných údajov.
1. Výber správneho formátu obrázku
Spoločnosť Google podporuje formáty JPEG, PNG, WebP, BMP, GIF a SVG. Každý formát má svoje výhody a nevýhody:
-
PNG: Bezstratová kompresia, lepšia kvalita, podpora priehľadnosti, väčšia veľkosť súboru.
-
JPEG: Stratová kompresia, nastaviteľná kvalita, menšia veľkosť súboru.
-
WebP: Efektívne, menšie veľkosti súborov, podporované všetkými hlavnými prehliadačmi.
-
GIF: Bezstratový, obmedzený na 256 farieb, vhodný na jednoduchú grafiku a animácie.
-
SVG: vektorový, škálovateľný, ideálny na logá a ikony.
-
BMP: Veľký, nekomprimovaný, vysoká kvalita, nevhodný na web kvôli veľkosti.
Odporúčanie: Pre optimálnu kvalitu a čas načítania použite PNG a pre webové nasadenie ho prekonvertujte do WebP.
2. Vytvárajte jedinečné obrázky
Vyhnite sa generickým fotografiám. Používajte originálne, vysokokvalitné obrázky na zlepšenie používateľského zážitku a SEO. Spoločnosť Google odporúča, aby boli obrázky široké aspoň 1200px a aby sa v meta tagu robots použilo nastavenie max-image-preview:large, čím sa zabezpečí, že sa v službe Google Discover zobrazia ako veľké obrázky.
<meta name='robots' content='index, follow, max-image-preview:large' />3. Optimalizácia názvov súborov obrázkov
Používajte opisné názvy súborov s kľúčovými slovami, ktoré pomôžu vyhľadávačom pochopiť predmet obrázka. Vyhnite sa predvoleným názvom ako "IMG_722019".
4. Napíšte text Alt vhodný pre SEO
Značky Alt opisujú obsah obrázka a zlepšujú jeho prístupnosť. Pomáhajú tiež vyhľadávačom pochopiť kontext obrázka, čo napomáha lepšiemu hodnoteniu.
Príklad:
<img src="chocolate-1.jpg" alt="tyčinka s príchuťou horkej čokolády a kávy"/>5. Optimalizujte názov a popis stránky
Do názvu a popisu stránky zahrňte relevantné kľúčové slová, aby ste zlepšili pozície pri vyhľadávaní obrázkov. Zabezpečte optimalizáciu všetkých faktorov SEO na stránke.
6. Definujte svoje rozmery
Zahrňte atribúty šírky a výšky pre každý obrázok, aby ste predišli problémom s kumulatívnym posunom rozloženia (CLS) a zlepšili skóre Core Web Vitals.
7. Urobte svoje obrázky vhodné pre mobilné zariadenia
Použite atribúty srcset a sizes pre responzívne obrázky, ktoré sa škálujú podľa zariadenia používateľa.
Príklad:
<picture> <source type="image/webp" srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"> <img src="image-300w.jpg" srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px" alt="Popis obrázka"> </picture>8. Lenivé načítanie a predbežné načítanie
Na zlepšenie výkonu stránky použite lenivé načítanie pre obrázky, ktoré sa nenachádzajú v zobrazovacom poli. Pre obrázky nad záhybom použite preload alebo fetchpriority="high ".
Príklad:
<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Popis">9. Pridanie obrázkov do mapy stránok
Zahrnutie obrázkov do mapy stránok zvyšuje šancu, že ich vyhľadávače budú prehľadávať a indexovať. Použite pluginy, ako je Yoast alebo RankMath pre WordPress, alebo nástroje, ako je Screaming Frog.
10. Pridanie štruktúrovaných údajov
Vylepšite obrázky pomocou štruktúrovaných údajov, aby ste zlepšili viditeľnosť vo výsledkoch vyhľadávania. Pomocou označovania schémou zahrňte podrobnosti, ako je cena, dostupnosť a hodnotenie.
Príklad:
{"@context": "http://schema.org","@type": "Article", "headline": "Article Title", "image": ["datePublished": "2024-01-10T08:00:00+08:00", "dateModified": "2024-01-10T09:20:00+08:00", "author": {"@type": "Person", "name": "Meno autora" } }11. Používanie CDN na rýchlejšie doručovanie obrázkov
Sieť na doručovanie obsahu (CDN) dokáže optimalizovať a rýchlejšie doručovať obrázky tým, že ich doručuje z miest bližšie k používateľovi. Zvážte použitie služieb ako Cloudflare, Amazon CloudFront, ImageKit alebo KeyCDN.
12. Pozor na autorské práva
Uistite sa, že máte právo používať obrázky, aby ste sa vyhli drahým súdnym sporom. Používajte licencované obrázky od poskytovateľov ako Getty, Shutterstock alebo DepositFiles.
Optimalizácia obrázkov
-
Vyberte si správny formát a veľkosť súboru, aby ste dosiahli rýchlejšie načítanie.
-
Zabezpečte optimalizáciu prvkov SEO na stránke.
-
Vytvorte mapu stránok s obrázkami pre lepšiu prehľadateľnosť.
Dodržiavaním týchto tipov môžete zlepšiť SEO optimalizáciu obrazu svojej webovej stránky a celkovú viditeľnosť vo vyhľadávaní. Šťastnú optimalizáciu!
