Imagebox: Regler och exempel för bildinfobox

En imagebox parar ihop en bild med en fokuserad förklaring så att läsare bearbetar dem som en enda redaktionell enhet. Bilden kan bära bevis som texten tolkar, eller så kan den illustrera en idé som texten förklarar fullständigt. Författaren måste deklarera vilket jobb den utför eftersom det valet styr kopian, alternativtexten, bildtexten, strukturerad data och huruvida elementet fortfarande fungerar utan syn.

Detta är varianten med innehållsbild: det synliga datumet och statusen är bevis, medan den intilliggande texten tolkar deras relation. Om bilden endast vore en dekorativ kalender skulle texten behöva framföra hela färskhetspunkten självständigt och bilden skulle använda tom alternativtext.

Varför detta element är viktigt

Läsare bearbetar inte automatiskt en bild och en avlägsen paragraf som en enda idé. När en bild visas utan en explicit textuell relation måste de själva avgöra vad de ska granska, varför det är viktigt och om det stöder det omgivande påståendet. En imagebox minskar den osäkerheten genom att placera en visuell bild och en förklaring inom en tydlig avgränsning. Rubriken anger poängen; bilden visar den; texten berättar för läsaren vad den ska lägga märke till eller förstå.

Den psykologiska fördelen är gemensam uppmärksamhet: designen riktar uppmärksamheten mot ett visuellt objekt medan kopian etablerar dess relevans. En diagrambeskärning kan antyda en ökning, volatilitet eller en datumgräns; den intilliggande förklaringen väljer den relevanta tolkningen.

Maskinextraherbarhet är förmågan hos mjukvara att isolera en innehållsenhet utan att förlora relationen mellan dess delar. En semantisk imagebox exponerar en bild, tillgänglig beskrivning, bildtext, rubrik, förklaring och deklarerad bildroll i en behållare. Text måste fortfarande innehålla påståendet: datorseende får inte vara den enda vägen till en siffra, instruktion, begränsning eller slutsats.

Skrivreglerna för element styr den gemensamma direktivsyntaxen, kroppsmappning, sökvägar och prioritet. Denna sida har företräde där den definierar den imagebox-specifika distinktionen mellan innehåll och illustration, dess tillåtna fält och dess gräns på en bild.

När du ska använda det

Använd en imagebox när en bild och en förklaring har en direkt, nödvändig relation och ingen av dem förtjänar ett helt eget avsnitt. Starka användningsområden inkluderar en fokuserad gränssnittsbeskärning i kombination med en tolkning, en produktdetalj i kombination med en förklaring av varför den påverkar passform, ett processfoto i kombination med en kvalitetskontrollregel, eller en enkel konceptuell illustration i kombination med en kortfattad förklaring.

Avgör först om bilden är innehåll eller illustration:

• Innehållsbild: läsaren måste granska bilden för att verifiera ett påstående, identifiera en funktion, jämföra ett tillstånd eller förstå ett visuellt faktum. Texten namnger den relevanta detaljen och förklarar dess betydelse. Alt-text är meningsfull och en bildtext finns normalt.
• Illustrativ bild: bilden förstärker ton, minne eller förståelse, men den intilliggande texten tillhandahåller hela påståendet. Att ta bort bilden gör blocket mindre engagerande, inte mindre korrekt. Alt-text är tom om inte illustrationen i sig förmedlar ytterligare information.

Använd borttagningstestet. Om ett misslyckat bildladdningsförsök tar bort bevis eller gör förklaringen ofullständig, deklarera role=content. Om det endast tar bort visuell förstärkning, deklarera role=illustration.

Närliggande fall är vanliga:

• Använd en fristående bild när bilden behöver hela läsbredden och texten endast identifierar den.
• Använd en kommenterad skärmbild när läsare måste lokalisera flera gränssnittsområden.
• Använd en tabell för upprepade jämförelsekriterier, ett diagram för ett system eller en sekvens, och ett galleri för jämbördiga bilder.
• Använd vanlig prosa när bilden endast upprepar en mening.

Använd inte en imagebox för att få ett svagt avsnitt att se designat ut. Ett lagerfoto av personer som pekar på en bärbar dator förklarar inte “samarbete”, och en generisk robot gör inte ett påstående om artificiell intelligens mer konkret. Om bilden skulle kunna bytas ut mot en orelaterad bild utan att kopian ändras har ihopkopplingen inget redaktionellt kontrakt.

