„Képeket keresőoptimalizálni” változatai közötti eltérés
Innen: Hogyankell.hu
(→Lépések) |
|||
| (Egy közbenső módosítás, amit egy másik szerkesztő végzett, nincs mutatva) | |||
| 5. sor: | 5. sor: | ||
== Lépések == | == Lépések == | ||
| − | # Használj alt tageket! A kereső általában okos, de nem annyira, hogy kitalálja, mi van a képen, hacsak nem mondod meg neki. Erre szolgál az alt tag, amit, ha CMS rendszert használsz, általában a kép beillesztésekor meg lehet adni (image description, képleírás vagy valami hasonló elnevezésű mezőbe kell írni), ha pedig a kódot böngésszük, akkor egész egyszerűen így kell kinéznie: <img src=”../images/piros-pipacs.jpg” alt=”Piros pipacs” />. Ezt követően a Google vagy bármelyik más keresőmotor ugyan továbbra sem „látja”, hogy piros pipacs van a képen, a leírásból azonban „ki tudja olvasni”, hogy a. piros, b. pipacs van a képen. Így, ha valaki piros pipacsot keres a későbbiekben, jóval nagyobb valószínűséggel dobja majd ki a képünket a kereső. Emellett az alt tag azért is fontos, mert ha nem megfelelően töltődik be a honlapon a kép, még így is információt adhatunk arról, hogy mi van a képen. Emellett pedig a látássérültek is tudják majd, mi van a képen, ha képernyőolvasót használnak az internetezéshez. | + | # '''Használj alt tageket!''' A kereső általában okos, de nem annyira, hogy kitalálja, mi van a képen, hacsak nem mondod meg neki. Erre szolgál az alt tag, amit, ha CMS rendszert használsz, általában a kép beillesztésekor meg lehet adni (image description, képleírás vagy valami hasonló elnevezésű mezőbe kell írni), ha pedig a kódot böngésszük, akkor egész egyszerűen így kell kinéznie: <img src=”../images/piros-pipacs.jpg” alt=”Piros pipacs” />. Ezt követően a Google vagy bármelyik más keresőmotor ugyan továbbra sem „látja”, hogy piros pipacs van a képen, a leírásból azonban „ki tudja olvasni”, hogy a. piros, b. pipacs van a képen. Így, ha valaki piros pipacsot keres a későbbiekben, jóval nagyobb valószínűséggel dobja majd ki a képünket a kereső. Emellett az alt tag azért is fontos, mert ha nem megfelelően töltődik be a honlapon a kép, még így is információt adhatunk arról, hogy mi van a képen. Emellett pedig a látássérültek is tudják majd, mi van a képen, ha képernyőolvasót használnak az internetezéshez. |
| − | # Tedd informatívvá a fájl nevét is! Ha fájlnévnek a krikszkraksz.jpg helyett piros-pipacs.jpg (célszerű kötőjelet tenni a szavak közé), az szintén információt nyűjt a keresőrobotoknak. | + | # '''Tedd informatívvá a fájl nevét is!''' Ha fájlnévnek a krikszkraksz.jpg helyett piros-pipacs.jpg (célszerű kötőjelet tenni a szavak közé), az szintén információt nyűjt a keresőrobotoknak. |
| − | # Az url-ben is lehetnek kulcsszavak! Azon túl, hogy mondjuk mi rendelkezünk a piros-viragok.hu weboldallal, amin piros virágokat lehet rendelni tőlünk, még tovább optimalizálhatjuk kulcsszavakkal az url-t akkor, ha beszédesek a linkek, így például a kép linkje a www.piros-viragok.hu/images/smallimages/piros-pipacs.jpg helyett lehet www.piros-viragok.hu/piros-vadviragok/piros-pipacs.jpg. | + | #''' Az url-ben is lehetnek kulcsszavak!''' Azon túl, hogy mondjuk mi rendelkezünk a piros-viragok.hu weboldallal, amin piros virágokat lehet rendelni tőlünk, még tovább optimalizálhatjuk kulcsszavakkal az url-t akkor, ha beszédesek a linkek, így például a kép linkje a www.piros-viragok.hu/images/smallimages/piros-pipacs.jpg helyett lehet www.piros-viragok.hu/piros-vadviragok/piros-pipacs.jpg. |
| − | # A képek méretét akkorában határozzuk meg, amekkorában a honlapon szerepeltetni szeretnénk. Vagyis ne töltsünk fel egy 1200*900 pixeles képet, hogy aztán a kódban állítsuk át 400*300 pixelesre, hanem egész egyszerűen töltsünk fel egy 400*300 pixeles képet. | + | # '''A képek méretét akkorában határozzuk meg, amekkorában a honlapon szerepeltetni szeretnénk.''' Vagyis ne töltsünk fel egy 1200*900 pixeles képet, hogy aztán a kódban állítsuk át 400*300 pixelesre, hanem egész egyszerűen töltsünk fel egy 400*300 pixeles képet. A megfelelő méretű kép gyorsabban betöltődik, tehát felhasználóbarát, amit a keresőmotor díjazni fog. |
| − | # Tömörítsük a képeket. A képek esetében nem a tökéletességre törekszünk, hanem a tökéletesség látszatára (hisz szabad szemmel úgysem látható a különbség). Az interneten használt képek esetében a 72px/inch felbontás tökéletesen elegendő, emellett pedig a képek tömöríthetőek, az interneten leggyakrabban használt jpg esetében például még a tömörítés mértékét is megadhatjuk. Ha Photoshopot használunk, a képet a File/Save for web and devices… paranccsal mentsük el, a megjelenő párbeszédablakban megadhatjuk a kívánt paramétereket. Jpg esetében addig tömörítsük, amíg ránézésre nem történik minőségromlás a képen. | + | # '''Tömörítsük a képeket.''' A képek esetében nem a tökéletességre törekszünk, hanem a tökéletesség látszatára (hisz szabad szemmel úgysem látható a különbség). Az interneten használt képek esetében a 72px/inch felbontás tökéletesen elegendő, emellett pedig a képek tömöríthetőek, az interneten leggyakrabban használt jpg esetében például még a tömörítés mértékét is megadhatjuk. Ha Photoshopot használunk, a képet a File/Save for web and devices… paranccsal mentsük el, a megjelenő párbeszédablakban megadhatjuk a kívánt paramétereket. Jpg esetében addig tömörítsük, amíg ránézésre nem történik minőségromlás a képen. |
| − | # Ha szeretnénk, hogy a keresőrobotok könnyebben beindexeljék a képeinket, készítsünk xml image sitemapet. | + | # '''Ha szeretnénk, hogy a keresőrobotok könnyebben beindexeljék a képeinket, készítsünk xml image sitemapet.''' |
== Tippek == | == Tippek == | ||
| 30. sor: | 30. sor: | ||
* [http://www.sakkom.hu/szolgaltatasaink/marketing-szolgaltatasok/keresooptimalizalas.html Keresőoptimalizálás] | * [http://www.sakkom.hu/szolgaltatasaink/marketing-szolgaltatasok/keresooptimalizalas.html Keresőoptimalizálás] | ||
| + | * [http://www.sakkom.hu/blog/2013/09/10/igy-keresooptimalizaljuk-a-kepeket Így keresőoptimalizáljuk a képeket!] | ||
* [http://webdesign.tutsplus.com/articles/general/optimizing-images-for-seo/ Optimizing images for SEO] | * [http://webdesign.tutsplus.com/articles/general/optimizing-images-for-seo/ Optimizing images for SEO] | ||
| + | |||
| + | [[Kategória:Internet]] | ||
[[Kategória:Internet]] | [[Kategória:Internet]] | ||
A lap jelenlegi, 2013. szeptember 10., 10:21-kori változata
[szerkesztés] Hogyan kell képeket keresőoptimalizálni?
A honlapok SEO-zása során gyakran elfeledkezünk a képekről, pedig ha betartjuk a képek keresőoptimalizálására vonatkozó alábbi pontokat, a Google is plusz pontot ad nekünk, ráadásul újabb látogatókhoz juthatunk a honlapunkon egyébként is szereplő képek révén.
[szerkesztés] Lépések
- Használj alt tageket! A kereső általában okos, de nem annyira, hogy kitalálja, mi van a képen, hacsak nem mondod meg neki. Erre szolgál az alt tag, amit, ha CMS rendszert használsz, általában a kép beillesztésekor meg lehet adni (image description, képleírás vagy valami hasonló elnevezésű mezőbe kell írni), ha pedig a kódot böngésszük, akkor egész egyszerűen így kell kinéznie: <img src=”../images/piros-pipacs.jpg” alt=”Piros pipacs” />. Ezt követően a Google vagy bármelyik más keresőmotor ugyan továbbra sem „látja”, hogy piros pipacs van a képen, a leírásból azonban „ki tudja olvasni”, hogy a. piros, b. pipacs van a képen. Így, ha valaki piros pipacsot keres a későbbiekben, jóval nagyobb valószínűséggel dobja majd ki a képünket a kereső. Emellett az alt tag azért is fontos, mert ha nem megfelelően töltődik be a honlapon a kép, még így is információt adhatunk arról, hogy mi van a képen. Emellett pedig a látássérültek is tudják majd, mi van a képen, ha képernyőolvasót használnak az internetezéshez.
- Tedd informatívvá a fájl nevét is! Ha fájlnévnek a krikszkraksz.jpg helyett piros-pipacs.jpg (célszerű kötőjelet tenni a szavak közé), az szintén információt nyűjt a keresőrobotoknak.
- Az url-ben is lehetnek kulcsszavak! Azon túl, hogy mondjuk mi rendelkezünk a piros-viragok.hu weboldallal, amin piros virágokat lehet rendelni tőlünk, még tovább optimalizálhatjuk kulcsszavakkal az url-t akkor, ha beszédesek a linkek, így például a kép linkje a www.piros-viragok.hu/images/smallimages/piros-pipacs.jpg helyett lehet www.piros-viragok.hu/piros-vadviragok/piros-pipacs.jpg.
- A képek méretét akkorában határozzuk meg, amekkorában a honlapon szerepeltetni szeretnénk. Vagyis ne töltsünk fel egy 1200*900 pixeles képet, hogy aztán a kódban állítsuk át 400*300 pixelesre, hanem egész egyszerűen töltsünk fel egy 400*300 pixeles képet. A megfelelő méretű kép gyorsabban betöltődik, tehát felhasználóbarát, amit a keresőmotor díjazni fog.
- Tömörítsük a képeket. A képek esetében nem a tökéletességre törekszünk, hanem a tökéletesség látszatára (hisz szabad szemmel úgysem látható a különbség). Az interneten használt képek esetében a 72px/inch felbontás tökéletesen elegendő, emellett pedig a képek tömöríthetőek, az interneten leggyakrabban használt jpg esetében például még a tömörítés mértékét is megadhatjuk. Ha Photoshopot használunk, a képet a File/Save for web and devices… paranccsal mentsük el, a megjelenő párbeszédablakban megadhatjuk a kívánt paramétereket. Jpg esetében addig tömörítsük, amíg ránézésre nem történik minőségromlás a képen.
- Ha szeretnénk, hogy a keresőrobotok könnyebben beindexeljék a képeinket, készítsünk xml image sitemapet.
[szerkesztés] Tippek
- A képpel kapcsolatos esetleges formázásokat ne a html kódban (style), hanem külön css-ben tegyük meg.
[szerkesztés] Amire szükséged lehet
- jegyzetfüzet a sitemaphez
- kulcsszavak listája
- Photoshop
- html szerkesztő program
[szerkesztés] Figyelmeztetések
- Olyan nevet igyekezzünk a képnek megadni, ami ténylegesen leírja azt, hogy mi szerepel rajta.
