Kuva ilman kuvatekstiä on kuin mykkäelokuvan väliteksti: katsoja näyttää seuraavan, mutta puolet merkityksestä hän arvailee itse. Ja kun pyörität blogia WordPressillä, kuvateksti toimii kolmella rintamalla yhtä aikaa: se pitää lukijan mukana, antaa hakukoneille kontekstia ja täyttää saavutettavuusvaatimukset.

Ongelma on, että WordPressissä reitti kuvatekstin lisäämiseen riippuu siitä, missä lisäät sen: Gutenberg-lohkossa, galleriassa vai perinteisellä editorilla. Käyttöliittymä on joka paikassa erilainen, ja aloittelijat menevät helposti harhaan. Kokosimme kaikki neljä tapaa yhdeksi oppaaksi, jossa on konkreettiset vaiheet, kuvakaappaukset ja pari kikkaa, joita vakio-ohjeet eivät mainitse.

💡 Pikaopas:

• Avaa artikkeli Gutenbergissä, lisää "Kuva"-lohko, ja "Kuvateksti"-kenttä ilmestyy heti kuvan alle
• Galleriassa klikkaa lohkon sisällä kutakin kuvaa ja täytä kuvateksti jokaiselle erikseen
• Perinteisessä editorissa kuvateksti asetetaan oikeanpuoleisessa paneelissa, kun lisäät kuvan "Lisää media" -toiminnolla
• Mediakirjastoon asetettu kuvateksti tulee automaattisesti mukaan kaikkiin artikkeleihin, joissa kuvaa käytetään, mikä säästää aikaa uudelleenkäytössä

Mikä on kuvateksti ja miksi tarvitset sitä

Kuvateksti on tekstiä, joka näkyy suoraan kuvan alla sivuston etupuolella. Toisin kuin alt-teksti, jonka näkevät vain hakukoneet ja ruudunlukijat, kuvatekstin lukee jokainen kävijä. WordPress-teemastasi riippuen kuvateksti näkyy pienempänä harmaana tekstinä heti kuvan alla tai puoliläpinäkyvänä kerroksena sen päällä.

SEO:n kannalta kuvateksti on arvokas, koska hakukoneet lukevat <img>-tagin lähellä olevaa tekstiä relevanttina kontekstina. Tutkimukset osoittavat: sivut, joissa on merkityksellisiä kuvatekstejä, saavat keskimäärin enemmän liikennettä Google-kuvahausta kuin sivut, joissa on "paljaita" kuvia.

Saavutettavuuden näkökulmasta (WCAG 2.2) kuvateksti täydentää alt-tekstiä: alt kuvaa kuvan sisältöä sokealle käyttäjälle, kun taas kuvateksti selittää sen merkityksen, miksi tämä kuva on tässä ja mikä johtopäätös siitä pitäisi vetää. Yhdessä ne kattavat kaksi eri käyttöskenaariota.

Kuvatekstin lisääminen Gutenberg-editorissa

Gutenberg on lohkoeditori, josta tuli WordPressin vakio versiosta 5.0 alkaen. Jos olet kirjautunut hallintapaneeliin ja näet plus-merkin mustassa neliössä tekstin vasemmalla puolella, olet Gutenbergissä.

Vaihe vaiheelta:

• Avaa artikkeli tai sivu muokattavaksi.
• Klikkaa "+" -kuvaketta (lisää lohko) työkalupalkissa tai suoraan artikkelin rungossa.
• Valitse "Kuva"-lohko.
• Lataa kuva tietokoneeltasi tai valitse mediakirjastosta.
• Heti lisäämisen jälkeen kuvan alle ilmestyy harmaa kenttä, jossa lukee "Lisää kuvateksti". Klikkaa sitä ja kirjoita tekstisi.

Valmista. Kuvateksti tallentuu artikkelin mukana ja näkyy kuvan alla teemasi tyylien mukaisesti. Jos "Lisää kuvateksti" -kenttä ei ilmesty, tarkista, että olet klikannut itse kuvaa (sininen valintareunus ja kelluva muotoilupaneeli tulevat näkyviin).

Muotoilukikka: Gutenbergissä voit lisätä kuvatekstiin linkkejä, lihavointia ja jopa emojeita vakiotyökalupalkin kautta, joka ponnahtaa esiin, kun valitset tekstiä kuvatekstikentän sisällä.

Kuvatekstit Gutenbergin galleriassa

"Galleria"-lohko toimii eri tavalla: jokainen gallerian kuva on erillinen elementti, jolla on oma kuvatekstinsä. Niitä ei lisätä joukkona, vaan yksi kerrallaan.

• Lisää "Galleria"-lohko "+" -painikkeella.
• Valitse kuvat (voit valita useita kerralla Ctrl+klikkauksella).
• Lisäämisen jälkeen klikkaa gallerian ensimmäistä kuvaa, ja sen alle ilmestyy "Lisää kuvan kuvateksti" -kenttä.
• Kirjoita teksti, siirry seuraavaan kuvaan, toista.
• Tallenna artikkeli.