Var du ska placera den

Placera imageboxen omedelbart efter stycket som introducerar påståendet eller konceptet den utvecklar. I en procedur, placera den efter åtgärden och före dess framgångskontroll, så att visuella bevis inte avbryter instruktionen.

Den kan placeras direkt under en H2 endast när dess interna rubrik är mer specifik. Håll en citation eller kvalifikation intill påståendet den begränsar; sätt aldrig in imageboxen mellan dem.

Den får inte placeras direkt intill en annan imagebox, ett galleri, en helbreddsfigur, video, tabell eller tvåkolumns-infobox. Sätt in tolkning mellan visuella behållare, kombinera sanna jämbördiga element, eller skapa separata underavsnitt.

Placera den inte inuti en punkt, ett steg, en utropningsruta, tabellcell, ett accordion eller ett klickbart kort. Lägg inte en uppmaning till handling inuti blocket eller mellan dess bild och förklaring.

På datorn kan bilden visas före eller efter texten. På mobil, bevara en förutsägbar käll-, tangentbords- och skärmläsarordning; förlita dig inte på motstridig CSS-omordning.

Anatomi

Anatomin definieras av mening snarare än färg, skugga eller kolumnbredd.

1. Behållare: Grupperar exakt en figur och en förklaring som en enda redaktionell enhet.
2. Bild: Visar bevis eller tillhandahåller illustration enligt den deklarerade rollen.
3. Alternativtext: Förmedlar det relevanta visuella syftet för en innehållsbild; den är tom för en redundant dekorativ illustration.
4. Bildtext: Identifierar vad en innehållsbild visar och tillhandahåller nödvändig kontext som tillstånd, datum eller skala.
5. Rubrik: Anger insikten eller ämnet, inte filnamnet eller en generisk etikett som “Exempel.”
6. Förklaring: Berättar för läsaren vad den ska lägga märke till, varför det är viktigt och eventuella begränsningar av tolkningen.
7. Kreditering: Namnger skaparen eller källan när rättigheter, proveniens eller redaktionell policy kräver det.
8. Läsordning: Bevarar ett sammanhängande figur-och-text-förhållande när två kolumner blir en.

Förklaringen måste hänvisa till ämnet direkt snarare än att använda koordinater som “bilden till vänster.” Positionen ändras mellan brytpunkter, översättningar och syndikering. “Den inaktuella statusen och uppdateringsdatumet identifierar granskningsmålet” förblir sant överallt.

Designexempel

Designsystemet stöder fyra roll-och-position-kombinationer. Ingen ändrar innehållskraven.

Innehållsbild, bild först

Använd denna standard när läsare bör granska bevis före tolkning.

Innehållsbild, bild sist

Använd denna när förklaringen måste etablera en lins innan beviset.

Illustration, bild först

Använd denna när en konceptspecific visuell bild förbättrar igenkänning medan texten bär hela innebörden.

Illustration, bild sist

Använd denna när förklaringen är primär och illustrationen fungerar som ett visuellt avslut.

Beteende vid smal visningsyta

Varje variant blir en kolumn utan horisontell rullning eller meningsförändrande beskärning. Bildtexten förblir kopplad till sin figur.

Parametrar

Innehållskontraktet separerar redaktionell betydelse från presentation. Breddförhållanden, mellanrum, kanter, bakgrunder, radie, skuggor och brytpunkter tillhör renderaren.

Publicera src först efter att tillgången finns. En väntande inspelning använder en skärmbildskommentar och screenshotsPending = true. role har ingen standard eftersom att tyst behandla bevis som dekoration skapar ett tillgänglighetsfel.

Den första kroppsrubriken blir title; allt efter den blir content. Kroppen tillåter stycken, betoning, inline-kod och en kontextuell länk. Den avvisar listor, nästlade rubriker, tabeller, media, knappar, formulär, citat, accordions och komponenter.

Syntax och kodexempel

Alla tre notationerna bevarar samma roll, bild, rubrik, förklaring, bildtext, kreditering och läsordning. Dessa är portabla adapterkontrakt; de innebär inte att en oregistrerad lokal shortcode eller block redan finns.

