Avaat WordPressin editorin kirjoittaaksesi julkaisun. Klikkaat "Lisää lohko" ja näet kymmeniä vaihtoehtoja. Niiden joukossa on "Kansi". Sivupalkissa, aivan alhaalla, piileskelee "Artikkelikuva". Molemmat liittyvät kuviin. Molemmat vaikuttavat julkaisun ulkoasuun. Mutta ne tekevät täysin eri asioita.

Sekaannus kannen ja artikkelikuvan välillä on yksi niistä asioista, joita aloittelijaoppaat eivät koskaan mainitse. Ja pitäisi. Väärä valinta rikkoo kotisivusi asettelun, sotkee some-esikatselut ja jättää artikkelin ilman visuaalista koukkua itse tekstissä. Kun taas ymmärrät eron, molemmat ominaisuudet toimivat yhtenäisenä järjestelmänä.

Alla on suoraviivainen erittely: mitä kumpikin tekee, missä se sijaitsee, miten se lisätään ja milloin kannattaa käyttää molempia.

💡 Pikakatsaus:

• Ymmärrä, mikä kansi on ja missä se näkyy
• Opi, miten artikkelikuva toimii ja missä se esiintyy
• Vertaa keskeisiä eroja taulukossa kahdeksan kriteerin mukaan
• Lisää kansi lohkoeditorilla askel askeleelta
• Aseta artikkelikuva ja täytä alt-teksti
• Määritä molemmat formaatit maksimaalista julkaisun näkyvyyttä varten

Mikä on kansi WordPressissä

Kansi on Gutenberg-editorin lohko, joka lisää leveän taustakuvan suoraan julkaisun tekstiosioon. Teknisesti tämä on Cover-lohko, joka ilmestyi lohkoeditorin mukana WordPress 5.0:ssa. Se on osa sisältöäsi; päätät itse tarkalleen, mihin kohtaan artikkelia sen sijoitat.

Kannen tärkein ominaisuus on tekstipeitto. Kirjoitat otsikon tai lauseen kuvan päälle, vaihdat tekstin ja taustan värejä ja säädät peiton läpinäkyvyyttä. Lopputulos näyttää lehden nostolta: suuri visuaalinen elementti ja viesti sen päällä. Se toimii erityisen hyvin pitkissä artikkeleissa, rytmittäen tekstiä, antaen silmälle lepohetken ja korostaen siirtymää uuteen aiheeseen.

Mitä muuta Kansi-lohko osaa:

• Kiinteä tausta. Käytössä lohkon asetusten valintakytkimellä. Kuva pysyy paikallaan vieritettäessä, kevyt parallaksiefekti ilman lisäosia.
• Video kuvan sijaan. Voit ladata videotiedoston, ja se toistuu kannen taustana.
• Liukuväripeitto. Yksivärisen peiton lisäksi käytettävissä on liukuväri, läpinäkyvästä läpinäkymättömään mihin tahansa suuntaan.
• Korkeuden säätö. Lohkon vähimmäiskorkeus voidaan asettaa pikseleinä, vh-yksikköinä tai muina yksikköinä.

Kansi näkyy vain julkaisun sisällä. Blogin etusivulla, kategoriavirroissa ja hakutuloksissa se ei näy. Se on sisäisen asettelun elementti, ei metatieto.

Mikä on artikkelikuva

Artikkelikuva on julkaisun metakenttä, joka on ollut WordPressissä versiosta 2.9 lähtien. Sitä ei lisätä artikkelin runkoon (vaikka teema saattaa näyttää sen automaattisesti julkaisun alussa). Sen tehtävä on edustaa julkaisua ulkoisesti.

Missä artikkelikuva näkyy:

• Blogin etusivu. Teema näyttää julkaisuista ruudukon, ja jokaisessa on pikkukuva; tuo pikkukuva on artikkelikuva skaalattuna vaadittuun kokoon.
• Sosiaaliset verkostot. Kun julkaisu jaetaan VK:ssa, Telegramissa, X:ssä tai Facebookissa, some hakee artikkelikuvan Open Graph -merkinnän kautta. Ilman sitä saat vain tekstilinkin, jonka käyttäjät selaavat ohi.
• Google Discover ja haku. Google saattaa näyttää pikkukuvan tuloksen vieressä, ja lähde on jälleen artikkelikuva.
• Sisäiset lohkot. "Uusimmat julkaisut" -lohko ja vastaavat hakevat kuvan täältä.

