Alt-teksti: opas SEO:lle ja saavutettavuuteen

Katsaus

Alt-teksti (alt-attribuutti <img>-elementeissä) on lyhyt tekstikuvaus kuvasta, joka on tarkoitettu ensisijaisesti saavutettavuuteen ja vararatkaisuksi, kun kuva ei lataudu. Ruudunlukijat kertovat alt-tekstin näkörajoitteisille käyttäjille, ja hakukoneet käyttävät alt-tekstiä yhtenä tekstisignaalina kuvan aiheesta. Alt-teksti auttaa indeksointia tarjoamalla jäsenneltävää tekstiä kuville, mutta se on vain yksi monista signaaleista, jotka vaikuttavat sijoituksiin ja näkyvyyteen.

Kirjoita alt-teksti kuvaamaan sen tiedollista sisältöä sille tarkoitetulle yleisölle. Pelkkiä koristekuvia varten käytä tyhjää alt-attribuuttia (<img src="..." alt="">), jotta ruudunlukijat ohittavat ne. Monimutkaisille visualisoinneille — kaaviot, infografiikat, diagrammit — tarjoa tekstiyhteenveto lähellä tai käytä ARIA/HTML-tekniikoita pidemmän kuvauksen antamiseksi.

Vaiheittain

1) Määritä kuvan rooli: selvitä, onko kuva informatiivinen, toiminnallinen (esim. painike) vai koristeellinen. Informatiiviset ja toiminnalliset kuvat tarvitsevat kuvailevan alt-tekstin; koristekuvissa käytä tyhjää alt-attribuuttia.

2) Kuvaa olennainen sisältö tiiviisti: kirjoita, mitä käyttäjän täytyy kuvasta tietää. Pidä alt-teksti ytimekkäänä — pyri kertomaan pääajatus yhdellä lauseella tai fraasilla. Esimerkki tavallisesta informatiivisesta altista: <img src="/photos/harbor.jpg" alt="Punainen kalastusvene kiinnitetty kalliopoukamaan auringonnousun aikaan">.

3) Vältä avainsanojen täyttämistä ja turhaa toistoa. Älä alusta ilmaisulla “image of” tai “picture of” — ruudunlukijat ilmoittavat kuvan roolin. Tee tekstistä hyödyllinen ihmislukijalle eikä hakukoneen hakurobotti.

4) Käsittele toiminnalliset kuvat ja ohjaimet: jos kuva on linkki tai painike, kuvaa, mitä toiminto suorittaa. Esimerkki: <img src="/icons/download.svg" alt="Lataa tuotteen tietolomake">. Jos ohjaimella on näkyvä teksti, alt:n tulisi vastata sen tarkoitusta tai olla tyhjä jos teksti jo välittää toiminnon.

5) Tarjoa pidempiä kuvauksia monimutkaisille kuville: käytä viereistä kuvatekstiä, linkitettyä yksityiskohtaista kuvausta, aria-describedby-attribuuttia tai näkyvää HTML-tekstiä kaavion tai infografiikan laajentamiseen. Painetun vastaavat tiedot (taulukot, akselien selitteet) kannattaa sisällyttää sivun tekstiin.

6) Käytä yhtenäisiä toimituksellisia sääntöjä: laadi lyhyt tyyliohje kirjoittajille (pituustavoitteet, lyhenteet, kielioppi) ja ota se käyttöön malleissa tai CMS-kentissä, jotta alt-teksti tallentuu luotettavasti mittakaavassa.

HTML-esimerkit

Kuvaileva kuva: <img src="https://example.com/park.jpg" alt="Lapsi lennättää punaista leijaa kaupunkipuistossa">. Koristekuva: <img src="/decorative-divider.png" alt="">. Toiminnallinen kuva linkkinä: <a href="/download"><img src="/icons/pdf.svg" alt="Lataa raportti PDF"></a>.

Alt-tekstin tarkistus: tekninen tarkistuslista

**Presence of alt attributes** — mistä tarkistaa: view-source, Chrome DevTools Elements tai curl (hae koko HTML curlilla ilman -I) — läpäisee, kun jokaisella merkityksellisellä <img>-elementillä on alt-attribuutti ja koristekuvat käyttävät alt="".

**Rendered DOM for JS-inserted images** — mistä tarkistaa: Chrome DevTools Elements (tarkista lopullinen DOM) — läpäisee, kun käyttäjille näkyvissä olevissa kuvissa on asianmukainen alt-teksti renderöidyssä DOMissa.

**Accessibility audit** — mistä tarkistaa: Lighthouse Chrome DevToolsissa tai automatisoitu saavutettavuustyökalu — läpäisee, kun auditointi ei rapoortoi puuttuvia alt-tekstejä informatiivisille kuville ja merkitsee vain tarkoitetut koristekuvat.

**Human-readability check** — mistä tarkistaa: otantatarkastus sisältötoimittajalta tai ruudunlukijalla (NVDA, VoiceOver) — läpäisee, kun alt-teksti välittää saman hyödyllisen tiedon kuin visuaalinen sisältö avustaville käyttäjille.

