SEO & Discoverability

Hogyan írjunk olyan képfájlneveket, amelyek segítik a SEO-t és az akadálymentességet

Gyakorlati elnevezési konvenció webes képekhez: leíró, stabil, ember számára olvasható, és nincs telezsúfolva kulcsszavakkal.

The Wux Webtools Team The Wux Webtools Team 12 min olvasás AI-támogatott, ember által ellenőrzött
Organized image thumbnails with file labels, an accessibility symbol, and a search magnifier on a desk.
Tartalomjegyzék
  1. A képfájlnevek számítanak, de nem annyira, mint sokan állítják
  2. A rövid szabály
  3. Mit tesz egy jó képfájlnév a SEO-ért
  4. Mit tesz egy jó képfájlnév az akadálymentességért
  5. Gyakorlati elnevezési konvenció
  6. Használjon kötőjeleket, kisbetűket és egyszerű szavakat
  7. Legyen rövid, de ne homályos
  8. Ne tömje tele kulcsszavakkal a képfájlneveket
  9. Igazítsa a fájlnevet a tényleges képhez
  10. Válassza külön a fájlneveket és az alt szöveget
  11. Képek elnevezése különböző webhelytípusokhoz
  12. Ecommerce
  13. Blogok és szerkesztőségi oldalak
  14. SaaS és dokumentáció
  15. Helyi vállalkozások
  16. Mi a helyzet a képméretekkel és a verziókkal?
  17. Gyors publikálás előtti ellenőrzőlista
  18. A csendes előny: jobb csapatok

A képfájlnevek számítanak, de nem annyira, mint sokan állítják

A képfájlnevek azok közé az apró webes részletek közé tartoznak, amelyek körül túl sok a magabiztos kijelentés. Egyes csapatok teljesen figyelmen kívül hagyják őket, és feltöltenek egy IMG_7421.jpg nevű fájlt. Mások minden termékfotóból miniatűr kulcsszóesszét készítenek.

A hasznos középút egyszerű: olyan fájlneveket írjon, amelyek világosan leírják a képet, segítenek az embereknek az assetek kezelésében, és egy kevés extra kontextust adnak a keresőmotoroknak. Ne várja, hogy a fájlnevek megmentsék a gyenge tartalmat, a hiányzó alt szöveget, a lassú képeket vagy a zavaros oldalt.

A Google kifejezetten rövid, leíró fájlnevek használatát javasolja a képekhez. Ez jó tanács. Ugyanakkor korlátozott tanács is. A fájlnév csak egy kontextuális jel a sok közül: a környező szöveg, az oldal címe, a strukturált adatok, a képaláírások, az alt szöveg, a linkek, a képminőség, valamint az, hogy a kép valóban hasznos-e az oldalon.

Az akadálymentesség hasonló. A jó fájlnév nem helyettesíti az alt szöveget. De csökkentheti a kárt, ha valami rosszul működik, és megkönnyíti a szerkesztők, fejlesztők és azoknak a felhasználóknak az életét, akik letöltik, mentik vagy megosztják a fájlt.

A rövid szabály

Olyan fájlnevet használjon, amely megválaszolja ezt a kérdést:

Ha valaki csak a fájlnevet látná, nagyjából tudná, mit tartalmaz a kép?

Jó:

  • red-running-shoes-side-view.jpg
  • checkout-error-message-mobile.png
  • oak-dining-table-120cm-walnut.jpg
  • team-planning-workshop-whiteboard.webp

Gyenge:

  • IMG_7421.jpg
  • final-final-v3-new.jpg
  • best-cheap-running-shoes-buy-online-discount-sale.jpg
  • screenshot.png

A cél nem a költészet. A cél a hasznos konkrétság.

Mit tesz egy jó képfájlnév a SEO-ért

A jó fájlnév segít a keresőmotoroknak megérteni a képet, különösen a képkeresési környezetekben. Megerősítheti az oldal témáját és a vizuális tartalom tárgyát.

De gyenge jelzés az alapokhoz képest:

  • A kép releváns oldalon jelenik meg.
  • A környező szöveg magyarázza vagy támogatja a képet.
  • A képnek szükség esetén megfelelő alt szövege van.
  • A kép feltérképezhető és indexelhető.
  • A fájl nem szükségtelenül nagy.
  • Az oldal megbízhatóan betöltődik.

Ha organikus kereséshez javít képeket, kezdje az oldal relevanciájával és hasznosságával. Ezután tegye rendbe a fájlneveket. Utána vizsgálja meg a tömörítést, a formátumokat, a méreteket, a lazy loadingot és ahol indokolt, a strukturált adatokat. Az image formats in 2026 útmutatónk hasznos kísérő lehet, ha az elnevezések rendbetétele szélesebb képteljesítmény-javítássá nő.

