Skip to content

Allt om WordPress, webbutveckling — och mer därtill

⚡ Så här lägger du till bildtexter i WordPress: komplett guide

⚡ Så här lägger du till bildtexter i WordPress: komplett guide

En bild utan bildtext är som en stumfilms textskylt: tittaren verkar följa med, men halva innebörden gissar de sig till på egen hand. Och när du driver en blogg på WordPress gör en bildtext nytta på tre fronter samtidigt: den håller läsaren engagerad, ger sökmotorer kontext och uppfyller tillgänglighetskraven.

Problemet är att vägen till att lägga till en bildtext i WordPress beror på var du lägger till den: i ett Gutenberg-block, i ett galleri eller via den klassiska redigeraren. Gränssnittet är olika överallt, och nybörjare missar lätt målet. Vi har samlat alla fyra metoderna i en guide, med konkreta steg, skärmdumpar och ett par knep som standardinstruktionerna inte nämner.

💡 Snabb överblick:

  • Öppna ett inlägg i Gutenberg, infoga ett "Bild"-block så visas ett "Bildtext"-fält direkt under bilden
  • För ett galleri klickar du på varje bildruta inuti blocket och fyller i bildtexten separat för varje bild
  • I den klassiska redigeraren ställer du in bildtexten i den högra panelen när du infogar via "Lägg till media"
  • En bildtext från mediebiblioteket hämtas automatiskt till alla inlägg där bilden används, vilket sparar tid vid återanvändning

Vad är en bildtext och varför du behöver den

En bildtext är text som visas direkt under bilden på frontend. Till skillnad från alt-text, som bara sökmotorer och skärmläsare ser, läser varje besökare bildtexten. Beroende på ditt WordPress-tema visas bildtexten i mindre grå text precis under bilden eller som en halvgenomskinlig överlagring ovanpå den.

För SEO är en bildtext värdefull eftersom sökmotorer skannar text i nära anslutning till <img>-taggen som relevant kontext. Forskning visar: sidor med meningsfulla bildtexter får i genomsnitt mer trafik från Google Bilder än sidor med "nakna" bilder.

Ur tillgänglighetssynpunkt (WCAG 2.2) kompletterar bildtexten alt-texten: alt beskriver bildens innehåll för en blind användare, medan bildtexten förklarar dess innebörd, varför bilden är här och vilken slutsats man ska dra av den. Tillsammans täcker de två olika användarscenarier.

Lägga till en bildtext i Gutenberg-redigeraren

Gutenberg är blockredigeraren som blev WordPress-standard från version 5.0. Om du har gått in i adminpanelen och ser ett plustecken i en svart fyrkant till vänster om texten är du i Gutenberg.

Steg för steg:

  • Öppna ett inlägg eller en sida för redigering.
  • Klicka på "+"-ikonen (lägg till block) i verktygsfältet eller direkt i inläggets brödtext.
  • Välj "Bild"-blocket.
  • Ladda upp en bild från din dator eller välj från mediebiblioteket.
  • Direkt efter infogning visas ett grått fält med texten "Lägg till bildtext" under bilden. Klicka på det och skriv in din text.
Bildtextfält under en bild i Gutenberg-redigeraren

Klart. Bildtexten sparas med inlägget och visas under bilden enligt ditt temas stilmallar. Om fältet "Lägg till bildtext" inte visas, kontrollera att du har klickat på själva bilden (en blå markeringsram och en flytande formateringspanel ska visas).

Formateringsknep: Gutenberg låter dig infoga länkar, fetstil och till och med emoji i bildtexten via det vanliga verktygsfältet som dyker upp när du markerar text inuti bildtextfältet.

Bildtexter i ett Gutenberg-galleri

"Galleri"-blocket fungerar annorlunda: varje bild inuti galleriet är ett separat element med sin egen bildtext. De läggs inte till i bulk, utan en och en.

  • Lägg till ett "Galleri"-block via "+".
  • Välj bilder (du kan välja flera samtidigt med Ctrl+klick).
  • Efter infogning klickar du på den första bildrutan i galleriet, så visas ett "Lägg till bildtext"-fält under den.
  • Skriv in texten, gå till nästa bildruta, upprepa.
  • Spara inlägget.

