Optimalizácia obrázkov na zvýšenie rýchlosti a propagácie webových stránok - Semalt Expert



Obrázky sú samozrejme po texte jednou z najdôležitejších súčastí webu. Web bez obrázkov bude pre surferov zvyčajne nudný a menej motivujúci ako web s obrázkami.

Existuje tiež pomerne veľa oblastí, kde je použitie obrázkov povinné a dokonca nevyhnutné na zdôvodnenie stránky.

Napríklad:

Propagácia obrázkov Google: správne používanie obrázkov

Investovali ste a kúpili ste fotografie z webov s fotografiami/úložísk obrázkov, alebo ste si ich dokonca sami zväčšili a odfotili? Mali by ste ich tiež maximalizovať na účely SEO!

Google Image Promotion je jedným z najlepšie spôsoby, ako zvýšiť návštevnosť webových stránok v určitých oblastiach - najmä tých, ktoré sa zameriavajú na vizuálnu stránku.

Napriek vyššie uvedenému, nesprávne použitie obrázkov môže webu spôsobiť viac škody ako úžitku a dokonca výrazne zhoršiť propagačné úsilie. Keď hovoríme o použití obrázkov v v kontexte ekologickej propagácie, je dôležité mať na pamäti aj niekoľko pravidiel. Nesprávne použitie obrázkov môže výrazne zhoršiť rýchlosť stránky, a preto môže mať významný vplyv na propagáciu.

Základné pravidlá optimalizácie obrázkov:

1. Hmotnosť a rozmery obrázka

Jedným z dôležitých parametrov propagácie obrázkov online - je váha obrázka.

Na jednej strane by sme chceli používať vysoko kvalitné obrázky, ale na druhej strane to nebude na úkor rýchlosti stránky, používateľských skúseností a propagácie. Odporúčanie je vždy „optimalizovať“ (od slova optimalizácia) obrázky na maximálnu možnú mieru, bez výrazného zhoršenia kvality. Postupujte podľa všetkých nasledujúcich pravidiel:

Odporúčaná hmotnosť pre fotografie

Takmer akýkoľvek obrázok je možné skomprimovať na jeden alebo druhý stupeň, takže je vždy vhodné použiť iba tie rozmery, ktoré sú skutočne potrebné a ktoré sú fyzicky zobrazené na webe, a čo najviac znížiť váhu obrázkov. Platí to pre každú stránku. Ale najmä pre stránky s množstvom obrázkov. Vo všetkých prípadoch neexistuje jediné pravidlo, ktoré je pravdivé, ale je vhodné zabezpečiť, aby váha obrázka nepresiahla 70 - 80 kB, pokiaľ nejde o osobitne dôležitý obrázok z galérie/jazdca.

2. Vyberte vhodný názov pre obrázok

Pri vyhľadávaní obrázkov v službe Google sa zohľadňuje niekoľko parametrov, aby sa zobrazil obrázok súvisiaci s dotazom. Jedným z nich je názov súboru. Odporúča sa stráviť ďalšiu sekundu a dať snímke názov, ktorý vystihuje to, čo na nej vidíte. Je dôležité ponechať názov súboru v angličtine a používať stredné čiary, nie medzery. Dôvod je ten, že Google sa lepšie vyrovná so strednými čiarkami.

Príklady zlého názvu obrázka:

DSC2387.jpg

Stránka promoter.png

Príklad dobrého mena obrázka:

Search-engine-optimizer.jpg

Pre tých z vás, ktorých zaujíma - áno, Google vie, ako si poradiť s anglickými názvami obrázkov aj v iných jazykoch. Ako vie, ako preložiť hľadané reťazce a zvýrazniť preložené slová vo výsledkoch vyhľadávania.

3. ALT na obrázok

Alternatívna značka, čo je skratka alternatívy, je parameter, ktorý má za cieľ popísať obrázok. Alternatívna značka je definovaná v systéme správy/HTML kóde pre každý obrázok osobitne a jej pôvodnou funkciou je slúžiť nevidiacim a postihnutým osobám, ktoré používajú špeciálny softvér, ktorý tieto značky skenuje a číta napísaný text.

Technicky to v kóde vyzerá takto:

<imgsrc="tree.jpg" alt="strom">

Okrem dôležitosti značky z hľadiska prístupnosti webových stránok má dôležitosť aj pre vyhľadávače. Značka alt pomáha vyhľadávačom pochopiť, čo je predmetom obrázka (spolu s ďalšími vecami, ako napríklad názov súboru, kontext stránky, na ktorej sa nachádza, atď.) A tiež prirodzene ovplyvňuje vyhľadávanie obrázkov v službe Google.