Mit tesz egy jó képfájlnév az akadálymentességért

Szigorúan véve a fájlnevek nem a képek fő akadálymentességi mechanizmusai. Az alt szöveg az.

Ha egy kép információt közvetít, az alt attribútumnak kell biztosítania a szöveges alternatívát. Ha a kép dekoratív, az alt attribútum általában legyen üres: alt="". Ha a kép link vagy gomb, az alternatív szövegnek a műveletet vagy a célhelyet kell leírnia, nem pusztán a pixeleket.

Ezt részletesen tárgyaltuk a pragmatic guide to image alt text in 2026 című útmutatónkban, és érdemes az alt szöveget külön szerkesztői feladatként kezelni.

Akkor miért törődjünk egyáltalán a fájlnevekkel az akadálymentesség szempontjából?

Mert a fájlnevek gyakran a felhasználói élmény peremterületein jelennek meg:

  • Egyes kisegítő technológia/böngésző kombinációk megjeleníthetnek egy fájlnevet, ha hiányzik az alt szöveg.
  • A letöltött képeknek a weboldalon kívül is érthető nevekre van szükségük.
  • A CMS médiatárai könnyebben auditálhatók, ha a nevek leíróak.
  • A szerkesztők kisebb eséllyel csatolják a rossz képet, ha a fájlok világosan vannak elnevezve.
  • A törött képek és a hibakeresési nézetek könnyebben értelmezhetők.

Egy fájlnév nem tesz akadálymentessé egy akadálymentesnek nem tekinthető képet. De egy rossz fájlnév zavarosabbá teheti a hibákat.

Gyakorlati elnevezési konvenció

Használja ezt az alapértelmezett mintát:

subject-detail-context.ext

Példák:

  • espresso-machine-steam-wand-closeup.jpg
  • pricing-table-enterprise-plan-desktop.png
  • garden-chair-green-metal-front-view.webp
  • password-reset-email-example.png

Termékeknél egy kissé strukturáltabb változat gyakran jobban működik:

brand-product-model-color-view.ext

Példák:

  • acme-trail-jacket-blue-front.jpg
  • northline-desk-lamp-brass-side.webp
  • terra-ceramic-mug-white-top-view.jpg

Szerkesztőségi képeknél:

topic-specific-scene.ext

Példák:

  • remote-team-video-call-laptop.jpg
  • city-bike-lane-rain-evening.jpg
  • developer-debugging-http-headers-terminal.png

UI-képernyőképeknél:

feature-state-device.ext

Példák:

  • checkout-validation-error-mobile.png
  • account-settings-two-factor-enabled-desktop.png
  • analytics-dashboard-empty-state-tablet.png

Ez nem merev taxonómiáról szól. Hanem a kétértelműség eltávolításáról.

Használjon kötőjeleket, kisbetűket és egyszerű szavakat

Nyilvános webes asseteknél részesítse előnyben ezeket:

  • Kisbetűk
  • Kötőjelek a szavak között
  • Szóközök nélkül
  • Aláhúzások nélkül
  • Kötőjelen kívül írásjelek nélkül
  • Speciális karakterek nélkül, hacsak a rendszere nem igényli őket

Jó:

blue-cotton-shirt-front.jpg

Kerülendő:

Blue Cotton Shirt (Front).jpg

blue_cotton_shirt_front.jpg

bluecottonshirtfront.jpg

A kötőjelek könnyebben olvashatók, könnyebben másolhatók, és az URL-ekben széles körben szóelválasztóként értelmezik őket. A kisbetűs írásmód emellett elkerüli a bosszantó kis- és nagybetűérzékenységi hibákat a helyi fejlesztés, a Linux szerverek, a CDNs és az objektumtárolók között.

Legyen rövid, de ne homályos

A fájlnév legyen elég hosszú ahhoz, hogy leírja a képet, de elég rövid ahhoz, hogy olvasható maradjon.

Hasznos tartomány általában 3–8 szó a kiterjesztés előtt.

Túl homályos:

shoes.jpg

Jobb:

red-running-shoes-side-view.jpg

Túl sok:

best-lightweight-red-running-shoes-for-marathon-training-side-view-discount.jpg

Jobb:

red-marathon-running-shoes-side-view.jpg

Ha a kifejezés úgy hangzik, mint egy kétségbeesett marketinges által írt keresőkifejezés, valószínűleg túl hosszú.

Ne tömje tele kulcsszavakkal a képfájlneveket

A kulcsszóhalmozás a fájlnevekben általában annak a jele, hogy az oldal nem végzi jól a dolgát.

Rossz:

best-seo-agency-seo-services-seo-consultant-seo-company.jpg