Portabel Markdown-direktiv

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="Den inaktuella statusen utvärderas mot det registrerade uppdateringsdatumet."}
## Se varför sidan behöver granskning

Det synliga uppdateringsdatumet förklarar varför granskningen klassificerade denna URL som inaktuell. Verifiera om sidan har ändrats sedan det datumet innan du tilldelar en omskrivning.
:::

Exempelsökvägen visar endast syntax. Produktionsvalidering måste avvisa den tills tillgången finns.

Hugo shortcode

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="Den inaktuella statusen utvärderas mot det registrerade uppdateringsdatumet." >}}
## Se varför sidan behöver granskning

Det synliga uppdateringsdatumet förklarar varför granskningen klassificerade denna URL som inaktuell. Verifiera om sidan har ändrats sedan det datumet innan du tilldelar en omskrivning.
{{< /imagebox >}}

Adaptern använder endast namngivna parametrar. Tills den är registrerad, använd en semantisk <figure> följd av prosa. Adaptern validerar tillgången och bevarar direktivkroppsmappningen.

WordPress-block

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Freshness report row showing a stale status beside an update date of 12 February 2026","caption":"Den inaktuella statusen utvärderas mot det registrerade uppdateringsdatumet."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Freshness report row showing a stale status beside an update date of 12 February 2026">
  <figcaption>Den inaktuella statusen utvärderas mot det registrerade uppdateringsdatumet.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>Se varför sidan behöver granskning</h2>
  <p>Det synliga uppdateringsdatumet förklarar varför granskningen klassificerade denna URL som inaktuell. Verifiera om sidan har ändrats sedan det datumet innan du tilldelar en omskrivning.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress bör exponera ett Media-fält och ett begränsat textområde. Om det inte är tillgängligt, använd ursprungliga Image-, Heading- och Paragraph-block; bevara innebörden även utan sidvid-sida-layout.

Exempel

Bra exempel: bilden är bevis

Detta fungerar eftersom bilden bevisar två fysiska detaljer och kopian förklarar deras operativa konsekvens. Rubriken anger insikten, bildtexten identifierar de synliga bevisen och förklaringen förblir specifik utan att försöka inventera hela fotografiet.

Dåligt exempel: generisk dekoration som presenteras som bevis

Arbeta smartare med tydlig data
Bild: en generisk person som ler mot en bärbar dator bredvid färgglada diagram.
Vår innovativa plattform omvandlar data till handlingsbara insikter så att varje team kan låsa upp bättre beslut och uppnå mer.

Detta misslyckas eftersom ingen av halvorna bidrar med verifierbar information. Bilden skulle kunna annonsera vilken mjukvaruprodukt som helst, medan kopian innehåller breda resultat utan mekanism, gränssnittsdetalj, begränsning eller exempel. Ihopkopplingen skapar visuell framträdande plats men ingen mening som en läsare eller maskin kan extrahera. Ersätt den med ett fokuserat produkttillstånd och en förklaring av ett beslut det stöder, eller ta bort imageboxen och skriv påståendet som vanlig prosa med bevis.

Schema-markup och tillgänglighet

En imagebox har ingen dedikerad Schema.org-typ. Dess text förblir en del av den omslutande sidans enhet. En innehållsbild kan vara ett ImageObject när den har en stabil contentUrl, korrekt bildtext, dimensioner och nödvändig kreditering eller licensmetadata. Dekorativa illustrationer behöver ingen separat enhet.

Schema på sidnivå kan referera till samma representativa bild. Ett produktdetaljfotografi kan mata den synliga produktens image-egenskap, men en diagrambeskärning blir inte Dataset och en skärmbild blir inte SoftwareApplication.

Använd en <figure> och <figcaption> plus ett märkt förklaringsområde. Ange intrinsiska width och height; responsiv utdata får inte rulla horisontellt eller beskära den namngivna detaljen.

Alternativtext namnger en innehållsbilds relevanta ämne, tillstånd och avgörande detalj. Börja inte med “bild av,” duplicera inte bildtexten eller stoppa in sökord. Redundanta illustrationer använder alt=""; att utelämna attributet kan exponera filnamnet.

Förlita dig inte enbart på position, färg eller pixlar. Upprepa avgörande siffror, etiketter, varningar och slutsatser i text. Håll länkar tangentbordsnåbara, gör aldrig hela boxen till en länk, bevara källordningen och testa vid 200 % zoom.