Alternatívna značka je tiež súčasťou optimalizácie na stránke pre všetko. Ak z obrázka vychádza externý odkaz, značka alt slúži ako druh textovej kotvy („anchor text“) pre obrázok.

Ako skontrolujem, či má obrázok značku ALT?

Existuje niekoľko spôsobov:
Kričajúca žaba - Použite žabu vhodnú, keď chceme na webe vykonať dôkladné skenovanie obrázkov.

Proces spočíva v zadaní adresy URL na skenovanie a následnom kliknutí na kartu Obrázky.

Tam uvidíme zoznam obrázkov na webe, ktoré je možné triediť podľa niekoľkých parametrov:
Existuje samozrejme viac spôsobov a viac doplnkov rôzneho druhu, ale zdá sa mi, že som sa tejto téme venoval z hľadiska potreby bodu na stránku a rozsiahlej kontroly webu.

Propagácia obrázkov Google - tipy na optimalizáciu značiek ALT

Nemali by ste nútiť kľúčové slová, ale skúste popísať, čo vidíte na obrázku.
Na tapety/ozdobné obrázky nie je potrebné používať alts. Odporúča sa to však preto, aby Google nemal podozrenie, že sa snažíte nadmernú optimalizáciu.

4. Značka názvu obrázka

Titulky k obrázkom alebo Titulky sú akýmsi popisom, ktorý je možné zobraziť pohybom myši nad obrázkom. Mnoho ľudí si ich mýli so značkami ALT.

Názvy obrázkov sú ďalším údajom o relevantnosti a predmete obrázka, ktorý môže spoločnosti Google pomôcť pochopiť, o čom obrázok hovorí, a vylepšiť jeho poradie pri vyhľadávaní obrázkov. Na rozdiel od značky ALT bude značka názvu obvykle popisnejšia a o niečo dlhšia a jej účelom je surferom opísať, čo je na obrázku vidieť a/alebo čo príde po kliknutí na obrázok. Spravodajské weby túto značku často používajú.

Takto to vyzerá v kóde:

<img class="alignnone wp-image-1323 size-full" title="Príklad titulného obrázka">

5. Typy obrázkov a prípony súborov

Existuje niekoľko bežných formátov na online používanie obrázkov. Každému z nich v krátkosti priblížim:
Zrátané a podčiarknuté - súbory GIF nie sú určené na zobrazovanie obrázkov, najmä pokiaľ ide o kvalitu obrázkov, ale na jednoduchšie ikony, animácie a prvky.
Existuje veľa ďalších obrazových formátov, ktoré sú však pre použitie na webových stránkach menej relevantné.

Tip - Pre tých, ktorí používajú Photoshop, vždy odporúčam porovnávať váhy obrázkov pomocou Save for web a zariadení medzi rôznymi formátmi (pred uložením súboru je náhľad hmotnosti obrázka).

Pravidlá pre výber formátov obrázkov

6. Správne použitie miniatúr



Miniatúry (ukážky) sú dôležitou a dokonca kritickou súčasťou niektorých webov - najmä webov založených na galériách a obchodných webov. Miniatúry („Miniatúry“ od spoločnosti Google Translate…) môžu byť na jednej strane skvelé, ale výrazne sabotujú web a dojem používateľa na strane druhej.

Najdôležitejšou vecou pri používaní týchto obrázkov je udržiavať primeranú kvalitu a váhu na čo najnižšej úrovni. Táto skutočnosť je obzvlášť dôležitá na veľkých obchodných weboch, ktoré sa spoliehajú na miniatúry, aby zobrazili stránky kategórií a ukážky produktov. Vedeli ste, že každá sekunda oneskorenia načítania stránky stojí Amazon ročne 1,6 miliardy dolárov? Veľkú časť času načítania na týchto stránkach tvoria obrázky.

Je pravda, že väčšina z nás môže len snívať o tom, že bude mať web tejto veľkosti. Ale viete - veľké zmeny začínajú zdola nahor a malé. Čím skôr oslovíme, tým lepšie.

Tipy na správne používanie miniatúr

Dôrazne sa odporúča vytvoriť miniatúru pre miniatúru a väčší obrázok pre samotnú stránku produktu. Nepoužívajte veľký obrázok ako miniatúru! Toto načíta niekoľkonásobné načítanie webu, najmä ak je na jednej stránke veľa miniatúr. V rôznych systémoch CMS ste automaticky oslobodení od tohto problému.

Pokiaľ ide o pravidlá optimalizácie obrázkov, je vhodné investovať viac do veľkých obrázkov a nie do miniatúr. Napríklad - nezahŕňajte miniatúry do súboru Image Sitemap (rozšírenie nižšie), v niektorých prípadoch pre ne nenastavujte ani značky ALT. Ambíciou je, aby Google indexoval veľké obrázky na úkor miniatúr, a nie naopak.