Teema hallitsee kokoja; se rekisteröi joukon pikkukuvien mittoja (thumbnail, medium, large sekä mukautettuja), ja WordPress luo kopiot kustakin koosta latauksen yhteydessä. Alkuperäinen jää mediakirjastoon.

Tärkeä vivahde: artikkelikuvan ei tarvitse näkyä julkaisun tekstissä. Voit ladata kuvan vain metakenttään, eikä se näy missään artikkelin sisällä, ainoastaan ulkoisissa esityksissä. Vastaavasti sisällössä oleva kuva ei muutu automaattisesti artikkelikuvaksi.

Erotaulukko

Miten lisätä kansi lohkoeditorissa

Avaa olemassa oleva julkaisu tai luo uusi. Klikkaa Gutenberg-editorissa "+"-painiketta (lisää lohko) siinä tekstin kohdassa, johon haluat kannen. Lohkon hakupalkkiin kirjoita "Kansi"; Kansi-lohkon kuvake tulee näkyviin. Klikkaa sitä.

Lohko lisätään sisältöön "Valitse kuva" -painikkeen kera. Klikkaa sitä, ja mediakirjasto avautuu. Valitse kuva tai raahaa uusi tietokoneeltasi. Latauksen jälkeen kuva venyy sisältöalueen levyiseksi.

Määritä nyt lohko oikean paneelin kautta:

• Peitto. Lohkopaneelissa näet "Peitto"-asetuksen, värillisen kerroksen kuvan ja tekstin välissä. Oletuksena se on harmaa 50%:n läpinäkyvyydellä (katso Kansi-lohkon dokumentaatio). Voit vaihtaa väriä, vähentää läpinäkyvyyden nollaan (peitto katoaa) tai korvata sen liukuvärillä.
• Teksti. Klikkaa suoraan lohkoa ja kirjoita otsikko tai kappale. Fonttia, kokoa ja väriä säädetään vakiotyökaluilla.
• Kiinteä tausta. "Kiinteä tausta" -valintakytkin sivupalkissa ottaa parallaksiefektin käyttöön.
• Vähimmäiskorkeus. Lohkon asetuksissa syötä arvo pikseleinä, esimerkiksi 400px työpöydälle.

Vaihtoehtoinen tapa: Kansi-lohkon ei tarvitse olla itsenäinen. Editorissa voit muuntaa minkä tahansa lohkoryhmän kanneksi valitsemalla ne ja klikkaamalla "Ryhmä" → "Kansi".

Miten asetat artikkelikuvan

Avaa julkaisueditori. Oikeasta sivupalkista etsi "Julkaisu"-välilehti (ensimmäinen kuvake ylärivillä). Vieritä alas "Artikkelikuva"-osioon. Jos et näe sitä, laajenna välilehti "Asetukset"-kohdan kautta (pystysuuntainen ellipsi oikeassa yläkulmassa → "Asetukset" → "Julkaisu").

Klikkaa "Aseta artikkelikuva". Mediakirjasto avautuu. Valitse kuva. Valinnan jälkeen täytä kaksi kenttää:

• Alt-teksti. Lyhyt mutta informatiivinen kuvaus siitä, mitä kuvassa on. Tarvitaan saavutettavuuteen (ruudunlukijat) ja SEO:hon. Älä toista julkaisun otsikkoa; kuvaile itse kuvan sisältöä.
• Kuvateksti. Näkyy kuvan alla, jos teema tukee sitä. Voidaan jättää tyhjäksi.

"Valmis"-painike tallentaa valintasi. Kuva ilmestyy "Artikkelikuva"-osioon esikatselun kera. Korvataksesi sen klikkaa esikatselua ja valitse toinen.

Tärkeää: älä sekoita alt- ja title-tekstejä. Alt on ohjelmistoja varten; title on vihjeteksti hiirellä osoitettaessa. Artikkelikuvalle alt on etusijalla, koska hakukoneet lukevat sen Open Graph -merkinnästä.

Milloin käyttää molempia

Optimaalinen skenaario blogille on käyttää molempia formaatteja samanaikaisesti, mutta eri kuvilla.

Anna artikkelikuvan olla informatiivinen: käyttöliittymän kuvakaappaus, kaavio, kuva lopputuloksesta. Tämä kuva näkyy somessa ja haussa; sen tulee myydä klikkaus. Ei kuvituskuvia tai geneerisiä "henkilö läppärillä" -kuvia.