Viktig nyans: antalet kolumner i galleriet (konfigureras i blockets sidopanel) påverkar bildtextens läsbarhet. På mobila enheter faller galleriet ihop till en enda kolumn och bildtexterna förblir läsbara. Men på skrivbord med fem kolumner kan bildtexten bli avklippt, för gallerier med långa bildtexter använd 2-3 kolumner.

Bildtext via den klassiska redigeraren

Om din webbplats har tillägget Classic Editor installerat eller om du arbetar med en äldre WordPress-version (under 5.0) är gränssnittet annorlunda.

  • I inläggsredigeraren klickar du på "Lägg till media" ovanför formateringsverktygsfältet.
  • Välj en bild från mediebiblioteket eller ladda upp en ny.
  • Till höger om förhandsvisningen visas en panel med "Bilagedetaljer". Fältet "Bildtext" är det tredje uppifrån.
  • Skriv in texten och klicka på "Infoga i inlägg".
Bildtextfält i detaljpanelen för bilagor i WordPress klassiska redigerare

För ett galleri i den klassiska redigeraren är sekvensen densamma: "Lägg till media" → "Skapa galleri" → välj bilder → klicka på var och en och fyll i bildtexten i den högra panelen → "Infoga galleri".

Bildtext via mediebiblioteket: metoden "en gång, överallt"

En föga känd men användbar teknik: om du anger en bildtext direkt i mediebiblioteket infogas den automatiskt varje gång du lägger till den bilden i ett nytt inlägg.

  • I adminpanelen går du till: Media → Bibliotek.
  • Klicka på önskad bild, fönstret "Bilagedetaljer" öppnas.
  • Fyll i fältet "Bildtext".
  • Spara (ändringarna tillämpas omedelbart, utan en separat "Uppdatera"-knapp).

När du nu infogar den här bilden via "Lägg till media" i valfri redigerare kommer bildtexten att vara förifylld. Den här metoden sparar tid när samma bild (logotyp, infografik, gränssnittsskärmdump) används i flera inlägg. I vår blogg minskade det här tillvägagångssättet det repetitiva rutinarbetet med skärmdumpar från adminpanelen, ange bildtexten en gång i biblioteket så återvänder du aldrig till det.

SEO och tillgänglighet: hur bildtexter påverkar rankning

Sökmotorer "ser" inte en bild, de läser texten runt den. Bildtexten är närmast <img>-taggen i HTML-uppmärkningen och har därför ökad vikt för Google Bilder. Praktisk slutsats: om bildtexten innehåller ett sökord som är relevant för sökfrågan ökar chanserna att synas i bildblocket på första sidan av sökresultaten.

För tillgänglighet täcker bildtexten ett scenario som alt-texten inte gör. Alt säger: "foto på katt på tangentbord". Bildtexten säger: "Katt som sover på tangentbordet, en vanlig orsak till oavsiktliga utkastpubliceringar". Det första beskriver bilden, det andra beskriver dess innebörd i artikelns sammanhang. En skärmläsaranvändare får båda lagren och förstår inte bara vad som finns på bilden, utan varför den är här.

Om ditt WordPress-tema inte visar bildtexter under bilder, kontrollera temats functions.php. Visning av bildtext styrs av parametern caption i funktionen wp_get_attachment_image(). De flesta moderna teman (GeneratePress, Astra, Kadence, Blockbase) stöder bildtexter direkt.

Den korta videon ovan visar båda huvudmetoderna (block och mediebibliotek) i aktion. Om du tar till dig information bättre visuellt kommer två minuters tittande att besvara alla gränssnittsfrågor.

⁉️🤔 Vanliga frågor

Hur skiljer sig en bildtext från alt-text?

En bildtext är synlig för alla besökare och visas under bilden. Alt-text är ett HTML-attribut som bara visas när bilden inte kan laddas och läses av skärmläsare. Det första behövs för kontext och SEO, det andra för tillgänglighet och kodvalidering. Helst kompletterar de snarare än duplicerar varandra: alt beskriver innehåll, bildtext förklarar innebörd.