Skrivregler

Skriv förklaringen innan du väljer bild, välj sedan den snävaste beskärningen som bevarar nödvändig kontext.

• Skriv en rubrik på 3–10 ord som anger insikten, ämnet eller relationen. Undvik “Bild,” “Översikt,” “Lär dig mer” och “Se det i aktion.”
• Håll förklarande text till 40–140 ord i ett eller två stycken. Elementet stöder en poäng, inte en miniatyrartikel.
• Håll bildtexter på 5–25 ord. Identifiera vad som visas och den kontext som krävs för att tolka det; lägg resonemang i brödtexten.
• Använd 40–180 tecken för meningsfull alternativtext, med 250 som hård maxgräns. Prioritera noggrannhet framför att fylla intervallet.
• Inkludera exakt en bild och högst en kontextuell textlänk. Länka endast när en destination på ett väsentligt sätt fördjupar förklaringen.
• Använd en röst och tempus genom hela rubrik, bildtext och brödtext. Föredrag konkreta substantiv och verb framför marknadsföringsadjektiv.
• Ange begränsningen intill tolkningen när bilden endast visar ett tillstånd, datum, beskärning, enhet eller exempel.

Lägg aldrig in en lista, tabell, vittnesmål, pris, formulär, media, nedladdning, knapp, flerstegsinstruktion, friskrivning eller uppmaning till handling inuti. Använd inte två bilder, bädda in väsentlig kopia i pixlar, exponera kunddata eller publicera konstverk med okända rättigheter.

Undvik att skriva “som du kan se.” En läsare kanske inte ser bilden, och även en seende läsare behöver veta vilken observation som är viktig. Ange det direkt: “Låsfliken sitter i jämnhöjd när kontakten är fullt isatt.”

Inläggstyper som använder det

Raderna nedan styrs av postTypes-frontmatter. “Användning” beskriver en lämplig roll, inte ett krav på att tvinga in en imagebox på varje sida.

QA-checklista

Före publicering, verifiera hela elementet:

• Bilden och förklaringen gör en poäng och hör hemma i en redaktionell enhet.
• role är explicit content eller illustration, vald med borttagningstestet.
• Källfilen finns, är godkänd och använder ingen privat data, okända rättigheter eller platshållartillgång.
• Rubriken anger insikten i 3–10 ord och brödtexten förklarar den i 40–140 ord.
• En innehållsbild har meningsfull alternativtext och en kortfattad bildtext; en redundant illustration använder tom alt-text.
• Texten anger varje avgörande siffra, etikett, instruktion, varning och slutsats som inte kan förlita sig på syn.
• Bildtexten identifierar bilden utan att duplicera brödtexten eller alternativtexten.
• Eventuell nödvändig skapare-, källa-, licens- eller krediteringslänk är korrekt och synlig.
• Blocket innehåller en bild, en förklaring och högst en kontextuell textlänk.
• Det innehåller ingen nästlad lista, tabell, media, knapp, formulär, uppmaning till handling eller interaktivt kort.
• Det ersätter inte en bättre kommenterad skärmbild, jämförelse, diagram, galleri eller helbreddsfigur.
• Skrivbords- och mobillayouter bevarar semantisk källordning, bildtextkoppling och tangentbordsordning.
• Den meningsfulla beskärningen överlever responsiv storleksändring, 200 % zoom och bildladdningsfel.
• Bredd och höjd reserverar utrymme, medan lat laddning inte fördröjer en bild ovanför mitten.
• Strukturerad data, om den skickas, matchar synligt innehåll och beskriver inte dekoration som en separat enhet.
• Portabel Markdown-, Hugo- och WordPress-mappning behåller samma roll, fält och innebörd.

FAQ

Akademimallen renderar de fem granskade frågorna som lagras i denna sidas [[faq]]-frontmatter. De täcker testet för innehåll kontra illustration, dekorativ alternativtext, beskrivande omfattning, uppmaningar till handling och ImageObject-schema.

En imagebox lyckas när läsaren omedelbart kan besvara två frågor: “Vad bidrar denna bild med?” och “Varför är det bidraget viktigt här?” Om något av svaren är vagt, stärk relationen eller ta bort boxen.