Sijoita kansi yhteen tai kahteen kohtaan pitkän artikkelin sisällä visuaalisena erottimena loogisten osioiden välillä. Kuva voi olla tunnelmallinen tai abstrakti, ja siinä voi olla tekstipeitto, jossa lainataan artikkelia. Sen ei tarvitse kantaa informaatioarvoa; sen tehtävä on pitää lukija mukana.

Milloin kansi on tarpeeton: lyhyet, kahden tai kolmen kappaleen uutiset. Milloin artikkelikuva on tarpeeton: lähes ei koskaan. Julkaisu ilman artikkelikuvaa menettää klikattavuutensa somessa ja näyttää keskeneräiseltä blogivirrassa.

Yksi tekninen huomio: jotkin teemat näyttävät artikkelikuvan automaattisesti julkaisun alussa. Jos käytät tällaista asettelua, sijoita kansi ei aivan alkuun, vaan ensimmäisen tai toisen kappaleen jälkeen, jotta vältät kaksi suurta kuvaa peräkkäin.

Video: kansi vastaan artikkelikuva

WebTutorials-YouTube-kanava havainnollistaa visuaalisesti molempien kuvatyyppien lisäämisen aidossa WordPress-editorissa lohkon etsimisestä julkaisuun asti.

⁉️🤔 Usein kysytyt kysymykset

Voinko käyttää samaa kuvaa sekä kanteen että artikkelikuvaan?

Teknisesti kyllä. Mutta lopputulos on harvoin hyvä. Teema skaalaa artikkelikuvan tiettyihin mittasuhteisiin (usein 16:9 tai 4:3), kun taas kansi venyy koko sisältöleveydelle peiton kera. Sama kuva rajautuu yhdessä paikassa ja menettää sommittelunsa toisessa. On parempi valita kaksi eri kuvaa.

Kummalla on enemmän merkitystä SEO:lle: kannella vai artikkelikuvalla?

Artikkelikuvalla. Se menee Open Graph -merkintään, näkyy Google Discoverissa ja saattaa ilmestyä katkelman viereen haussa. Kansi ei vaikuta suoraan SEO:hon, mutta auttaa epäsuorasti laskemalla välitöntä poistumisprosenttia; hyvin suunniteltu julkaisu pitää lukijat mukana pidempään.

Miksi artikkelikuva ei näy somessa julkaisun jälkeen?

Sosiaaliset verkostot tallentavat Open Graph -tiedot välimuistiin. Jos julkaisit tekstin ensin ilman kuvaa ja lisäsit sen myöhemmin, Facebook ja X näyttävät vanhan version. Ratkaisu: aja URL Open Graph -validaattorin läpi (Facebook Sharing Debugger, Twitter Card Validator) tai yksinkertaisesti odota 24-48 tuntia.

Voinko lisätä kannen ennen Gutenbergiä luotuihin julkaisuihin?

Kyllä. Klassinen editori ei näyttänyt Kansi-lohkoa, mutta lohkoihin siirtymisen jälkeen voit avata minkä tahansa vanhan julkaisun, ja se muuntuu yhteensopivaan muotoon. Lisää kansi kuten mikä tahansa tavallinen lohko.

Miten nopeutan sivun latausta, kun käytän monta kantta?

Älä sijoita enempää kuin kaksi kantta per julkaisu. Käytä jokaiselle kuvalle modernia formaattia (WebP tai AVIF). Optimoi koot: sisältöalueen leveys ylittää harvoin 1200 px, joten 4000 px leveän kuvan lataamisessa ei ole järkeä. Ilmaiset lisäosat, kuten ShortPixel tai EWWW Image Optimizer, pakkaavat kuvat automaattisesti ladattaessa. Lisätietoja optimoinnista on oppaassamme kuviin WordPressissä.

Kansi vai artikkelikuva: mitä käyttää julkaisussasi

Lyhyt vastaus on molempia. Artikkelikuva mainostaa julkaisua ulkoisesti: etusivu, some, haku. Kansi pitää lukijan mukana sisäisesti: visuaalinen jakaja, peitto sitaatilla, parallaksitausta. Toiminnot eivät ole päällekkäisiä; ne täydentävät toisiaan.

Jos sinun on pakko valita vain yksi, valitse aina artikkelikuva. Julkaisu ilman sitä on näkymätön ulkomaailmalle. Kansi on vaihtoehto niille, jotka haluavat ottaa kaiken irti pitkästä sisällöstä.

Älä pihistele kuvissa. Kaksi merkityksellistä kuvaa per julkaisu ei ole ylellisyyttä; se on visuaalisesti pätevän WordPress-blogin vähimmäisstandardi.