Tärkeä vivahde: gallerian sarakkeiden määrä (määritetään lohkon sivupaneelissa) vaikuttaa kuvatekstin luettavuuteen. Mobiililaitteilla galleria tiivistyy yhteen sarakkeeseen ja kuvatekstit pysyvät luettavina. Mutta työpöydällä viidellä sarakkeella kuvateksti saattaa katketa, joten pitkiä kuvatekstejä sisältävissä gallerioissa käytä 2-3 saraketta.

Kuvateksti perinteisellä editorilla

Jos sivustollasi on Classic Editor -lisäosa asennettuna tai työskentelet vanhemmalla WordPress-versiolla (alle 5.0), käyttöliittymä on erilainen.

• Klikkaa artikkelieditorissa "Lisää media" muotoilutyökalupalkin yläpuolella.
• Valitse kuva mediakirjastosta tai lataa uusi.
• Esikatselun oikealle puolelle ilmestyy "Liitteen tiedot" -paneeli. "Kuvateksti"-kenttä on kolmantena ylhäältä.
• Kirjoita teksti ja klikkaa "Lisää artikkeliin".

Galleriaa varten perinteisessä editorissa järjestys on sama: "Lisää media" → "Luo galleria" → valitse kuvat → klikkaa kutakin ja täytä kuvateksti oikeanpuoleisessa paneelissa → "Lisää galleria".

Kuvateksti mediakirjaston kautta: "kerran, kaikkialla" -menetelmä

Vähemmän tunnettu mutta hyödyllinen tekniikka: jos asetat kuvatekstin suoraan mediakirjastoon, se lisätään automaattisesti joka kerta, kun lisäät kyseisen kuvan uuteen artikkeliin.

• Siirry hallintapaneelissa kohtaan: Media → Kirjasto.
• Klikkaa haluttua kuvaa, "Liitteen tiedot" -ikkuna avautuu.
• Täytä "Kuvateksti"-kenttä.
• Tallenna (muutokset astuvat voimaan heti, ilman erillistä "Päivitä"-painiketta).

Nyt kun lisäät tämän kuvan "Lisää media" -toiminnolla missä tahansa editorissa, kuvateksti on valmiiksi täytetty. Tämä menetelmä säästää aikaa, kun samaa kuvaa (logoa, infografiikkaa, käyttöliittymän kuvakaappausta) käytetään useissa artikkeleissa. Blogissamme tämä lähestymistapa vähensi toistuvaa hallintapaneelin kuvakaappausten rutiinia: aseta kuvateksti kerran kirjastossa, eikä siihen tarvitse enää palata.

SEO ja saavutettavuus: miten kuvatekstit vaikuttavat sijoitukseen

Hakukoneet eivät "näe" kuvaa, ne lukevat sen ympärillä olevan tekstin. Kuvateksti on lähimpänä <img>-tagia HTML-merkinnässä ja siksi sillä on korotettu painoarvo Google-kuvahaussa. Käytännön johtopäätös: jos kuvateksti sisältää hakuun osuvan avainsanan, mahdollisuudet näkyä kuvablokissa hakutulosten ensimmäisellä sivulla kasvavat.

Saavutettavuuden kannalta kuvateksti kattaa skenaarion, jota alt-teksti ei kata. Alt sanoo: "kuva kissasta näppäimistöllä". Kuvateksti sanoo: "Kissa nukkumassa näppäimistöllä, yleinen syy vahingossa julkaistuihin luonnoksiin". Ensimmäinen kuvailee kuvan, toinen sen merkityksen artikkelin kontekstissa. Ruudunlukijan käyttäjä saa molemmat kerrokset ja ymmärtää paitsi mitä kuvassa on, myös miksi se on täällä.

Jos WordPress-teemasi ei näytä kuvatekstejä kuvien alla, tarkista teeman functions.php. Kuvatekstin tulostusta ohjaa caption-parametri wp_get_attachment_image()-funktiossa. Useimmat modernit teemat (GeneratePress, Astra, Kadence, Blockbase) tukevat kuvatekstejä suoraan.

Yllä oleva lyhyt video näyttää molemmat päämenetelmät (lohko ja mediakirjasto) toiminnassa. Jos omaksut tiedon paremmin visuaalisesti, kahden minuutin katselu vastaa kaikkiin käyttöliittymäkysymyksiin.

⁉️🤔 Yleisiä kysymyksiä

Miten kuvateksti eroaa alt-tekstistä?

Kuvateksti on kaikkien kävijöiden nähtävillä ja näkyy kuvan alla. Alt-teksti on HTML-attribuutti, joka näkyy vain, jos kuvan lataus epäonnistuu, ja jota ruudunlukijat lukevat. Ensimmäistä tarvitaan kontekstiin ja SEO:hon, toista saavutettavuuteen ja koodin validointiin. Ihannetapauksessa ne täydentävät toisiaan sen sijaan, että toistaisivat saman: alt kuvaa sisältöä, kuvateksti selittää merkitystä.