Ez nem hasznos a felhasználóknak. Nem hasznos a szerkesztőknek. Nem komoly akadálymentességi gyakorlat. Ráadásul gyengébb minőségűnek láttatja a webhelyét.

Használja annak a dolognak a természetes nevét, amely a képen látható. Ha egy kulcsszó azért illik, mert pontosan leírja a képet, használja. Ha nem, hagyja ki.

Például ha a kép egy fekete bőrkanapó fotója, a black-leather-sofa-three-seat.jpg rendben van. A best-modern-luxury-living-room-furniture-online.jpg nem fájlnév; segélykiáltás.

Igazítsa a fájlnevet a tényleges képhez

Ez magától értetődőnek hangzik, de a képtárak idővel elcsúsznak. Egy homepage-hero-new.jpg nevű fájl végül más terméket, más személyt vagy teljesen más kampányt mutathat.

Ez két problémát okoz.

Először is a keresőmotorok és a felhasználók ellentmondásos jelzéseket kapnak. Másodszor a csapatok elveszítik a médiatárba vetett bizalmukat.

Ha a kép jelentése megváltozik, publikálás előtt nevezze át. Ha a CMS vagy a CDN megnehezíti az átnevezést, fontolja meg stabil belső assetazonosítók használatát, miközben ahol lehetséges, továbbra is leíró nyilvános fájlneveket generál.

Egy jó belső munkafolyamat lehet:

  1. Töltse fel az eredeti assetet.
  2. Távolítsa el a szükségtelen metaadatokat, ha az adatvédelem számít.
  3. Nevezze át a webhelyen használt származtatott fájlt.
  4. Exportálja a megfelelő méretben és formátumban.
  5. Adjon hozzá alt szöveget és képaláírásokat a CMS-ben.

Ha a fotók felhasználóktól, munkatársaktól vagy terepi csapatoktól érkeznek, ne feledje, hogy a fájlnevek csak az adatvédelmi felület egyik részét jelentik. Az EXIF adatok időbélyegeket, kamerarészleteket és helyinformációkat tartalmazhatnak. Érzékeny képek publikálása előtt tekintse meg útmutatónkat arról, how to strip EXIF metadata before sharing photos online.

Válassza külön a fájlneveket és az alt szöveget

Gyakori hiba ugyanazt a kifejezést használni a fájlnévhez és az alt szöveghez.

Néha ez elfogadható. Gyakran viszont lusta megoldás.

Fájlnév:

red-running-shoes-side-view.jpg

Jó alt szöveg egy termékoldalon:

Red running shoe shown from the side, with a white foam sole and black laces.

Jó alt szöveg egy színválasztó bélyegképen:

Red

Jó alt szöveg, ha a kép dekoratív:

alt=""

A fájlnév az assetet azonosítja. Az alt szöveg a felhasználót szolgálja az adott kontextusban. Ezek rokon feladatok, de nem azonosak.

Képek elnevezése különböző webhelytípusokhoz

Ecommerce

Tartalmazza a terméktípust, a fontos változatot és a nézetet.

Példák:

  • linen-shirt-white-front.jpg
  • linen-shirt-white-back.jpg
  • linen-shirt-white-collar-detail.jpg

Kerülje az árak, promóciók vagy ideiglenes kampánynyelvezet hozzáadását. Ezek túl gyakran változnak.

Blogok és szerkesztőségi oldalak

A jelenetet vagy a koncepciót írja le, ne a cikk címét.

Jó:

designer-reviewing-mobile-layout.jpg

Kevésbé hasznos:

ultimate-guide-to-mobile-ux.jpg

A kép újra felhasználható, megvágható vagy szindikálható. Egy jelenetalapú név jobban öregszik.

SaaS és dokumentáció

A képernyőképeket funkció, állapot és platform szerint nevezze el.

Példák:

  • billing-settings-payment-method-empty-state.png
  • project-dashboard-filter-menu-open.png
  • api-token-created-confirmation-modal.png

Ez sokkal kevésbé fájdalmassá teszi a dokumentáció frissítését.

Helyi vállalkozások

Használja a szolgáltatást, tárgyat vagy helyszínt, ha az valóban látható és releváns.

Példák:

  • bakery-window-display-sourdough-loaves.jpg
  • dental-clinic-reception-area-berlin.jpg
  • plumber-repairing-kitchen-sink.jpg

Ne adjon városneveket minden fájlhoz, ha a kép nem támasztja alá ezt. Egy csavarkulcs fotója nem lesz érdemben wrench-london.jpg.

Mi a helyzet a képméretekkel és a verziókkal?

Kerülje a méretek beírását a fő leíró névbe, hacsak a rendszere nem igényli.