Kan man lägga till en bildtext till en redan publicerad bild utan att publicera om inlägget?

Ja, via mediebiblioteket: Media → Bibliotek → klicka på bild → "Bildtext"-fältet. Ändringen fångas upp i alla inlägg där den här bilden är infogad via standardmekanismen i WordPress. Om bilden är infogad som statisk HTML (via Anpassat HTML-block) uppdateras inte bildtexten, du måste redigera manuellt.

Indexeras bildtexter av Google som separat innehåll?

Ja. Bildtext finns inuti <figcaption> (i Gutenberg) och är en del av sidans DOM-träd. Google betraktar det som relevant textinnehåll, särskilt för bildsök. En bildtexts vikt är dock lägre än huvudtext och rubriker, använd den som ett kompletterande snarare än primärt SEO-verktyg.

Hur tar man bort en bildtext under en bild om temat lägger till den automatiskt?

Två sätt. Snabbt: lämna bara "Bildtext"-fältet tomt, WordPress matar inte ut <figcaption> utan innehåll. Globalt: lägg till i Extra CSS (Utseende → Anpassa → Extra stilmallar) regeln .wp-block-image figcaption { display: none; }, detta döljer alla bildtexter på webbplatsen på en gång. Om du bara behöver ta bort bildtexter i gallerier, ersätt selektorn med .wp-block-gallery figcaption.

Påverkar bildtextens längd rankningen?

Inte direkt, men indirekt, ja. En bildtext längre än 2-3 rader på en mobilskärm klipps av eller fälls ihop (beror på temat). En användare som inte får information snabbt lämnar, och beteendefaktorer (tid på sidan, pogo-sticking) beaktas av sökmotorer. Optimal längd är 10-25 ord: tillräckligt för kontext, lite för visuellt brus.

Bör man lägga till bildtexter på rent dekorativa bilder?

Nej. Om en bild fungerar som avdelare, bakgrund eller stämningsillustration utan semantisk tyngd distraherar en bildtext bara. För dekorativa bilder är korrekt praxis dessutom att lämna alt tomt också (alt=""), så att skärmläsare ignorerar dem. Reservera bildtexter för skärmdumpar, infografik, diagram och foton som bär specifik information.

När en bildtext är obligatorisk, och när den är onödig

En kort checklista som avslutning:

Lägg alltid till en bildtext:

  • skärmdump av gränssnitt eller felmeddelande, utan bildtext är det oklart vad man ska titta på;
  • infografik med statistik, bildtexten sammanfattar nyckeltalet;
  • produktbild i en recension, modellnamn och nyckelegenskap;
  • diagram eller graf, datakälla och huvudsaklig slutsats.

Lägg inte till en bildtext:

  • dekorativ avdelare eller abstrakt sektionsbakgrund;
  • stockfoto "person vid laptop" i inläggets rubrik, det är stämningsskapande, inte informativt;
  • ikon eller logotyp inuti text, sammanhanget är redan tydligt.

Tumregel: om man kan ta bort bilden utan att textförståelsen bryts behövs ingen bildtext. Om den gör det är en bildtext obligatorisk, och den bör innehålla den nyckelidé som den borttagna bilden skulle ha förmedlat.

Bildtexter är inte en "funktion för entusiaster", utan grundläggande innehållshygien. Gutenberg gjorde processen trivial (klicka under bild → text → klart), och mediebiblioteket låter dig fylla i en bildtext en gång och glömma den. Om du driver en blogg på WordPress och fortfarande lämnar fältet "Lägg till bildtext" tomt, lägg 10 minuter och gå igenom senaste inläggen: ett par meningsfulla fraser under varje skärmdump ger mer än ytterligare ett textstycke.

Om ditt tema inte visar bildtexter eller om du vill anpassa deras utseende, kolla in vår guide till Gutenberg-redigeraren: vi bryter ner arbete med block på djupet, inklusive CSS-anpassning av standardblock. Och om du kör fast med ett specifikt tema, skriv i kommentarerna så reder vi ut det.