**Indexability of page** — mistä tarkistaa: omille sivuillesi käytä Google Search Console URL Inspection; kolmansien osapuolten sivuilla käytä site:-operaattoria suuntaa-antavana — läpäistään kun sivu on indeksoitavissa (ei estetty robots.txt tai noindex) ja URL Inspection näyttää sivun olevan Googlen tiedossa. Huom: site:-operaattori on vain suuntaa-antava; URL Inspection on auktoriteettinen omille sivuillesi.

Käytännön työkaluvinkit

Käytä curlia hakemaan sivun HTML tiettynä user agenttina: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Älä käytä -I jos tarvitset body-osan. Avaa tallennettu tiedosto tekstieditorissa tai aja DOM-parseri löytääksesi <img>-tagit ja niiden alt-attribuutit.

Suorita Lighthouse (Chrome DevTools → Lighthouse) löytääksesi yleisiä saavutettavuusongelmia, ja testaa ruudunlukijalla (NVDA Windowsilla, VoiceOver macOS:llä) varmistaaksesi käyttökokemuksen.

Jos käytät structured dataa, joka viittaa kuviin (esim. Product- tai Recipe-schema), validoi merkintä Rich Results Testillä tai Schema Markup Validatorilla varmistaaksesi, että JSON-LD:ssä viitatut kuvat ovat läsnä ja saavutettavissa.

Yleiset ongelmat

Puuttuva alt-teksti informatiivisista kuvista. Tämä heikentää saavutettavuutta ja jättää sokeat käyttäjät ilman sivun visuaalista tietoa.

Avainsanojen ylitäyttäminen: kohdekansojen tai brändin toistaminen alt-attribuuteissa epäluonnollisesti. Tämä antaa huonon käyttökokemuksen ja saatetaan jättää hakukoneissa huomiotta.

Tiedostonimien tai geneeristen ilmaisujen (esim. "image1.jpg", "picture") käyttäminen alt-tekstinä, mikä ei ole merkityksellistä avustaville teknologioille tai indeksoinnille.

Luottaminen title-attribuuttiin alt:n sijaan tärkeässä tiedossa; monet ruudunlukijat eivät esitä titlea johdonmukaisesti.

Uskomus, että pelkkä alt-teksti määrää kuvan sijoituksen. Alt-teksti auttaa hakukoneita ymmärtämään kuvia, mutta indeksointi ja näkyvyys riippuvat sivun kontekstista, structured datasta, indeksoitavuudesta ja muista signaaleista.

Jos kuvat lisätään asiakaspuolella JavaScript, tekijät unohtavat joskus lisätä alt-attribuutit renderöityyn DOMiin; tarkista aina lopullinen DOM, älä pelkkä palvelin-HTML.

Lue Technical SEO -opas

Usein kysytyt kysymykset

Q: Kuinka pitkä alt-tekstin pitäisi olla? A: Tavoittele ytimekkäitä kuvauksia, jotka kommunikoivat kuvan tarkoituksen. Yksi lyhyt lause tai fraasi riittää yleensä; monimutkaisille visualisoinneille tarjoa pidempi saavutettava kuvaus muualla sivulla.

Q: Vaikuttaako alt-teksti SEO-sijoituksiin? A: Alt-teksti antaa tekstisignaalin, joka voi auttaa indeksointia ja kuvahaun relevanssia, mutta se ei yksin määrää sijoitusta. Sijoitukset riippuvat monesta signaalista, kuten sivun relevanssista, structured datasta, indeksoitavuudesta ja sisällön laadusta.

Q: Pitäisikö koristekuvilla olla alt-teksti? A: Ei. Koristekuvissa tulisi käyttää tyhjää alt-attribuuttia (alt=""), jotta ne jäävät ruudunlukijoiden huomioimatta eivätkä lisää kohinaa saavutettavuuskokemukseen.

Q: Voivatko automaattiset työkalut generoida hyväksyttävää alt-tekstiä? A: CMS-järjestelmien ehdotukset tai kuvantunnistus voivat auttaa, mutta tarkista ja muokkaa koneella luotu alt-teksti aina tarkkuuden, selkeyden ja yksityisyyskysymysten osalta ennen julkaisua.

Q: Entä CSS-taustakuvat? A: CSS-taustakuvat eivät ole <img>-elementtejä eivätkä niillä ole alt-attribuuttia; kaikki informatiivinen sisältö taustakuvassa tulee esittää HTML:ssä, jotta se on saavutettavissa.

Technical SEO on osa orgaanista kasvua. Topical authorityn rakentaminen vaatii laadukkaita backlinks ja indeksoitavaa, saavutettavaa sisältöä — harkitse tarkastettuja marketplaces ja kumppanuuksia, jotka priorisoivat julkaisijan indeksoitavuuden ja toimituksellisen kontekstin.Rakenna auktoriteettia laadukkailla backlinks-linkeillä