„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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

[szerkesztés] Kapcsolódó források, hivatkozások

Az oldal szerzői

Kiscsillag