Odporúča sa nastaviť Image Image na Thumbnails, ktoré popisujú produkt niekoľkými slovami a všeobecne, čo surfer uvidí po kliknutí na obrázok.

Ak má každá stránka s kategóriami produktov veľa produktov (napríklad viac ako 30), odporúča sa použiť skript Lazy Load, ktorý obrázky načíta, až keď sa surfer posunie do oblasti, kde sa nachádzajú.

7. Použitie zalamovacieho textu

Obrázky zvyčajne slúžia textu a nie naopak. Pokiaľ však ide o optimalizáciu obrázkov a propagáciu obrázkov Google, a ak je web sieťou založenou na obrázkoch, je veľmi užitočné neopomínať obsah textov, aj keď ide o základné veci.

Pre tých, ktorí si chcú zachovať čistý a minimalistický vzhľad (napríklad na portfóliovej webovej stránke fotografa), sa odporúča, aby na každej stránke, ktorá má obrázok, definoval aspoň toto:

8. Mapa stránok pre fotografie

Súbor Image Sitemap (image-sitemap.xml) pomáha spoločnosti Google lepšie načítať a indexovať naše obrázky na webe. Podobne ako štandardný súbor Sitemap pre XML, aj súbor Sitemap pre obrázky je možné odoslať pomocou služby Search Console v oblasti súborov Sitemap.

Pridajte súbor Sitemap do služby Search Console

Sitemap obrázkov je obzvlášť užitočný pri použití všetkých druhov galérií so skriptmi a rôznymi efektmi - ktoré Google konvenčne ťažko skenuje.

Pre použitie súborov Sitemap obrázkov existujú určité parametre.

Ako vytvoriť mapu webu?

WordPress - Ako obvykle pracujete na WordPress, váš život je jednoduchý. Roh za vás uzavrie doplnok Udinra All Image Sitemap. Všetko, čo musíte urobiť, je nainštalovať doplnok, označiť niektoré V v nastaveniach, vytvoriť mapu webu a spustiť ju cez vyhľadávaciu konzolu do Googlu.

Na akejkoľvek inej platforme - záleží. Ak neexistuje riešenie Out of Box, napríklad plugin, atď., Je to možné vykonať pomocou aplikácie Screaming Frog.

Žaba vám pomôže ľahko vytvoriť mapu stránok s obrázkami. Jediný problém - nebude sa aktualizovať automaticky (na rozdiel od pluginu) a musí sa z času na čas aktualizovať.

Ako to robíš?

Je potrebné vykonať úplnú kontrolu požadovanej stránky a potom v hornom menu softvéru prejsť na súbory Sitemap -> Create Images Sitemap. Dostanete kóšer súbor XML, ktorý môžete použiť a spustiť prostredníctvom služby Search Console.

9. Podporujte zdieľanie fotografií

Ak sa často chválite originálnymi obrázkami (či už fyzickými, alebo grafickými) a obrázky sú to hlavné alebo prinajmenšom podstatná súčasť stránky, je veľmi užitočné povzbudiť používateľov, aby obrázky zdieľali na sociálnych sieťach sietí a uľahčiť im to.

Ako to už býva, mám praktické tipy pre platformu WordPress, v iných systémoch odporúčam použiť programátor alebo skontrolovať, či na to nie je určený plugin.

WordPress má na tento účel 2 pekné doplnky:

10. Nástroje na redukciu a optimalizáciu obrazu

TinyPNG - vynikajúca služba, ktorá umožňuje komprimovať obrázky online pomocou obzvlášť pohodlného rozhrania preťahovania. Majú tiež API, ktoré vám umožní pracovať vo väčšom množstve a automaticky, a tiež skvelý doplnok pre WordPress, ktorý vám umožní komprimovať všetky obrázky na webe - vyžaduje použitie ich API (zadarmo pre 500 obrázkov za mesiac).
Fotosizer - pekný stolný softvér, ktorý umožňuje upravovať obrázky vo veľkom množstve - nielen kompresiu, ale aj zmenšenie rozmerov, pridanie vodoznakov a rôznych efektov do obrázkov a mnoho ďalších príjemných funkcií.

Záver

Práve ste pochopili dôležitosť optimalizácie obrázkov webovej stránky. Ak však chcete poznať aktuálny stav svojej stránky, môžete to urobiť zadarmo, a to vďaka Semaltovej SEO konzultácie.
Semalt vám pomôže identifikovať problémy SEO súvisiace s vašou stránkou. Navyše so Semalt Experts môžete ľahko zlepšiť výkonnosť svojho online podnikania pri nižších nákladoch.

mass gmail