Voiko jo julkaistuun kuvaan lisätä kuvatekstin julkaisematta artikkelia uudelleen?

Kyllä, mediakirjaston kautta: Media → Kirjasto → klikkaa kuvaa → "Kuvateksti"-kenttä. Muutos päivittyy kaikkiin artikkeleihin, joihin tämä kuva on lisätty WordPressin vakiomekanismilla. Jos kuva on lisätty staattisena HTML:nä (Mukautettu HTML -lohkon kautta), kuvateksti ei päivity, vaan se on muokattava käsin.

Indeksoiko Google kuvatekstit erillisenä sisältönä?

Kyllä. Kuvateksti on <figcaption>-elementin sisällä (Gutenbergissä) ja on osa sivun DOM-puuta. Google pitää sitä relevanttina tekstisisältönä, erityisesti kuvahakua varten. Kuvatekstin painoarvo on kuitenkin pienempi kuin leipätekstin ja otsikoiden, joten käytä sitä tukevana, ei ensisijaisena SEO-työkaluna.

Miten poistan kuvan alta kuvatekstin, jos teema lisää sen automaattisesti?

Kaksi tapaa. Nopea: jätä vain "Kuvateksti"-kenttä tyhjäksi, WordPress ei tulosta <figcaption>-elementtiä ilman sisältöä. Globaali: lisää Lisä-CSS:ään (Ulkoasu → Mukauta → Lisätyylit) sääntö .wp-block-image figcaption { display: none; }, tämä piilottaa kaikki sivuston kuvatekstit kerralla. Jos haluat poistaa kuvatekstit vain gallerioista, vaihda valitsimeksi .wp-block-gallery figcaption.

Vaikuttaako kuvatekstin pituus sijoitukseen?

Ei suoraan, mutta epäsuorasti kyllä. Yli 2-3 riviä pitkä kuvateksti mobiilinäytöllä katkeaa tai piilotetaan (riippuu teemasta). Käyttäjä, joka ei saa tietoa nopeasti, poistuu, ja hakukoneet huomioivat käyttäytymistekijät (sivulla vietetty aika, pogo-sticking). Optimaalinen pituus on 10-25 sanaa: tarpeeksi kontekstia, vähän visuaalista kohinaa.

Pitäisikö puhtaasti koristeellisiin kuviin lisätä kuvateksti?

Ei. Jos kuva toimii jakajana, taustana tai tunnelmakuvana ilman semanttista merkitystä, kuvateksti vain häiritsee. Lisäksi koristeellisille kuville oikea käytäntö on jättää myös alt tyhjäksi (alt=""), jotta ruudunlukijat ohittavat ne. Varaa kuvatekstit kuvakaappauksille, infografiikoille, kaavioille ja valokuville, jotka kantavat tiettyä informaatiota.

Milloin kuvateksti on pakollinen ja milloin tarpeeton

Lyhyt tarkistuslista lopuksi:

Lisää aina kuvateksti:

• käyttöliittymän tai virheilmoituksen kuvakaappaus, ilman kuvatekstiä on epäselvää, mitä katsoa;
• infografiikka tilastoineen, kuvateksti tiivistää avainluvun;
• tuotekuva arvostelussa, mallin nimi ja keskeinen ominaisuus;
• kaavio tai diagrammi, tietolähde ja pääjohtopäätös.

Älä lisää kuvatekstiä:

• koristeellinen jakaja tai abstrakti osion taustakuva;
• arkistokuva "henkilö läppärin ääressä" artikkelin otsikossa, se on tunnelmallinen, ei informatiivinen;
• kuvake tai logo tekstin sisällä, konteksti on jo selvä.

Nyrkkisääntö: jos kuvan poistaminen ei riko tekstin ymmärtämistä, kuvatekstiä ei tarvita. Jos rikkoo, kuvateksti on pakollinen, ja sen tulee sisältää se avainajatus, jonka poistettu kuva olisi välittänyt.

Kuvatekstit eivät ole "harrastajien ominaisuus", vaan perustason sisältöhygieniaa. Gutenberg teki prosessista triviaalin (klikkaa kuvan alle → teksti → valmis), ja mediakirjaston avulla voit täyttää kuvatekstin kerran ja unohtaa sen. Jos pyörität blogia WordPressillä ja jätät yhä "Lisää kuvateksti" -kentän tyhjäksi, käytä 10 minuuttia ja käy läpi viimeisimmät artikkelit: pari merkityksellistä lausetta jokaisen kuvakaappauksen alla antaa enemmän kuin yksi tekstikappale lisää.

Jos teemasi ei näytä kuvatekstejä tai haluat mukauttaa niiden ulkoasua, tutustu Gutenberg-editorin oppaaseemme: pureudumme lohkojen kanssa työskentelyyn syvällisesti, mukaan lukien vakiolohkojen CSS-mukauttaminen. Ja jos törmäät umpikujaan tietyn teeman kanssa, kirjoita kommentteihin, selvitetään se.