Jobb assetcsalád:

  • red-running-shoes-side-view.jpg
  • red-running-shoes-side-view-800w.jpg
  • red-running-shoes-side-view-1600w.jpg

Ha a buildrendszere automatikusan generál reszponzív változatokat, hagyja, hogy ő fűzze hozzá a szélességeket vagy hasheket. Ne tartson karban kézzel több tucat fájlnevet, hacsak nem élvezi a jövőbeli régészetet.

A tartalomhashek rendben vannak a gyorsítótárazáshoz:

red-running-shoes-side-view.a8f31c.webp

A leíró rész továbbra is ott van. A hash a gépet szolgálja.

Gyors publikálás előtti ellenőrzőlista

Kép publikálása előtt tegye fel ezeket a kérdéseket:

  • A fájlnév egyszerű nyelven írja le a képet?
  • Kisbetűs és kötőjelekkel elválasztott?
  • Mentes a kulcsszóhalmozástól?
  • Kerüli az olyan ideiglenes szavakat, mint a new, final vagy v2?
  • Az alt szöveg értelmes az oldal kontextusában?
  • A fájlformátum és a méret megfelelő?
  • A szükséges esetekben eltávolították az érzékeny metaadatokat?

Ha ezekre igennel tud válaszolni, a fájlnév valószínűleg elég jó. Ne töltsön 20 percet egy dekoratív elválasztó elnevezésével. De szánjon 20 másodpercet arra, hogy a DSC0038.jpg ne váljon állandó nyilvános URL-lé.

<!-- tool-cta:start -->

💡 Próbáld ki ezt: Normalizáld a fájlneveket tömegesen lowercase-kebab-case formátumra a Case Converter segítségével, hogy a képeid nevei egységesek maradjanak a projekt során.

<!-- tool-cta:end -->

A csendes előny: jobb csapatok

A képfájlnevek SEO-értéke szerény. Az operatív értékük nagyobb.

A jó fájlnevek kereshetővé teszik a médiatárakat. Csökkentik a duplikált feltöltéseket. Segítenek a tervezőknek, fejlesztőknek, marketingeseknek és supportcsapatoknak ugyanarról az assetről beszélni anélkül, hogy hat előnézetet kellene megnyitniuk. Gyorsabbá teszik az auditokat.

Ez a valódi oka a képelnevezések szabványosításának. A keresőmotorok profitálnak az egyértelműségből, de az emberek is. És általában az embereknél törik meg először a munka.

Gyakran ismételt kérdések

Valóban hatással vannak a képfájlnevek a SEO-ra?
Igen, de mérsékelten. A Google leíró fájlneveket javasol, mert segítenek kontextust adni, különösen a képkeresésben. Nem helyettesítik a releváns tartalmat, a hasznos alt szöveget, a feltérképezhető oldalakat és a jó képteljesítményt.
Át kell neveznem a régi képeket a webhelyemen?
Nevezze át a nagy értékű képeket, ha a jelenlegi nevük homályos vagy félrevezető, de az URL-eket kezelje körültekintően. Ha a kép URL-je megváltozik, frissítse a hivatkozásokat, és fontolja meg az átirányításokat ott, ahol a régi kép-URL-ek forgalmat vagy visszahivatkozásokat kapnak.
Jobbak a kötőjelek az aláhúzásoknál a képfájlnevekben?
A kötőjelek biztonságosabb konvenciót jelentenek a nyilvános webes fájlneveknél. Olvashatók, URL-barátok, és széles körben szóelválasztóként kezelik őket. A kisbetűs, kötőjeles fájlnevek a platformok közötti fájlútvonal-problémákat is csökkentik.
Használhatom ugyanazt a szöveget fájlnévként és alt szövegként?
Néha igen, de ne legyen automatikus. A fájlnév az assetet azonosítja; az alt szöveg a kép célját írja le az oldal kontextusában. Egy termékfájlnév lehet általánosabb, míg az alt szövegnek részletekre, egy műveletre vagy dekoratív kép esetén üres értékre lehet szüksége.
Tartalmazzanak a fájlnevek kulcsszavakat?
Csak akkor, ha a kulcsszó természetesen leírja a képet. A `black-leather-sofa-front.jpg` nevű fájl hasznos. A `best-cheap-luxury-sofa-buy-online.jpg` nevű fájl kulcsszóhalmozás, és kerülendő.

Források és további olvasmányok

  1. Google Search Central: Image SEO best practices
  2. W3C Web Accessibility Initiative: Alt Decision Tree
  3. MDN Web Docs: The Image Embed element
  4. WebAIM: Alternative Text
A szerzőről
The Wux Webtools Team

Utolsó frissítés:

Tovább olvasom