Képoptimalizálás a weboldal sebességének és promóciójának javítása érdekében - Semalt Expert
A képek a web egyik legfontosabb alkotóeleme, természetesen a szöveget követve. A képek nélküli weboldal általában unalmas és kevésbé motiváló a szörfösök számára, mint egy olyan webhely, amelyen képek vannak.
Emellett jó néhány olyan terület, ahol a képek használata kötelező, sőt szükséges a webhely igazolásához.
Például:
- Online kereskedelmi webhelyek
- Portfólióhelyek és a művek megjelenítése
- Képes webhelyek, ahol a fotók a "termék" - például esküvői ruhák, eseményfotózás stb.
- Közösségi hálózatok - Egyre több tanulmány mutat rá arra, hogy a fényképekkel ellátott bejegyzések sokkal több megjegyzéshez és megosztáshoz jutnak, jelentős százalékkal, a fotó nélküli bejegyzésekhez és állapotokhoz képest
Google képpromóció: képek megfelelő használata
Fektetett be és vásárolt fotókat fotóoldalakról/képtárakból, vagy akár saját maga is nagyított és készített fotókat? SEO célokra is maximalizálnia kell őket!
A Google Image Promotion az egyik a weboldal forgalmának növelésének legjobb módjai bizonyos területeken - különösen azokon, amelyek a vizuális oldalra összpontosítanak.
A fentiek ellenére a képek nem megfelelő használata több kárt okozhat, mint használ, és jelentősen ronthatja a promóciós erőfeszítéseket. Amikor a képek használatáról beszélünk a szerves promóció keretében, fontos szem előtt tartani néhány szabályt is, a képek nem megfelelő használata jelentősen ronthatja a webhely sebességét, és ezért jelentős hatással lehet a promócióra.
Képoptimalizálási alapszabályok:
1. A kép súlya és méretei
A képek online népszerűsítésének egyik fontos paramétere - a kép súlya.
Egyrészt jó minőségű képeket szeretnénk használni, másrészt azonban ez nem a webhely sebességének, a felhasználói élménynek és a promóciónak a rovására megy. Az ajánlás mindig a képek optimalizálása (az optimalizálás szótól kezdve) a lehető legnagyobb mértékig, anélkül, hogy jelentősen rontaná a minőséget. Ehhez kövesse az alábbi szabályokat:
- Különböző helyzeteknek megfelelő formátum (jpg, png, gif és egyebek) használata - az alábbiakban részletes információkat talál a különböző típusú formátumokról.
- Fontos - Az egyes képek méretének beállítása a webhelyen - Kerülje a kép tényleges (fizikai) méreténél kisebb kép megjelenítését, amennyire csak lehetséges, hogy ne pazarolja a felesleges erőforrásokat. Minél nagyobb és mobilabb az oldal, annál nagyobb a jelentősége.
- Az érzékeny egyezés biztosítása - Ha WordPress-szel és modern sablonnal dolgozik, akkor nagy valószínűséggel bezárta ezt a sarkot. De ha nem, akkor mindig fontos megbizonyosodni arról, hogy a webhely képei, különösen a képek, amelyek a bejegyzéseken belül vannak, érzékenyek és jól jelennek meg mobileszközökön, táblagépeken stb.
- A kép súlyának maximális tömörítése a minőség jelentős romlása nélkül (az ehhez szükséges eszközök és módszerek bővítése - alább).
A fényképek ajánlott súlya
Szinte bármilyen kép tömöríthető ilyen vagy olyan mértékben, ezért mindig ajánlatos csak azokat a méreteket használni, amelyekre valóban szükség van, és amelyeket fizikailag jelenítenek meg az oldalon, és amennyire csak lehetséges, csökkentse a képek súlyát. Ez minden webhelyre igaz. De különösen a sok képpel rendelkező webhelyek esetében. Nincs egyetlen olyan szabály, amely minden esetben igaz, de célszerű megbizonyosodni arról, hogy a kép súlya nem haladja meg a 70-80K értéket, kivéve, ha ez egy kiemelten fontos galéria/csúszka kép.
2. Válassza ki a kép megfelelő nevét
A képek keresésében a Google több paramétert vesz figyelembe a lekérdezés szempontjából releváns kép megjelenítéséhez. Az egyik a fájlnév. Javasoljuk, hogy töltsön még egy másodpercet, és adjon olyan nevet a képnek, amely leírja a képen láthatóakat. Fontos, hogy a fájlnevet angolul tartsuk, és középső vonalakat használjunk, ne szóközöket. Ennek oka, hogy a Google jobban megbirkózik a középső kötőjelekkel.
Példák egy kép rossz nevére:
DSC2387.jpg
Weboldal promoter.png
Példa egy kép jó nevére:
Search-engine-optimizer.jpg
Azok számára, akik kíváncsiak - igen, a Google tudja, hogyan kell kezelni az angol képneveket más nyelveken is. Mivel tudja, hogyan kell lefordítani a keresési karakterláncokat és kiemelni a lefordított szavakat a keresési eredmények között.
3. ALT a képhez
Az alt tag, amely az alternatíva rövidítése, egy olyan paraméter, amelynek célja a kép leírása. Az alt címkét a kezelő rendszer/HTML kód határozza meg minden képhez külön-külön, és eredeti funkciója a vakok és a fogyatékossággal élő emberek kiszolgálása, akik speciális szoftvereket használnak, amelyek ezeket a címkéket vizsgálják és olvassák az írottakat.
Technikailag a kódban így néz ki:
<imgsrc="fa.jpg" alt="fa">
Túl a címke fontosságán a weboldal hozzáférhetősége szempontjából, a keresőmotorok számára is fontos. Az alt címke segít a keresőmotoroknak megérteni, hogy mi a kép tárgya (más dolgokkal együtt, például a fájlnévvel, az oldal kontextusával, amelyen van, stb.), És természetesen hatással van a képkeresésre a Google-on is.
Az alt címke az oldal optimalizálásának része. Továbbá, ha külső link jön ki a képből, az alt címke egyfajta szöveghorgonyként ("horgonyszöveg") szolgál a képhez.
Hogyan ellenőrizhetem, hogy egy képen van-e ALT címke?
Többféleképpen:
- Egész úton - kattintson a képre az egérrel -> kattintson a jobb gombbal -> ellenőrizzen egy elemet (a megfogalmazás különböző böngészőkben változik).
- Szeretnénk megkeresni a címkét az <img> parancsban, amint azt korábban bemutattuk.
- Használjon egy Web Developer nevű plugint (sok más feladatra kiválóan használható). A kiterjesztés lehetővé teszi számunkra, hogy egy gombnyomással megjelenítsük az összes alt címkét, amelyet a képek egy adott oldalon tartalmaznak.
Sikító béka - Használjon megfelelő békát, ha a képek alapos beolvasását szeretnénk elvégezni az oldalon.
A folyamat az, hogy beír egy URL-t a beolvasáshoz, majd kattintson a Képek fülre.
Itt láthatjuk a webhelyen található képek listáját, amelyet több paraméter szerint lehet rendezni:
- 100kb-nál nagyobb súlyú képek
- Képek ALT címkék nélkül
- 100-nál több karaktert tartalmazó ALT-címkékkel ellátott képek (és valószínűleg kissé meg kell rövidíteni őket)
Természetesen többféle és többféle plugin létezik, de nekem úgy tűnik, hogy itt tárgyaltam a témát az oldalankénti pontigény és a webhely átfogó áttekintése szempontjából.
Google képpromóció - tippek az ALT-címkék optimalizálásához
Ne erőltesse a kulcsszavakat, hanem próbálja meg leírni, amit a képen lát.
- Ha lehetséges a képleírás és a releváns kulcsszavak kombinálása a természetes kiemelkedés érdekében - mire jó.
- Nem kell túlzásba vinni a leírást, a 2-5 szóból álló alt tag több mint elég.
- Javasoljuk, hogy a kép alt és címke tagjai ne legyenek azonosak.
- Kereskedelmi oldalak esetén - ha a terméknek van modellszáma, akkor ajánlott az alt címkében használni (hogy megjelenjen a Google képkereséseiben).
Háttérképekhez/dekoratív képekhez nem szükséges altákat használni - még akkor is ajánlott, hogy ne tegye, hogy a Google ne gyanítsa, hogy túloptimalizálni próbál.
4. Kép címcímkéje
A képaláírások, vagy a Feliratok egyfajta eszköztipp, amely látható, ha az egeret egy kép fölé mozgatja. Sokan összetévesztik őket az ALT címkékkel.
A képcímek a kép relevanciájának és tárgyának újabb jelzései, amelyek segíthetnek a Google-nek megérteni, miről beszél a kép, és javíthatja a képkeresési rangsorolását. Az ALT címkével ellentétben a címcímke általában leíróbb és kissé hosszabb lesz, és célja, hogy leírja a szörfösnek, mi látható a képen és/vagy mi fog történni a képre kattintás után. A híroldalak gyakran használják ezt a címkét.
Így néz ki a kód:
<img class="alignnone wp-image-1323 size-full" title="Példa címképre">
5. Képtípusok és fájlkiterjesztések
A képek online használatának számos általános formátuma létezik. Röviden kibővítem mindegyiket:
- JPEG/JPG - Az internetes képek legrégebbi és valószínűleg leggyakoribb formátuma. A JPG formátum előnye, hogy viszonylag jó minőségű és kis súlyú képeket jeleníthet meg. A JPG képek nem támogatják az átlátszatlanságot.
- GIF - A GIF formátum szintén jó ideje velünk van, kezdve azoktól a napoktól, amikor még voltak hajlékonylemezek. A GIF-ek csak 256 színt támogatnak, ezért gyengébb minőségű képformátumot jelentenek, és elsősorban ikonokként vagy különféle dekorációkként való felhasználásra szánják őket. Ezenkívül a GIP formátum támogatja az animációt, sőt a Facebook nemrégiben elkezdte támogatni ezt a formátumot a hírcsatornában.
Lényeg - a gifek nem képek megjelenítésére szolgálnak, főleg ha a képminőségre vonatkoznak, hanem egyszerűbb ikonokra, animációkra és elemekre.
- PNG - Ez a (viszonylag) új formátum a csomagban. A PNG fájlok fő előnyei - jobb minőség a JPG-hez és a GIF-hez képest, valamint az átláthatóság támogatása. A PNG fájlok 2 formátumra vannak felosztva - a jobb minőségű PNG24 (és ennek megfelelően a kép súlya) és a leggazdaságosabb közülük.
Rengeteg más képformátum érhető el, de ezek kevésbé relevánsak a weboldalakon történő használatra.
Tipp - Azok számára, akik a Photoshop programot használják, mindig ajánlom a kép websúlyának összehasonlítását a Mentés webre és az eszközök használatával a különböző formátumok között (a fájl mentése előtt van egy előnézet a kép súlyáról).
Alapszabályok a képformátumok kiválasztásához
- A legtöbb esetben a JPG formátum fogja elvégezni a munkát. A JPG képek lehetővé teszik a kiváló minőséget és a fájlok alacsony súlyát.
- Ne használjon GIF-eket nagy, sok részletet tartalmazó fájlokban - a fájl súlya nagy lesz. A formátumot nem erre tervezték, és inkább kis és egyszerű elemekkel együtt használható.
- Ha az átlátszóság fontos szerepet játszik - használja a PNG formátumot. Mindig tanácsos összehasonlítani a PNG24 és PNG8 elemeket, hogy a képek súlya a lehető legkisebb legyen.
6. A miniatűrök megfelelő használata
Az indexképek (előzetesek) fontos, sőt kritikus elemei egyes webhelyeknek - különösen a galéria-alapú és a kereskedelmi webhelyeknek. Az indexképek (a Google Fordító "miniatűrjei") egyrészt nagyszerűek lehetnek, másrészt jelentősen szabotálhatják a webhelyet és a felhasználói élményt.
A képek használata során a legkritikusabb az ésszerű minőség és a lehető legkisebb súly megtartása. Nagy kategóriájú kereskedelmi webhelyeken, amelyek a miniatűrökre támaszkodva jelenítik meg a kategóriaoldalakat és a termékek előnézetét, ez a tény különösen fontos. Tudta, hogy az oldal betöltésének késedelme minden másodpercben évi 1,6 milliárd dollárba kerül az Amazonnak? Az ilyen oldalak betöltési idejének nagy részét a képek jelentik.
Igaz, a legtöbben csak arról álmodozhatunk, hogy ekkora oldalunk legyen. De tudod - a nagy változások alulról indulnak, és a kicsik. Minél hamarabb foglalkozunk, annál jobb.
Tippek a miniatűrök helyes használatához
Erősen ajánlott miniatűr létrehozása az indexképhez és egy nagyobb kép magának a termékoldalnak. Ne használja a nagy képet indexképként! Ez a webhely többszörösét fogja betölteni, különösen akkor, ha egy oldalon sok miniatűr található. A különféle CMS rendszerekben automatikusan mentesül ez a kérdés.
Amikor a képoptimalizálási szabályokat illeti, érdemes miniatűrök helyett többet fektetni a nagy képekbe. Például - ne vegye fel a miniatűröket a Kép webhelytérképébe (az alábbi kiterjesztés), egyes esetekben ne is állítson be hozzájuk ALT címkéket. A cél az, hogy a Google indexelje a nagy képeket a miniatűrök rovására, és ne fordítva.
Javasoljuk, hogy a Kép címe legyen Bélyegképek, amelyek néhány szóval leírják a terméket és általában azt, hogy a szörfös mit fog látni a képre kattintás után.
Ha minden termékkategóriás oldalon sok termék található (mondjuk 30 felett), akkor ajánlott egy Lazy Load szkriptet használni, amely csak akkor tölti be a képeket, amikor a szörfös oda görget, ahol vannak.
7. A csomagoló szöveg használata
Általában a képek a szöveget szolgálják fel, és nem fordítva. De ami a képoptimalizálást és a Google képpromócióját illeti, és ha az oldal képeken alapuló háló, akkor nagyon érdemes nem hanyagolni a szövegek ügyét, még akkor sem, ha ez alapvető dolog.
Azok számára, akik szeretnék a lehető legtisztább és minimalista megjelenést fenntartani (például a fotós portfóliójának webhelyén), ajánlott, hogy minden képpel ellátott oldalon legalább a következőket határozza meg:
- H1 A kép témája szerint
- Rövid leírás (akár 10-20 szó is jobb, mint a semmi) a képen, lehetőleg egy-két releváns kulcsszóval
- A cím és a leírás természetesen releváns (ha egy fizikai oldalról van szó, és nem egy képről, amely egy galériából bukkan fel).
- Alt és fotó címek - Ebben az esetben erősen ajánlott.
8. Webhelytérkép fotókhoz
A Kép-webhelytérkép (image-sitemap.xml) segít a Google-nak abban, hogy jobban olvassa és indexelje a képeinket a webhelyen. A szokásos XML-webhelytérképhez hasonlóan a képek webhelytérképét a Search Console segítségével lehet beküldeni a webhelytérképek területén.
Adjon hozzá webhelytérképet a Search Console-hoz
A képek webhelytérképe különösen hasznos, ha mindenféle szkriptekkel és különféle effektusokkal rendelkező galériákat használnak - amelyeket a Google nehezen tud beolvasni hagyományosan.
Van néhány paraméter a webhelytérképek használatához.
Hogyan készítsünk webhelytérképet?
WordPress - Mint általában, ha a WordPress-en dolgozik, az életed könnyű. Az Udinra All Image Sitemap plugin bezárja a sarkot az Ön számára. Csak annyit kell tennie, hogy telepíti a bővítményt, megjelöli a V-t a beállításokban, létrehozza a webhelytérképet, és elindítja a Google számára a Search Console-on keresztül.
Bármely más platformon - ez attól függ. Ha nincs Out of box megoldás, mint egy plugin stb., Akkor ezt a Screaming Frog segítségével teheti meg.
A béka segíthet a képek webhelytérképének elkészítésében. Az egyetlen probléma - nem frissül automatikusan (ellentétben a beépülő modullal), és időről időre frissíteni kell.
Hogyan csinálod, hogy?
A kért webhely teljes vizsgálatát el kell végezni, majd a szoftver felső menüjében válassza a Sitemaps -> Képek létrehozása webhelytérkép lehetőséget. Amit kap, az egy kóser XML-fájl, amelyet a Search Console-on keresztül lehet használni és elindítani.
9. Ösztönözze a fényképmegosztást
Ha sok eredeti kép használatával büszkélkedhet (legyen az fizikai kép vagy grafikus elem), és a képek a webhely fő vagy legalább elengedhetetlen részei, akkor nagyon érdemes arra ösztönözni a felhasználókat, hogy osszák meg a képeket a közösségi oldalakon. hálózatokat, és megkönnyítik számukra ezt.
Szokásom szerint gyakorlati tippjeim vannak a WordPress platformmal kapcsolatban, más rendszerekben javaslom a programozó használatát, vagy ellenőrizzem, hogy van-e dedikált bővítmény hozzá.
A WordPress 2 szép pluginnal rendelkezik erre a célra:
- Social Image Hover for WordPress - Fizetett plugin (em; körömlakk - $ 17).
- Pinterest Pin it Button - egy plugin, amely egy kis Pinterest ikont ad hozzá a webhelyen található fotókhoz.
10. Képcsökkentő és optimalizáló eszközök
TinyPNG - kiváló szolgáltatás, amely lehetővé teszi a képek online tömörítését egy különösen kényelmes húzási felülettel. Rendelkeznek API-val is, amely lehetővé teszi nagyobb mennyiségű és automatikus munkát, valamint egy remek plugint a WordPress számára, amely lehetővé teszi az összes kép tömörítését a webhelyen - megköveteli az API-juk használatát (havi 500 képért ingyenes).
Fotosizer - szép asztali szoftver, amely lehetővé teszi a képek nagy mennyiségben történő szerkesztését - nem csak a tömörítést, hanem a méret csökkentését is, vízjeleket és különféle effektusokat adva a képekhez és sok más szép funkcióhoz.
Következtetés
Most értette meg a weboldal képeinek optimalizálásának fontosságát. Azonban, ha tudni szeretné webhelye aktuális állapotát, a Semalt's-nak köszönhetően ingyen megteheti SEO konzultációk.
A Semalt segít azonosítani a webhelyével kapcsolatos SEO problémákat. Ezenkívül a Semalt Experts segítségével könnyen javítsa online üzleti teljesítményét alacsonyabb költséggel.